Är responsiv design detsamma som mobile first?

Det enkla svaret är nej. Men mobile first design är alltid responsiv, medan responsiv design inte behöver utgå från mobile first. Och vi ska inte blanda in termer som "mobilanpassning" eller tre olika fasta mått för desktop, plattor och mobiler. Hu! Låt oss ta det från början. 

Vad är responsiv design?

Responsiv design innebär att layouten på en webbsajt ändras och anpassas efter skärmens storlek, vilket gör att hemsidan alltid ser bra ut - oavsett vilken enhet besökaren använder. Förr i tiden (alltså typ 10 år sedan, och i vissa fall mycket mindre är så) designade man sajter efter en viss bredd på datorskärmar, t ex  640, 1 280, 1 400 pixlar och så vidare. 1 024 var ett tag ett magiskt tal. Men skärmarna har utvecklats (inte bara skärmstorlekarna utan även upplösningen - vilket ju är två skilda saker) och idag har många användare  upplösningar runt 2 500-3 000 pixlar i bredd.

Det finns idag ett enormt utbud av mobiler, surfplattor och datorer i alla möjliga olika skärmstorlekar. För att en sajt ska se bra ut i alla varianter måste layouten ändras och bilder skalas om. Detta kräver en del tankearbete av webbdesignern - och målet är att sajten ska se rätt och snygg ut för alla besökare.

Responsiv design är strukturerad på en flytande layout genom CSS termen ’media queries’. Man använder flytande rutsystem och procentuella mått istället för fasta pixelmått, vilket ger flexibla layouter, bilder och filmklipp  som anpassar sig till efter skärmstorlek.

Den responsiva sidan anpassar sig flytande och flexibelt till användarens skärm med samma innehåll som tidigare, vissa delar av designen kan man dölja bort, man kan dock inte tillföra något.

Det finns också så kallad adaptiv design, som inte alls är samma sak. Har ni kanske hört någon tala om "de tre storlekarna"? Oftast kanske man skissar på tre vanliga mått för att få en bild av hur det kan se ut i större skärmar, i plattor och i mobiler - men vi rekommenderar inte att programmera en sajt adaptivt. 

En adaptiv webbplats är uppbyggd med specifika layouter som är optimerade för olika fasta skärmmått. Istället för en flytande design skapar man olika layouter som läses in när webbsajten laddas. Den adaptiva metoden använder en lager-på-lager-struktur istället för flexibel anpassning. Det jobbiga är att man måste ändra eller lägga till fler storlekar när t ex användarna skaffar en ny sorts mobiler med annan upplösning. (Responsiv design behöver inte ta hänsyn till det, den anpassar sig oavsett).

Varför ska en sajt vara responsiv?

Detta är en konstig fråga i dag, eftersom det för de flesta av oss besökare och sajtägare är en självklarhet, men det tål att upprepas.

En sajt ska vara responsiv för att ge besökarna den bästa upplevelsen. Man ska inte behöva scrolla i sidled, zooma in, kämpa för att lyckas klicka på en textlänk som visas pytteliten eller hamna på en sida som inte visar allt innehåll. Man tappar både besökare, trovärdighet och kunder.

En sajt ska också vara responsiv för att många sökmotorer rankar webbsajter som INTE är responsiva sämre. De vill helt enkelt bidra till att förbättra kvaliteten på sökträffar i surfplattor och smartphones för sina användare.

Vad är mobile first?

De senaste åren så har mobilanvändandet ökat enormt , t ex använder svenskarna på daglig basis mobilen oftare än datorn för att surfa (87 % respektive 67 % vilket undersökningen Svenskarna och Internet från 2019 visar). 

Vi har tidigare börjat med de stora skärmarna som utgångspunkt i design och innehållsarbetet och mobilen har varit något man behövt ta ”hänsyn” till för att det ska se bra ut även där.  Mobile first innebär helt enkelt att man tänker tvärtom. Man utgår från att de flesta av besökarna kommer att använda sajten via mobilen, och optimerar layout, design, bildformat och innehåll utifrån det. Det kan innebära flera olika saker, bl a andra bildformat (det är inte så tydligt med en bild i panoramaformat i stående mobiler, eller bilder med text i), kortare texter (i vissa sammanhang i alla fall), tydligare länkar (gärna i form av knappar som är enkla att klicka på med ett finger), mindre överflödiga element i form av innehåll eller grafiska former som kan distrahera eller skapa en rörig känsla, korta laddningstider med mera. Sedan låter man den designen avspeglas och anpassas även för större skärmar.

Ska man inte alltid utgå från mobile first då?

Nej, det behöver man inte. Det beror på målgruppen och hur de kommer att använda sajten. Om de till stor del kommer att använda mobiler är svaret ja. Annars funkar responsiv design alldeles ypperligt. Även om mobile first kan låta enklare så krävs det faktiskt ofta mer arbete för att få det riktigt bra, man måste prioritera hårdare, tänka djupare på strategi och flöden och att ta fram en enkel, avskalad och snabb design som samtidigt stärker varumärket och bidrar till att öka konverteringen är ett krävande arbete.

Det är svårt att hålla saker enkla. Vi har någonstans läst att Winston Churchill en gång bad om ursäkt till en vän i ett brev för att han inte hade tid att fatta sig kort, utan bredde ut sig över flera sidor. Det kan ha varit någon annan, vi har inte riktigt kollat upp det, men oavsett så är det ett bra citat.

Avslutningsvis måste vi tillägga att när vi pratar om responsiv design ser vi alltid till att allt innehåll finns med i alla versioner, och att upplevelsen blir bra för alla användare. En vanlig fördom är att man missar en del genom att inte alltid tänka mobile first, men vår mening är att det inte behöver vara så.