Har du öppnat din sajt på en telefon och sett något som inte alls liknar det du byggde? En sajt som är trasig på mobilen hör till de vanligaste klagomålen från varumärkesägare som designade sin sajt på en dator och aldrig kollade hur den fungerade på en mindre skärm. Den här artikeln går igenom vad som orsakar problemet, hur du tar reda på vilket fel som drabbar din sajt och vad du gör för att åtgärda det.
Mer än hälften av all webbtrafik kommer nu från mobila enheter. Andelen har ökat i flera år och fortsätter att stiga. Om en besökare kommer till din sajt från en telefon och möter text som är för liten för att läsa, bilder som spiller utanför skärmen eller en navigeringsmeny som inte reagerar på en tryckning är chansen låg att personen stannar. Hög avvisningsfrekvens på mobil är ofta det första mätbara tecknet på att något är trasigt, och många varumärkesägare kopplar inte ihop de två förrän de kollar sin analys.
Det frustrerande är att problem med mobilvisning inte alltid syns i datorvyn som du använder för att sköta sajten. Felen tenderar att dyka upp först när du tittar på den riktiga telefonskärmen, vilket betyder att de kan passera obemärkta i veckor eller månader medan besökare i tysthet lämnar.
Varför ser en sajt trasig ut på mobilen?
Det finns ingen enskild orsak till att en sajt är trasig på mobilen. Problemet är oftast ett av fem underliggande fel, och i vissa fall en kombination av flera. Vilken orsak som drabbar din sajt avgör vilken åtgärd som gäller.
Sajten byggdes inte med responsiv design
En responsiv sajt justerar sin layout automatiskt utifrån bredden på skärmen som visar den. På en dator kan innehållet visas i tre kolumner. På en surfplatta i två. På en telefon i en enda kolumn som du scrollar i. Justeringen sker med CSS-regler som kallas media queries och som talar om för webbläsaren hur innehållet ska ordnas om vid olika skärmstorlekar.
Om en sajt byggdes utan responsiv design visar den samma fasta layout oavsett skärmstorlek. En sajt som är designad för en datorskärm som är 1 440 pixlar bred försöker visas i den bredden på en telefonskärm som är ungefär 390 pixlar bred. Resultatet är en hopkrympt, utzoomad sida där texten inte går att läsa och knapparna är för små för att trycka på. Innehållet finns tekniskt sett där, men det går inte att använda.
Äldre sajter, särskilt sådana som byggdes med dra-och-släpp-redigerare som inte prioriterade mobilvisning, har ofta det här problemet. Sajter som kodats för hand utan tanke på mobil först kan också hamna i den kategorin.
Bilderna är inte anpassade för mobilskärmar
En bild som laddats upp i 3 000 pixlars bredd och visas utan begränsningar försöker visas i full storlek oavsett var den ses. På en dator kan webbläsaren krympa den så att den får plats. På en mobil enhet utan responsiva storleksregler kan bilden sticka ut förbi skärmkanten, vilket ger horisontell scrollning eller en layout som rasar.
Även när bilderna inte sticker ut påverkar stora, ooptimerade bilder sajtens hastighet på mobil. En bild som laddar långsamt och hindrar resten av sidan från att visas är ett slags trasigt beteende även när layouten tekniskt sett håller ihop. Besökare på mobila anslutningar är särskilt känsliga för det.
Element med fast bredd sticker ut utanför skärmen
Element med fast bredd är behållare, div-element, tabeller eller andra HTML-element som har fått en bestämd bredd i pixlar i stilmallen i stället för en procentsats eller en flexibel enhet. En behållare som är inställd på 900 pixlars bredd visas rätt på en dator men sticker ut förbi kanten på en telefonskärm, så att användaren måste scrolla i sidled för att se hela innehållet. Horisontell scrollning på en sajt är nästan alltid ett tecken på att element med fast bredd sticker ut.
Tabeller är ofta boven. En pristabell eller jämförelsetabell som byggts i HTML med fasta kolumner kan kollapsa dramatiskt på mobil, så att texten staplas på sätt som är omöjliga att läsa. Samma sak gäller sidofält, inbäddade widgetar och alla element som kodats med en uttrycklig bredd i pixlar som överstiger utrymmet på telefonskärmen.
Teckenstorleken är för liten för att läsa utan att zooma
Text som går att läsa bra i 14 pixlar på en datorskärm kan bli oläslig på en telefon, särskilt på skärmar med hög pixeltäthet där det fysiska antalet pixlar är mycket högre än den logiska skärmstorleken. Om en besökare måste nypa och zooma för att läsa ditt innehåll är upplevelsen trasig även om layouten tekniskt sett är hel.
Den rekommenderade minsta teckenstorleken för brödtext på mobil är 16 pixlar. Allt under det riskerar att inte vara läsbart på en stor del av enheterna. Mindre text signalerar också till sökmotorer att sidan inte är optimerad för mobil, vilket kan påverka hur sajten rankas och indexeras.
Navigeringen kollapsar illa eller fungerar inte med touch
Navigeringsmenyer för dator byggs ofta som horisontella fält med rullgardinsval som visas när du håller muspekaren över. Det finns ingen hover på en pekskärm. En meny som är beroende av hover fungerar helt enkelt inte på en telefon. Besökare trycker på menyvalet och ingenting händer, eller så hamnar de på fel sida eftersom hover-läget som skulle visa en undermeny aldrig aktiveras.
Även navigering som tekniskt fungerar med touch kan vara trasig i praktiken om tryckytorna är för små eller för nära varandra. Den allmänna riktlinjen för tryckytor på mobil är minst 44 gånger 44 pixlar. Mindre ytor leder till missade tryck, oavsiktlig navigering och frustrerade besökare som tycker att det är enklare att lämna sajten än att hitta det de kom för.
Så kollar du om din sajt är mobilanpassad
Det snabbaste sättet är att öppna din sajt på en riktig telefon. Använd både din egen enhet och, om möjligt, ett annat märke och en annan modell. Det som ser bra ut på en telefon kan visas annorlunda på en annan på grund av skillnader i skärmupplösning, webbläsarens renderingsmotor och version av operativsystemet.
Webbläsarens utvecklarverktyg har en inbyggd mobilsimulering. I de flesta webbläsare för dator öppnas utvecklarpanelen med F12. Med en ikon för enhetsfältet kan du simulera olika skärmstorlekar och enhetstyper. Det är användbart för snabba kontroller, men det är inte en fullständig ersättning för tester på riktiga enheter, eftersom simulerade miljöer inte återger verkligt touchbeteende, teckenrendering eller nätverksförhållanden.
Googles test för mobilvänlighet, som finns i Google Search Console, utvärderar dina sidor och flaggar specifika problem med mobilanvändbarhet. Det hittar problem som text som är för liten för att läsa, klickbara element som ligger för nära varandra och innehåll som inte ryms i visningsområdet. Rapporten ger detaljer på sidnivå så att du ser vilka sidor som underkänns och vilka som godkänns.
Om du kollar din analysdata får du ett beteendelager ovanpå den tekniska bilden. Om din avvisningsfrekvens på mobil är betydligt högre än på dator pekar skillnaden ofta på ett visnings- eller användbarhetsproblem på telefoner. Artikeln om hög avvisningsfrekvens på mobil förklarar hur du läser de här signalerna och vad som får besökare att lämna direkt på mindre skärmar.
Så åtgärdar du en sajt som ser trasig ut på mobilen
Rätt åtgärd beror på vilken orsak som ger problemet. Var och en av de fem orsakerna ovan har en motsvarande lösning.
Byt till en responsiv layout
Om sajten inte alls är responsiv är åtgärden antingen att bygga om den på ett responsivt ramverk eller att byta till en plattform som som standard ger responsiv HTML. Det går att lägga till responsivt beteende på en icke-responsiv sajt i efterhand, men det är ofta mer arbetskrävande än att bygga om från en responsiv startpunkt. Om sajten ligger på en modern plattform som stöder responsiva teman eller mallar är det oftast snabbare att byta till en responsiv mall.
Ändra storlek på bilderna och begränsa dem
Bilder bör laddas upp i den faktiska visningsstorlek som behövs, inte i sin ursprungliga exportupplösning. För de flesta bilder på en sajt räcker en maxbredd på 1 200 pixlar för skärmar med hög pixeltäthet och håller samtidigt filstorlekarna hanterbara. CSS-regler som ställer in max-width: 100% på bilder ser till att de aldrig sticker ut ur sin behållare oavsett skärmbredd. Den enda regeln löser de flesta problem med bilder som sticker ut, utan att du behöver ändra storlek på varje bild för sig.
Byt fasta bredder mot flexibla enheter
Fasta bredder i pixlar på behållare, tabeller och andra layoutelement bör bytas mot bredder i procent eller flexibla CSS-enheter som em, rem eller vw. En behållare som är inställd på width: 90% i stället för width: 900px skalas rätt vid alla skärmstorlekar. För tabeller kan du lägga till en CSS-regel som gör tabeller scrollbara i sidled inom sin behållare, så att de inte förstör hela layouten på smala skärmar.
Öka teckenstorlekarna för mobil
Brödtext på mobil bör vara minst 16 pixlar. Om stilmallen för dator definierar en mindre storlek kan en media query för mobila skärmbredder åsidosätta den. Även rubrikstorlekarna bör ses över, eftersom många rubrikstilar som ser proportionerliga ut på en dator blir alldeles för stora på en telefon och trycker ner annat innehåll under skärmens nederkant innan besökaren har läst något.
Byt ut hover-baserad navigering mot en mobilmeny
Standardlösningen för mobilnavigering är en hopfällbar meny, ofta kallad hamburgermeny, som öppnas med en tryckning i stället för hover. De flesta responsiva ramverk och sajtbyggare har det mönstret som standard. Om den nuvarande sajtens navigering inte har någon mobilvariant kräver det antingen att du ändrar stilmallen och JavaScript eller att du byter till ett tema som har mobilnavigering inbyggt. Storleken på tryckytorna bör också ses över så att alla menyval uppfyller riktlinjen på minst 44 pixlar.
Om din sajt har trasiga sidor vid sidan av visningsproblem är det ofta enklare att navigera till och testa varje sida under genomgången om du åtgärdar den visuella layouten först.
Så hanterar WEMASY mobil
WEMASY:s webbplatsbyggare skapar responsiv HTML på varje sida utan att du behöver konfigurera något. Layouter flödar om automatiskt vid mobila skärmstorlekar, bilder begränsas inom sina behållare och navigeringen byter till en pekvänlig meny på telefoner och surfplattor. Teckenstorlekar, tryckytor och avstånd är alla inställda inom plattformens designsystem för att uppfylla standarder för mobilanvändbarhet, så varumärken som lanserar på WEMASY startar med en mobilanpassad sajt i stället för att behöva anpassa den i efterhand.
Se vad som ingår på WEMASY:s webbplatsbyggare eller titta på tillgängliga planer på prissidan.
Vanliga frågor
Varför ser min sajt bra ut på dator men trasig på mobilen?
Det beror vanligtvis på att sajten byggdes eller designades främst för visning på dator, utan responsiva CSS-regler som anpassar layouten för mindre skärmar. Webbläsaren på datorn har tillräckligt med bredd för att visa den fasta layouten som avsett. En telefonskärm har inte det, så element sticker ut, överlappar eller skalas ner tills de inte går att läsa. Det snabbaste sättet att se vad mobilbesökare upplever är att kolla sajten i webbläsarens mobilsimulering eller på en riktig enhet. Med WEMASY:s webbplatsbyggare kan du sätta upp det direkt på din sajt.
Påverkar en trasig mobillayout min placering på Google?
Ja. Google använder mobile-first-indexering, vilket betyder att mobilversionen av en sida är det Google främst utvärderar för ranking. En sajt med problem i mobilvisningen, liten text eller innehåll som sticker ut ur visningsområdet får lägre betyg för användbarhet, vilket påverkar sökresultaten i stort. Att åtgärda mobilproblem är både en förbättring av användarupplevelsen och en vinst för SEO.
Vad orsakar horisontell scrollning på en mobilsajt?
Horisontell scrollning på mobil pekar nästan alltid på ett element med fast bredd i pixlar som är större än telefonskärmens bredd. Vanliga bovar är tabeller, sidofält, inbäddat innehåll, bilder utan breddbegränsning och behållare som är inställda på en bestämd bredd i pixlar i stället för en procentsats. Om du hittar elementet som sticker ut i webbläsarens utvecklarverktyg och sedan byter den fasta bredden mot en procentsats, eller lägger till kontroll av överflöde på dess överordnade behållare, löser det oftast problemet.
Hur testar jag om min sajt är mobilanpassad?
Öppna sajten på en riktig telefon och scrolla igenom varje viktig sida. Öppna den sedan i utvecklarverktygen i en webbläsare för dator och använd enhetssimuleringen för att förhandsgranska i flera skärmbredder. För en strukturerad granskning kan du köra sidorna genom rapporten för mobilanvändbarhet i Google Search Console, som flaggar specifika problem som text som är för liten, klickbara element som ligger för nära varandra och problem med inställningen av visningsområdet. Båda tillvägagångssätten tillsammans ger den mest kompletta bilden.
Kan jag åtgärda en trasig mobilsajt utan att bygga om allt?
Det beror på hur sajten ursprungligen byggdes. Om sajten körs på en plattform som stöder responsiva teman är det ofta den snabbaste åtgärden att byta till ett responsivt tema, och då behöver du inte bygga om innehållet från grunden. Om sajten är kodad för hand med en icke-responsiv layout kan riktade CSS-ändringar med media queries lösa specifika problem utan en fullständig ombyggnad. Men om layouten är byggd på tabeller eller i hög grad bygger på fasta bredder genom hela sajten är en fullständig ombyggnad på en responsiv grund oftast effektivare än att lappa enskilda problem.
Varför lämnar besökare min sajt efter bara några sekunder på mobilen?
När besökare hamnar på en sida med visningsproblem, oläslig text, trasig navigering eller bilder som laddar långsamt lämnar de snabbt, eftersom sidan inte uppfyller deras grundläggande förväntningar på användbarhet. Mobilbesökare har mindre tålamod med friktion än besökare på dator. Om layouten är trasig eller långsam går de tillbaka till sökresultaten och klickar på en konkurrents resultat i stället. Artikeln om besökare som lämnar din sajt går igenom hela spannet av skäl till att folk lämnar snabbt och hur du tar reda på vilket som drabbar din sajt.