Fleksible layouts, media queries og mobile-first-tankegangen
Brugerne kommer fra alt fra små telefoner til store skærme, og en god side skal fungere på dem alle uden en separat udgave til hver. Det kalder man responsivt design: layoutet flyder og tilpasser sig den plads, der er til rådighed, i stedet for at være låst til én fast bredde.
Grundtanken er at undgå at låse mål fast i pixels, hvor det kan undgås. I stedet bruger man relative enheder og lader elementer fylde en andel af den tilgængelige plads. Et billede, der må fylde højst sin beholders bredde, skrumper pænt med på en lille skærm i stedet for at flyde ud over kanten. Relative tekststørrelser gør, at indholdet skalerer sammenhængende.
En media query lader CSS spørge om forhold ved skærmen — typisk bredden — og anvende bestemte regler kun, når betingelsen er opfyldt. Sådan kan en menu ligge vandret på en bred skærm og foldes sammen til en knap på en smal. De skærmbredder, hvor layoutet skifter, kaldes brydepunkter; vælg dem ud fra, hvornår indholdet begynder at se forkert ud, ikke efter bestemte enheder.
Det er ofte nemmest at begynde med den lille skærm og bygge opad. Når man starter mobile-first, tvinges man til at prioritere det vigtigste indhold først, og man tilføjer så ekstra layout og kolonner, efterhånden som der bliver mere plads. Det modsatte — at starte stort og prøve at presse alt ind på en lille skærm bagefter — ender oftere i rod.
Browserens udviklingsværktøjer kan efterligne forskellige skærmstørrelser, og det er et godt sted at begynde. Men test også på en rigtig telefon, hvor berøring, langsommere forbindelse og en lille skærm afslører ting, der ser fine ud på en computer. Et layout, der virker for fingre og ikke kun for en musemarkør, er en del af håndværket.
“Responsivt design handler ikke om at lave siden om for hver skærm — men om at lade den samme side ånde og tilpasse sig pladsen.”
— Almindelig læreregel i webudvikling