Responsive webdesign

Responsive webdesign var et af de store buzzwords sidste år, og intet tyder på at det bliver mindre i 2012. Da jeg fandt ud af, at dette site har hele 45% af sine besøgende fra enten iPad eller iPhones, så tænkte jeg at det var på tide at få leget lidt med teknikken. Mit pragmatiske webgen skal “røre” for at lære, også selvom jeg ikke just selv er koder. Jeg fandt et minimalistisk wp-tema opbygget med responsive design, uploadede det og var så jeg klar på en ny platforme. Næsten.

For der er en del man skal tilrette, når går fra faste skabeloner til responsive design. Først og fremmest, så handler det om at holde ens løsning så simpel som mulig. Og sørge for selv at have styr på den del af koden der skal kunne skalere frit, for ikke alle gratis/eksterne produkter klarer sig lige godt. Eksempelvis fandt jeg ud af at mit kommentarsystem fra Facebook, ikke kunne skalere frit i Firefox. Altså måtte det ud. Herudover har jeg en lille sort topbjælke og et par eksterne links i min menu til anbefalinger og cv – indhold optimeret til høj skærmopløsning. Derfor blev de dele skrevet ud af koden, under en vis skærmstørrelse. Det betyder selvfølgelig, at ikke alle besøgende ser den samme hjemmeside, det afhænger af den skærmstørrelse man benytter. Det er et valg jeg har taget, men det er ikke nødvendigvis et brugervenligt valg. Fordelen for mig er dog, at jeg på denne måde alene skal redigere mit site ét sted fra.

En anden ting man skal vende sig til når man arbejder responsivt er, i opsætningen af ens indhold. Normalt har man faste størrelser at forholde sig til, men pludselig skal billeder/tekst/videoer kunne skalere op og ned i størrelse. Det betød helt konkret, at jeg skulle ind og omskrive alle der steder hvor der var embeddet kode i mit indhold. Forden er så nu, at det er gjort. Finder jeg et andet responsivt tema på sigt, så er indholdet parat. Indhold opsættes altså ikke til en bestemt størrelse skabelon – det er FANTASTISK. Ikke mere pixelknepperi.

Hvis du stadig er lidt i tvivl om hvad responsitvt design er, så tag fat i hjørnet af din browser og se hvordan min hjemmeside ændrer udseende når skærmstørrelsen bliver mindre.

Og vil jeg så anbefale responsivt design, nja njo … måske. Det kommer som altid an på løsningen.

Lidt inspiration (det er godt)

14 kommentarer

  1. Ask Hybel

    Ja, de har nok brugt lidt mere end 1 1/2 time på deres responsive design! Imponerende er det, men teknisk er der ikke meget forskel fra opsætningen herinde.

    Et par flydende elementer og 3 skift. Det virker.

  2. Ask Hybel

    Havde godt set det Mads, det ser sejt ud. Og nej, selvfølgelig koder vi ikke fra bunden. Det har vi folk til ;) Men erfaringerne får man trods alt alligevel ud af lidt leg … den plejer at være god nok.

  3. Mark Thomsen

    Godt arbejde, Ask :) Og tak for henvisning til Jyske Bank, Andreas. Det er godt lavet – både hybel og Jyske. Jyske-eksemplet stikker dog ikke så dybt. Så snart man klikker mere end to gange ender man på en traditionel side, der ser herrens ud mobilt, når man kommer fra det smukke, responsive overflade-univers. Ved ikke om de blev ramt af finanskrisen undervejs – eller bare ikke har godt nok styr på deres content til et konsekvent responsivt design. Problemet med corporate sites er nemlig at hierarkiet ofte er meget dybt, og det gir store udfordringer, når sitet skal gøres responsivt.

    De fleste gode responsive designs jeg kender til er enten nyhedssites (masser af indhold, men fladt i sin struktur), blogs, simple produktsites eller portfolio-sites (alle flade strukturer – og ofte indholdstynde sammenlignet med fx Jyske Bank eller Sundhedsstyrelsen.dk). Har I et godt bud på store hierarkiske webløsninger (gerne danske) med et konsekvent responsivt design? Er selv i gang med at gøre websitet for en stor dansk a-kasse responsivt, og her kæmper vi netop med de hierarkiske strukturer. Fantastisk projekt, men også krævende både på IA og design.
    Gode eksempler, anyone?

  4. Ask Hybel

    Overvejer hvornår nogen laver et kampagnesite, der komplet ændrer karakter i takt med at man skifter skærmstørrelse. Det må komme i 2012!

  5. Casper Reiff

    Man kan heldigvis lave meget mere med responsive design end det CSS kan. Hvis man er lidt kreativ med PHP og jQuery, kan man virkelig lave nogle fede designs.

  6. Elisabeth Tejlmand

    Tak for et spændende indlæg. Jeg hørte fornylig folkene involveret i jydske banks responsive design fortælle om processen, og ganske som Mads Thomsen også er inde på, så løb de ind i udfordringer med indholdet. Så vidt jeg forstod, er det imidlertid et bevidst valg IKKE at gøre alle sider responsive. Man har alene valgt at bruge kræfterne på de sider kunderne rent faktisk bruger fra de små devices.

  7. Ask Hybel

    Den fremgangsmåde lyder meget fornuftig, og Jyske Bank er rigtignok kun responsivt på overfladen. Responsive webdesign er, som nævnt, ikke det eneste svar på fremtidens platformsudfordringer, men det er et svar. Og et svar der buzzer for tiden. Så meget at jeg har en artikel i næste nummer af HK Samdata om selv samme emne – smider artiklen op når den er ude.

    Tjek iøvrigt http://www.starbucks.com/ og ikke mindst http://www.starbucks.com/static/reference/styleguide/ for yderligere live inspiration.

  8. Elisabeth Tejlmand

    Den vil jeg se frem til at læse.

    Og så kan jeg se at jeg har fået kaldt Mark for Mads. Det var ikke for fikst. Hav en fortsat god påske :-)

Skriv en kommentar