7 WordPress-tips voor een mobielvriendelijke website

Er is niets erger dan het hebben van een mooie desktopwebsite en een mobiele site die niet correct werkt.

De meeste ontwerpcorrecties zijn eenvoudig, maar vereisen wel aandacht als u wilt dat bezoekers op uw site blijven terwijl ze op een mobiel apparaat browsen.

In dit artikel worden zeven mobielvriendelijke websiteproblemen en oplossingen voor deze besproken.

  • Aangebrachte wijzigingen worden(Are) niet weergegeven op mobiel(Mobile)
  • Onvriendelijke navigatie
  • Responsieve lay(Responsive Layout) -out werkt plotseling niet meer
  • Het duurt te lang om afbeeldingen te laden
  • Belangrijkste inhoud is niet duidelijk
  • Te veel informatie
  • Gegevens voor kleine schermen

Mobielvriendelijke website-updates worden niet weergegeven(Mobile Friendly Website Updates Not Showing Up)

U heeft zojuist veel tijd besteed aan het bijwerken van uw website. Ze zien er geweldig uit op uw desktop, maar worden niet weergegeven op uw mobiele apparaat.

Een van de meest voorkomende redenen is caching. Uw mobiele browser toont mogelijk een oude versie van uw site die u eerder heeft gedownload. Een andere reden kan zijn dat uw website de oude versie van uw pagina vasthoudt en uw wijzigingen niet toont.

Als dit het probleem is, moet u de cache wissen om de herziene versie te downloaden. Een caching-plug-in zoals WP Super Cache , W3 Total Cache of WP Fastest Cache kan dit probleem helpen oplossen.

Hieronder vindt u vier stappen om u te helpen uw websitecache en browser leeg te maken, zodat de nieuwe versie op uw mobielvriendelijke site kan worden weergegeven.

  1. Ververs uw browser meerdere keren op uw desktop en mobiele apparaat.
  2. Test uw website op verschillende mobiele apparaten.
  3. Maak uw site leeg met een caching-plug-in.
  4. Neem contact op met uw hostingbedrijf om te zien of er een ander cachingsysteem op uw server staat dat moet worden gewist.

Onvriendelijke navigatie(Unfriendly Navigation)

Het kan een uitdaging zijn om een ​​navigatiemenu te maken dat goed werkt op mobiele apparaten. Als uw websitenavigatie veel items en submenu's heeft, is het nog lastiger om alles op een kleiner scherm te persen.

Als u bijvoorbeeld slechts drie of vier items in uw websitenavigatie heeft, zou deze er op mobiel goed uit moeten zien. Als u echter meer items en submenu's heeft, worden deze op elkaar gestapeld en zien ze er druk uit.

