Hoe de mobiele versie van de website te bekijken: in slechts 3 klikken

Heb je moeite met het bekijken van de mobiele versie van een website?

Welnu, een voor de hand liggende oplossing is om gewoon je telefoon tevoorschijn te halen en de website daar te openen. Maar als je dit bericht leest, is dat om de een of andere reden waarschijnlijk geen optie voor jou.

Gelukkig zijn er tal van andere manieren om de mobiele versie van een website rechtstreeks vanuit uw desktopwebbrowser te bekijken. Dus zelfs als u geen toegang heeft tot een telefoon, kunt u eenvoudig de mobiele versie van een website zien, wat er ook gebeurt.

In dit bericht gaan we vier eenvoudige methoden delen voor het bekijken van een voorbeeld van de mobiele versie van een website:

• De eerste twee methoden werken met elk type website, of het nu uw website is of de site van iemand anders en ongeacht of deze is gebouwd met WordPress, Shopify, Wix, Squarespace of iets anders.
• De laatste twee methoden zijn WordPress-specifieke opties die u laten zien hoe u de mobiele versie van uw WordPress-site kunt bekijken. Deze werken alleen als u de eigenaar van de site bent.

Hoe u de mobiele versie van een website vanuit uw browser kunt bekijken

Of u nu wel of niet de eigenaar van de website bent, er zijn twee eenvoudige manieren om de mobiele versie van een website op internet te bekijken:

1. Gebruik de ontwikkelaarstools van uw webbrowser. Chrome werkt hiervoor uitstekend, maar de meeste andere webbrowsers bieden vergelijkbare tools.
2. Gebruik een speciale tool voor mobiele emulatie. Het enige dat u hoeft te doen, is de URL in te voeren die u wilt zien en u kunt er doorheen bladeren als een mobiele gebruiker.

Laten we beide methoden doornemen. Later laten we u ook zien hoe u de mobiele versie kunt bekijken van een website die je zelf bouwt (op WordPress).

Gebruik de ontwikkelaarstools van uw webbrowser

De meeste browsers, zoals Google Chrome, Safari, Firefox, Microsoft en Brave, bieden tools voor ontwikkelaars waarmee u een website kunt verkennen en kunt zien hoe deze eruitziet op verschillende apparaten.

Met ontwikkelaarstools kun je snel zien hoe een website eruitziet op verschillende smartphones, tablets, enzovoort.

Voor deze voorbeelden gaan we ervan uit dat u Chrome gebruikt (of een op Chromium gebaseerde browser, zoals Brave). De meeste andere webbrowsers bieden echter vergelijkbare functies, hoewel de interface anders zal zijn.

Klik om te beginnen met de rechtermuisknop op de voorkant van uw website en kies Inspecteren uit de menukaart:

Dit lanceert ontwikkelaarstools en onthult een module aan de rechterkant met coderingselementen van die pagina.

U hoeft zich geen zorgen te maken over de codering, aangezien het primaire doel is om over te schakelen naar de mobiele versie van de website. Zoek het kleine Toggle Apparaatwerkbalk knop (het lijkt op een telefoon- en tabletpictogram) en klik erop om de mobiele weergave te activeren.

Hierdoor wordt automatisch een responsieve, mobiele weergave weergegeven, waarin u de apparaatafmetingen kunt wijzigen op basis van het apparaat dat u wilt emuleren:

Om deze methode nog aantrekkelijker te maken, is het een van de weinige opties met ingebouwde apparaatstandaarden, waardoor je nauwkeuriger kunt zien hoe je website eruitziet op apparaten in de echte wereld.

U kunt bijvoorbeeld een iPad Pro kiezen en deze past de afmetingen van het scherm onmiddellijk aan die van een iPad Pro aan.

Of u kunt kiezen voor de kleinere Pixel 2 XL.

Of de nog kleinere Galaxy Fold. Test elk van de apparaten op de lijst en zorg ervoor dat uw website er op elk apparaat acceptabel uitziet.

Gebruik een online tester of emulator

