Responsivt webdesign: en praktisk guide
Responsivt design er holdt op med at være en særlig teknik og er blevet den normale måde at bygge på. Det, der stadig adskiller gode resultater, er arbejdsrækkefølgen og test på rigtige enheder.
Denne guide dækker tilgangen, de tekniske beslutninger og de problemer, der først viser sig på en rigtig mobil.
Mobilen først, og hvorfor#
At designe til den lille skærm først er ikke en æstetisk præference: det er en begrænsning, der giver bedre beslutninger.
- Der er plads til mindre, så det er nødvendigt at afgøre, hvad der er væsentligt.
- Det, der overlever den lille skærm, er det, der reelt betyder noget på siden.
- At tilføje plads til større skærme er let; at fjerne indhold gør ondt.
- Størstedelen af trafikken kommer fra mobil i de fleste brancher — tjek din egen analytics.
- Ydeevnen bliver bedre som sideeffekt, fordi der som udgangspunkt indlæses mindre.
- Den forenklede mobilnavigation viser sig som regel også at være bedre på desktop.
Det omvendte mønster — design desktop og «tilpas» til sidst — giver den improviserede mobiloplevelse, man genkender med det samme.
Brudpunkter og layout#
Brudpunkter skal følge indholdet, ikke enhedsmodeller der skifter hvert år.
| Beslutning | Anbefaling |
|---|---|
| Hvor brudpunkter placeres | Hvor layoutet knækker, ikke ved enhedsbredder |
| Hvor mange | Tre til fire rækker for de fleste sider |
| Gittersystem | CSS Grid til siden, flexbox til komponenter |
| Bredder | Relative med maksimum, ikke faste værdier |
| Typografi | Flydende med clamp mellem et minimum og et maksimum |
| Afstande | Konsistent skala, ikke vilkårlige værdier |
| Containere | Maksbredde så tekst ikke strækkes på brede skærme |
De elementer der typisk knækker#
De står for størstedelen af de visuelle problemer på små skærme.
- Tabeller. De krymper ikke. Enten scroller de vandret i deres egen container, eller de bliver til kort.
- Billeder. De skal have srcset og sizes, så mobilen ikke henter desktopversionen.
- Lange overskrifter. Test med den længste, der vil forekomme, ikke eksemplets.
- Formularer. Felter i fuld bredde, det rette tastatur pr. felttype, synlige etiketter.
- Navigation. Den sammenfoldede menu skal kunne lukkes og betjenes med tastatur.
- Modaler og overlejringer. De skal kunne være på skærmen og scrolle internt.
- Klæbende elementer. En klæbende bjælke på en lav skærm kan optage halvdelen af fladen.
- Indlejrede videoer og kort. De kræver en container med defineret sideforhold.
At teste ordentligt#
Browserens simulator fanger layoutproblemer og skjuler alt andet.
- Test på rigtige mobiler, inklusive en gammel og langsom.
- Test på begrænset forbindelse, ikke på kontornetværket.
- Test i liggende format — der plejer klæbende bjælker at fejle.
- Test med forstørret tekst i systemets indstillinger.
- Test berøring med tommelfingeren, ikke med mus på en simuleret skærm.
- Tjek om noget udløser vandret scroll; det er den mest synlige fejl der findes.
- Tjek berøringsmålene: mindst 44 px, med plads imellem.
Vandret scroll er den fejl, besøgende bemærker med det samme, og som simulatorer skjuler med lethed.
Ofte stillede spørgsmål
Hvor mange brudpunkter har jeg brug for?
Tre til fire rækker for de fleste sider. Kriteriet er, hvor layoutet holder op med at virke, ikke bredden på en bestemt telefon. Enhedsbredder skifter hvert år; indholdet gør ikke. Ændr vinduets størrelse langsomt og sæt et brudpunkt der, hvor noget begynder at se dårligt ud.
Har jeg brug for en separat mobilside?
Nej. Separate mobilsider kræver dobbelt vedligehold, deler søgesignaler og er en praktisk talt forladt tilgang. En responsiv side betjener alle skærme fra samme adresser, hvilket også er det, søgemaskiner forventer i dag.
Hvordan håndterer jeg tabeller på små skærme?
To løsninger virker: vandret scroll inde i tabellens egen container, hvilket bevarer sammenligning mellem kolonner, eller at gøre hver række til et stablet kort. Valget afhænger af, om folk skal sammenligne værdier på tværs af kolonner. Det, der aldrig virker, er at lade tabellen skubbe siden ud til siden.
Gør responsivt design siden langsommere?
Ikke i sig selv. Det gør det, hvis desktopbilleder sendes til mobiler, hvilket sker når srcset mangler. Med billeder i rette størrelse og velordnet CSS er en responsiv side lettere på mobil end en dårligt vedligeholdt separat version.
responsivt webdesignmobile firstcss brudpunkterhjemmeside mobilresponsive billederflydende typografi