Hieronder(Below) staan ​​een paar manieren om dit probleem voor een mobielvriendelijke website op te lossen:

  • Verander uw navigatie in een vervolgkeuzemenu voor mobiele apparaten.
  • Geef je navigatiemenu weer als blokelementen, zodat ze verticaal verschijnen.
  • Gebruik een menupictogram dat kan worden omgeschakeld om minder ruimte in te nemen.
  • Maak een mobiel navigatiemenu met jQuery.
  • Gebruik het Hamburger - menu (Veel thema's bevatten dit als optie of u kunt een plug-in gebruiken( use a plugin) .)

Responsieve lay-out werkt plotseling niet meer(Responsive Layout Stops Working Suddenly)

Als uw mobielvriendelijke site plotseling niet meer werkt, kan dit te wijten zijn aan een plug-in op uw site.

Het installeren van een nieuwe plug-in of een update van een bestaande plug-in kan een conflict met anderen veroorzaken dat van invloed is op uw responsieve lay-out.

Begin met het deactiveren van elke plug-in één voor één om te zien of dit de oorzaak is. Deactiveer ze niet allemaal tegelijk, anders weet je niet welke plug-in de boosdoener kan zijn.

Codewijzigingen(Code) zijn een andere mogelijke oorzaak. Als je per ongeluk of opzettelijk code hebt gewijzigd, herstel dan de oorspronkelijke codebase en kijk of je responsieve website weer begint te werken.

Wanneer u uw site controleert op mobiele responsiviteit, moet u deze altijd op een mobiel apparaat testen. 

Soms lijkt het te werken wanneer het formaat van het browservenster op uw bureaublad wordt gewijzigd, maar wordt het niet correct weergegeven op mobiel.

Als een regel code ontbreekt in een HTML -headerbestand, kan dit het responsieve ontwerp breken. Deze enkele regel met ontbrekende code zorgt ervoor dat uw mobiele apparaat ervan uitgaat dat de site die u bekijkt een volledige website is.

De weergegeven site heeft de grootte van de viewport (de grootte van het gebied van de webpagina dat zichtbaar is voor de gebruiker).

Om uw mobielvriendelijke site te repareren, voegt u de volgende regel code toe aan het kopgedeelte:

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

Soms kan deze code verdwijnen wanneer een thema wordt bijgewerkt.

Het duurt te lang om afbeeldingen te laden(Images Are Taking Too Long to Load)

Het optimaliseren van afbeeldingen en het verkleinen van de bestandsgrootte van afbeeldingen(reducing image file size) is logisch. Grote afbeeldingen die niet zijn geoptimaliseerd, kunnen de laadsnelheid van uw webpagina's vertragen. Dit kan frustrerend zijn voor mobiele gebruikers.

WordPress versie 4.4 en hoger biedt automatisch de kleinste versie van een afbeelding op uw server.

Als je al de nieuwste versie van WordPress gebruikt, maar je site nog steeds niet snel genoeg laadt, kun je:

Belangrijkste inhoud is niet duidelijk(Most Important Content Isn’t Obvious)

Sommige websites zijn geladen met veel onnodige inhoud om de lege ruimte te vullen wanneer ze op een desktop worden geopend.

Websites die zijn ontwikkeld zonder zich bewust te zijn van mobiele gebruikers vallen over het algemeen onder deze categorie. Deze sites hebben meer tijd en bandbreedte nodig om te laden.

Als de pagina's niet geschikt zijn ontworpen voor mobiele apparaten, wordt een deel van de inhoud mogelijk niet op mobiele apparaten weergegeven zonder veel te scrollen.

Meestal ziet een element op uw webpagina er op een computer op een bepaalde manier uit en op een mobiel apparaat totaal anders.

Een prijspagina met drie kolommen toont ze bijvoorbeeld naast elkaar op een computer.

Op een mobiel apparaat worden de kolommen echter op elkaar gestapeld omdat de schermgrootte kleiner is. Dit gedrag is te verwachten.

Zorg(Make) ervoor dat uw prijstabel op een toppositie op uw webpagina staat, zodat deze als eerste wordt weergegeven wanneer deze op mobiel wordt bekeken. Als je veel tekst boven je tafel hebt staan, zullen mobiele gebruikers naar beneden moeten scrollen om het te zien en misschien niet.

Voor de meest optimale mobiele gebruikerservaring plaatst u de meest kritische stukjes inhoud bovenaan de pagina. Als een gebruiker veel moet scrollen voordat ze uw inhoud kunnen bekijken, zullen ze dat waarschijnlijk niet doen.

Te veel informatie(Too Much Information)

Sites met gecompliceerde gebruikersinterface-elementen zoals tabellen, formulieren met meerdere stappen en geavanceerde zoekfuncties kunnen een slechte mobiele gebruikerservaring opleveren.

Deze elementen bevatten te veel informatie die een mobiel scherm kan verdringen en een gebruiker kan hinderen bij het vinden van de informatie die hij zoekt.

Een benadering is om bepaalde inhoud voor mobiele gebruikers te verwijderen of te verbergen. Dit is echter geen ideale oplossing voor bezoekers die toegang willen hebben tot deze elementen.

Om dit probleem te voorkomen, moet u uw mobielvriendelijke site zoveel mogelijk optimaliseren. Verwijder ook alle onnodige elementen terwijl u zich concentreert op de kernstructuur van uw website.

Gegevens voor kleine schermen(Data For Small Screens)

Complexe tabellen met veel rijen en kolommen kunnen een probleem zijn bij weergave op kleine mobiele schermen. De beste oplossing is om responsieve tabellen te gebruiken.

Een plug-in zoals WP Responsive Table kan dit gemakkelijk maken.

Net als bij de bovenstaande prijstabel, worden de kolommen, wanneer ze op een mobiel apparaat worden bekeken, gestapeld om op het kleinere scherm te passen.

Andere manieren om gegevens op mobiele apparaten weer te geven zijn:

  • Een kleinere tabel maken zonder de rasterlay-out om horizontaal scrollen te voorkomen.
  • Een tafel op zijn kant kantelen om beter op een kleiner scherm te passen.
  • Grotere tabellen vervangen door kleinere die linken naar de volledige versie.
  • Tabellen omzetten in taartdiagrammen.

Aangezien mobiel gebruik exponentieel groeit, is het absoluut noodzakelijk dat zakelijke websites worden geoptimaliseerd met mobielvriendelijke versies. Verbeter(Enhance) de gebruikerservaring zonder in te boeten aan functionaliteit door de bovenstaande stappen te volgen.

U moet ook altijd de prestaties van uw site in de gaten houden en indien nodig aanpassingen doorvoeren om de prestaties en gebruikerservaring te verbeteren.



Pim van der Meulen

About the author

Ik ben een webontwikkelaar met ervaring in Firefox en Google Docs. Ik heb een diploma in bedrijfskunde van de Universiteit van Florida. Mijn vaardigheden omvatten: website-ontwikkeling, contentmanagementsysteem (CMS), data-analyse en gebruikersinterfaceontwerp. Ik ben een ervaren consultant die uw team kan helpen bij het bouwen van effectieve websites en applicaties.


Related posts