7 WordPress-tips för en mobilvänlig webbplats

Det finns inget värre än att ha en snygg datorwebbplats och en mobilsajt som inte fungerar korrekt.

De flesta designfixar är enkla men kräver uppmärksamhet om du vill att besökare ska stanna på din webbplats medan de surfar på en mobil enhet.

Den här artikeln kommer att belysa sju problem med mobilanpassade webbplatser och korrigeringar för dem.

  • Gjorda ändringar visas inte(Are) på mobilen(Mobile)
  • Ovänlig navigering
  • Responsiv layout(Responsive Layout) slutar plötsligt fungera
  • Det tar för lång tid att ladda bilder
  • Det viktigaste innehållet är inte uppenbart
  • För mycket information
  • Data för små skärmar

Mobilvänliga webbplatsuppdateringar dyker inte upp(Mobile Friendly Website Updates Not Showing Up)

Du har precis lagt ner mycket tid på att uppdatera din webbplats. De ser bra ut på ditt skrivbord men dyker inte upp på din mobila enhet.

En av de vanligaste orsakerna är cachning. Din mobilwebbläsare kan visa en gammal version av din webbplats som du tidigare laddat ner. En annan anledning kan vara att din webbplats håller fast vid den gamla versionen av din sida och inte visar dina ändringar.

Om detta är problemet måste du rensa cachen för att ladda ner den reviderade versionen. En caching-plugin som WP Super Cache , W3 Total Cache eller WP Fastest Cache kan hjälpa till att lösa detta problem.

Nedan finns fyra steg som hjälper dig att tömma din webbplatscache och webbläsare så att den nya versionen kan visas på din mobilvänliga webbplats.

  1. Uppdatera din webbläsare flera gånger på din stationära och mobila enhet.
  2. Testa din webbplats på olika mobila enheter.
  3. Rensa din webbplats med ett caching-plugin.
  4. Kontrollera med ditt värdföretag för att se om det finns ett annat cachningssystem på din server som behöver rensas.

Ovänlig navigering(Unfriendly Navigation)

Det kan vara utmanande att skapa en navigeringsmeny som fungerar bra på mobila enheter. Om din webbplatsnavigering har många objekt och undermenyer är det ännu svårare att klämma ihop allt på en mindre skärm.

Om du till exempel bara har tre eller fyra objekt i din webbplatsnavigering bör det se bra ut på mobilen. Men om du har fler objekt och undermenyer kommer de att staplas ovanpå varandra och se trånga ut.

Nedan(Below) finns några sätt att lösa det här problemet för en mobilanpassad webbplats:

  • Förvandla din navigering till en rullgardinsmeny för mobila enheter.
  • Visa din navigeringsmeny som blockelement så att de visas vertikalt.
  • Använd en menyikon som kan växlas för att ta mindre plats.
  • Skapa en mobil navigeringsmeny med jQuery.
  • Använd Hamburger -menyn (Många teman inkluderar detta som ett alternativ eller så kan du använda ett plugin( use a plugin) .)

Responsiv layout slutar plötsligt fungera(Responsive Layout Stops Working Suddenly)

Om din mobilanpassade sida plötsligt slutar fungera kan det bero på ett plugin på din sida.

Att installera ett nytt plugin eller en uppdatering av ett befintligt plugin kan orsaka en konflikt med andra som påverkar din responsiva layout.

Börja med att avaktivera varje plugin ett i taget för att se om det är orsaken. Inaktivera inte dem alla på en gång, annars vet du inte vilket plugin som kan vara boven.

Kodändringar(Code) är en annan möjlig orsak. Om du har ändrat någon kod av misstag eller avsiktligt, återställ den ursprungliga kodbasen och se om din responsiva webbplats börjar fungera igen.

När du kontrollerar din webbplats för mobil lyhördhet bör du alltid testa den på en mobil enhet. 

Ibland verkar det fungera när du ändrar storlek på webbläsarfönstret på skrivbordet men visas inte korrekt på mobilen.

Om en kodrad saknas i en HTML -huvudfil kan den bryta den responsiva designen. Denna enda rad med saknad kod kommer att få din mobila enhet att anta att webbplatsen du tittar på är en webbplats i full storlek.

Webbplatsen som renderas kommer att vara storleken på viewporten (storleken på det område på webbsidan som är synligt för användaren).

