Mobilvenlig hjemmeside – sådan fungerer et responsivt website

Kort svar: En mobilvenlig hjemmeside er en hjemmeside, der er nem at læse og bruge på en telefon – uden at zoome og uden vandret scroll. Det opnås med responsivt design, hvor den samme hjemmeside automatisk tilpasser sit layout til skærmens størrelse. Du har altså kun én hjemmeside, ikke en særskilt mobilversion.

Hvad er en mobilvenlig hjemmeside?

En mobilvenlig hjemmeside kan bruges med én hånd på en telefon: teksten kan læses uden at zoome, knapperne kan rammes med en finger, menuen er til at finde, og siden fylder skærmens bredde uden at man skal scrolle sidelæns.

Det er ikke et spørgsmål om, at siden er *mindre* på mobil. Indholdet bliver stillet op på en anden måde.

Hvorfor skal en hjemmeside fungere godt på mobil?

Hovedparten af besøgene på danske hjemmesider kommer fra telefoner. Hvis din side er svær at bruge der, mister du besøgende, før de har læst noget.

Dertil kommer, at Google vurderer hjemmesider ud fra mobilversionen.

Hvad betyder responsivt design?

Responsivt design betyder, at du designer hjemmesiden én gang, og at layoutet så tilpasser sig den skærm, den vises på. Alternativet – to versioner af samme hjemmeside – betyder dobbelt arbejde hver gang der skal rettes en tekst eller skiftes et billede.

Teknisk er layoutet bygget op i fleksible kolonner, der skifter opsætning ved bestemte skærmbredder:

• Kolonner ved siden af hinanden lægger sig under hinanden
• Menuen bliver til en knap med en udfoldelig menu
• Billeder og videoer skaleres ned uden at blive strakt
• Skriftstørrelser og afstande justeres, så teksten stadig kan læses

Hos NemmeHjemmesider tilpasser alle skabeloner sig automatisk telefon, tablet og computer, og teksten skaleres automatisk ned på tablet og mobil. Du skal altså ikke selv sætte mobilversionen op.

Hvad skal en god mobilvisning kunne?

Tekst – brødteksten skal kunne læses uden at zoome, og afsnittene bør være korte. Det vigtigste øverst.

Billeder – de skal fylde bredden pænt og ikke være så store i filstørrelse, at siden bliver langsom på mobilnet. Undgå billeder med tekst i: teksten bliver ulæselig i mobilstørrelse.

Knapper – der skal være plads til en finger, og de vigtigste knapper skal kunne nås uden at lede.

Navigation – hold menuen kort og forudsigelig. En overskuelig menu er endnu vigtigere på en lille skærm.

Formularer – hold antallet af felter nede. Hvert ekstra felt koster udfyldelser på mobil.

Webshop – vær særligt opmærksom på varevisning og bestillingsflow: kan man se prisen, lægge varen i kurven og gennemføre bestillingen uden at zoome?

Sådan kan du kontrollere din hjemmeside på mobil

Du kan skifte visning direkte i editoren: klik på enheds-ikonerne øverst, så ser du siden som computer, tablet og mobil. Kolonner stables automatisk på mobil.

Tjek derudover siden på din egen telefon, og se efter:

1. For lille tekst – skal du zoome for at læse, er den for lille
2. Vandret scroll – ét for bredt element kan skubbe hele siden skæv
3. Brede tabeller – de bliver hurtigt umulige. Overvej at dele dem op
4. Knapper der sidder for tæt – de bliver svære at ramme
5. Tekst oven på baggrundsbilleder – det kan se helt anderledes ud på en lille skærm
6. Lange overskrifter – tjek, at de ikke brækker mærkeligt

Mobilvenlighed og SEO

Generelt om SEO: Google indekserer ud fra mobilversionen, og en side, der er svær at bruge på telefonen, klarer sig dårligere. Hastighed spiller også ind, og store billeder er den hyppigste synder.

Hos NemmeHjemmesider er selve mobilvenligheden, hastigheden og sitemappet noget, systemet klarer. Indholdet – tekster, billedstørrelser, SEO-titel og meta-beskrivelse – er dit.

Prøv det på din egen telefon

Du kan oprette en side og se den på mobilen, inden du beslutter dig.