Mobilanpassade hemsidor – allt du behöver att veta

Mobilanpassad design för hemsidor är A & O idag. Varför? Eftersom mobila enheter förändrar vårt digitala beteende och som ett resultat, hur företag fungerar. Faktum är att majoriteten av trafiken från webben idag kommer från mobila enheter. Vilket skriver om gamla regler och samtidigt stiftar nya.

”Smartphones är inte bara en ny digital värld, det är även kopplingen till den fysiska världen. Och därför kommer smartphones påverka mer än bara din digitala närvaro, det kommer påverka hela din affär.”

Tomas Husson, VP & Principal Analyst på Forrester Research.

Kort & gott: du behöver en mobilanpassad eller responsiv som det också kan kallas hemsida. Men vad är en då en mobilanpassad hemsida? Låt oss titta närmare på det.

Vad är en mobilvänlig website?

Enkelt uttryckt, en mobilvänlig website är en website som är utformad och optimerad för handhållna enheter, till exempel smartphones och surfplattor.

Och mobil responsiv design är processen att skapa en webbplats som anpassar sig till skärmstorleken den visas på. De funktionella och interaktiva upplevelser som vi har förväntar oss i mobilappar har skapat nya standarder och förväntningar för alla digitala medier inklusive webben. Resultatet är att webbplatser utvecklas för att bli mer appliknande i sin funktionalitet

Foto av Faizur Rehman på Unsplash

Nyttan av mobil websitedesign

Under det sista kvartalet 2019 stod smartphones för hela 52,6 procent av den globala webbplatstrafiken. Det betyder att mobilanvändning nu dominerar över stationära datorer. Dessutom förväntas antalet mobilanvändare världen över öka till 3,8 miljarder under 2021.

Se det så här: mobil är inte framtiden, det är nuet. Träffa dina kunder i den miljö de väljer, inte där det är bekvämt för dig. Mobila enheter förändrar också shoppingvanor. Enligt Google säger 59 procent av shopparna att det är viktigt att kunna handla på sina mobila enheter när man bestämmer vilken återförsäljare eller märke man ska köpa från. Dessutom vände 70 procent av smartphone-ägare som gjorde ett köp i butik till sina mobila enheter för att undersöka köpet i förväg.

Om det inte räcker så prioriterar Googles algoritm mobilvänliga websites i sökresultaten. Förra året sa Google; "För att förenkla kommer vi att gå över till mobil-första indexering för alla webbplatser."

Om du undrar vad detta innebär förklarar John Mueller, Developer Advocate på Google så här;

”För närvarande tittar Google på skrivbordsversionen av en webbplats och baserar sedan hur den kommer att rangordna mobilsajten enligt den informationen. När den här uppdateringen rullar ut kommer motsatsen att ske. Google börjar titta på din mobilsajt och kommer därefter att ranka skrivbordssidan.”

Slutligen, många användare läser in mobila webbplatser på långsamma och svaga telefonnät. Som ett resultat måste varumärken skapa en mobil webbdesign som laddar snabbt. Sammanfattat är världen nu ”mobil-först” och det är därför du behöver en mobil responsiv website.

5 designtips från våra egna proffs Frida & Johan

Mobilvänliga websites måste ha knappar som är tillräckligt stora för att användarna ska kunna trycka på dem utan att behöva zooma in. Dessutom måste det finnas utrymme mellan hyperlänkar. Om länkar placeras för nära varandra kan användare försöka klicka på en länk och av misstag klicka på en annan.

2. Gör texten stor nog att läsa
Den här kan verka självklart, men det är också avgörande för mobilvänlig webbdesign. Användare ska aldrig behöva zooma in - eller rulla åt vänster eller höger - för att läsa något. Texten ska alltid vara tillräckligt stor för att kunna läsas bekvämt.

3. Förenkla menyer
Menyer för stationära webbplatser har mycket utrymme. De kan ta upp en hel stapel högst upp på skärmen och har omfattande listrutor, allt utan att hindra användarupplevelsen. Detta är inte fallet på mobila enheter - det finns bara inte tillräckligt med utrymme. Mobilvänliga websites bör använda enkla menyer som ger en tydlig översikt. Användare kan sedan använda kategorier, filter eller sökfunktionen för att finjustera vad de letar efter. De flesta mobilvänliga websites använder ”hamburgaresymbolen” bestående av två eller tre horisontella linjer för att ange en meny.

Din websites sökfunktion är särskilt viktig för mobilanvändare. Som nämnts ovan kan förenklade menyer göra det lättare att surfa på mobilen. Men de kan också göra det svårare för användare att hitta ett specifikt objekt. För att göra det enkelt för användarna att hitta det de vill, placera sökfunktionen framför och i mitten.

Foto av Daniel Korpai på Unsplash

Användare kan vara mer benägna att fylla i ett långt formulär på en dator eftersom skärmen är större och det är lättare att skriva med ett tangentbord. På mobila enheter måste formulär vara kortare med stora textfält och knappar. Om du till exempel ber användare att registrera dig för din e-postlista, bör du inte be om mer än ett förnamn och en e-postadress. Om du behöver inkludera fler frågor, gör dem snabba och enkla att svara på.

Om en kund letar efter dina kontaktuppgifter kan de ha stött på problem - vilket betyder att de troligen redan är lite frustrerade. Lägg inte till en ytterligare förolämpning genom att göra det svårt att kontakta dig. Särskilt inte när ca 84 procent av konsumenterna anser att kundservice är en nyckelfaktor när de beslutar sig om att göra ett köp.

7. Skapa nice call-to-actions 
En call-to-action som även är känd som en CTA, är en bild, banner eller text som bokstavligen uppmanar användare att vidta någon form av handling. Du kan till exempel uppmana användarna att registrera sig för din e-postlista, lära sig mer om ett erbjudande eller att köpa en produkt. Denna marknadsföringstaktik spelar en viktig roll i mobilwebbplatsdesign. Det kan dock vara utmanande att skapa övertygande uppmaningar med så begränsat skärmutrymme att arbeta med.

8. Undvik popup-fönster
De flesta hatar popup-fönster. Faktum är att om du Googlar: "I hate pop up ads" hittar du 62 500 000 resultat. Det säger nog allt.

Behöver du hjälp med att göra din hemsida mobilvänlig?
Vi löser det utan problem!

Omslagsfoto av Kelly Sikkema på Unsplash