Disclosure: “dit artikel is een persoonlijke mening over onderzoek gebaseerd op mijn ervaring van bijna 20 jaar. Er is geen reclame van derden op deze pagina of gelde gemaakte links van welke aard dan ook. Externe links naar sites van derden worden door mij gemodereerd. Disclaimer. “Shaun Anderson, Hobo

Er is geen beste schermgrootte om voor te ontwerpen. Websites moeten reageren en snel te transformeren op alle schermresoluties op verschillende browsers en platforms., Toegankelijk. Mobiel-vriendelijk. Ontwerp eerst voor je publiek. Ontwerp van 360 × 640 tot 1920×1080.

  • Design for desktop displays from 1024×768 t/m 1920×1080
  • Design for mobile displays from 360×640 T/m 414×896
  • Design for tablet displays from 601×962 t / m 1280×800
  • Controleer Google Analytics en optimaliseer voor de meest voorkomende resolutie van uw doelgroep
  • ontwerp niet voor één monitorgrootte of schermresolutie. Schermformaten en browservensterstatus variëren tussen bezoekers.
  • ontwerp moet responsief en snel zijn., Gebruik een vloeibare of responsieve lay-out die transformeert naar de venstergrootte van de huidige gebruiker.
  • Monitor Google Search Console mobile-friendly and usability alerts

het moet er nog steeds goed uitzien en goed werken bij alle groottes, daarom adviseer ik *altijd* een zeer toegankelijke vloeibare lay-out met behulp van percentages breedtes om de lay-out te controleren. Nu is de aanbeveling een responsieve websitesjabloon.,

De drie belangrijkste criteria voor het optimaliseren van een pagina-indeling voor een bepaalde schermgrootte zijn:

  • webpagina initiële zichtbaarheid: is alle belangrijke informatie zichtbaar boven de vouw zodat gebruikers deze kunnen zien zonder te scrollen? Dit is een afweging tussen hoeveel items worden getoond vs. hoeveel detail wordt weergegeven voor elk item.
  • leesbaarheid van de webpagina: hoe eenvoudig is het om de tekst in verschillende kolommen te lezen, gezien de toegewezen breedte?
  • Web Page esthetiek: hoe goed ziet uw pagina eruit als de elementen op de juiste grootte en locatie zijn voor deze schermgrootte?, Doen alle elementen correct line — up-dat wil zeggen, zijn bijschriften direct naast de foto ‘ s, enz.?

Usability guidelines adviseerde u ook om alle drie de criteria voor alle groottes te gebruiken. Controleer het browservenster van 360 × 640 tot 1920×1080 schermresoluties.

uw pagina moet hoog scoren op alle criteria in het hele resolutiebereik.

uw pagina zou ook moeten werken op nog kleinere en grotere formaten, hoewel zulke uitersten minder belangrijk zijn.,

hoewel dergelijke gebruikers zeker toegang zouden moeten hebben tot uw site, is het geven van een minder-dan-geweldig ontwerp soms een aanvaardbaar compromis.,

Top tien meest voorkomende schermresoluties

bezoekersanalyse van bijna een half miljoen bezoekers in de eerste 6 maanden van 2020:

een responsieve websitesjabloon is een goede gok

citaat: “Responsive Web Design: serveert dezelfde HTML-code op dezelfde URL, ongeacht het apparaat van de gebruiker (bijvoorbeeld desktop, tablet, Mobiel, niet-visuele browser), maar kan het scherm anders weergeven gebaseerd op de schermgrootte. Google beveelt Responsive Web Design aan omdat het het gemakkelijkste ontwerppatroon is om te implementeren en te onderhouden.,”Google Developer Guides, 2020

In de wereld van vandaag gebruiken veel mensen handheld-apparaten (tablets en smartphones) om te surfen op het web en responsive website design (RWD) is naar voren gekomen als een zeer waarschijnlijke oplossing (het wordt nog steeds besproken door liefhebbers) voor schermgrootte uitdagingen.

Deze methode verwijdert het gebruik van websites met vaste breedte en gebruikt in plaats daarvan mediaquery ‘ s in css-stylesheets om een website te maken die in grootte reageert op de verschillende weergaven van handheld-apparaten en kleinere schermen die mensen gebruiken.,

dus welk apparaat een persoon kan gebruiken om uw website te bekijken, U bent in staat om hen de grootst mogelijke ervaring te geven.

inhoudsopgave

Google geeft de voorkeur aan mobiele-vriendelijke Sites