Emulators worden over het algemeen gebruikt voor het testen van apps in hun oorspronkelijke omgeving, maar veel ervan zijn beschikbaar voor website-responsiviteit. U kunt ook eenvoudige testers online vinden om uw URL in te plakken en te zien hoe deze eruitziet op kleinere apparaten.

ResponsivePX.com is een haalbare optie, maar je kunt er nog veel meer vinden met een snelle online zoekopdracht.

De reden dat we mensen aanraden om emulators en simulators uit te proberen, is omdat ze je veel meer controle geven over de afmetingen van de site. En ze zijn vaak eenvoudiger dan het gebruik van de ontwikkelaarstools van uw browser.

Neem bijvoorbeeld ResponsivePX.com: je gaat naar de site, plakt de URL in en ziet meteen een mobiele versie.

Hiermee kunt u de breedte, hoogte en zichtbaarheid van de schuifbalk aanpassen. U kunt de resultaten zelfs delen met mensen in uw organisatie.

Hoe u de mobiele versie van uw WordPress-website kunt bekijken

Als u aan uw eigen WordPress-site werkt, biedt WordPress ook enkele ingebouwde opties om u te helpen zien hoe uw site eruit zal zien op mobiele apparaten.

Wanneer je in de WordPress-editor werkt, kun je snel zien hoe je content er op verschillende apparaten uitziet. U kunt hetzelfde doen terwijl u uw thema aanpast in de WordPress Customizer.

Laten we deze methoden eens doornemen…

Bekijk de mobiele versie via het voorbeeld van de pagina of de berichteditor

U kunt de mobiele versie van een website per pagina bekijken. U kunt bijvoorbeeld kijken of uw huidige blogpost er representatief uitziet in de mobiele weergave. Het is ook verstandig om uw startpagina te controleren op mobiele responsiviteit, vooral na het wijzigen van het ontwerp.

Laten we beginnen met de startpagina. Zo ziet de volgende website eruit vanaf een desktopweergave:

U kunt individuele pagina’s bekijken en mobiele weergaven plaatsen door naar de Berichten of Pagina’s tabbladen in het WordPress-dashboard.

Ga voor eerder gemaakte berichten en pagina’s naar Alle berichten of Alle pagina’s.

We beginnen met een pagina; meer specifiek, de startpagina. Selecteer de gewenste pagina.

Elke pagina en elk bericht in de WordPress-backend biedt een Preview-link in de rechterbovenhoek. Selecteer die voorbeeldknop om een ​​vervolgkeuzemenu weer te geven met deze opties:

Standaard toont WordPress de Desktop-versie.

Selecteer de tablet- of mobiele weergave om te zien hoe uw website elementen zoals afbeeldingen, video’s, menu’s en tekstvakken omzet in een kleiner, beter leesbaar en klikbaar formaat.

Controleer bij het testen van uw site in andere weergaven of links klikbaar zijn (niet te klein), activa nog steeds zichtbaar zijn en alles duidelijk wordt weergegeven zonder de gebruiker te dwingen in te zoomen.

Neem even de tijd om naar beneden te scrollen op de pagina om alle inhoud te controleren. Deze site vermeldt bijvoorbeeld meerdere eCommerce-producten op de startpagina, met afbeeldingen, productnamen en knoppen voor toevoegen aan winkelwagentje.

Ze zien er goed uit, maar het is mogelijk dat we willen overschakelen naar twee of drie productkolommen om de productdetails groter te maken.

Berichten zijn niet anders bij het gebruik van deze methode. Ze bevinden zich gewoon onder een apart gedeelte van WordPress (Berichten → Alle berichten).

Aangezien deze uw blogposts bevatten en geen statische webpagina’s, is het zelfs nog belangrijker om mobielvriendelijkheid te testen. Waarom? Omdat veel bedrijven elke maand tientallen blogberichten publiceren met slechts kleine updates van pagina’s. Als een blog uw primaire inhoudsbron is, moet u ervoor zorgen dat ze allemaal geschikt zijn voor mobiel voordat ze worden gepubliceerd.

