Över 60 procent av all webbtrafik kommer nu från mobila enheter. En webbplats som inte är mobilanpassad sviker de flesta som besöker den, och det är inget udda undantagsfall. Att få mobilen rätt är ingen bonusfunktion. Det är den lägsta nivån som förväntas av en företagswebbplats.
Att göra en webbplats mobilanpassad betyder att ge mobilbesökare samma kvalitet på upplevelsen som datorbesökare. Inte en nedskalad version som tekniskt sett laddas, utan en webbplats där texten går att läsa, navigeringen fungerar, bilderna visas rätt och formulär faktiskt går att skicka från en mobil utan irritation.
Den här artikeln går igenom de praktiska förändringar som gör en webbplats verkligt mobilanpassad, från navigering och text till bilder, formulär och hastighet.
Vad betyder mobilanpassad i praktiken?
En mobilanpassad webbplats är en där varje funktion fungerar som den ska på en mobil utan omvägar. Texten går att läsa vid standardzoom. Navigeringen öppnas och stängs smidigt. Knapparna är tillräckligt stora för att trycka på utan att träffa fel element. Bilder laddas och visas rätt. Formulär går att fylla i och skicka utan irritation.
Skillnaden mellan tekniskt mobilkompatibel och verkligt mobilanpassad spelar roll. En webbplats är tekniskt kompatibel om den inte går sönder på en mobil. Den är verkligt mobilanpassad om det känns lika naturligt att använda den på mobil som på dator. Skillnaden ligger i detaljerna. Avstånd, textstorlek, storlek på tryckytor och laddtid avgör om upplevelsen känns rätt eller bara knappt fungerar.
Grunden för en mobilanpassad webbplats är responsiv design, som får layouten att anpassa sig automatiskt till olika skärmstorlekar. Artikeln om vad responsiv design är förklarar hur det fungerar på teknisk nivå.
Hur testar du om din webbplats är mobilanpassad?
Det mest pålitliga testet är att gå igenom din egen webbplats på en riktig mobil. Inte webbläsarens mobilförhandsvisning. Inte ett datorfönster som dragits ihop till en smal kolumn. En riktig mobil, med tummarna, så som en besökare skulle använda den.
Gå igenom varje sida. Öppna navigeringen och kontrollera att varje länk går att nå. Läs texten och bekräfta att den är läsbar utan zoom. Tryck på varje knapp och bekräfta att den svarar rätt. Fyll i alla formulär och skicka dem. Kontrollera att bilder laddas och visas rätt. Kontrollera att inget kräver sidledsscroll.
Sökmotorer erbjuder också gratis mobiltestverktyg. Ange din webbadress så flaggar verktyget specifika problem, som text som är för liten att läsa, klickbara element som ligger för nära varandra eller innehåll som är bredare än skärmen. För bredare vägledning om vad du ska kontrollera innan en webbplats går live tar vad du bör veta innan du lanserar din webbplats upp mobiltestning som en del av hela processen före lansering.
Hur får du navigeringen att fungera på mobil?
Navigeringen är det som oftast går sönder i mobilupplevelsen. En vågrät meny som sträcker sig över hela bredden på en datorskärm har ingenstans att ta vägen på en mobilskärm. Standardlösningen är en hopfällbar meny som öppnas med en knapp, oftast i det övre hörnet.
Menyknappen måste vara omedelbart igenkännbar. Ikonen med tre streck har blivit en allmänt förstådd konvention för hopfällda navigeringsmenyer. När menyn öppnas ska den täcka tillräckligt stor del av skärmen för att vara lätt att läsa och trycka på. Menyvalen behöver tillräckligt med lodrätt avstånd så att ett finger kan trycka på ett val utan att träffa det ovanför eller nedanför.
Håll mobilmenyn kort. Om din datornavigering har många menyval, fundera på vilka som mobilbesökare oftast behöver och om sekundära val kan grupperas eller tas bort från toppnivån. En renare mobilmeny är enklare att använda. Artikeln om vad webbplatsnavigering är tar upp navigeringens struktur och användbarhet på alla enheter.
Hur ska text och typsnitt se ut på mobil?
Text som är lätt att läsa på en dator kan bli obehagligt liten på en mobil om typsnittsstorleken är satt för lågt. En lägsta brödtextstorlek på 16 pixlar är den vanliga standarden för läsbarhet på mobil. Under det kräver texten zoom, och det gör de flesta besökare inte.
Radlängden spelar också roll. På dator kan en textrad vara 600 till 700 pixlar bred. På mobil bryts samma text i mycket kortare rader. Om radavståndet är för tätt eller styckena för långa blir det obekvämt att läsa på en liten skärm. Korta stycken, generöst radavstånd och tydliga avbrott mellan avsnitten förbättrar läsbarheten.
Rubriker bör skalas ned proportionellt. En H1 som är 48 pixlar på dator kan passa bra på 28 till 32 pixlar på mobil. Om rubrikerna behåller datorstorlek på en mobil dominerar de skärmen och trycker ned själva innehållet under bildskärmens nedre kant.
Hur hanterar du bilder på mobil?
Bilder är en av de största prestandarisker på mobil. En bild i full upplösning, gjord för en datorskärm på 1 440 pixlar, är mycket större än nödvändigt när den visas på en mobilskärm på 375 pixlar. Att leverera den bilden till mobilbesökare slösar bandbredd och gör sidan märkbart långsammare.
Lösningen är att leverera lagom stora bilder till olika enheter. De flesta moderna webbplatsbyggare gör det automatiskt genom att skapa flera storlekar och leverera rätt storlek utifrån skärmen. Om du hanterar bilder manuellt, ändra storlek till den största storlek de visas i, inte den största storlek din kamera kan ge.
Var uppmärksam på hur bilder beskärs på mobil. En bred landskapsbild som ser balanserad ut på dator kan beskäras klumpigt på en hög mobilskärm. Hero-bilder och bannersektioner är de vanligaste ställena där beskärningen på dator och mobil märkbart skiljer sig åt. Artikeln om vad webbplatshastighet är förklarar hur bildoptimering påverkar sidans totala prestanda.
Vad får formulär att fungera bra på mobil?
Formulär är en punkt med mycket friktion på mobil. Att fylla i fält med ett litet pekskärmstangentbord är mer krävande än att skriva på ett vanligt tangentbord. Ju färre fält du har, desto bättre. Varje extra fält är en risk för irritation och en anledning att avbryta.
Fältens storlek spelar roll. Fälten måste vara tillräckligt stora för att träffa exakt och tillräckligt breda för att texten i dem ska vara läsbar. Etiketter ska stå ovanför varje fält, inte bara som platshållartext inuti det, eftersom platshållartext försvinner så fort någon börjar skriva.
Ställ in inmatningstyperna rätt. Ett e-postfält ska ge e-posttangentbordet. Ett telefonnummerfält ska ge sifferknappsatsen. Ett datumfält ska öppna en datumväljare. Det är små tekniska inställningar som gör upplevelsen märkbart smidigare.
Testa varje formulär på din mobil genom att fylla i det helt och skicka det. Bekräfta att det går igenom och att eventuellt bekräftelsemeddelande visas rätt. Ett kontaktformulär som skickas utan problem på dator men misslyckas på mobil tappar leads i det tysta utan att du vet om det.
Hur påverkar mobilanpassning sökrankningen?
Sökmotorer indexerar mobilversionen av din webbplats först. Det betyder att mobilupplevelsen inte bara är viktig för mobilbesökare. Det är versionen som avgör hur din webbplats förstås och rankas på alla enheter.
En webbplats som presterar dåligt på mobil, oavsett om det beror på långa laddtider, trasiga layouter eller oläslig text, rankas under jämförbara webbplatser som hanterar mobilen bra. Besökare som landar på en mobilwebbplats och lämnar direkt för att den inte fungerar skickar en tydlig signal om att sidan inte mötte deras behov. Hög avvisningsfrekvens bland mobilbesökare påverkar rankingen över tid.
Sidhastigheten på mobil är en särskild faktor. En sida som laddas på två sekunder med snabb bredbandsanslutning kan ta sex sekunder eller mer på en vanlig mobilanslutning. Optimerade bilder, få blockerande skript och en ren mallstruktur bidrar till snabbare laddtider på mobil. För en helhetsbild av hur sökoptimering fungerar täcker vad SEO är hela ämnet, inklusive tekniska faktorer.
Så hanterar WEMASY mobilen
Webbplatsbyggaren i WEMASY använder responsiva mallar som automatiskt anpassas till dator, surfplatta och mobil. Den visuella redigeraren har en mobilförhandsvisning så att du kan se hur varje avsnitt ser ut på en liten skärm medan du bygger. Bildoptimering och mobilprestanda sköts av plattformen i stället för att kräva manuell konfiguration.
Se vad som ingår i webbplatsbyggaren i WEMASY eller jämför planerna på prissidan.
Vanliga frågor
Hur vet jag om min webbplats är mobilanpassad?
Gå igenom din webbplats på en riktig mobil. Testa varje sida, varje menyval, varje formulär och varje knapp. Sökmotorer erbjuder också gratis mobiltestverktyg där du anger din webbadress och de flaggar specifika problem. Kombinationen av en manuell genomgång och en kontroll med verktyg avslöjar de problem som betyder mest. Mobilförhandsvisningar i webbläsaren är användbara under utvecklingen men återskapar inte helt upplevelsen på en riktig enhet. Med webbplatsbyggaren i WEMASY kan du sätta upp det direkt på din webbplats.
Kan jag göra en befintlig webbplats mobilanpassad utan att bygga om den?
Det beror på hur webbplatsen byggdes. På webbplatser som byggts i moderna webbplatsbyggare går mobilupplevelsen ofta att förbättra genom att justera mallens inställningar, ändra bildstorlekar eller byta till en bättre mall. Webbplatser som byggts med egen kod eller på äldre plattformar kan kräva större insatser. I vissa fall går det snabbare och ger ett bättre resultat att bygga om på en aktuell plattform än att försöka laga en äldre webbplats.
Rankas en mobilanpassad webbplats högre i sökresultaten?
Sökmotorer använder mobilversionen av din webbplats som primär version för indexering och ranking. En webbplats som fungerar bra på mobil och laddas snabbt på en mobil presterar generellt bättre än en som i första hand byggts för dator. Utöver rankingfördelen får en mobilanpassad webbplats besökare att stanna längre, sänker avvisningsfrekvensen och konverterar bättre. De här beteendesignalerna påverkar också sökprestandan på lång sikt.
Vilken är den lägsta typsnittsstorleken för en mobilwebbplats?
En brödtextstorlek på 16 pixlar är den allmänt rekommenderade miniminivån för läsbarhet på mobil. Under det blir texten svår att läsa utan zoom. Rubriker bör skalas proportionellt så att de inte överväldigar skärmen. Ett radavstånd på minst 1,5 gånger typsnittsstorleken förbättrar läsbarheten på små skärmar, särskilt i längre stycken.
Hur stora bör knapparna vara på en mobilwebbplats?
En minsta tryckyta på 44 gånger 44 pixlar rekommenderas allmänt för knappar på mobil. Det ger fingret ett tydligt mål och minskar oavsiktliga tryck på närliggande element. Knapparna bör också ha tillräckligt med utrymme mellan sig så att ett tryck på en inte registreras som ett tryck på något i närheten. Knappar med uppmaning till handling ska vara stora, visuellt tydliga och lätta att nå med tummen utan att behöva ändra greppet om mobilen.