Google dicteert de eb en stroom van online commerce en ze hebben net bepaald dat u moet ontwerpen voor een bevredigende gebruikerservaring op meerdere apparaten als u wilt verwachten hoog te scoren voor concurrerende zoekwoorden in Google.

QUOTE: “Google gebruikt twee verschillende crawlers voor het crawlen van websites: een mobiele crawler en een desktop crawler., Elke crawler type simuleert een gebruiker een bezoek aan uw pagina met een apparaat van dat type. Google gebruikt een crawler type (mobiel of desktop) als de primaire crawler voor uw site. Alle pagina ‘ s op uw site die zijn gecrawled door Google worden gecrawled met behulp van de primaire crawler. De primaire crawler voor alle nieuwe websites is de mobiele crawler. Bovendien, Google recrawls een paar pagina ‘ s op uw site met de andere crawler type (mobiel of desktop). Dit heet de secundaire crawl, en wordt gedaan om te zien hoe goed uw site werkt met het andere type apparaat.,”Google Webmaster Guidelines, 2020

sinds 21 April 2015 heeft een site wereldwijd invloed gehad op de ranking van websites op verschillende apparaten.

Als u websites maakt voor kleine bedrijven – u weet dat ze een website willen die goed presteert in Google organic listings – dan weet u dat ze geà nteresseerd zijn in zoekmachine optimalisatie:

QUOTE: “ik heb 20 jaar ervaring in het beoefenen van professionele SEO. Deze Seo tutorial is mijn verzameling van tips en SEO best practices die ik gebruik om websites te rangschikken in Google.,”Shaun Anderson, Hobo 2020

SEO is nu gedeeltelijk gebaseerd op goede website UX, zoals Google kwantificeert, ten minste voor mobiele gebruikers.

QUOTE: “nu mobiele zoekopdrachten groter zijn dan zoekopdrachten op het bureaublad, is het belangrijk dat uw site mobielvriendelijk is. Googlebot gebruikt nu een mobiele crawler als de standaard crawler voor websites.”Google Webmaster Guidelines, 2020

Op dit moment-dat betekent in wezen nu responsieve website ontwerp en mobiel-vriendelijk, vooral met Google “making our index mobile-first”.,

Desktop Scherm Resolutie Statistieken Wereldwijd Mei 2019 – Mei 2020

Voor de referentie, hier is een lijst van de huidige top schermresoluties de hele wereld, zoals opgenomen recent (2020):

de Meest Voorkomende Bureaublad Scherm Resolutie Maten Wereldwijd

  • 1366×768 – 23.49%
  • 1920×1080 – 19.91%
  • 1536×864 – 8,65 er%
  • 1440×900 – 7.38%
  • 1280×720 – 4.89%
  • 1600×900 – 4.01%
  • 1280×800 – 3.,33%

Mobiele Scherm Resolutie Statistieken Wereldwijd Mei 2019 – Mei 2020

de Meest Voorkomende Mobiele Scherm Resolutie Maten Wereldwijd

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

Tablet-Scherm Resolutie Statistieken Wereldwijd Mei 2019 – Mei 2020

de Meest Voorkomende Tablet Scherm Resolutie Maten Wereldwijd

  • 768×1024 – 51.98%
  • 1280×800 – 7.11%
  • 800×1280 – 5.,34%
  • 601×962 – 4.47%
  • 600×1024 – 2.85%
  • 1024×1366 – 1.96%

Desktop Scherm Resolutie Statistieken in de VS Kan 2019 – Mei 2020

Boven aan het Scherm Resoluties in de VS (2020)

de Meest Voorkomende Bureaublad Scherm Resolutie in de Verenigde Staten Van Amerika

  • 1920×1080 – 19.15%
  • 1366×768 – 14.91%
  • 1440×900 – 9.59%
  • 1536×864 – 7.7%
  • 1280×720 – 4.89%
  • 1600×900 – 4.28%
  • 1280×800 – 3.,92%

Mobiele Scherm Resolutie Statistieken in de VS Kan 2019 – Mei 2020

de Meest Voorkomende Mobiele Scherm Resolutie in de Verenigde Staten Van Amerika

  • 414×816 – 17.89%
  • 375×667 – 14.2%
  • 375×812 – 11.97%
  • 360×640 – 8.55%
  • 414×736 – 8.54%
  • 412×846 – 4.7%
  • 360×740 – 4.39%

Tablet-Scherm Resolutie Statistieken in de VS Kan 2019 – Mei 2020

de Meest voorkomende Tablet Scherm Resolutie in de Verenigde Staten Van Amerika

  • 768×1024 – 54.,68%
  • 800×1280 – 5.75%
  • 1280×800 – 5.73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

