Introduktion til responsive web design

28-02-2012 - 00:47 0 kommentarer
Introduktion til responsive web design

Mobilenhederne har for længst gjort sit indtog i webverdenen, og man oplever derfor et større behov for at hjemmesider både skal kunne ses på de store computerskærme, så vel som tablets og mobiltelefoner. Hjemmesider med fastlåste bredder og ufleksible layouts tager sig typisk ikke særlig godt ud på de mindre enheder med langt mindre skærmplads. Løsningen på dette problem har typisk været, at man har lavet ét design til computeren og ét til mobilen. Efterhånden som der er kommet flere nye smarte enheder på markedet i form af tablets og lignende, er det dog ikke længere nok at skelne så direkte i mellem desktop og mobil - grænserne i mellem mobil og desktop hviskes lige så stille ud, efterhånden som rækken af forskellige enheder og dermed skærmopløsninger vokser. Vi har brug for kunne lave et design, som kan tilpasse sig alle enheder og skærmopløsninger - svaret er, Responsive Web Design.

Hvad er Responsive Web Design?

Responsive web design bygger på et princip om at lave ét design som helt automatisk tilpasser sig den enhed og skærmopløsning brugeren sidder med. Jeg faldt forleden over denne glimrende illustration, som fanger essensen af hvad emnet går ud på (husk at justere dit browservindue):

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Responsive web design er en helt ny måde at tænke layout og design på, hvor man arbejder med en meget mere flydende størrelse end førhen, som gerne skulle give en sammenhængende og ensaret oplevelse for brugeren på tværs af enheder og opløsninger. I praksis består responsive web design af følgende hovedingredienser:

  • Et fleksiblet gridbaseret layout:
    Et vigtigt aspekt i responsive design er det fleksibelt layout, hvor elemeterne tilpasser sig den plads der er at gøre med på skærmen. I fleksbile layouts fokuseres der ofte på at bibeholde proportionerne af elementere i layoutet.
  • Fleksible billeder:
    Billeder bør naturligvis også justere sig i forhold til layoutet, således at de holder sig indenfor de gældende dimensioner for layoutet. I nogle tilfælde ønsker man måske endda at servere det samme billede i forskellige opløsninger alt efter brugerens skærmopløsning, så man kan skære ned på loadtiderne.
  • CSS Media Queries
    Media Queries er en CSS3 standard som kort sagt gør det muligt at målrette styling mod specifikke skærmopløsninger. Det er det værktøj som binder det flydende layout sammen på tværs af skærmopløsninger og enheder.

Det er ud fra disse tre hovedpunkter at man opbygger sit responsive design og det er vigtigt at disse tre komonenter altid spiller sammen. I praksis bruger man bl.a. responsive design til følgende:

  • Justere størrelser på elementer
  • Omarrangere elementer
  • Skjule/vise elementer

Man har altså mulighed for at arrangere sit layout lige præcis, som man ønsker at gøre det til den givne skærmopløsning. For eksempel ønsker man måske et stort iøjnefaldende bannerbillede på de store skærmstørrelser, mens man på mobiltelefonen vælger at skjule dette element fuldstændingt for overskuelighedens skyld. Man kunne også forestille sig at det var vigtigt at menuen var meget tydelig med store knapper på mobiltelefonen, så den er nem at trykke på med fingeren, hvor den på den store skærmopløsning ville være præsenteret mere diskret.  

Eksempler

For at gøre det hele lidt mere konkret, har jeg fundet nogle eksempler frem, som demonstrerer Responsive Web Design. Hvis du ikke allerede har opdaget det, er denne side du er på nu faktisk responsive. Prøv at juster størrelsen på dit browservindue og/eller besøge siden med din mobil eller tablet. Et par andre og muligvis lidt mere gennemførte eksempler er:

http://www.jyskebank.dk

http://www.sony.com/

http://bostonglobe.com/

http://www.smashingmagazine.com/ 

More to come...

Dette var en meget generel gennemgang af den grundlæggende idé bag Responsive Web Design. Jeg regner med at lave et blogindlæg med en mere konkret indtroduktion til hvordan man laver et responsive design med eksempler på CSS, Media Queries og andre relevante teknikker og værktøjer i forbindelse med opsætningen af et responsive design - stay tuned!

---

Update: Læs mere om hvordan man tester et responsive design her:

Sådan kan du teste dit responsive web design

Tags: 

Tilføj kommentar