Olof Törnqvist

Design

Teknik

Design,Teknik

Optimera webben för alla skärmar - Om Responsiv Design

Tänk om vi kunde skapa en webbplats som var helt oberoende av enhet och skärm? En webbplats som oavsett vilken enhet du använder för att titta på den är lättläst och såg ut som om den var designad just för den enheten? Lösningen kallas för Responsiv webb eller Responsiv design och i denna bloggpost beskriver jag vad det är för något.

Att arbeta med webben är verkligen otroligt spännande eftersom utvecklingen går så rasande fort. För något år sedan skulle alla företag med självaktning erbjuda en mobil version av sin hemsida för att erbjuda en optimal upplevelse för både datorsurfare och Iphone-surfare.

Mobilt surfande ökar ju kraftigt och idag beräknas det finnas över 4 miljarer mobila enheter i bruk världen över.

Många webbsajtägare har löst denna nya målgrupp genom att ta fram en mobilanpassad version av sin hemsida. En version som är anpassad för mycket små skärmar.

Men det räcker inte längre att nöja sig med att ha två versioner av er sajt, därför att det inte bara finns två storlekar på skärmar.

Problemet

Grundproblemet är att vi har tagit för vana att designa webbsajter för en viss skärmstorlek, vanligtvis 1024 eller 1280 pixels bredd. Precis som om webben vore en tryckt tidning. När man sedan tittar på en sådan webb med en annan storlek på skärm än den var tänkt för får man ofta scrolla både horisontellt och vertikalt. Webbsidan blir full av stora vita ytor och texten är oftast svårläst.

Elektrikernas hemsida på Ipad. Utan anpassningar ser syns inte hela sidan. Hela högerkolumnen har fallit bort och delar av mittenkolumen är skymd.

Elektrikernas hemsida på en telefon utan anpassning. Man ser inte så mycket av hemsidan, bara navigeringen.

När jag tittar på statistiken för vår egen sajt under de senaste veckorna får jag fram följande bild av våra besökares skärmstorlekar. Varje fyrkant i bilden motsvarar en storlek på bildskärm.

Som ni kan förstå är det långt ifrån tillräckligt att endast ta fram två versioner av sin sajt.

Tack och lov erbjuder webben otroligt mer dynamik än det tryckta mediet. Istället för att tvinga in alla webbesökare i en fast ram borde vi istället omfamna webbens brist på begränsningar.

Lösningen: Responsiv Design

Tanken är att ta fram en webbplats som var helt oberoende av enhet och skärm. En webbplats som oavsett vilken enhet du använder för att titta på den är lättläst och såg ut som om den var designad just för den enheten.

Detta går att genomföra och lösningen kallas Responsiv Design, ett begrepp myntat av den engelske webbdesignern Ethan Marcotte. Konceptet bygger på den moderna webbläsaren och CSS (Cascading Style Sheets - den kod som definierar layouten) . Vi låter layouten, texten och bilderna på hemsidan anpassa sig efter enheten.

Det som gör detta möjligt är ett begrepp inom CSS som kallas media queries och bygger på att vi som programmerar sajter skriver olika CSS (layoutkod) för olika skärmstorlekar. Det är sedan upp till webbläsaren att anpassa webbsidan.

 

Detta kan i huvudsak göras på tre olika sätt:

Flytande (fluid) layout

Här anpassar sig designen flytande beroende på hur stort fönster webbläsaren har.

Stegvis layout

Här anpassar sig designen i olika steg beroende på hur stort fönster webbläsaren har. Man bestämmer sig för att ta fram t.ex. fem stycken olika layouter anpassade för t.ex telefon, surfplatta liggande, surfplatta stående och dator.

En kombination av flytande och stegvis layout

Här använder vi både flytande och stegvis design i kombination.

Vilken som passar bäst beror lite på vilken typ av design man vill ha. Om man använder sig av en lite enklare layout med mycket text och en eller två kolumner (den typiska bloggen) är det ganska enkelt att tillämpa alla tre varianter. Har man däremot en lite mer komplicerad layout med tre eller fyra kolumner och mycket grafik där allt ska ligga tajt så är det enklare att ta fram en stegvis layout. Fördelen då är att vi som webbdesigners vet exakt vilka alternativ som finns.

Browser kompabilitet

Hur funkar då denna teknik i olika webbläsare? Internet Explorer är som vanligt det svarta fåret och stödjer inte media queries i äldre versioner än version 9. Men det gör faktiskt inte något, eftersom ingen kör de äldre versionerna av Internet Explorer i sina handhållna enheter. De vanligaste webbläsaren på t.ex. Iphone och Android-telefoner och surfplattor är WebKit som har fullt stöd för media queries. Grönt ljus alltså!

Bra exempel på responsiv design

Än så länge finns det få exempel på Responsiv Design eftersom konceptet är relativt nytt. Här kommer några:

Testa att ändra fönstrets storlek och se hur hemsidan anpassar sig automatiskt för att ge dig en optimal upplevelse i förhållande till ditt fönster!

EDIT (januari 2015.): www.aea.se - Camelontas senaste release för sveriges största a-kassa, AEA. Här använder vi flytande (steglös) layout.

www.elektrikernasakassa.se – En sajt vi byggde åt Elektrikernas A-kassa. Här använder vi oss av stegvis layout.  

www.lessframework.com -  ett ramverk som kan användas för att göra egna webbar med responsiv design med stegvis layout.

www.svt.se/ug - Uppdrag Granskning för SVT. Släpptes för ett par veckor sedan.

www.bostonglobe.com – Tillbakahållen design. Mycket innehåll.

 

http://camelonta.se//media/1179/elektrikerna-768x1024.jpg