Desktop Scherm Resolutie Statistieken in het verenigd koninkrijk Mei 2019 – Mei 2020

Boven aan het Scherm Resoluties in het verenigd koninkrijk (2020)

de Meest Voorkomende Bureaublad Scherm Resolutie in het Verenigd Koninkrijk

  • 1920×1080 – 20.62%
  • 1366×768 – 17.32%
  • 1440×900 – 11.65%
  • 1536×864 – 8.38%
  • 1280×720 – 5.2%
  • 1280×800 – 4.,73%

Mobiele Scherm Resolutie Statistieken in het verenigd koninkrijk Mei 2019 – Mei 2020

de Meest Voorkomende Mobiele Scherm Resolutie in het Verenigd Koninkrijk

  • 375×667 – 16.66%
  • 414×816 – 14.11%
  • 360×640 – 9.95%
  • 375×812 – 8.55%
  • 360×740 – 5.67%
  • 360×780 – 5.39%
  • 414×736 – 4.75%

Tablet-Scherm Resolutie Statistieken in het verenigd koninkrijk Mei 2019 – Mei 2020

de Meest Voorkomende Tablet Scherm Resolutie Maten in het Verenigd Koninkrijk

  • 768×1024 – 58.,31%
  • 1280×800 – 6.92%
  • 800×1280 – 6.02%
  • 601×962 – 3.68%
  • 600×1024 – 3.26%
  • 1024×1366 – 1.71%

Desktop vs Mobiel versus Tablet Wereldwijd Marktaandeel

Desktop vs Mobiel versus Tablet Wereldwijd Marktaandeel

  1. Mobiel – 50.48%
  2. Bureaublad – 46.51%
  3. Tablet – 3.0%

