– Hur man kan effektivisera sitt arbete med responsiv webbutveckling.

Av Matilda B, Dig11

Nya tekniker och standarder dyker ständigt upp i vår vardag. Webbläsare blir allt snabbare och dagligen dyker nya enheter upp i olika sorters storlekar och med olika kapacitet när det kommer till åtkomlighet för webben.  Men samtidigt som marknaden för nya enheter expanderar återstår även användningen av äldre enheter och webbläsare. Detta gör webben till en väldigt ostabil och universal miljö (Kadlec, 2013:2).

I början av 2000-talet var det endast några få mobiltelefoner som klarade av att erbjuda användaren tillgång till internetsidor. Användningen blev väldigt begränsad och det var inte fören 2007 då Apple släppte sin originalversion av iPhone som användare verkligen fick tillgång till den ”fulla webben” i en mobil enhet (Kadlec, 2013:4-5).  Sedan dess har användningen av mobila enheter på webben mer eller mindre exploderat och i augusti 2013 hade 17,4% av den totala webbtraffiken under året skett via en mobiltelefon (Fox, 2013:1).

Mobiltelefoner är dock inte den enda typ av enhet som har tagit över marknaden. Tablets och surfplattor blir allt vanligare och det finns beräkningar om att försäljningen av tablets under 2015 kommer att vara i närheten av 49 miljarder dollar, vilket också gör dessa till en viktig marknadsgrupp vid webbdesign (Kadlec, 2013:5).

Med en ständigt expanderande marknad för enheter och skärmstorlekar finns det ett växande behov av att anpassa sin design efter dessa. Detta kan göras genom responsiv webbdesign, som handlar om att anpassa en webbplats utseende efter storleken på användarens skärm. På en mindre skärm, till exempel på en mobiltelefon eller surfplatta blir bilderna mindre och webbplatsen smalare medan den på en stor skärm visar större bilder och i full bredd. Det bygger på en mer flexibel strategi vid designen av en sida som ska fungera på olika enheter och med olika operativsystem. Detta tankesätt är alltså inte begränsat till mobila enheter utan handlar mer om en förnyad inriktning på innehåll och dess presentation.

Viewport meta tagg och CSS3 media queries

Responsiv webbdesign tillåter en webbsida att anpassa sig till olika skärmupplösningar och enheter utan att man behöver använda sig av en egen domän eller underdomän för exempelvis mobiler. Detta är möjligt tack vare viewport meta taggar och CSS3 media queries.

Viewport

Smartphone webbläsare försöker som standard att låtsas vara högupplösta skärmwebbläsare och visar således en sida på samma sätt som om användaren hade öppnat den på en större skärm. Detta ger en så kallad överblicksbild av sidan och resulterar i små texter som användaren sedan får zooma in på för att läsa.

Detta är något man med responsiv design vill undvika och då behöver man lägga in en så kallad viewport meta tagg i sin <head>-taggen för att få mobila webbläsare att förstå att de ska skala om sidan så att den bättre passar för aktuell skärm (Firdaus, 2013:8).

Så här ser en viewport meta tagg ut:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

Att värdet på initial- och maixmumskalan är satt till 1 kommer att resultera i att webbläsare tillåts skala upp sidan 100% större. Att bredden är satt till ”device-width” kommer att göra att skalan uppdateras när användaren vänder på enheten och får en ny bredd.

För den som vill veta mer om viewport meta taggar så finns det en tutorial av Ian Yates om detta på TutsPlus:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

CSS3 media queries

För att sidan ska anpassas efter olika skärmstorlekar använder man sig av media queries som läggs in i css-koden med en särskild tagg kallad ”@media” som läser av skärmens bredd och sedan talar om hur css-koden ska förändras i förhållande till den bredden. Det fungerar alltså som brytpunkter och ger en möjlighet att exempelvis flytta eller förminska ett element på sidan på alla skärmar som är mindre än en viss storlek.

Här är ett exempel på hur det ser ut när jag använder mig av media queries:

mediaq