Ga zoals gewoonlijk naar Preview en klik vervolgens op Tablet of Mobile.

De Desktop-weergave lijkt af en toe erg op de Tablet-weergave, dus zorg ervoor dat u niet bent ingezoomd in uw browser.

De tabletweergave lijkt iets kleiner dan de desktopweergave, maar met zwarte ruimte rond de inhoud van de site, waardoor een realistischer tabletformaat wordt nagebootst.

Bekijk de mobiele versie van een website in de WordPress Customizer

De WordPress Customizer biedt u niet alleen uitstekende manieren om uw WordPress-thema te bewerken, maar biedt ook een visueel voorbeeld van uw site terwijl u bewerkingen uitvoert.

Gelukkig beperkt de WordPress Customizer je niet alleen tot een desktopvoorbeeld. Het is zelfs mogelijk om al uw bewerkingen te voltooien terwijl u naar een mobiele telefoon of tablet kijkt.

Ga hiervoor naar Uiterlijk → Aanpassen om de Customizer te starten.

Zo ziet de Customizer er standaard uit. Het bevindt zich in de standaard Desktop-weergave met instellingen om aan te passen aan de linkerkant en het voorbeeld van de site aan de rechterkant.

Kijk helemaal onderaan de instellingenlijst om drie knoppictogrammen te vinden: een voor desktopweergave, een andere voor tabletweergave en een derde voor mobiele weergave.

Klik op de knop Tabletweergave om te zien hoe uw huidige bewerkingen worden weergegeven op een interface ter grootte van een gewone tablet.

De Mobile View-knop maakt die interface kleiner, waardoor je dichter bij de standaard venstergrootte van een mobiele smartphone komt.

Opmerking: Houd er rekening mee dat deze mobiele backend-previews schattingen zijn. Met zoveel apparaattypes in de wereld zal niemand exact hetzelfde zien.

Vergeet de menu’s niet. Menu’s zijn notoir lastig op mobiele apparaten. Controleer of de thema-ontwikkelaar een aanzienlijke hoeveelheid tests heeft uitgevoerd. U zult merken dat het mobiele menu meestal in een verborgen hamburgermenu wordt geplaatst (drie horizontale lijnen) en dat u uiteindelijk twee menu’s krijgt (zoals hoe dit thema eCommerce-knoppen biedt onderaan het scherm).

Zoals altijd, kijk niet snel naar de eerste pagina en ga ervan uit dat uw hele website klaar is. Dat is een recept voor het mislopen van kleine tekortkomingen die uw algehele gebruikerservaring schaden.

Doorloop uw hele website in de tabletweergave, inclusief alles van productpagina’s tot blogposts en winkelwagentjes tot Over ons-pagina’s.

En voltooi hetzelfde proces in de mobiele weergave. We raden vooral aan om de eCommerce-functionaliteit uit te proberen, aangezien het laatste wat u wilt een kleine afrekenmodule of een knop Toevoegen aan winkelwagentje is.

Het is gemakkelijk om de mobiele versie van een website te bekijken

De meest flexibele optie is om de ontwikkelaarstools van uw browser te gebruiken. Dit zal hoe dan ook werken. Zolang u de desktopversie van de website kunt openen, kunt u een voorbeeld van de mobiele versie bekijken met ontwikkelaarstools.

De emulatorbenadering werkt ook met de meeste websites, hoewel de website een openbaar toegankelijke URL moet hebben zodat de emulator de website kan ophalen.

Aan de andere kant, als u een WordPress-gebruiker bent, kunt u vertrouwen op de ingebouwde responsieve preview-tools van WordPress om de klus te klaren terwijl u aan uw site werkt. Of de andere methoden werken ook uitstekend voor WordPress-sites.

Als u een mobiele weergave nodig heeft om aan uw eigen site te werken, wilt u misschien ook onze gids voor het maken van een mobielvriendelijke website raadplegen voor enkele tips over waar u op moet letten terwijl u een voorbeeld van de mobiele versie van uw site bekijkt.