Responsiv webbdesign – en överblick

Responsiv webbdesign är ett hett ämne, många vet att det är viktigt, men inte exakt vad det innebär. I den här artikeln kommer vi gå igenom det och varför det spelar stor inverkan på dina besökares upplevelse av sidan och i sin tur ditt varumärkes trovärdighet.

Användarupplevelsen är något som får mer och mer fokus när det kommer till sökmotoroptimering. Så för att Google ska ge dig gynnsamma placeringar bland sökresultaten är det viktigt att säkerställa att din hemsida lever upp till de högsta och mest aktuella kraven när det gäller användarvänlighet. Att bygga en responsiv hemsida innebär att den kommer se bra ut och och prestera väl oavsett vilken enhet som användaren använder.

I den här artikeln kommer vi gå igenom vad och varför när det kommer till responsiv webbdesign. För att diagnosticera din sida och vilka förbättringsmöjligheter du har ger den här artikeln en överblick. Därefter bör du ta hjälp av en guide lämpad för ditt specifika scenario. Detta eftersom det praktiska skiljer sig åt beroende på vilken CMS du använder.

Vad är responsiv webbdesign?

Har du någonsin öppnat en hemsida och känt att något är lite off? Menyerna hamnar konstigt på skärmen, texten är överdrivet stor eller liten, delar av hemsidan kanske till och med överlappar med varandra? Det finns tre huvudkategorier som tillsammans bygger upp paraplybegreppet responsiv webbdesign .

1. Visuella element

Problem med det visuella är troligtvis det fel som blir mest uppenbart. Delen av en hemsida som syns i webbläsaren kan ses som en tavla. Får du i uppgift att måla tavlan i A4-storlek så bestämmer du hur stora träden, bergen och djuren ska vara. När ditt mästerverk är färdigt vill du ta en kopia, krympa ner den och skicka det som ett vykort. Har du bestämt att berget ska vara just 3cm brett kommer det såklart se väldigt märkligt ut på vykortet som är mycket mindre. Det kan verka som ett banalt problem eftersom att när du målar är bergets storlek alltid i relation med ramens storlek. Det innebär att när ramen minskar i storlek kommer berget minska lika mycket. Men vad händer ifall vykortet helt plötsligt ska ställas på högkant? Hur flyttar man då om allt som ryms i tavlan?

Det är samma princip med en hemsida. Tavlan är datorskärmen och vykortet är mobiltelefonen. När hemsidan byggs finns olika sätt att avgöra hur stora de olika elementen ska vara. En bild på ett berg har en bestämd storlek i pixlar, tänk centimeter på en tavla. Då måste bergets storlek byggas om till procent, där storleken istället ställs i relation till skärmens storlek.

Att ha en relativ storlek löser en del problem, men uppstår snabbt igen med text och när förhållanden mellan bredd och höjd på skärmen skiljer sig mellan enheterna.

Responsiv webbdesign innebär att man från grunden har detta i åtanke för att säkerställa att en hemsida ska se bra ut på alla enheter utan problematik med element som överlappar eller på annat sätt förstörs av att hemsidan visas på olika enheter.

2. Användarvänlighet

Till skillnad från en målning måste användare kunna interagera med en hemsida. Är en hemsida byggd från grunden för att användas med ett specifikt input, mus och tangentbord till exempel, kan det bli problematiskt för användarna som istället petar på skärmen.

Besöker du en hemsida på en dator är det vanligt med en horisontell rad av alternativ. Detta fungerar så länge en besökare använder webbläsaren på en stor skärm i horisontellt läge. Men från en stiltypisk mobiltelefon blir alternativen på menyn väldigt små och svåra att trycka på med ett finger som är relativt stort i relation till en muspekare.

Ett vanligt sätt att lösa detta är genom en hamburgarmeny som i sin tur öppnar en vertikal meny. Det kallas hamburgarmeny på grund av likheten till en grå hamburgare, i Bonzers fall med ett halvt uppätet bottenbröd. Detta är självklart bara ett exempel och det finns många lösningar för att få det att både fungera och se bra ut för olika behov.

För att göra den här typen av justeringar som inte bara skalar om element, utan även media ändrar upplägget, används @media som ett sätt att bestämma en gräns på skärmens dimensioner där hemsidan ändrar form.

@media only screen and (max-width: 767px) {  	}

I bonzers fall sker den här förändringen när skärmens storlek är mindre än 767px bred. Hur detta implementeras beror på vilket CMS din hemsida använder. Men generellt är den här typen av responsivitet något som man bör förvänta sig finns implementerat hos alla teman från till exempel wordpress.

3. Laddtider

När de flesta tänker på en hemsidas laddtid är internethastigheten det första som kommer i åtanke. Hur snabbt ens internet är påverkar såklart hur snabbt en sida laddar. Är den fylld med tunga element såsom okomprimerade bilder med en hög upplösning kommer internethastigheten ha en betydande inverkan på hur snabbt sidan laddar. Det är inte exklusivt för specifika enheter utan är god praxis oavsett. Däremot bör man ha i åtanke att bara för att en hemsida laddar snabbt på ditt fiberinternet på kontoret kommer det inte prestera tillräckligt bra på en mobiltelefon som inte befinner sig inom räckhäll för den snabbaste 5g-uppkopplingen. Internethastigheten är något som inte minst är relevant för företag som vill skapa en hemsida som ska prestera internationellt. Speedtest är en tjänst för att mäta sin internetuppkoppling och varje år sammanställer de resultaten och jämföra den mellan olika länder. Till exempel hamnar USA på plats #27 i mobildata, men #7 i bredband.

