“Responsive Web Design” er et ord der gennemsyrer den mange designeres måde at forstå visuel kommunikation på internettet på. Det forholder sig ikke bare til de fysiske begrænsninger der kan være ved at gå ned eller op i skærmstørrelse, men griber grundlæggende fat i hvordan informationen skal opdeles og serveres på forskellige platforme.

Ethan Marcotte var manden der opfandt begrebet, så det pirrede min professionelle nysgerrighed når nu Ethan udgav en bog om emnet. Bogen er en del af A Book Apart serien der måske er mest kendt for Luke Wroblewski’s bog om begrebet Mobile First.

Det første argument der rigtigt greb mig var da Ethan refererede til en designer (Trent Walton) der på sin blog fortalte at “… han havde byttet den kontrol han havde i Photoshop til en ny slags kontrol – ved at bruge fleksible gitre, fleksible billeder  og media queries, designede han ikke en side, men et netværk af indhold der kunne blive arrangeret på alle skærmstørrelser for bedst at overbringe sit budskab.”

Kapitlerne

Meningen med denne bogserie er at den skal være hurtig og nem at gå til.

… netop den slags kommentarer er nok det der kendetegner bogen. Den er ikke en guide til hvordan du teknisk designer responsive sider, men snarer tanker der diskuterer hvordan du kan forstå bevæggrunde bag responsivt design. Den lægger ud med at vise eksempler på hvordan designet skal forstås som enketlte fragmenter der kan vise mere eller mindre af sin rolle i det samlede budskab.

Derefter tager den fat på navigation som nok er det indholdselement der arbejder mest op mod den responsive tanke. Billeder og tekster kan blive reformateret med navigationen ændrer ofte grundlæggende udseende. Ethan viser alt fra menuer med undermenuer der udfolder indhold og helt ned til hamburgermenuer og små tabs der åbner for muligheder for navigation. Netop hamburgermenuen er også genstand for en større diskussion i bogen. Skal den erstatte en simpel tekst (MENU) – og om dens brugervenlighed og mulighederne for at hælde mange punkter i den, er den bedste vej fremad … måske skulle indholdet retænkes i stedet.

De næste kapitler er billeder og videoer. Der vises en del CSS-tricks i forhold til at arbejde med flere størrelser billeder i samme tag, arbejde med baggrundsbilleder og måder at skalere billederne når browseren ændrer størrelse. Der er også en diskussion om alle billeder ukritisk skal skaleres og hvordan læsbarheden af f. eks. et kort kan lide under skaleringen.

Ethan tager også fat på emner som betinget hentning af indhold (conditional loading) hvor html først hentes når vinduet er en given størrelse. Her bliver der også prikket til en større boble da han behandler begrebet responsive reklamer. Skal reklamer bare vises og skjules eller i hvor høj grad skal de også leveres så de er responsive og arbejder med ind i den samlede oplevelse af sitet. Jeg tænker at der stadig er en del websites der arbejder med traditionelle formater i faste pixels og de kommer til at fremstå som “hårde knuder” i et ellers flydende layout.

Til sidst hælder han resten af hans tanker ind i et kapitel og prøver at samle det hele i nogle begreber der giver en forståelse af hvordan man kan vurdere hvornår elementer “begynder at miste form” og layoutelementer grundlæggende skal ændre placering og udseende i stedet for “bare” at skalere. Han bruger her fire begreber bredde, hierarki, interaktion og tæthed (width, hierarchy, interaction og density).

• Bredden er nok nemmest at forstå. Når vinduet bliver bredere bliver elementerne det også og du sakl vurdere om den nye bredde (af f. eks. billede eller tekstfelt) giver anledning til at indsætte et breakpoint.
• Hierarki tager udgangspunkt i traditionelle designregler og gestalt. Når du ændrer størrelse opfordrer Ethan os til at være mere vertikalt opmærksomme. Hvornår skal det styrkeforhold der er i at placere elementer efter hinanden justeres og måske brydes om eller skiftes ud med noget andet. Skal menuen til venstre blive topmenu eller skal dele af din højre side rykke ind som indholdselementer i midten osv.
• Interaktion beder dig om at tænke på om måden du interagerer med et indholdselement skal ændre sig når skærmstørrelsen ændres. Åbenlyst er der menuer der går fra at man klikker på links til at man åbner en dropdown. Det kunne også være ikoner der bliver til en liste eller en tidslinje der bliver til et grid mm.
• Tæthed skal forstås som tætheden af information. Hvad skal forsvinde når du viser siden på en telefon i stedet for en tablet. Skal det helt væk? Skal det blive et menupunkt? Skal teksten omskrives? Alle tænke siden fundamentalt anderledes kan løsne op for det design.

Anbefaling

Responsive Design: Patterns & Principles er en hurtigt læst, god inspirationsbog. Du skal ikke købe den for at lære hvordan du designer responsive websites – det er den for overfladisk i sine eksempler til. Den er dog fyldt med velovervejde tanker og historiske anekdoter som jeg tror vil give mange designere en mere sikker hånd i deres omgang med at tænke responsivt og ikke bare designe responsivt.

Du kan læse mere om bogen på https://abookapart.com/products/responsive-design-patterns-principles