Design & produktion
Opsæt en responsiv grid med breakpoints
Ét design, der virker på telefon og skærm
En grid er et usynligt kolonne-system, der holder dit layout justeret. Breakpoints er de skærmbredder, hvor layoutet skifter fra fx tre kolonner til én. Sammen sikrer de, at designet holder på alle enheder.
- 01
Læg en kolonne-grid ind
Del layoutet op i lige brede kolonner med ens mellemrum. Et 12-kolonners system er udbredt, fordi det nemt kan deles i 2, 3, 4 og 6 lige store spalter.
Typisk grid12 kolonner - 02
Vælg dine breakpoints
Bestem ved hvilke skærmbredder layoutet skal skifte. Design typisk til tre trin — telefon, tablet og computer — og placér skiftene, hvor indholdet begynder at se klemt eller for spredt ud.
Lad indholdet bestemme breakpointet — ikke en bestemt telefonmodel.
- 03
Design mobil først
Start med den smalleste skærm, hvor du er tvunget til at prioritere det vigtigste. Byg derefter opad til de bredere skærme — det er nemmere end at proppe en stor side ned i en lille.
- 04
Definér hvad der stabler
For hvert breakpoint beslutter du, hvilke elementer der ligger ved siden af hinanden på bred skærm og stabler lodret på smal skærm. Tjek at billeder skalerer med og ikke flyder ud over kanten.
- 05
Test på rigtige enheder
Åbn designet på både en telefon og en computer og træk browservinduet langsomt smallere. Se efter tekst der bliver ulæselig, knapper der bliver for små at ramme, og elementer der overlapper.
Bygget på uddannelsens artikler «UX, wireframes og brugertest» og «Webudviklingens grundprincipper — HTML, CSS og CMS»