Als het gaat om het optimaliseren van de site voor zoekmachines, is het eerste punt waar u op moet letten de noodzaak dat de weergave compatibel is met verschillende schermformaten, vooral kleine apparaten, aangezien deze het meest worden gebruikt om te browsen en mogelijk meer zorg vereisen. in design vanwege de zeer beperkte weergavemogelijkheden daar.
Maar wacht! Het is niet alleen door het uiterlijk van uw site op uw persoonlijke telefoon te controleren en bevredigende resultaten te verkrijgen dat uw site in aanmerking komt, maar u moet deze resultaten ook op meer dan één scherm en in verschillende formaten verkrijgen, wat u een heel aantal smartphones zal kosten. , wat in werkelijkheid onmogelijk is, maar standaard. U kunt dit op meer dan één manier doen, en dit is precies wat we hieronder zullen bespreken.
5 manieren om te controleren hoe uw site er op verschillende schermen uitziet
Nu de markt verzadigd is met verschillende modellen smartphones, allemaal met verschillende formaten en specificaties, is het voor u absoluut noodzakelijk geworden om aan al deze modellen te voldoen en uw site er soepel op te laten verschijnen, zodat u uw klanten een hoogwaardige gebruikerservaring kunt bieden. Het volgende punt is de eenvoudigste manier waarop u de compatibiliteit van uw site op deze slimme apparaten kunt controleren.
01 – Via de browser
De populairste browsers die we op computers gebruiken, zoals Chrome, Microsoft Edge, Mozilla en andere… bieden ons allemaal de mogelijkheid om op verschillende mobiele schermen op onze website te surfen, zonder dat we een ander hulpmiddel hoeven te gebruiken.
Ga naar een van de pagina’s van uw site, druk vervolgens op de rechtermuisknop en kies voor de optie Inspecteren. Het scherm wordt onmiddellijk in twee delen verdeeld, waarvan het eerste de programmeercode van de site bevat en het tweede beschikbaar is. op een mobiel scherm. U kunt verschillende modellen selecteren, afhankelijk van wat elke browser biedt. In Chrome kunt u bijvoorbeeld veel apparaten kiezen, zoals de iPhone 12 Pro, Galaxy Fold, Pixel 5, iPad en vele andere modellen.
opmerking: Vergeet niet de optie Apparaatwerkbalk wisselen aan te vinken (zoals weergegeven in de onderstaande afbeelding) om de mobiele modus te kiezen en ook de pagina opnieuw te laden.
02 – BrowserStack
In tegenstelling tot de vorige methode, die beperkt is tot het weergeven van de site met verschillende telefoonformaten, krijgt u met deze tool een ervaring die heel dicht bij de werkelijkheid ligt. Hier heeft u veel slimme apparaten zoals telefoons, tablets, tv-schermen en met verschillende Als u bijvoorbeeld een van de Apple-apparaten kiest, is het alsof u er op uw iPhone doorheen bladert en hoe uw site eruit zal zien met de Notch-functie! U kunt het scherm eenvoudig in de liggende modus zetten om de prestaties in alle mogelijke modi te bekijken.
Hoe u het kunt gebruiken is heel eenvoudig: vermeld gewoon uw site in de daarvoor bestemde balk en klik vervolgens op de optie “Controleren”. Maar daarvoor moet je een nieuw gratis account registreren, en als je hogere functies wilt, is er een betaald abonnement.
Met deze methode kunt u uw site alleen weergeven zonder echte interactie, maar als u een live-ervaring van de tool wilt ervaren door op de site te bladeren en de verschillende pagina’s te openen, is er een andere methode die door de tool wordt geboden, via het cloudsysteem ( BrowserStack Live App), zodat een groot aantal apparaten wordt weergegeven, kunt u uw site gedurende twee minuten testen, of u abonneren op het betaalde abonnement om uw site fulltime te testen.
03 – Responsor
De Responsinator-tool is de snelste en gemakkelijkste manier waarmee u de prestaties van uw blog op verschillende kleine schermen kunt controleren. In deze tool hoeft u geen nieuw account te registreren of naar aangepaste apparaten te zoeken.
In ruil daarvoor krijgt u 10 schermen met de meest voorkomende formaten en verschillende instellingen. Het mooie is dat u zonder problemen uw website kunt bezoeken en door de pagina’s kunt bladeren, en ook het zijmenu kunt openen en kijken of de opties ervan zijn zijn eenvoudig aan te klikken en zelfs de knop ‘Omhoog’ reageert soepel op de tool.
Een veelgemaakte fout is het belang hechten aan verticaal browsen en het verwaarlozen van de horizontale positie van het apparaat (Landscape), wat ook niet minder belangrijk is in de gebruikerservaring.
04 – SmartBear
Als u bezig bent met het bouwen van een online winkel, is hier een unieke manier waarop u op een zeer realistische manier door uw winkel kunt bladeren.
Het idee hier is dat je je eigen apparaat krijgt op basis van SmartBear, en laten we aannemen dat je een Samsung-telefoon met een bepaalde versie hebt gekozen, en hier is het alsof je die telefoon al bezit, er verschijnt een echte Android-interface voor u met veel applicaties erop geïnstalleerd. U kunt de Google Chrome-browser kiezen en deze site met een echte ervaring bekijken.
Het leuke van deze site is dat je een video kunt opnemen waarin je een specifiek onderdeel van de winkel uitlegt, zoals de betaalmethode en het invullen van de gegevens, en dit is een van de belangrijkste functies waar je profijt van zult hebben dit onderscheidende instrument. Uiteraard is deze tool betaald, en om te kunnen profiteren van alle functies, zoals vrij browsen, bent u verplicht deel te nemen aan het betaalde abonnement.
Als u een webontwikkelaar bent, is het belangrijk om ervoor te zorgen dat de websites die u ontwerpt op de best mogelijke manier worden weergegeven, zodat de browser geen problemen heeft met uw site en deze een vlekkeloze ervaring geeft.
05 – Afhankelijk van WordPress
Het WordPress-platform geeft ons ook de mogelijkheid om onze website op het telefoonscherm en smart tablets weer te geven, en dit gebeurt via twee methoden:
De eerste is via de optie om de sjabloon aan te passen (Aanpassen), omdat deze functie u veel voordeel zal opleveren als u enkele wijzigingen aan de sjabloon zelf wilt aanbrengen en ervoor wilt zorgen dat er geen defecten zijn. Misschien wilt u een specifiek pictogram toevoegen, of zorg ervoor dat het logo de juiste afmetingen heeft. Is het zijmenu gemakkelijk klikbaar? Enzovoorts.
Via het zijmenu Menu kiest u de optie Uiterlijk en vervolgens Aanpassen, en u kunt heel eenvoudig een live-ervaring creëren.
De tweede methode is via de prachtige WordPress Gutenberg-editor, en als je nog steeds op de klassieke editor vertrouwt, geloof me, dan mis je veel. Een van de voordelen van de WordPress Gutenberg-editor is de mogelijkheid om de prestaties van de pagina’s van de site en al zijn artikelen op verschillende apparaten te bekijken, zelfs voordat ze worden gepubliceerd. Eventuele fouten in het formaat of problemen die op verschillende schermen verschijnen, kunt u rechtstreeks via de editor zelf opmerken.
De belangrijkste tool waarop u zich moet concentreren (Google Test)
Het behalen van goede resultaten op verschillende apparaten betekent niet noodzakelijkerwijs dat uw site 100% goed is, maar wat juister is, is dat de prestatieresultaten allemaal uitstekend zijn in de mobiele compatibiliteitstool van Google. Als u beoordelingen krijgt die allemaal groen zijn, betekent dit dat dat uw site in dit stadium is geslaagd.
De eerste stap is ervoor te zorgen dat uw site compatibel is met de voorwaarden die Google heeft opgelegd, te beginnen met de afmetingen van de site, die compatibel moeten zijn met mobiele schermen. Als u vertrouwt op een achtergrond met grote afmetingen, heeft dit mogelijk invloed op hoe deze er ongepast uitziet. , wat een surfervaring zal opleveren, niet op het niveau.
Zorg er ook voor dat het lettertype dat u gebruikt leesbaar en niet klein is. Het derde punt is dat de links en andere opties die u als categorieën in het zijmenu weergeeft, evenals de knoppen om actie te ondernemen, allemaal van de juiste grootte, klikbaar en duidelijk moeten zijn.
U moet belang hechten aan de voorgaande drie punten, anders zal uw site problemen ondervinden bij het indexeren van zijn pagina’s. U kunt dit verifiëren met behulp van de tool (Mobile Google Friendly Test), die ook beschikbaar is in webmasters.
Google biedt ons ook een andere tool aan (PageSpeed Insights) die gespecialiseerd is in het controleren van de mobiele snelheid op verschillende apparaten, maar hier concentreer je je op de mobiele optie, omdat je na het onderzoeken van de site op basis van de tool de werkelijke snelheid en of het presteert wat het doet als het gaat om de professionele gebruikerservaring.
Het mooie van deze specifieke tool is dat deze je alle fouten en problemen laat zien die de snelheid van je site belemmeren. Probeer ze één voor één op te lossen en je zult zeker een groot verschil in de resultaten zien. Eerder hebben we dat al gedaan. besproken hoe je een WordPress-site kunt versnellen met behulp van de PageSpeed Insights-tool.
Problemen die u kunt tegenkomen als een site niet compatibel is met mobiele telefoons
Het zal moeilijk zijn om geavanceerde resultaten te behalen op de eerste pagina’s van de wereldwijde Google-engine. De compatibiliteit van de sitesjabloon met mobiele apparaten wordt beschouwd als een van de SEO-factoren waarop u zich moet concentreren. Anders zal Google niet tevreden zijn met uw site en zal deze marginaliseren.
Een van de obstakels die het probleem van de site die niet compatibel is met kleine schermen voor u zal opleveren, is dat de artikelen en andere nieuwe links die u gaat publiceren niet zullen worden geïndexeerd, en het zal moeilijk zijn om ze te indexeren als dit probleem niet wordt opgelost. In andere gevallen worden de links die al op de site zijn geïndexeerd, uit het archief verwijderd.Google.
Als de bezoeker van uw site ook problemen ondervindt met betrekking tot het browsen, bijvoorbeeld omdat de schermgroottes groot zijn, een deel van de inhoud niet verschijnt, het lettertype te klein is, enz., zullen deze redenen hem ertoe aanzetten de pagina onmiddellijk te verlaten.
Dit zal een belangrijke reden zijn om het bouncepercentage te verhogen. Zoals we eerder hebben uitgelegd, duurt het slechts een paar seconden voordat een klant een slechte ervaring heeft met het browsen op uw site als hij de pagina verlaat, waardoor dat percentage stijgt, wat niet het geval is. wees in uw voordeel als dat gebeurt.
Dit was een vereenvoudigde handleiding over hoe u uw website op schermen van verschillende formaten kunt bekijken. Het leuke is dat u via uw browser deze op meer dan één apparaat en met verschillende besturingssystemen kunt ervaren.
Maar het allerbelangrijkste is dat u zich concentreert op het controleren van uw site in de Google-tool. Eventuele rood gemarkeerde waarschuwingen betekenen dat uw site weergaveproblemen heeft voor mobiele telefoons. Als u dit probleem niet grotendeels oplost, heeft dit invloed op het uiterlijk van uw site in de zoekresultaten, dus het is in uw belang om al deze fouten op te lossen, totdat alle testresultaten groen gekleurd zijn.