Den andra aspekten av laddtider är inte lika uppenbart, nämligen processorkraft. En sida som bara innehåller text är generellt sett inte tung för någon enhet att bearbeta och visa. Vi ser dock att gränsen mellan hemsidor och appar långsamt suddas ut. Apple är ett bra exempel på hur nya tekniker används för att presentera sina produkter på ett sätt som hade varit otänkbart för bara några år sen.

Varför är det viktigt med responsiv webbdesign?

I det mest extrema exemplet kan en användare inte interragera med en hemsida på grund av att elementen i en meny överlappar. För att undersöka hur en hemsida ser ut på olika enheter kan du använda Google Chromes och klicka på F12. Därefter kan du ändra vilken enhet och prestandanivå du vill simulera för att undersöka hur hemsidan anpassar sig.

Föreställ dig ett scenario där du snabbt vill få reda på information om ett ämne, kanske responsiv webbdesign. Du klickar in på det första alternativet via Google. Hur många sekunder kommer du stirra på en vit skärm innan du börjar överväga huruvida det är något fel på hemsidan eller rentav din telefon?

Google har undersökt just detta. Det visar sig att besökares bounce rate ökar med hela 32% bara efter att ha väntat mellan 1-3 sekunder.

Alternativet till att skapa en responsiv hemsida har tidigare varit att ha en separat domän som inled med m.domän.se. Detta blir i längden en kostsam lösning då det innebär dubbelt arbete så fort något ska uppdateras eller implementeras. Bygg därför sidan från mobilanvändarens perspektiv och gör den responsiv så att du kan bygga vidare på den mer kostnadseffektivt i framtiden.

Hur väl din hemsida presterar på både mobiler och datorer är något som utvärderas av Google. Detta kommer i sin tur ha en påverkan på din SEO-ranking och möjligheten att få gynnsamma placeringar bland sökresultaten. Vi har en guide till teknisk SEO som går in mer i detalj på hur detta fungerar.

Att bygga en responsiv hemsida från mobilanvändares perspektiv, Mobile First, har ytterligare tre fördelar:

Mobilanvändare tenderar att ha sämre förutsättningar i form av internetuppkoppling, prestanda och skärmstorlek.
Det är enklare att skala upp en hemsidas design. Designar du en hemsida med menyer och alternativ som ser bra ut på en datorskärm kan det snabbt bli svårt att få designen att fungera lika bra på en mindre skärm. Lite som att flytta från en stor bostad till en mindre och fortfarande ha utrymmen för sina möbler och hobbys, istället för tvärtom.
Majoriteteten av besökare på en hemsida är mobilanvändare. Därför är det logiskt att säkerställa att dessa får en god användarupplevelse.

Sju snabba tips att ha i åtanke för att säkerställa en responsiv hemsida

1. Mobile first

Bygg hemsidan efter en mobilanvändares perspektiv, de står oftast för en majoritet av trafiken och det är enklare att skala upp en hemsidas design än att komprimera en hemsida designad för datorer.

2. Använd flytande ramverk och bilder

En ruta ska uppta en procentandel av skärmen och inte ha en fast storlek i till exempel pixlar. Allteftersom skärmen minskar eller ökar i storlek och upplösning måste dessa rutor ha möjlighet att anpassa sin position för att fortsätta vara enkla att navigera bland. En bild har ett förutbestämt antal pixlar. Se till att din hemsida har ett system för att kompensera för detta.

3. Använd SVG-filer (vektorgrafik) där det är möjligt

SVG bilder är vektorer och har ingen förutbestämd upplösning utan är istället en matematisk formel för linjer. Dessa används ofta i logotyper och ikoner då de kan skalas upp och ner oändligt mycket utan att öka i filstorlek eller tappa kvalitet. Därför lämpar de sig särskilt bra för responsiva hemsidor eftersom deras storlek ökar och minskar utefter enhetens skärmstorlek.

4. Använd minst tre @media-brytpunkter

Är din hemsida byggd med hjälp av en CMS såsom wordpress eller squarespace är detta generellt inte något som behöver tas i beaktning. Men det kan vara en god idé att säkerställa att din hemsida har ett alternativ mellan datorskärm och den minsta mobiltelefonen. Detta görs enklast med hjälp av F12-knepet som visades ovan.

5. Sträva efter minimalism

Är din hemsida täckt med design-gimmicks riskerar den att inte bara bli distraherande utan också trög att ladda på enheter med begränsad internethastighet. Ha istället en enkel och tydlig design som vägleder användare.

6. Använd dig av etablerade designmönster

Hjulet är redan uppfunnet! Finns det en grå hamburgare uppe i högra hörnet vet de flesta att det gömmer sig en meny där. Detta är ett typ av designmönster, något som användare redan känner igen. Designmönster vägleder användaren med hjälp av igenkänning och gör att de känner sig som hemma på din hemsida, trots att de aldrig har besökt den tidigare.

7. Lita inte enbart på ditt omdöme

Med detta menar jag att du såklart måste använda ditt goda omdöme. Med det sagt behöver det inte vara sättet att utvärdera en hemsida, kraven och förväntningarna uppdateras ständigt. För att testa din hemsida på objektivt plan bör du ta hjälp externt. Det finns många verktyg för att undersöka huruvida din hemsida lever upp till de senaste kraven. Ett exempel är lighthouse-rapporten från Google (även den tillgänglig via F12 på Google Chrome). Ett annat är Pagespeed insights som specifikt mäter en sidas hastighet.