De brytpunker jag använder är <1199px, <979 och <767 vilket gör att sidan kommer att anpassas specifikt efter både stående och liggande läsplattor samt mobiltelefoner.  Media queries placeras längst ner i css-koden och sedan är det bara att skriva i de element som ska förändras i en viss storlek. För egen del brukar jag spara media queries tills jag är klar med resten av koden. Det är först när jag sätter igång att testa hur de olika elementen ser ut på mindre skärmar som jag ser vilka eventuella ändringar som behöver göras i media queries.

Ramverk för responsiv design

Även om det är möjligt att skapa en responsiv design själv från grunden är detta väldigt tidskrävande och många gånger inte lika effektivt som att använda ett färdigt ramverk (Firdaus, 2013:15).

Under min praktik har jag arbetat med Twitter Bootstrap som är ett intuitivt och kraftfullt front-end ramverk som innehåller ett flertal verktyg för att förenkla och standardisera strukturen och uppbyggnaden av en sida. Bootstrap grundades av Mark Otto och Jacob Thornton 2010 som då arbetade som utvecklare på Twitter och släpptes som open source under 2011. Det innehåller ett flertal fördefinierade element som ofta används som bland annat knappar, formulär, diagram, navigation, typografi och ikoner som man sedan kan styla om efter eget val samt ett antal jQuery-plugins (Firdaus, 2013:15).

Bootstraps struktur bygger på ett 12-kolumnigt gridsystem, vilket leder till en 940px bred container. Med en responsiv css-fil till anpassas kolomnerna så att de är från 724px och 1170px bred beroende på användarens skärmstorlek. För skärmar som är mindre än 767px blir kolumnerna ”flytande” och staplas istället vertikalt (Bootstrap, 2013). Man kan om man vill välja att kolumnerna är flytande även i de högre upplösningarna, skillnaden blir då att kolumnerna räknas om till procent istället för pixlar. Det går även att ändra max-bredden på kolumnerna till mer än 1170px manuellt samt att låta ett element täcka hela skärmen ända ut till kanterna.

För mer information om hur man använder Bootstrap kan jag rekommendera deras hemsida: http://getbootstrap.com/ där man också kan hämta Bootstrap kostnadsfritt.

För en mer utförlig introduktion till hur man kommer igång och använder Bootstrap finns även en tutorial på TutsPlus som är skapad av David Cochran: http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/

En sak som kan vara bra att tänka på redan när man börjar skissa på sin sida och framförallt när man skapar designen i Photoshop är att ladda ner en bild på deras 12 kolumner och placera överst i sin PSD-fil då man på så sätt förenklar arbetet med koden genom att man direkt ser hur många kolumner ett visst element behöver sträcka sig över.  En annan sak som jag lärt mig under praktiken är att man helt ska försöka undvika att specificera bredd i pixlar på element inom kolumnerna. Detta kommer att ställa till det då man vid mindre upplösningar har flytande kolumner eftersom de specificerade elementet inte kan tvingas ner och bli mindre. Vill man ha en viss bredd är det istället bättre att försöka uppnå denna genom att använda sig av paddings.

bootstrap

Less

Bootstrap använder sig av LESS, som är en CSS-kompilator. Enkelt uttryckt kan LESS komponera CSS på ett kraftfullare sätt. LESS gör det bland annat möjligt att använda variabler och funktioner, precis som i olika programmeringsspråk såsom JavaScript och PHP, som man sedan kan anropa för att använda. Jag tänkte beskriva några av de funktioner LESS erbjuder och hur de används:

Variables
Variabler tillåter dig att ange värden som ofta används på ett och samma ställe. Du kan sedan anropa dessa värden i resten av stilmallen och skulle du i ett senare skede vilja ändra på alla dessa värden behöver du alltså endast byta ut en rad med kod. Bilden nedan visar ett exempel på variabler. Har jag en specifik färg som jag vill använda ofta på sidan skulle jag kunna lägga in den på @main-color och sedan längre ner i koden använda den som exempelvis bakgrundsfärg endast genom att skriva:

background-color: @main-color;

lessvar

Mixins
Mixins påminner om variabler, men gäller istället för enskilda värden hela klasser. Skulle jag vilja använda mig av rundade hörn i till exempel min header skulle koden se ut så här:

header {.round}

lessmixins

Jag får alltså samtliga värden som är utskrivna i klassen .round att anropas till min header.

