Artiklar

Här kan du läsa intressanta inlägg, nyheter och insikter från Jenkler IT AB.

Mobilanpassa din hemsida del 2

Senast uppdaterad: 2024-02-04

I den förra delen i vår artikelserie om mobilanpassning lärde du dig om vad mobilanpassning är för något och varför det är viktigt. I den här delen berättar vi hur du i praktiken går tillväga för att göra din hemsida mobilanpassad. I grova drag innebär det att man strukturerar om en hemsidas innehåll så att den blir mer lämpad för mobila enheters förutsättningar och deras typiska användarfall. Med användarfall menas här de mål en mobil användare har med sitt besök på en hemsida tillsammans med de förutsättningar besöket sker i. Står exempelvis användaren i en affär och snabbt vill jämföra priser? Tänk igenom när och hur hemsidan används. Tänk också igenom hur designen kan justeras så att en besökares upplevelse blir så behaglig som möjlig givet den mobila enhetens formfaktor och besökarens behov. Nedan listar vi några grundläggande råd som kan hjälpa dig när du ska mobilanpassa din hemsida.

Använd responsiv webbdesign

Till skillnad mot att ha en helt separat sida för mobilversionen så används vid s.k. responsiv webbdesign samma kod och webbadress vare sig man är på en dator, mobil eller surfplatta. Som namnet antyder anpassas sidans element dynamiskt beroende på skärmupplösningen och definitioner i koden. Sitter du i en webbläsare på en dator kan du enkelt testa detta själv genom att förstora och förminska webbläsarfönstret. Om sidan är responsiv kommer innehållet dynamiskt att anpassas. Dynamisk webbdesign är lättare att underhålla än dess alternativ och rekommenderas av Google då den är bäst lämpad för för mobile first indexing.

Exempel på hur responsiv webbdesign kan se ut på olika enheter.

Gör det lätt för användaren att hitta det den söker

Varför besöker användaren din sida? Tänk på vilka mikro-ögonblick din sida kan tänkas tillgodose och skräddarsy din mobilanpassade sida utefter dessa. Det finns självklart väldigt mycket att skriva om hur man bygger hemsidor intuitiva eller användbara (och mycket har skrivits om det), men ett grundläggande råd är att så långt som möjligt eliminera steg. Ska användaren boka bord på en restaurang, göm då inte den funktionaliteten i undermenyer och långt ner på en sida, utan ha det tydligt på förstasidan eller högst två klick bort. Förutse behov genom att exempelvis autofylla dagens datum i bordsbokningen och kanske på sidan där veckans menyer visas. Att ha en tydlig sökfunktion är ett klassiskt knep för att eliminera steg. Då slipper man gissa vilken kategori en produkt är sorterad under i en komplicerad produktmeny – sök bara på produktnamnet så kommer det upp. Andra knep är att ha tydliga call-to-action länkar för vanliga handlingar samt att använda mobila tekniker som GPS för att anpassa innehållet till användarens nuvarande position.

Anpassa för touchscreen

En viktig aspekt av mobilanpassningen är att se till att navigationen med en pekskärm görs så smärtfritt som möjligt. Jämför med datormusen är pekskärmen mycket mindre exakt, vilket gör det lätt att klicka fel. Försök därför att göra knappar och andra klickbara element tillräckligt stora och att se till att inte placera dem för nära varandra. Undersökningar har också visat att majoriteten av mobilanvändarna använder tummarna för att navigera medans de håller i mobiltelefonen. Tänk därför på var på skärman du placerar klickbara element. Bäst är att placera det viktigaste nedtill och nära mitten av skärmen, samt att undvika hörnen i högsta mån. Hur vi håller surfplattor är lite mer varierande. I de fall då den hålls med båda händerna och navigeras med enbart tummarna bör dock främst mitten och den nedre delen av skärmen hållas fria från viktiga element.

Mobilsäkra zoner. Den gröna ytan är den mest bekväma att nå med tummen. Undvik de röda.

