Als u een WordPress-site mobielvriendelijk wilt maken, is deze gedetailleerde gids exclusief voor u.
Wist je dat 9 van de 10 mobiele zoekopdrachten tot actie leiden en meer dan de helft tot verkoop?
Het gebruik van mobiel internet stijgt als nooit tevoren. Het haalt het internetgebruik op desktops in, steeds meer mensen gebruiken nu smartphones en tablets om online door informatie te bladeren.
Dit is de belangrijkste reden waarom de meeste e-commercesites nu mobiele apps maken om hun verkoop en gebruikersinteractie te vergroten. Als uw website of blog nog niet mobielvriendelijk is, moet u onmiddellijk overwegen om uw ontwerp responsief te maken, anders verliest u veel leads, verkeer en verkopen op tafel.
Waarom zou u uw concurrentie een voordeel geven door geen mobielvriendelijk ontwerp te hebben? Maak uw website mobielvriendelijk en u zult snel de lonende resultaten merken.
Waarom een WordPress-site mobielvriendelijk maken ?
Als uw website mobielvriendelijk is, gebeurt er het volgende;
- u zult een toename van het verkeer zien
- u kunt uw abonnees vergroten door responsieve opt-in-formulieren voor e-mail en bestemmingspagina's te hebben
- u krijgt meer omzet (gebruikers van mobiel internet vertrouwen meestal op zoekmachines om door informatie te bladeren, dus het zijn klanten van hoge kwaliteit die klaar zijn om te kopen)
Dus waar wacht je op? Maak uw blog gebruiksvriendelijk en trek meer mensen aan. Laten we in de details duiken voor meer informatie.
Inhoud :
De ultieme gids om een WordPress-site mobielvriendelijk te maken
Wat is een mobielvriendelijke website?
Nu miljarden mensen over de hele wereld mobiele telefoons gebruiken om door informatie te bladeren, wordt het een trend om mobiele sites te gebruiken.
Zelfs Google beloont sites die zijn geoptimaliseerd voor mobiele gebruikers omdat ze gebruikers een snellere en betere ervaring bieden.
Een mobielvriendelijke website detecteert automatisch de omgeving die elke bezoeker gebruikt om toegang te krijgen tot uw site en geeft deze vervolgens weer in het formaat dat het beste geschikt is voor dat apparaat (zoals smartphones, tablets enzovoort).
Zo ziet een responsieve vs. niet-responsieve mobiele site eruit:
Zoals je hierboven kunt zien, laadt een responsieve mobiele site alle elementen zoals logo, tekst, knoppen, navigatie, menu enz. correct op mobiel, terwijl een niet-responsief ontwerp er rommelig uitziet op mobiele telefoons.
Volgens Statista blijft het percentage webverkeer afkomstig van mobiel groeien. Het aantal wereldwijde mobiele internetgebruikers is de afgelopen 10 jaar met meer dan 4% toegenomen.
Niet alleen dat, de penetratie-index van mobiele internetgebruikers is nu 61,2%, wat neerkomt op iets meer dan 2 miljard mensen die internet gebruiken op mobiele apparaten. Dat is een interessante statistiek, nietwaar?
Daarom moet u zich concentreren op het bruikbaar maken van uw site als deze nog niet responsive is.
Dat gezegd hebbende, er is een verschil tussen een responsieve website en een mobielvriendelijke site. Wat is dat?
Een responsieve website werkt voor alle desktops, tablets en smartphones, ook met dezelfde inhoud omdat de lay-out automatisch wordt aangepast, terwijl een mobielvriendelijke site eigenlijk een aparte versie is van de desktopwebsite die speciaal is ontworpen voor smartphones.
Kortom, een mobiel responsief ontwerp kan uw rankings, gebruikerservaring, verkopen en algemene conversies online verbeteren.
Hoe weet je of je website mobielvriendelijk is?
Wilt u weten of uw site mobielvriendelijk is of niet?
Om de mobiele responsiviteit van uw site te controleren, kunt u een gratis tool van Google gebruiken, ook wel bekend als Mobielvriendelijke testtool waarmee u kunt zien hoe gemakkelijk een bezoeker uw pagina op een mobiel apparaat kan gebruiken.
Het werkt geweldig en het is volledig gratis te gebruiken en je hoeft alleen maar een pagina-URL of de homepage-URL van je site in te voeren om te zien hoe het scoort op hun tool.
Hier is hoe het eruit ziet:
Zoals je hierboven kunt zien, hebben we een URL ingevoerd en dat laat ons zien dat de pagina mobielvriendelijk is (wat betekent dat de pagina gemakkelijk te gebruiken is op een mobiel apparaat).
Het toont u ook aanvullende bronnen waar u mobiele bruikbaarheidsrapporten voor de hele site kunt krijgen om uw site volledig te analyseren op responsiviteit.
Over het algemeen worden mobiele responsieve tests uitgevoerd om ervoor te zorgen dat al uw websitegebruikers de beste kijkervaring krijgen op hun apparaten, dit kan een laptop, desktop, tablet enzovoort zijn.
Naast de Google-vriendelijke testtool kunt u ook de volgende online tools gebruiken die volledig gratis zijn om de responsiviteit van uw site te testen.
Alle bovenstaande tools zijn handig om te weten of uw site mobielvriendelijk is of niet en u kunt de responsiviteit van elke site met slechts één klik vanuit uw eigen browser controleren door de URL van een pagina in te voeren.
Laten we het nu hebben over enkele BEWEZEN manieren om een mobiele responsieve versie van uw WordPress-sites te bouwen.
Gebruik een mobiel responsive WordPress thema: de 3 hoofdthema's
Een van de gemakkelijkste manieren om een mobielvriendelijke site te maken, is door een mobielvriendelijk thema voor uw WordPress-sites te gebruiken. Hoewel er heel veel opties zijn, is hier de lijst met de drie beste thema’s die u kunt gebruiken om een responsief ontwerp met geweldige functies te krijgen tegen een betaalbare prijs.
1. Divi
Divi is er een van WordPress-thema's meest populaire premium gebruikt door meer dan 800 mensen wereldwijd. Het geeft je een heleboel mobielvriendelijke thema's met Divi, een premium thema- en visuele paginabuilder.
Divi is exclusief ontworpen om gebruikers een betere desktopervaring te bieden, inclusief mobiele responservaring.
Hiermee kunt u uw site naar wens aanpassen, aangezien u lettergroottes op spatiëring kunt aanpassen, specifiek voor verschillende mobiele apparaten. U kunt ook unieke tekstgroottes en spatiëringswaarden toewijzen voor mobiel en tablets zonder afbreuk te doen aan de desktopervaring.
Hier is hoe het eruit ziet:
Zoals u hierboven kunt zien, kunt u uw ontwerp aanpassen in 3 secties in het paneel Mobiele stijlen: Tablet, Telefoon en Mobiel Menu. U kunt ze allemaal openen en alles aanpassen, inclusief tekstkleur, logo's en meer. gemakkelijk.
Wat is de prijs van Divi?
Het mooie van het gebruik van Elegant Themes is de betaalbare prijs, waarbij je al hun premium thema's kunt pakken door slechts $ 80 te betalen, wat betekent dat je slechts $ 0,79 per thema betaalt.
Elegante thema's zijn beschikbaar in de 2 onderstaande tariefplannen.
1. Jaarlijkse toegang: Dit is de goedkoopste optie die $ 80 kost voor 1 jaar (met onze exclusieve korting) en je krijgt toegang tot meer dan 80 thema's met 5 plug-ins en Divi-themabouwer.
2. Levenslange toegang: Als je levenslange toegang wilt tot stijlvolle thema's, dan is dit pakket iets voor jou dat levenslang $ 224 kost, waarbij je levenslange updates, downloads van thema's en plug-ins krijgt met levenslange ondersteuning.
Goed nieuws voor jou. Als u op zoek bent naar de Divi-bouwer met stijlvolle thema's, kunt u onze exclusieve link gebruiken om direct 10% korting op hun prijzen te krijgen.
Klik hier om Divi te downloaden
Als u niet tevreden bent met het thema of de functies, kunt u ook binnen 30 dagen na aankoop een volledige terugbetaling van uw geld aanvragen. Je verliest dus niets.
2. Genesis Framework
Op zoek naar een premium themaraamwerk dat niet alleen mobiel reageert, maar ook sneller en SEO-vriendelijk is? Probeer dan het Genesis-framework, want het geeft je levenslange toegang en onbeperkt gebruik van de site.
Wat zijn de kosten van Genesis Framework ?
Genesis biedt twee onderstaande tariefplannen.
1. Genesis-raamwerk: Dit is slechts het kale raamwerk dat alles is wat je nodig hebt en dat je $ 59,95 kost, wat een eenmalige vergoeding is en je krijgt onbeperkt gebruik van de site en levenslange toegang inclusief levenslange updates.
2. Pro Plus-lidmaatschap: Met dit pakket kun je hun volledige themacollectie downloaden, wat $ 499,95 kost en het is een eenmalige vergoeding met onbeperkt sitegebruik en levenslange toegang en een geweldig pakket voor webontwerpers en ontwikkelaars.
Klik hier om Genesis voor WordPress te downloaden
3. GeneratePress
Als u op zoek bent naar WordPress-thema's premium betaalbaar en sneller, GeneratePress is alleen voor jou.
Combineren ça coûte?
GeneratePress kost u slechts $ 49,95 voor 1 jaar. Ook krijg je volgend jaar 40% korting als je een bestaande klant bent.
Snelle notitie: Het biedt je ook een gratis versie die je van hun website kunt downloaden, maar het geeft je basis- en beperkte functies.
Klik hier om GeneratePress premium te downloaden
Gebruik WordPress-plug-ins voor mobiele apparaten: de 4 beste plug-ins om uw site responsief te maken
Een groot voordeel van het gebruik van WordPress CMS is dat het je een heleboel mobiele plug-ins geeft waarmee je je site eenvoudig mobielvriendelijk kunt maken. Hier is een lijst met de top 4 plug-ins die ervoor zorgen dat uw site mobiel reageert (en enkele zijn premium maar elke cent waard).
WPtouch
WPtouch is een van de meest gebruikte mobiele plug-ins voor WordPress-sites. Het wordt geïnstalleerd en gebruikt door meer dan 500 sites over de hele wereld en het staat ook op Google's shortlist van de beste WordPress mobiele oplossingen.
Deze plug-in activeert direct een mobiele versie van uw website die de Google Mobile-test doorstaat. Het helpt u ook om het uiterlijk van uw site eenvoudig aan te passen en uw mobiele bezoekers een snellere browse-ervaring te bieden zonder uw themacode te wijzigen.
Het biedt ook een premiumversie van de plug-in die WPtouch Pro heet (en kost $ 79 voor 1 sitegebruik) en het gebruikt zijn thema's voor mobiele bezoekers en uw desktopthema verandert niet, dus uw bloginhoud blijft hetzelfde.
Bovendien kunt u met hun Pro-optie ook uw menu's, pagina's, apparaten beheren en zelfs verschillende start- en bestemmingspagina's voor uw blog specificeren.
WP mobiel menu
WP Mobile Menu is een van de beste WordPress-plug-ins die u een responsief mobiel menu biedt waar u de stijl van uw mobiele menu's eenvoudig naar wens kunt aanpassen.
Het geeft u een uitzonderlijke ervaring voor uw mobiele bezoekers om toegang te krijgen tot uw site-inhoud, ongeacht het apparaat dat ze gebruiken tijdens het browsen, inclusief smartphone, tablet of desktop.
iThemes mobiele plug-in
Dit is GEEN gratis plug-in, het is een premium mobiele plug-in van iThemes die erg populair is en door veel mensen over de hele wereld wordt gebruikt.
Het geeft je een overvloed aan opties samen met een ingebouwde stylingmanager om je site responsief te maken op alle apparaten. Het biedt u ook mobiele thema's om uw site te optimaliseren voor mobiele gebruikers.
Er worden verschillende prijsopties aangeboden en het basisplan begint bij slechts $ 45 en geeft je toegang tot 2 licenties, wat een ideale optie is voor bloggers en eigenaren van één site.
Met Mobile Style Manager kunt u eenvoudig de basisstijlen en kleurenschema's van uw mobiele thema wijzigen en het kan worden aangepast met elk thema dat u gebruikt en het heeft geen invloed op uw ontwerp.
Tik op Tik op
Dit is een andere veelgebruikte premium mobiele plug-in van CodeCanyon (Envato Market) die je het meest flexibele en veelzijdige WordPress mobiele menu geeft.
TapTap is aanpasbaar en een van de verbazingwekkende en gebruiksvriendelijke WordPress mobiele menu's die momenteel beschikbaar zijn op internet. Of het nu een eCommerce-winkel of een portfoliosite is, u kunt alles aanpassen, van lettertypen, lettergroottes, pictogrammen, kleuren, knoppen en logo's tot achtergronden, uitlijningen en meer.
Dit is een premium plug-in van CodeCanyon en de standaard enkele licentie van deze plug-in kost u $ 26, waar u een jaar lang updates en klantenondersteuning kunt krijgen.
Het beste aan het gebruik van deze plug-in voor mobiele menu's is dat u eenvoudig een voorbeeld van alle wijzigingen die u op uw site aanbrengt in realtime kunt bekijken (en het helpt u om uw mobiele menu snel aan te passen).
Gebruik versnelde mobiele pagina's (AMP)
Sitesnelheid is een van de belangrijkste rankingfactoren voor Google.
Om de laadtijd te verkorten, biedt Google een nieuwe aanpak die bekend staat als Accelerated Mobile Pages (AMP) voor mobiele gebruikers.
Hier is een voorbeeld van een AMP-zoekresultaat uit de New York Times:
Zoals je hierboven kunt zien, laden AMP-pagina's snel en bieden ze een zeer snelle ervaring voor gebruikers die online informatie doorzoeken vanaf hun mobiele apparaten.
Het grootste voordeel van AMP-pagina's is dat ze razendsnel laden. Wanneer iemand bijvoorbeeld iets op Google zoekt, verschijnen de AMP-links bovenaan en wanneer op het resultaat wordt geklikt, wordt het vrijwel onmiddellijk geladen.
Een andere reden om te overwegen om AMP voor uw websites te implementeren, is dat het u extra tekenlimieten voor titels geeft.
Of je het nu weet of niet, Google heeft een titellimiet van 78 tekens voor smartphones. Voor desktops is dit 70.
Dit betekent dat als u meer dan 70 tekens (voor desktop) en 78 tekens (voor mobiel) in titels gebruikt, de extra tekens worden afgekapt zodat ze niet verschijnen.
U kunt dus meer tekens aan uw mobiele titels toevoegen om meer exacte zoekovereenkomsten van mobiele gebruikers te krijgen en uw algehele zoekverkeer van smartphones te vergroten.
Nu rijst de vraag: hoe implementeer je AMP voor WordPress-sites?
Gelukkig zijn er een paar WordPress plugins waarmee u eenvoudig de AMP-versie voor uw WordPress-sites kunt inschakelen en implementeren.
Hier is een lijst met enkele geweldige AMP-plug-ins die u kunt gebruiken om de AMP-versie voor uw mobiele gebruikers te implementeren.
- AMP (officiële WordPress AMP-plug-in)
- AMPWP – Google AMP voor WordPress
Fouten die u moet vermijden bij het mobielvriendelijk maken van uw WordPress-websites
Afbeeldingen gebruiken zonder optimalisatie: de meeste mensen crawlen Google-afbeeldingen en gebruiken afbeeldingen rechtstreeks in hun blogberichten zonder zich zelfs maar zorgen te maken over optimalisatie. Stop hiermee als u ook een van hen bent, aangezien de laadtijd van uw site sterk wordt beïnvloed door de afbeeldingen die u gebruikt.
Gebruik plug-ins zoals WP Smush.it om uw afbeeldingen te optimaliseren of nog beter om ze te optimaliseren met behulp van gratis tools voor afbeeldingsoptimalisatie, nog voordat u afbeeldingen op uw berichten gebruikt.
Te ver gaan met javascript: Wist je dat de meeste beginners met CSS-bestanden en Javascript spelen zonder echt te weten hoe ze met de code moeten spelen? Als u een van hen bent, rommel dan niet onbewust met Java- of CSS-code, anders verpest u waarschijnlijk de laadtijd van uw website.
Uw sites niet testen: test of uw sites correct openen op verschillende mobiele apparaten en tablets. U kunt MobileTest.me, QuirkTools, enz. om uw website op verschillende schermresoluties weer te geven.
Andere bronnen:
- 12 beste Moz-alternatieven die u zou moeten proberen om uw SEO te verbeteren
- SEO-vriendelijke titels: 8 best practices met voorbeelden
- 13 beste SEO-blogs die u niet mag missen om uw SEO te verbeteren
- Hulpmiddelen voor linkbuilding: 8 beste voor het vinden van kwaliteitsbacklinks
- YouTube SEO: 11 tips om uw video's te laten opvallen
- 3 Surfer SEO-alternatieven die u nodig heeft
- Zoekwoordonderzoek voor SEO: de ultieme gids
Conclusie
Er zijn letterlijk miljarden mensen die smartphones voor alles gebruiken, van autorecensies tot kortingen tot online winkelen. Het maakt niet uit of u een WordPress-site of een e-commerce winkel gebruikt, een responsief ontwerp verbetert uw algehele resultaat.
Dus wat vind je van mobiel geoptimaliseerde WordPress-sites? Heb je nog vragen ? Deel uw mening in de commentaren.