Nested Rules
LESS tillåter dig att nästla taggar i varandra. Istället för att skriva långa rader med kod för att exempelvis få en p-tagg som ligger i headern att få en viss stil kan man istället nästla in dessa. Bilden nedan visar exempel på hur en enklare nästning kan se ut.

lessnest

 

Detta är alltså bara några få av de fördelar som LESS erbjuder. På deras hemsida, http://lesscss.org/ finns en guide över samtliga funktioner och efter att ha arbetat i LESS under min praktik är min personliga åsikt att det är en otroligt lättarbetad och tidseffektivt kompilator.

Eftersom webbläsarna inte kan läsa in LESS-filer behöver dessa konverteras till CSS-filer. Det finns flera program som klarar av detta, jag använder WinLess som är ett av flera kostnadsfria alternativ http://winless.org/. Genom att skapa en LESS-fil och en CSS-fil med likadana namn och sedan placera dem i en gemensam mapp som man laddar upp i WinLess konverterar programmet automatiskt om LESS-filen och skriver ut den korrekt i CSS-filen.

Design

Att göra en responsiv hemsida handlar inte bara om att krympa innehållet så att det passar olika skärmar utan gränssnittet behöver designas om för de olika plattformarna. Många gånger fungerar sidan efter att man har använt sig av ett ramverk bra på läsplattor utan att man behöver göra några större förändringar manuellt, men när det är dags att se över mobilversionen av sidan är det ofta ett par saker som behöver justeras. Sabina Idler (2013) har listat några viktiga punkter som man som designer bör tänka på när man skapar en responsiv sida.

Prioritera innehållet
Det första man bör göra när det är dags att göra sin hemsida responsiv är att prioritera sidans innehåll. Man bör försöka sätta sig in i vad för typ av situation användaren befinner sig i när denne besöker sidan ifrån en viss typ av plattform och organisera innehållet därefter. Eftersom den sida som kommer att visas på mobiltelefoner är betydligt smalare än sidan som visas på en datorskärm blir den också längre då innehållet staplas för att inte behöva krympa för mycket. För att inte användaren kan ska behöva scrolla allt för länge kan man därför i vissa fall plocka bort delar av sidans innehåll för att inte riskera att de delar av sidan som man prioriterar missas av användaren som i värsta fall inte tittar igenom hela sidan. Detta är dock inte alltid ett alternativ och då kan man istället arbeta med att placera om innehållet för att förenkla för mobilanvändare. Detta är något vi på min praktikplats ofta arbetar med. Exempelvis brukar vi placera ut kontaktuppgifter till företaget högt upp då detta är något som vi vill att användaren snabbt ska få tillgång till utan att behöva scrolla igenom en hel sida och även för att man som mobilanvändare på en sida inte får samma överblick av en sida som en datoranvändare och därför inte redan innan man har scrollat igenom hela sidan vet om kontaktuppgifterna finns med i exempelvis footern på varje sida.

Hantera ett begränsat utrymme kreativt
Då det finns mindre utrymme på en mobilskärm än på datorn är det givetvis viktigt att man som designer reorganiserar allt relevant innehåll så att det passar efter vad utrymmet tillåtet. Samtidigt är det viktigt att sidan följer en tydlig grafisk linje oavsett skärmstorlek för att försäkra besökarna om att de befinner sig på samma sida trots att de andra besöket valt en annan plattform.

Förenkla navigationen med en responsiv meny.
Eftersom skärmutrymmet på en mobiltelefon är begränsad och det dessutom inte går att utnyttja hovereffekter för att förenkla för användaren behöver ofta sidans meny designas om. En populär lösning som vi nästan uteslutande använder på min praktik är så kallade ”drop-down menyer”. Denna typ av meny ger möjlighet att dölja ett komplext innehåll i olika lager så att det inte tar upp för mycket utrymme när man kommer in på sidan. Menyn ska precis som högt prioriterat innehåll placeras därefter, alltså ofta med fördel i toppen av sidan. Tänk även på att länkar och andra klickbara element ska anpassas efter att det är ett finger som ska komma åt att trycka. För den som vill läsa mer om responsiv navigation kan jag rekommendera http://designmodo.com/ux-responsive-design-navigation/ där Marcin Treder (2013) ger flera tips på hur man kan tänka kring responsiv navigation samt beskriver hur man praktiskt skapar en.