Anpassa innehållet för små skärmar

På en stor datorskärm kan man komma undan med relativt liten text och att visa mycket information samtidigt. När skärmytan krymper till de mobila enheternas storlek så ändras däremot situationen. Även om upplösningen i pixlar på senare år har ökats rejält även på mobila enheter är ytan fortfarande mindre i kvadratcentimeter räknat. För att inte trötta ut ögonen och orsaka besvär för den mobila användaren måste allt visuellt innehåll inte enbart krympa, utan istället effektiviseras i hur det presenteras och hur skärmytan används. Ta exempelvis bort överflödiga tomutrymmen och låt text och annat innehåll flyta från kant-till-kant på de minsta enheterna. Använd enbart små kantmarginaler. Tänk även på att texter måste vara läsbara med tydlig typografi och typsnitt. En tumregel för typsnittstorlek är att inte använda mindre än 16px för paragraftext.

Optimera laddningshastigheten

Som nämndes ovan är en webbsidas laddningshastighet extra viktig vid mobil uppkoppling. Ett enkelt knep för att förbättra laddningshastigheten är att använda mindre bildstorlekar i mobilversionen. Eftersom skärmen ofta är mindre kommer skillnaden i upplösning inte att vara märkbar. Man kan också se över komprimeringen av bildelement och ’minifiera’ extern kod som JavaScript och CSS. Andra råd för den lite mer avancerade användaren är att se över hur extern kod laddas in, minimera http-omdirigeringar samt att korta ner HTML-renderingenstiden hos server-backendkoden.

Testa din sida regelbundet

Sist, men inte minst måste du testa din sida för att försäkra dig om en bra mobil användarupplevelse. Det bästa du kan göra är att själv testa den på olika enheter (ju fler desto bättre) och försöka utföra de vanligaste uppgifterna en mobil besökare till din sida kan tänkas vilja utföra. Håll koll om nåt är svårt att utföra eller om exempelvis läsbarheten kan förbättras. Ännu bättre är att låta andra testa den också. Gärna personer som aldrig besökt sidan förut för att få nya och färska perspektiv. Om du saknar tillgång till enheter finns det ofta emulatorer inbyggda i din webbläsare (se exempelvis Chrome Developer Tools). Alternativt kan du använda en av flera tillgängliga online-emulatorer. Ett antal testverktyg finns också att tillgå som kan fungera som komplement till den manuella testningen. Dessa analyserar och betygsätter din sida utifrån olika kriterier och kan ge råd på förbättringar. Bland dessa kan rekommenderas Googles mobilvänlighetstest och deras Web Vitals-verktyg, som bland annat mäter laddningstider och fördröjningar i svarstid som påverkar användarupplevelsen

Mobilanpassa din sajt idag

Om du inte optimerar din hemsida för mobila användare riskerar du att missa potentiella besökare och troligen förlora några du redan har.

Vare sig du har en enkel företagshemsida eller en webbshop med tusentals dagliga besökare behöver din sida mobilanpassas. För att lyckas med detta måste ett antal principer och förutsättningar förstås som karakteriserar den mobila upplevelsen. Tänk igenom hur och varför din mobila användare besöker din hemsida. När och under vilka förhållanden – både tekniska och fysiska – sker dessa?

Om du nu äntligen har mobilanpassat din sida, vad händer nu? Hur mobiler och andra enheter ser ut och fungerar är under konstant förändring, så det gör idag kanske inte funkar lika bra imorgon. Därför kan det vara bra att kontinuerligt forsätta att testa och förbättra din sida samt att hela tiden fundera på dina mobila användares behov. Gör du allt detta garanterar vi att du kommer att lyckas, eller i alla fall lyckas bättre!

Vill du ha hjälp med att mobilanpassad din sida eller har du några frågor? Kontakta oss gärna på mail [email protected] eller via vår kontaktsida så hjälper vi dig!

Av: Jenkler
←  Tillbaka