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 2012.): 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.
<<- Tillbaka till listan
