Mobil

Responsive design - når websitet automatisk tilpasser sig skærmstørrelsen (desktop, tablet og smartphones).

Med den voldsomme stigning ikke mindst i smartphones må alle udgivere efterhånden sikre sig, at indhold på websitet ikke alene fungerer i PC browseren (desktop) men også på de mobile devices. Tidligere tiders overvejelse om tilpasning af web sitet til en specifik skærm opløsning er med andre ord blevet yderligere kompliceret af at skulle forholde sig til hvordan websitet fungerer på såvel en iPad som en iPhone.

Den simple løsning har hidtil været at dirigere trafikken over til et dedikeret mobilsite, af typen m.udgiver.dk - ulempen er selvsagt at kun en del af websitets indhold og funktioner blev stillet til rådighed herfra.

I dag er "det nye sort" fleksible websites - der i stedet for en fast struktur og skabelon defineret som "x gange y pixels" - automatisk tilpasser sig den skærmstørrelse, man tilgår sitet fra. Responsive design.

Ideen ved responsive design er at udnytte nogle af elementerne fra HTML5 - "media query" - hvorved det bliver muligt at identificere hvorfra der læses, og justere layoutet på skærmvisningen flydende i overensstemmelse hermed. Populært sagt kan man definere en række visningsskabeloner afhængigt af skærmtype, f.eks. tilrettelægge indholdet efter widescreen type (desktop), portræt type (tablet) eller smartphone view (portræt eller landskabstype).

Et ofte brugt eksempel hvis man vil teste ideen selv er den nyligt lancerede avis The Boston Globe. Klik ind på http://bostonglobe.com/ og prøv at "trække" i browservinduet, så bredden ændres - bemærk hvordan visningen "hopper" mellem forskellige visninger tilpasset den aktuelle bredde vinduet har. Dette simulerer den præcist samme effekt ved at tilgå sitet fra forskellige devices og dermed skærmstørrelser.

Se en mere detaljeret gennemgang med bl.a. kommentarer fra grundlæggeren af tankegangen bag responsive design, Ethan Marcotte.

 

Mere om nøgleordene