*Let op – statistische gegevens hierboven zijn van een (zij het geloofwaardige bron, zodat kon worden scheef in de manieren waarop we kunnen het niet weten. Grafieken geleverd door http://statcounter.com/.,

Hoe kan ik een Site ontwerpen die er in elke Browser hetzelfde uitziet & resolutie?

dat kan niet.

Het is onmogelijk om een website te ontwerpen die er in elke browser, platform en schermresolutie hetzelfde uitziet, dus probeer het niet.

u kunt kiezen voor een vloeiende lay-out zonder tabellen voor uw ontwerp, met % breedtes die uitbreiden en samentrekken om te passen bij een browserinstelling voor bezoekers of u kunt overwegen om te kijken naar responsieve ontwerpoplossingen die vrijwel hetzelfde zullen bereiken.,

Google is voorstander van responsive designs, wat goed nieuws is voor degenen die het hebben overgenomen:

QUOTE: “sites die gebruik maken van responsive web design en dynamische service correct implementeren (die alle desktop content en markup bevatten) hoeven over het algemeen niets te doen.”Google NOV 2017

MOBILE is in opkomst-dus als het ontwikkelen van een nieuwe website – moet u nadenken over hoe mobiel vriendelijk uw website echt is vanaf het begin.

Ik probeer dingen eenvoudig te houden wanneer ik dingen aan het coderen ben.,

u zult niet – kan-iedereen tevreden stellen – en de vraag welke websitegrootte het beste is is nog steeds een hot topic voor discussie door ontwerpers met meer bruikbaarheid en UX-expertise Dan I.

wat ik uit ervaring wel weet is dat het van cruciaal belang is voor u om uw doelgroep en de apparaten die ze gebruiken te identificeren, en uw website (over het algemeen) te bouwen om die doelgroep aan te passen.

en dat publiek omvat GOOGLEBOT.

leidt uw mobiele Site door naar een andere URL & versie van uw Site?

nou, dat is niet ideaal. Het is nooit geweest, in feite.,

lang geleden gebruikten sommige mensen tekstversies van een website om inhoud te produceren voor gebruikers/browsers die geen elementen van hun websites ondersteunen – in een (meestal vergeefse) poging om hun inhoud toegankelijker te maken.

de W3C die zelfs wordt gebruikt om het aan te bevelen ik denk dat als al het andere is mislukt:

Er moet een pagina met alleen tekst, met gelijkwaardige informatie of functionaliteit, worden verstrekt om een website te laten voldoen aan de bepalingen van dit deel, wanneer naleving op geen enkele andere manier kan worden bereikt., De inhoud van de alleen-tekstpagina ‘ s wordt bijgewerkt wanneer de primaire pagina verandert. Sectie 508

Het is altijd ideaal geweest om één URL aan een bezoeker te leveren voor toegankelijkheidsdoeleinden, en er is geen verschil bij het leveren van mobiele of smartphone-inhoud als u overweegt een” mobiele ” versie van uw site te maken. Dit kan natuurlijk nog belangrijker zijn als Google verhuist naar een MOBILE FIRST INDEX.,

Google zal u waarschijnlijk in de nabije toekomst vooral beoordelen op uw mobiele ervaring – dus we moeten ons allemaal bewust zijn van de grote veranderingen die we binnenkort in Google ‘ s SERPs kunnen zien.

wanneer Google de ‘bezoeker’ is, is het meestal nog belangrijker om slechts één URL te leveren vanwege canonieke URL – uitdagingen voor zoekmachines-en dit was het geval voor de implementatie van het canonieke link-element enige tijd geleden.

dus de ideale situatie is om te allen tijde één URL te leveren.,

Als u” smartphone ” inhoud (die we zien als normale web-inhoud, omdat het over het algemeen een normale HTML-pagina is, alleen getweaked in lay-out voor kleinere schermen) kunt u de rel=canonical gebruiken om naar uw desktop versie te wijzen. Dit helpt ons om ons te concentreren op de desktop-versie voor web-search. Wanneer gebruikers die desktop-versie met een smartphone bezoeken, kunt u ze omleiden naar de mobiele versie. Dit werkt ongeacht de URL-structuur, dus u hoeft geen subdomeinen / submappen te gebruiken voor smartphone-mobiele sites., Nog beter is echter om dezelfde Url ‘ s en om de juiste versie van de content zonder een redirect John Mueller van Google

Negeert Google de Aanbevelingen Is Vaak Niet Een Slimme zet

QUOTE: om samen Te vatten, momenteel is onze crawlen, indexeren, en ranking systemen meestal kijk op de desktop versie van een pagina-inhoud, wat kan leiden tot problemen voor mobiele zoekers wanneer die versie is sterk verschillend van de mobiele versie., Mobile-first indexing betekent dat we de mobiele versie van de content gebruiken voor het indexeren en rangschikken, om onze – voornamelijk mobiele – gebruikers beter te helpen vinden wat ze zoeken. Webmasters zullen zien aanzienlijk toegenomen kruipen door Smartphone Googlebot, en de fragmenten in de resultaten, evenals de inhoud op de Google cache pagina ‘s, zal uit de mobiele versie van de pagina’ s., Google Nov 2017

Google biedt de volgende tips om te controleren of uw site is voorbereid voor de mobile first index, maar in wezen, als u een responsive Web design template gebruikt voor uw site moet u minimale problemen hebben met deze wijziging:

  • zorg ervoor dat de mobiele versie van de site ook de belangrijke, hoogwaardige inhoud heeft. Dit omvat tekst, afbeeldingen (met alt-attributen), en video ‘ s – in de gebruikelijke crawlable en indexeerbare formaten.,

  • gestructureerde gegevens zijn belangrijk voor indexering en zoekfuncties die gebruikers leuk vinden: het moet zowel op de mobiele als desktopversie van de site zijn. Zorg ervoor dat url ’s binnen de gestructureerde gegevens worden bijgewerkt naar de mobiele versie op de mobiele pagina’ s.

  • metagegevens moeten aanwezig zijn op beide versies van de site. Het geeft hints over de inhoud op een pagina voor het indexeren en serveren., Zorg er bijvoorbeeld voor dat titels en metabeschrijvingen gelijkwaardig zijn voor beide versies van alle pagina ‘ s op de site.

  • Er zijn geen wijzigingen nodig voor de koppeling met afzonderlijke mobiele URL ‘ s (M.-dot sites). Voor sites die aparte mobiele URL ‘ s gebruiken, houdt u de bestaande link rel=canonical en link rel=alternate elementen tussen deze versies.

  • Controleer hreflang-koppelingen op afzonderlijke mobiele URL ‘ s., Bij het gebruik van link rel=hreflang elementen voor internationalisatie, koppeling tussen mobiele en desktop URL ‘ s afzonderlijk. Uw mobiele URL’ s ‘hreflang moet verwijzen naar de andere taal/regio versies op andere mobiele URL’ s, en op dezelfde manier te koppelen desktop met andere desktop URL ‘ s met behulp van hreflang link elementen daar.

  • zorg ervoor dat de servers die de site hosten voldoende capaciteit hebben om mogelijk verhoogde crawl rate aan te kunnen., Dit heeft geen invloed op sites die gebruik maken van responsive web design en dynamic serving, alleen sites waar de mobiele versie is op een aparte host, zoals m.example.com.

gebruikers verwachten een pagina naar beneden te scrollen

zoals het eerste criterium impliceert, is scrollen altijd een belangrijke overweging. Gebruikers over het algemeen niet graag scrollen als ze niet nodig hebben – hoewel, door de jaren heen, dat is veranderd.

dus, wanneer u ontwerpt, moet u overwegen hoeveel gebruikers kunnen zien als ze slechts een scherm vol of twee scrollen., Elk meer dan vijf schermen lang kan een indicatie zijn voor u dat er misschien te veel kopie op de pagina. Natuurlijk, dit is in evenwicht met de mening dat sommige artikelen zijn bedoeld om diepgaande informatie stukken en gebruikers zouden verwachten om een beetje langer te wachten om een aantal pagina-inhoud en inhoudstypen te bekijken.

zowel scrollen als initiële zichtbaarheid zijn uiteraard afhankelijk van schermgrootte: grotere schermen tonen meer inhoud boven de vouw en vereisen minder scrollen.

zal een wijziging in een responsieve mobiele Site resulteren in veel meer verkeer van Google?

niet noodzakelijk, maar misschien.,

zoals veel dingen te maken hebben met Google optimalisatie – het hebben van een mobiele-vriendelijke website is min of meer om ervoor te zorgen dat u het verkeer dat u al krijgt, niet per se geven u meer vrij verkeer van Google.

als u niet al veel verkeer van mobiele bezoekers-Ik weet niet zeker of deze update van Google zal een merkbaar effect hebben op uw verkeer niveaus (in analytics ten minste) in het begin – maar na verloop van tijd – zal het waarschijnlijk een uiterst belangrijke uitdaging om te navigeren.,

De kwaliteit bar wordt – opnieuw – verhoogd door Google, en zijn gebruikers – en als je wilt concurreren in steeds meer concurrerende organische SERPs is dit nog een hindernis voor kleine bedrijven om over te komen.

op lange termijn-deze mobiele conversie kan alleen maar een goede zaak zijn voor uw gebruikers – maar op korte termijn – zal het interessant zijn om te zien welk effect het heeft op de conversiepercentages voor kleine bedrijven – omdat de conversiepercentages via mobiel vaak lager zijn dan op desktop.,

Google heeft gezegd dat dit mobiele-vriendelijke algoritme een grotere impact zal hebben op SERPs dan zowel Google Penguin en Google Panda algoritmen – en we zullen meer te weten komen naarmate de tijd vordert.

controleren op belangrijke problemen met mobiele bruikbaarheid op uw Site

Google Search Console

u moet in staat zijn om mobiele fouten in Google Search Console (ook bekend als Google Webmaster Tools) te volgen en fouten te zien verdwijnen na verloop van tijd als uw site correct is geconfigureerd.,”>

Deel 1 – PageSpeed Insights, Mobiele-Vriendelijke Test-en Mobiele-Usability

Deel 2 – Viewports, zoom en plugins

Deel 3 – Raak doelen, de marges en de lettertype-groottes

Deel 4 – Omleidingen

Web ontwikkelaars moeten vinden mijn andere recente post handig nu dat website snelheid is een ranking factor in Google:

QUOTE: “De mobiele versie van een website moet bij voorkeur lading in minder dan 3 seconden en hoe sneller, hoe beter., Een zeer trage SITE kan een negatieve Ranking factor (bevestigd door Google). Er is geen set drempel of snelheid score te voldoen, alleen maar om uw pagina zo snel mogelijk te maken.”Shaun Anderson, Hobo 2020

Disclaimer

Disclaimer: “hoewel ik alles in het werk heb gesteld om ervoor te zorgen dat de informatie die ik heb verstrekt juist is, is het geen advies.; Ik kan geen verantwoordelijkheid of aansprakelijkheid aanvaarden voor eventuele fouten of omissies. De auteur staat niet in voor sites van derden of diensten van derden. Bezoek sites van derden op eigen risico., Ik werk niet rechtstreeks samen met Google of een andere derde partij. Deze website gebruikt cookies alleen voor analytics en basisfuncties van de website. Dit artikel vormt geen juridisch advies. De auteur aanvaardt geen enkele aansprakelijkheid die zich zou kunnen voordoen bij de toegang tot de gegevens die op deze site worden gepresenteerd. Links naar interne pagina ‘ s promoten mijn eigen content en diensten.”Shaun Anderson, Hobo