Over 60 procent af al webtrafik kommer nu fra mobile enheder. En hjemmeside, der ikke er mobilvenlig, svigter de fleste af dem, der besøger den. Det er ikke et lille særtilfælde. Mobil er ikke en bonusfunktion. Det er det grundniveau, en virksomhedshjemmeside forventes at leve op til.
At gøre en hjemmeside mobilvenlig betyder at give mobile besøgende den samme kvalitet i oplevelsen som besøgende på computer. Ikke en afskåret version, der teknisk set indlæses, men en hjemmeside, hvor teksten kan læses, navigationen virker, billederne vises korrekt, og formularer faktisk kan sendes fra en telefon uden besvær.
Denne artikel gennemgår de praktiske ændringer, der gør en hjemmeside virkelig mobilvenlig, fra navigation og tekst til billeder, formularer og hastighed.
Hvad betyder mobilvenlig i praksis?
En mobilvenlig hjemmeside er en hjemmeside, hvor alle funktioner virker korrekt på en telefon uden omveje. Teksten kan læses ved standardzoom. Navigationen åbner og lukker pænt. Knapperne er store nok til, at man kan trykke uden at ramme det forkerte element. Billeder indlæses og vises korrekt. Formularer kan udfyldes og sendes uden besvær.
Forskellen på teknisk mobilkompatibel og virkelig mobilvenlig er vigtig. En hjemmeside er teknisk kompatibel, hvis den ikke går i stykker på en telefon. Den er virkelig venlig, hvis det føles lige så naturligt at bruge den på en telefon som på en computer. Forskellen ligger i detaljerne. Afstande, skriftstørrelse, størrelsen på trykfelter og indlæsningstid afgør, om oplevelsen føles rigtig eller bare lige akkurat fungerer.
Fundamentet for en mobilvenlig hjemmeside er responsivt design, som får layoutet til at tilpasse sig forskellige skærmstørrelser automatisk. Artiklen om hvad responsivt design er forklarer, hvordan det virker teknisk.
Hvordan tester du, om din hjemmeside er mobilvenlig?
Den mest pålidelige test er at gå din egen hjemmeside igennem på en rigtig telefon. Ikke en browsers mobilvisning. Ikke et computervindue, der er gjort smalt. En rigtig telefon, med dine tommelfingre, på samme måde som en besøgende ville bruge den.
Gå hver side igennem. Åbn navigationen, og tjek, at alle links kan nås. Læs teksten, og tjek, at den kan læses uden zoom. Tryk på alle knapper for at se, at de reagerer rigtigt. Udfyld formularer, og send dem. Tjek, at billeder indlæses og vises korrekt. Tjek, at intet kræver vandret scrolling.
Søgemaskiner tilbyder også gratis mobiltestværktøjer. Skriv din webadresse, så peger værktøjet på konkrete problemer som tekst, der er for lille til at læse, elementer der kan klikkes på og ligger for tæt, eller indhold der er bredere end skærmen. Vil du have bredere vejledning i, hvad du skal tjekke, før en hjemmeside går live, så dækker hvad du skal vide, før du lancerer din hjemmeside mobiltest som en del af hele processen før lancering.
Hvordan får du navigationen til at virke på mobil?
Det er i navigationen, mobiloplevelsen oftest går i stykker. En vandret menu, der strækker sig over hele bredden af en computerskærm, har ingen steder at være på en telefonskærm. Standardløsningen er en menu, der kan klappes sammen, og som åbnes med en knap, som regel i det ene hjørne.
Menuknappen skal være genkendelig med det samme. Ikonet med tre streger er blevet en bredt forstået konvention for sammenklappede navigationsmenuer. Når menuen åbner, skal den dække nok af skærmen til, at den er nem at læse og trykke på. Punkterne skal have nok lodret afstand til, at en finger kan ramme ét uden at ramme det over eller under.
Hold mobilmenuen kort. Hvis din menu på computer har mange punkter, så overvej, hvilke mobile besøgende mest sandsynligt har brug for, og om mindre vigtige punkter kan grupperes eller fjernes fra øverste niveau. En ryddeligere mobilmenu er nemmere at bruge. Artiklen om hvad hjemmesidenavigation er dækker navigationsstruktur og brugervenlighed på alle enheder.
Hvordan skal tekst og skrifttyper se ud på mobil?
Tekst, der er nem at læse på en computer, kan blive ubehageligt lille på en telefon, hvis skriftstørrelsen er sat for lavt. En skriftstørrelse på mindst 16 pixels i brødteksten er den udbredte standard for læsbarhed på mobil. Under det kræver teksten zoom, og det gør de fleste besøgende ikke.
Linjelængden betyder også noget. På computer kan en tekstlinje fylde 600 til 700 pixels. På mobil bliver den samme tekst brudt i meget kortere linjer. Hvis linjeafstanden er for lille, eller afsnittene er for lange, bliver det ubehageligt at læse på en lille skærm. Korte afsnit, rigelig linjeafstand og tydelige skift mellem afsnit gør alle teksten lettere at læse.
Overskrifter skal skaleres ned i samme forhold. En H1 på 48 pixels på computer kan passe med 28 til 32 pixels på mobil. Hvis overskrifter bliver ved med at have computerstørrelse på en telefon, fylder de hele skærmen og skubber det egentlige indhold ned under synsfeltet.
Hvordan håndterer du billeder på mobil?
Billeder er en af de største risici for ydeevnen på mobil. Et billede i fuld opløsning, lavet til en computerskærm på 1440 pixels, er meget større end nødvendigt, når det vises på en telefonskærm på 375 pixels. Hvis du sender det billede til mobile besøgende, spilder du båndbredde og gør siden meget langsommere.
Løsningen er at sende passende store billeder til forskellige enheder. De fleste moderne hjemmesidebyggere gør det automatisk ved at lave flere størrelser og sende den rigtige ud fra skærmen. Hvis du selv håndterer billeder, så skaler dem til den største størrelse, de vises i, ikke den største størrelse, dit kamera kan lave.
Læg mærke til, hvordan billeder beskæres på mobil. Et bredt landskabsbillede, der ser balanceret ud på computer, kan blive beskåret akavet på en høj mobilskærm. Heltebilleder og bannerområder er de steder, hvor beskæringen på computer og mobil oftest er tydeligt forskellig. Artiklen om hvad hjemmesidehastighed er forklarer, hvordan billedoptimering påvirker sidens samlede ydeevne.
Hvad får formularer til at virke godt på mobil?
Formularer er et punkt med meget gnidning på mobil. At udfylde felter med et lille touchtastatur er mere krævende end at skrive på et fuldt tastatur. Jo færre felter, du har, jo bedre. Hvert ekstra felt er en chance for irritation og en grund til at give op.
Størrelsen på indtastningsfelter er vigtig. Felter skal være store nok til at ramme præcist og brede nok til, at teksten i dem kan læses. Etiketter skal stå over hvert felt, ikke kun som pladsholdertekst inde i det, for pladsholdertekst forsvinder, så snart nogen begynder at skrive.
Sæt indtastningstyperne rigtigt. Et e-mailfelt skal vise e-mailtastaturet. Et telefonnummerfelt skal vise taltastaturet. Et datofelt skal åbne en datovælger. Det er små tekniske indstillinger, der gør oplevelsen mærkbart glattere.
Test hver formular på din telefon ved at udfylde den helt og sende den. Tjek, at afsendelsen går igennem, og at en eventuel bekræftelse vises korrekt. En kontaktformular, der virker på computer, men fejler på mobil, mister leads i stilhed, uden at du opdager det.
Hvordan påvirker mobilvenlighed placeringen i søgeresultaterne?
Søgemaskiner indekserer mobilversionen af din hjemmeside først. Det betyder, at mobiloplevelsen ikke kun er vigtig for mobile besøgende. Det er den version, der afgør, hvordan din hjemmeside forstås og rangeres på alle enheder.
En hjemmeside, der klarer sig dårligt på mobil, uanset om det skyldes lange indlæsningstider, brudte layouts eller ulæselig tekst, rangerer under sammenlignelige hjemmesider, der håndterer mobil godt. Besøgende, der lander på en mobilhjemmeside og straks forlader den, fordi den ikke virker, sender et tydeligt signal om, at siden ikke dækkede deres behov. Høj afvisningsrate fra mobile besøgende påvirker placeringen over tid.
Sidehastighed på mobil er en særlig faktor. En side, der indlæses på to sekunder på en hurtig bredbåndsforbindelse, kan tage seks sekunder eller mere på et typisk mobilnet. Optimerede billeder, få blokerende scripts og en ren skabelonstruktur bidrager alle til hurtigere indlæsning på mobil. Vil du have det fulde billede af, hvordan søgemaskineoptimering virker, så dækker hvad SEO er hele emnet, også de tekniske faktorer.
Sådan klarer WEMASY mobil
WEMASYs hjemmesidebygger bruger responsive skabeloner, der tilpasser sig automatisk til computer, tablet og mobil. Den visuelle editor har en mobilvisning, så du kan se, hvordan hvert afsnit ser ud på en lille skærm, mens du bygger. Billedoptimering og mobil ydeevne klarer platformen, så du ikke skal sætte det op manuelt.
Se, hvad der er med, hos WEMASYs hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Hvordan ved jeg, om min hjemmeside er mobilvenlig?
Gå din hjemmeside igennem på en rigtig telefon. Test hver side, hvert menupunkt, hver formular og hver knap. Søgemaskiner tilbyder også gratis mobiltestværktøjer, hvor du skriver din webadresse, og de peger på konkrete problemer. Kombinationen af en manuel gennemgang og et værktøjstjek finder de problemer, der betyder mest. Browserens mobilvisning er nyttig under udvikling, men giver ikke helt den samme oplevelse som en rigtig enhed. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Kan jeg gøre en eksisterende hjemmeside mobilvenlig uden at bygge den om?
Det afhænger af, hvordan hjemmesiden blev bygget. På hjemmesider bygget i moderne hjemmesidebyggere kan mobiloplevelsen ofte forbedres ved at justere skabelonens indstillinger, ændre billedstørrelser eller skifte til en bedre skabelon. Hjemmesider bygget på specialkode eller ældre platforme kan kræve mere omfattende arbejde. I nogle tilfælde er det hurtigere og giver et bedre resultat at bygge om på en nutidig platform end at forsøge at lappe en ældre hjemmeside på plads.
Rangerer en mobilvenlig hjemmeside højere i søgeresultaterne?
Søgemaskiner bruger mobilversionen af din hjemmeside som den primære version til indeksering og rangering. En hjemmeside, der virker godt på mobil og indlæses hurtigt på en telefon, klarer sig generelt bedre end en, der primært er bygget til computer. Ud over fordelen i placeringen holder en mobilvenlig hjemmeside på besøgende længere, nedsætter afvisningsraten og konverterer bedre. Disse adfærdssignaler påvirker også den langsigtede præstation i søgning.
Hvad er den mindste skriftstørrelse på en mobilhjemmeside?
En skriftstørrelse på 16 pixels i brødteksten er det mest anbefalede minimum for læsbarhed på mobil. Under det bliver teksten svær at læse uden zoom. Overskrifter skal skaleres i samme forhold, så de ikke overvælder skærmen. En linjeafstand på mindst 1,5 gange skriftstørrelsen gør det lettere at læse på små skærme, især i længere afsnit.
Hvor store skal knapper være på en mobilhjemmeside?
En mindste trykflade på 44 gange 44 pixels anbefales bredt til mobilknapper. Det giver en finger et tydeligt mål og mindsker utilsigtede tryk på nabo-elementer. Knapper skal også have nok plads imellem sig, så et tryk på én ikke registreres som et tryk på noget i nærheden. Knapper med opfordring til handling skal være store, tydeligt adskilte og nemme at nå med tommelfingeren uden at flytte telefonen i hånden.