För att fixa din mobilvänliga webbplats, lägg till följande kodrad i rubriken:

<meta name=”viewport” content=”width=device-width”>

Ibland när ett tema uppdateras kan den här koden försvinna.

Det tar för lång tid att ladda bilder(Images Are Taking Too Long to Load)

Att optimera bilder och minska bildfilstorleken(reducing image file size) är vettigt. Stora bilder som inte är optimerade kan sakta ner laddningshastigheten för dina webbsidor. Detta kan vara frustrerande för mobilanvändare.

WordPress version 4.4 och högre serverar automatiskt den minsta versionen av en bild på din server.

Om du redan kör den senaste versionen av WordPress , men din webbplats fortfarande inte laddas tillräckligt snabbt, kan du:

Det viktigaste innehållet är inte uppenbart(Most Important Content Isn’t Obvious)

Vissa webbplatser är laddade med mycket onödigt innehåll för att fylla det tomma utrymmet när de öppnas på ett skrivbord.

Webbplatser som utvecklats utan att vara medvetna om mobilanvändare faller i allmänhet under denna kategori. Dessa webbplatser tar mer tid och bandbredd att ladda.

Om sidorna inte är utformade på lämpligt sätt för mobila enheter, kanske en del av innehållet inte visas på mobilen utan mycket rullning.

För det mesta kommer ett element på din webbsida att se ut på ett sätt på en dator och helt annorlunda på en mobil enhet.

Till exempel kommer en prissida med tre kolumner att visa dem sida vid sida på en dator.

Men på en mobil enhet staplas kolumnerna ovanpå varandra eftersom skärmstorleken är mindre. Detta beteende är att förvänta sig.

Se(Make) till att din pristabell är i en topposition på din webbsida så att den visas först när den visas på mobilen. Om du har mycket text över bordet måste mobilanvändare scrolla ner för att se det och kanske inte.

För den mest optimala mobilanvändarupplevelsen, placera de mest kritiska delarna av innehållet högst upp på sidan. Om en användare behöver scrolla mycket innan de kan se ditt innehåll, kommer de förmodligen inte att göra det.

För mycket information(Too Much Information)

Webbplatser med komplicerade användargränssnittselement som tabeller, flerstegsformulär och avancerade sökfunktioner kan ge en dålig mobil användarupplevelse.

Dessa element innehåller för mycket information som kan tränga ihop en mobilskärm och störa en användare att hitta den information de vill ha.

Ett tillvägagångssätt är att ta bort eller dölja visst innehåll från mobilanvändare. Detta är dock inte en idealisk lösning för besökare som vill ha tillgång till dessa element.

För att undvika detta problem, optimera din mobilvänliga webbplats så mycket som möjligt. Ta också bort alla onödiga element samtidigt som du fokuserar på kärnstrukturen på din webbplats.

Data för små skärmar(Data For Small Screens)

Komplexa tabeller med många rader och kolumner kan vara ett problem när de visas på små mobila skärmar. Den bästa lösningen är att använda responsiva tabeller.

Ett plugin som WP Responsive Table kan göra detta enkelt att åstadkomma.

Som med pristabellen ovan, kommer kolumnerna att staplas när de visas på en mobil enhet för att passa den mindre skärmen.

Andra sätt att visa data på mobila enheter inkluderar:

  • Skapa en mindre tabell utan rutnätslayout för att undvika behovet av horisontell rullning.
  • Vänd ett bord på sidan för att passa bättre på en mindre skärm.
  • Ersätter större tabeller med mindre som länkar till den fullständiga versionen.
  • Konvertera tabeller till cirkeldiagram.

Eftersom mobilanvändningen växer exponentiellt är det absolut nödvändigt att företagswebbplatser är optimerade med mobilanpassade versioner. Förbättra(Enhance) användarupplevelsen utan att offra funktionalitet genom att följa stegen ovan.

Du bör också alltid övervaka din webbplats prestanda och göra justeringar när det behövs för att förbättra prestanda och användarupplevelse.



Alexander Henriksson

About the author

Jag är en erfaren mjukvaruingenjör med över 10 års erfarenhet av att utveckla och hantera användarkonton, familjesäkerhet och Google Chrome-teknik. Jag har en stark grund inom matematik och datavetenskap som jag använder för att skapa tydliga, kortfattade beskrivningar av mina färdigheter.


Related posts