Mobile First

Joshua Johnson beskriver en ny trend inom webbdesign som kallas för ”mobile first” och går ut på att man istället för att som man traditionellt brukar göra utgår ifrån skärmen i första hand när man skapar en design istället börjar med att göra en design för mobilen och sedan succesivt utökar denna till större plattformar.

Begreppet skapades av Luke Wroblewski som själv beskriver varför man bör följa denna strategi:

Mobiltelefoner ökar ständigt i både antalet mängd och i antalet användare för att få tillgång till internet.

Mobilen tvingar utvecklingsteamet att endast fokusera på det allra viktigaste innehållet på en webbsida.

Genom att bygga hemsidor från ett mobile-first tänk gör man det möjligt för utvecklingsteamet att utnyttja smartphones inbyggda funktioner som en webbläsare inte har tillgång till som exempelvis geolocation (ett API som möjliggör för applikationer att identifiera användarens geografiska position och överföra koordinaterna till en karta), att byta layout beroende på hur enheten hålls samt ett multi-touch användargränssnitt (obegränsat antal samtidiga beröringar på en skärm) (Kadlec, 2013:160).

Även Johnson (2013:1) framhåller flera fördelar med ett mobile-first tänk men lyfter samtidigt fram att man i sin design blir betydligt mer begränsad jämfört med om man designar för en större skärm vilket han anser är den största nackdelen.

På min praktikplats är detta inget vi använder oss av trots att samtliga webbplatser som vi producerar är responsiva. En av de främsta anledningarna till detta tror jag är att det är svårt för kunden att godkänna en design enbart utifrån hur den kommer att visas på en telefon. Ett annat problem är att vi när vi skapar designen inte har full kontroll över innehållet då det kan tillkomma texter eller bilder i efterhand och designen därför måste anpassas efter detta. En bra kompromiss för min egen del är att hela tiden ha med i tanken att sidan senare ska gå att anpassa för mindre skärmar, även om jag ändå gör designen för skärmen först.

Slutsats

Jag ser det som en självklarhet att de sidor som skapas idag bör vara responsiva och efter att ha arbetat med responsiv webbdesign under praktiken är min personliga åsikt att det med rätt verktyg inte är svårt att skapa en responsiv sida rent tekniskt. Tvärtom underlättar de verktyg jag nämnt arbetet med kodningen av sidan även i större upplösningar och när jag själv väl hade fått in till exempel tänket med att arbeta i kolumner är det svårt att gå tillbaka till att göra det utan.

Svårigheten enligt mig ligger snarare i att skapa en användarvänlig design. Då det fortfarande är ett väldigt nytt område finns det inte många klara riktlinjer för hur man bör tänka kring gränssnittet vilket ställer högre krav på designern.  När fokus inte längre behöver ligga på den tekniska biten tror jag istället att detta ämne kommer att diskuteras i större utsträckning framöver, vilket jag även tycker att trenden ”mobile first” är ett tydligt tecken på.

Källförteckning

Bootstrap (2013). Bootstrap – Getting started. [Elektronisk]. Tillgänglig: http://getbootstrap.com/getting-started/ [2013-10-14]

Firdaus, Thoriq (2013). Responsive web design by example – beginners guide. Birmingham: Packt Publishing Ltd. E-bok.

Fox, Zoe (2013).  Mashable – 17.4% of Global Web Traffic Comes Through Mobil. [Elektronisk] Tillgänglig: http://mashable.com/2013/08/20/mobile-web-traffic/ [2013-10-10]

Idler, Sabina (2013). 10 Tips How To Handle Responsive Navigation Menus Successfully. [Elektronisk] Tillgänglig: http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/ [2013-11-18]

Johnson, Joshua (2013). Mobile First Design: Why It’s Great and Why It Sucks. [Elektronisk]. Tillgänlig: http://designshack.net/articles/css/mobilefirst/ [2013-11-14]

Kadlec, Tim (2013). Implementing Responsive Design – Building Sites for an Anywhere, Everywhere Web. Berkeley: New Riders Publishing.