Responsiv webdesign: en praktisk guide
Responsiv design har sluttet å være en særskilt teknikk og er blitt den normale måten å bygge på. Det som fortsatt skiller gode resultater, er arbeidsrekkefølgen og testing på ekte enheter.
Denne guiden dekker tilnærmingen, de tekniske beslutningene og problemene som først viser seg på en ekte mobil.
Mobilen først, og hvorfor#
Å designe for den lille skjermen først er ingen estetisk preferanse: det er en begrensning som gir bedre beslutninger.
- Det er plass til mindre, så det blir nødvendig å avgjøre hva som er vesentlig.
- Det som overlever den lille skjermen, er det som virkelig betyr noe på siden.
- Å legge til plass for større skjermer er lett; å fjerne innhold gjør vondt.
- Størstedelen av trafikken kommer fra mobil i de fleste bransjer — sjekk din egen analyse.
- Ytelsen blir bedre som bieffekt, fordi det som standard lastes mindre.
- Den forenklede mobilnavigasjonen viser seg som regel også å være bedre på desktop.
Det motsatte mønsteret — designe desktop og «tilpasse» til slutt — gir den improviserte mobilopplevelsen man kjenner igjen med én gang.
Bruddpunkter og layout#
Bruddpunkter skal følge innholdet, ikke enhetsmodeller som skifter hvert år.
| Beslutning | Anbefaling |
|---|---|
| Hvor bruddpunkter plasseres | Der layouten brekker, ikke ved enhetsbredder |
| Hvor mange | Tre til fire holder for de fleste sider |
| Rutenettsystem | CSS Grid til siden, flexbox til komponenter |
| Bredder | Relative med maksimum, ikke faste verdier |
| Typografi | Flytende med clamp mellom et minimum og et maksimum |
| Avstander | Konsistent skala, ikke vilkårlige verdier |
| Beholdere | Maksbredde så tekst ikke strekkes på brede skjermer |
Elementene som vanligvis brekker#
De står for størstedelen av de visuelle problemene på små skjermer.
- Tabeller. De krymper ikke. Enten ruller de vannrett i sin egen beholder, eller de blir til kort.
- Bilder. De trenger srcset og sizes, så mobilen ikke laster ned desktopversjonen.
- Lange overskrifter. Test med den lengste som vil forekomme, ikke eksempelets.
- Skjemaer. Felt i full bredde, riktig tastatur per felttype, synlige etiketter.
- Navigasjon. Den sammenslåtte menyen må kunne lukkes og betjenes med tastatur.
- Modaler og overlegg. De må få plass på skjermen og rulle internt.
- Klebrige elementer. En klebrig linje på en lav skjerm kan ta halve flaten.
- Innebygde videoer og kart. De trenger en beholder med definert sideforhold.
Å teste ordentlig#
Nettleserens simulator fanger layoutproblemer og skjuler alt annet.
- Test på ekte mobiler, inkludert en gammel og treg.
- Test på begrenset forbindelse, ikke på kontornettet.
- Test i liggende format — der pleier klebrige linjer å feile.
- Test med forstørret tekst i systeminnstillingene.
- Test berøring med tommelen, ikke med mus på en simulert skjerm.
- Sjekk om noe utløser vannrett rulling; det er den mest synlige feilen som finnes.
- Sjekk berøringsmålene: minst 44 px, med plass imellom.
Vannrett rulling er feilen besøkende merker med én gang, og som simulatorer skjuler med letthet.
Ofte stilte spørsmål
Hvor mange bruddpunkter trenger jeg?
Tre til fire holder for de fleste sider. Kriteriet er hvor layouten slutter å virke, ikke bredden på en bestemt telefon. Enhetsbredder skifter hvert år; innholdet gjør ikke det. Endre vinduets størrelse langsomt og sett et bruddpunkt der noe begynner å se dårlig ut.
Trenger jeg en separat mobilside?
Nei. Separate mobilsider krever dobbelt vedlikehold, deler søkesignaler og er en praktisk talt forlatt tilnærming. En responsiv side betjener alle skjermer fra samme adresser, som også er det søkemotorer forventer i dag.
Hvordan håndterer jeg tabeller på små skjermer?
To løsninger virker: vannrett rulling inne i tabellens egen beholder, som bevarer sammenligning mellom kolonner, eller å gjøre hver rad til et stablet kort. Valget avhenger av om folk må sammenligne verdier på tvers av kolonner. Det som aldri virker, er å la tabellen skyve siden ut til siden.
Gjør responsiv design siden tregere?
Ikke i seg selv. Den gjør det om desktopbilder sendes til mobiler, noe som skjer når srcset mangler. Med bilder i riktig størrelse og velordnet CSS er en responsiv side lettere på mobil enn en dårlig vedlikeholdt separat versjon.
responsiv webdesignmobile firstcss bruddpunkternettside mobilresponsive bilderflytende typografi
