Kenneth Kammersgaard

Mangler du skitser til et responsivt design, kravspecifikation, e.l.? Gerne komplekse systemer med mange krav.

Responsive Web Design Executive Summary

De mange nye typer af enheder, mobil, tablets, desktop, TV, osv. kræver en ny måde at designe hjemmesider på. Istedet for at designe til EN enhed skal man i stedet for kigge på dem som dele af den samme oplevelse, men på forskellige enheder, og lave sider der er fleksible til at ændre sig til den enhed de bliver vist på.

De primære aspekter ved et responsive webdesign er:

  • Et fleksibelt grid baseret layout.
  • Fleksible billeder og medieindhold.
  • Media queries.

Fleksibelt grid

I stedet for at have en fast bredde i pixels, af de enkelte elementer på et skærmbillede, laver man bredden i forhold til det element der indeholder den. Hvis man f.eks. har en sidebredde på 1000 px, hvor man har placeret et billede på 250 px. Så vil man angive at billedet har en bredde på 25%. På samme måde vil selve siden f.eks. have en bredde på 100%. Dvs. hvis man ser siden på en mobil enhed med en mindre skærm, så vil siden tilpasse sig og billedet vil stadig fylde 25% af bredden.

Så tilgangen er at man angiver størrelsen af elementer i forhold til hinanden og ikke en absolut værdi.

Fleksible billeder

Når grid’et er på plads og man vil i gang med at sætte sine billeder ind, opstår der en nødvendighed for at få dem til at skalere rigtigt. Det korte svar på det ligger i max-width: 100%, hvor billedet vil skalere sammen med containeren udenom og de nye browsere vil stadig holde proportionerne rigtigt. Denne regel virker på de fleste de fleste fixed-width elementer, som video og andet media. Dette kræver også at man har billederne i en tilpas høj opløsning.
Der kan dog være problemer med ældre browsere, man skal være opmærksom på.

Media queries

Den sidste del af puslespillet kommer i form af media queries. Hvor man laver specifikke ændringer i forhold til den enhed brugeren sidder med, hvor man f.eks. tjekker om skærmbredden er mindre end 800 px, så tilpasser man indholdet specifikt til det. F.eks. ved at fjerne indhold, ændre tekststørrelse, ændre placering, e.l.. Man også hurtigt gå fra et fler-kolonnet design til et 1-kolonnet der passer godt til mobilen og evt. kun indeholder de mest relevante ting.

Hvorfor bruge Responsive web design

Man kan spare meget arbejde ved at levere samme indhold til forskellige enheder og samtidig fokusere på det mest essentielle indhold, da man tager udgangspunkt i de små skærme.
Under udviklingen af et fleksibelt design kan det virke som uoverskueligt, hvis designeren skal lave et mockup af hver enhed, derfor foreslås det er starte med de mindste skærme og så bruge en iterativ proces i samarbejde med udviklerne, så man løbende kan komme med løsninger på problemer der opstår i forskellige opløsninger.

Bogen kan helt sikkert anbefales, og er meget hurtig læst, den er dog meget henvendt til udviklere. Men dermed en meget praktisk bog. Bogen kan bestilles hos A Book Apart. Man skal være forsigtig med at bestille den hos Amazon, da de har en fransk version af bogen.