Wat zijn de beste schermformaten voor responsive webdesign?

Openbaarmaking: “Dit artikel is een persoonlijke mening van onderzoek op basis van mijn ervaring van bijna 20 jaar. Er zijn geen advertenties van derden op deze pagina of links van welke soort dan ook. Externe links naar sites van derden worden door mij beheerd. Disclaimer. “Shaun Anderson, Hobo

Er is niemand die het beste schermformaat kan ontwerpen. Websites moeten responsief en snel transformeren bij alle schermresoluties op verschillende browsers en platforms. Beschikbaar. Mobielvriendelijk. Ontwerp eerst voor uw publiek. Ontwerp van 360 × 640 tot 1920 × 1080.

• Ontwerp voor desktopbeeldschermen van 1024 × 768 tot 1920 × 1080
• Ontwerp voor mobiele beeldschermen van 360 × 640 tot 414 × 896
• Ontwerp voor tabletschermen van 601 × 962 tot 1280 × 800
• Controleer Google Analytics en optimaliseer voor de meest voorkomende resolutieformaten van uw doelgroep
• Ontwerp geen voor één beeldschermformaat of schermresolutie. Schermgroottes en browservensterstatus variëren tussen bezoekers.
• Het ontwerp moet responsief en snel zijn. Gebruik een vloeiende of responsieve lay-out die transformeert naar de venstergrootte van de huidige gebruiker.
• Houd de mobielvriendelijke en bruikbaarheidswaarschuwingen van Google Search Console in de gaten

Het moet er nog steeds goed uitzien en werken goed in alle maten, daarom raadde ik * vroeger * een zeer toegankelijke vloeibare lay-out aan met procentuele breedtes om de lay-out te regelen. Nu is de aanbeveling een responsieve websitesjabloon.

De drie belangrijkste criteria voor het optimaliseren van een paginalay-out voor een bepaalde schermgrootte zijn:

• Initiële zichtbaarheid van webpagina: alles is belangrijk informatie zichtbaar boven de vouw zodat gebruikers deze kunnen zien zonder te scrollen? Dit is een afweging tussen hoeveel items worden weergegeven en hoeveel details er voor elk item worden weergegeven.
• Leesbaarheid van webpaginas: hoe gemakkelijk is het om de tekst in verschillende kolommen te lezen, gezien hun toegewezen breedte?
• Esthetiek van webpaginas: hoe goed ziet uw pagina eruit als de elementen de juiste grootte en locatie hebben voor deze schermgrootte? Zijn alle elementen correct uitgelijnd – dat wil zeggen, zijn onderschriften direct naast de fotos, enz.?

Richtlijnen voor gebruiksvriendelijkheid raden u ook aan om alle drie de criteria bij alle formaten in overweging te nemen. Controleer het browservenster van 360 × 640 tot 1920 × 1080 schermresoluties.

Uw pagina zou hoog moeten scoren op alle criteria over het gehele resolutiebereik.

Uw pagina zou ook moeten werken kleinere en grotere formaten, hoewel dergelijke extremen minder belangrijk zijn.

Hoewel dergelijke gebruikers zeker toegang zouden moeten hebben tot uw site, is het soms een acceptabel compromis om ze een minder dan geweldig ontwerp te geven.

Top tien van meest voorkomende schermresoluties

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

Een responsieve websitesjabloon is een goede gok

QUOTE: “Responsive webdesign: geeft dezelfde HTML-code weer op dezelfde URL, ongeacht het apparaat van de gebruiker (bijvoorbeeld desktop, tablet, mobiel, niet- visuele browser), maar kan de weergave anders weergeven op basis van de schermgrootte. Google raadt Responsive Web Design aan omdat dit 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 op internet te surfen en om een responsief websiteontwerp ( RWD) is naar voren gekomen als een zeer waarschijnlijke oplossing (er wordt nog steeds over gedebatteerd door liefhebbers) voor uitdagingen op het gebied van schermgrootte.

Deze methode wijkt af van het gebruik van websites met een vaste breedte en gebruikt in plaats daarvan Media Queries in CSS-stylesheets om een website die qua grootte reageert op de verschillende viewports van handheld-apparaten en kleinere schermen die mensen gebruiken.

Dus welk apparaat een persoon ook gebruikt om uw website te bekijken, u bent in staat om hem de best mogelijke ervaring te bieden.

Inhoudsopgave

Google geeft de voorkeur aan mobielvriendelijke sites

Google dicteert de eb en vloed van online handel en ze hebben zojuist gedicteerd dat u moet ontwerpen voor een bevredigende gebruikerservaring op meerdere apparaten ALS u wilt verwachten dat u hoog scoort voor concurrerende zoekwoorden in Google.

QUOTE: “Google gebruikt twee verschillende crawlers voor het crawlen van websites: een mobiele crawler en een desktop-crawler. Elk crawlertype simuleert een gebruiker die uw pagina bezoekt met een apparaat van dat type. Google gebruikt één crawlertype (mobiel of desktop) als primaire crawler voor uw site. Alle paginas op uw site die door Google worden gecrawld, worden gecrawld met de primaire crawler. De primaire crawler voor alle nieuwe websites is de mobiele crawler. Bovendien crawlt Google een paar paginas op uw site opnieuw met het andere crawlertype (mobiel of desktop).Dit wordt de secundaire crawl genoemd en wordt gedaan om te zien hoe goed uw site werkt met het andere apparaattype. ” Google-richtlijnen voor webmasters, 2020

Sinds 21 april 2015 wereldwijd, hoe mobielvriendelijke een site de rankingprestaties voor websites op verschillende apparaten heeft beïnvloed.

Als u websites voor kleine bedrijven maakt – u weet dat ze een website willen die goed presteert in de organische vermeldingen van Google – weet u dat ze geïnteresseerd zijn in zoekmachineoptimalisatie:

CITAAT: “Ik heb 20 jaar ervaring in het beoefenen van professionele SEO. Deze SEO-tutorial is mijn verzameling tips en beste SEO-praktijken die ik gebruik om websites in Google te rangschikken.” Shaun Anderson, Hobo 2020

SEO is nu gedeeltelijk gebaseerd op goede website-UX, zoals Google het kwantificeert, althans voor mobiele gebruikers.

QUOTE: “Nu mobiele zoekopdrachten de desktopzoekopdrachten overstijgen, is het belangrijk dat uw site mobielvriendelijk is. Googlebot gebruikt nu een mobiele crawler als standaardcrawler voor websites. ” Google-richtlijnen voor webmasters, 2020

Op dit moment betekent dat nu in wezen responsief websiteontwerp en mobielvriendelijk, vooral omdat Google “onze index mobile-first maakt “.

Statistieken van desktopschermresolutie wereldwijd mei 2019 – mei 2020

Ter referentie, hier is een lijst van de huidige topschermresoluties wereldwijd zoals recentelijk opgenomen (2020):

Meest voorkomende schermresoluties voor desktops wereldwijd

• 1366 × 768 – 23,49%
• 1920 × 1080 – 19,91%
• 1536 × 864 – 8,65%
• 1440 × 900 – 7,38%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,01%
• 1280 × 800 – 3,33%

Statistieken mobiele schermresolutie wereldwijd mei 2019 – mei 2020

Meest voorkomende formaten mobiele schermresolutie wereldwijd

• 360 × 640 – 17,91%
• 375 × 667 – 7,61%
• 414 × 896 – 6,52%
• 360 × 780 – 5,56%
• 360 × 760 – 5,06%
• 414 × 7 36 – 3,74%

Statistieken over schermresolutie van tablet wereldwijd mei 2019 – mei 2020

Meest voorkomende schermresolutieformaten van tablets 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%

Statistieken van schermresoluties op desktops in de VS mei 2019 – mei 2020

Topschermresoluties in de VS (2020)

Meest voorkomende schermresolutie voor desktop 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%

Statistieken van mobiele schermresolutie in de VS mei 2019 – mei 2020

Meest voorkomende mobiele schermresolutie 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%

Statistieken van tabletschermresolutie in de VS mei 2019 – mei 2020

Meest voorkomende schermresolutie van tablets 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%

Statistieken van desktopschermresolutie in het VK mei 2019 – mei 2020

Topschermresoluties in het VK (2020)

Meest voorkomende schermresolutie voor desktop 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%

Statistieken van mobiele schermresolutie in het VK mei 2019 – mei 2020

Meest voorkomende mobiele schermresolutie 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%

Statistieken van tabletschermresolutie in het VK mei 2019 – mei 2020

Meest voorkomende schermresolutieformaten voor tablets 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%

Wereldwijd marktaandeel desktop versus mobiel versus tablet

Wereldwijd marktaandeel desktop versus mobiel versus tablet

1. Mobiel – 50,48%
2. Desktop – 46,51%
3. Tablet – 3.0%

* Opmerking – de bovenstaande statistieken zijn afkomstig van één (hoewel geloofwaardige) bron, en kunnen dus scheef staan op manieren die we misschien niet kennen. 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 zo te ontwerpen dat er in elke browser, elk platform en elke schermresolutie hetzelfde uitziet, dus probeer het niet.

Je zou kunnen kiezen voor een vloeiende lay-out zonder tabellen voor je ontwerp, met% breedtes die uitzetten en inkrimpen om in de browserinstelling van een bezoeker te passen OF je zou kunnen overwegen om naar responsieve ontwerpoplossingen te kijken die vrijwel hetzelfde bereiken.

Google is voorstander van responsieve ontwerpen, wat goed nieuws is voor degenen die het hebben overgenomen:

QUOTE: “sites die responsive webdesign gebruiken en correct implementeren dynamische weergave (inclusief alle desktopinhoud en markeringen) hoeft over het algemeen niets te doen. ” Google NOV 2017

MOBIEL IS IN STIJGING – dus als u een nieuwe website ontwikkelt, MOET u vanaf het begin nadenken over hoe mobielvriendelijk uw website werkelijk is.

Ik streef ernaar om dingen simpel te houden als ik eigenlijk dingen aan het coderen ben.

Je zult niet – niet – iedereen tevreden willen stellen – en de vraag welke websitegrootte het beste is, is nog steeds een hot topic voor debat door ontwerpers met meer bruikbaarheid en UX-expertise dan ik.

Wat ik wel uit ervaring weet, is dat het voor u van cruciaal belang is om UW publiek en de apparaten die ze gebruiken te identificeren, en om uw website (op het geheel) om bij DAT publiek te passen.

En dat publiek omvat GOOGLEBOT.

Wordt uw mobiele site omgeleid naar een andere URL & Versie van Jouw site?

Nou, dat is niet ideaal. Dat is het in feite nooit geweest.

Lang geleden gebruikten sommige mensen ALLEEN TEKST-versies van een website om inhoud te produceren voor gebruikers / browsers die elementen van hun web niet ondersteunden sites – in een (meestal ijdele) poging om hun inhoud toegankelijker te maken.

Het W3C raadde het zelfs aan, denk ik dat als al het andere faalde:

Een pagina met alleen tekst, met gelijkwaardige informatie of functionaliteit, zal 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-tekstpaginas wordt bijgewerkt wanneer de primaire pagina verandert. SECTIE 508

Het is ALTIJD ideaal geweest om één URL aan een bezoeker te bezorgen voor toegankelijkheidsdoeleinden, en er is geen verschil bij het leveren van mobiele inhoud of smartphone-inhoud als je dat bent nadenken over het maken van een mobiele versie van uw site. Dit kan natuurlijk NOG BELANGRIJKER zijn als Google overstapt op een MOBIELE EERSTE INDEX.

Google kan u PRIMAIR beoordelen op uw mobiel ervaring in de nabije toekomst – dus we moeten ons allemaal bewust zijn van de grote veranderingen die we binnenkort kunnen zien in de SERPs van Google.

Als Google de bezoeker is, is het meestal nog belangrijker om alleen één URL vanwege canonieke URL-uitdagingen voor zoekmachines – en dit was het geval vóór de implementatie van het canonieke linkelement enige tijd geleden.

De ideale situatie is dus om altijd één URL te leveren.

Als u “smartphone” -inhoud heeft (die we beschouwen als normale webinhoud, aangezien het over het algemeen een norma l HTML-pagina, net aangepast in lay-out voor kleinere schermen) kunt u de rel = canonical gebruiken om naar uw desktopversie te verwijzen. Dit helpt ons om ons te concentreren op de desktopversie voor zoeken op internet. Wanneer gebruikers die desktopversie bezoeken met een smartphone, kun je ze doorverwijzen naar de mobiele versie. Dit werkt ongeacht de URL-structuur, dus u hoeft geen subdomeinen / submappen te gebruiken voor smartphone-mobiele sites. Het is echter nog beter om dezelfde URLs te gebruiken en de juiste versie van de inhoud weer te geven zonder omleiding. John Mueller, Google

Het negeren van de aanbevelingen van Google is vaak geen slimme zet

CITAAT: Om samen te vatten, kijken onze crawl-, indexerings- en classificatiesystemen momenteel meestal naar het bureaublad versie van de inhoud van een pagina, wat problemen kan veroorzaken voor mobiele gebruikers wanneer die versie enorm verschilt van de mobiele versie. Mobile-first indexering houdt in dat we de mobiele versie van de inhoud gebruiken voor indexering en rangschikking, om onze, voornamelijk mobiele, gebruikers beter te helpen vinden wat ze zoeken. Webmasters zullen aanzienlijk meer crawlen zien door Smartphone Googlebot, en de fragmenten in de resultaten, evenals de inhoud op de Google-cachepaginas, zijn afkomstig van de mobiele versie van de paginas.Google Nov 2017

Google biedt de volgende tips om te controleren of uw site is voorbereid op de mobiele eerste index, maar in wezen als u een responsief webontwerp gebruikt sjabloon voor uw site zou u minimale problemen moeten hebben met deze wijziging:

• Zorg ervoor dat de mobiele versie van de site ook de belangrijke , inhoud van hoge kwaliteit. Dit omvat tekst, afbeeldingen (met alt-attributen) en videos – in de gebruikelijke doorzoekbare en indexeerbare formaten.

• Gestructureerde gegevens zijn belangrijk voor indexerings- en zoekfuncties waar gebruikers dol op zijn: ze moeten zowel op de mobiele als op de desktopversie van de site staan. Zorg ervoor dat URLs in de gestructureerde gegevens worden bijgewerkt naar de mobiele versie op de mobiele paginas.

• Metadata moeten aanwezig zijn op beide versies van de site. Het geeft hints over de inhoud van een pagina voor indexering en weergave. Zorg er bijvoorbeeld voor dat titels en metabeschrijvingen gelijk zijn in beide versies van alle paginas op de site.

• Er zijn geen wijzigingen nodig voor koppeling met afzonderlijke mobiele URLs (m.-dot-sites). Voor sites die afzonderlijke mobiele URLs gebruiken, behoudt u de bestaande link rel = canonical en koppelt u rel = alternatieve elementen tussen deze versies.

• Controleer hreflang-links op afzonderlijke mobiele URLs. Als u link rel = hreflang-elementen gebruikt voor internationalisering, moet u de mobiele URLs en desktop-URLs afzonderlijk koppelen. De hreflang van uw mobiele URLs moet verwijzen naar de andere taal- / regioversies op andere mobiele URLs, en op dezelfde manier de desktop koppelen aan andere desktop-URLs met behulp van hreflang-linkelementen daar.

• Zorg ervoor dat de servers die de site hosten voldoende capaciteit hebben om een mogelijk verhoogde crawlsnelheid aan te kunnen. Dit heeft geen invloed op sites die responsive webdesign en dynamische weergave gebruiken, alleen sites waarvan de mobiele versie op een aparte host staat, zoals m.example.com.

Gebruikers verwachten een pagina omlaag te scrollen

Zoals het eerste criterium al aangeeft, is scrollen altijd een belangrijke overweging. Gebruikers hielden er over het algemeen niet van om te scrollen als dat niet nodig was – hoewel dat in de loop der jaren is veranderd.

Bij het ontwerpen moet u dus overwegen hoeveel gebruikers kunnen zien als ze alleen scrollen scherm volledig of twee. Als de pagina meer dan vijf schermen lang is, kan dit een aanwijzing zijn dat er mogelijk te veel tekst op de pagina staat. Dit is natuurlijk in evenwicht met de opvatting dat sommige artikelen bedoeld zijn als diepgaande informatiestukken en dat gebruikers verwachten dat ze wat langer moeten wachten om bepaalde pagina-inhoud en inhoudstypen te bekijken.

Zowel scrollen als initiaal zichtbaarheid hangt uiteraard af van de schermgrootte: grotere schermen tonen meer inhoud boven de vouw en vereisen minder scrollen.

Zal een verandering in een responsieve mobiele site resulteren in veel meer verkeer van Google?

Niet per se, maar misschien.

Zoveel dingen die te maken hebben met Google-optimalisatie: het hebben van een mobielvriendelijke website is er min of meer voor zorgen dat u het verkeer dat u al ontvangt, HOUDT, niet noodzakelijkerwijs meer gratis verkeer van Google.

Als u nog niet veel verkeer van mobiele bezoekers krijgt, weet ik niet zeker of deze update van Google een merkbaar effect zal hebben op uw verkeersniveau (in ieder geval in analyses ) aan het begin – maar na verloop van tijd – zal het waarschijnlijk een buitengewoon belangrijke uitdaging zijn om te navigeren.

De qual ity-lat wordt verhoogd – opnieuw – door Google en zijn gebruikers – en als je wilt concurreren in steeds concurrerender organische SERPs, is dit nog een hindernis voor kleine bedrijven om te overwinnen.

Op de 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 van kleine bedrijven – aangezien conversieratios via mobiel vaak lager zijn dan op desktop.

Google heeft gezegd dat dit mobielvriendelijke algoritme een grotere impact op SERPs zal hebben dan zowel Google Penguin- als Google Panda-algoritmen – en we zullen er na verloop van tijd meer achter komen.

Hoe Controleren op belangrijke mobiele bruikbaarheidsproblemen op uw site

Google Search Console

U zou mobiele fouten moeten kunnen volgen in Google Search Console (AKA Google Webmaster Tools) en zien dat fouten verdwijnen tijd als uw site correct is geconfigureerd.

Tool om uw site te testen op mobiele vriendelijkheid

• Search Console Url Inspection Tool
• Pagespeed Insights
• Think with Google
• Mobielvriendelijke test

Hoe u uw website mobielvriendelijk kunt maken

Deel 1 – PageSpeed Insights, mobielvriendelijke test en mobiele bruikbaarheid

Deel 2 – Viewports, zoom en plug-ins

Deel 3 – Tik op doelen, marges en lettergroottes

Deel 4 – Omleidingen

Webontwikkelaars zouden mijn andere recente nuttig bericht nu sitesnelheid een rangschikkingsfactor is in Google:

QUOTE: “De mobiele versie van een website zou idealiter binnen 3 seconden moeten worden geladen en de sneller hoe beter. EEN ZEER LANGZAME SITE kan een NEGATIEVE rangschikkingsfactor zijn (bevestigd door Google). Er is geen vaste drempel of snelheidsscore waaraan moet worden voldaan, ju st om uw pagina zo snel mogelijk te maken. ” Shaun Anderson, Hobo 2020

Disclaimer

Disclaimer: “Terwijl ik heeft er alles aan gedaan om ervoor te zorgen dat de informatie die ik heb verstrekt correct is, het is geen advies; Ik kan geen enkele verantwoordelijkheid of aansprakelijkheid aanvaarden voor eventuele fouten of weglatingen. De auteur staat niet in voor sites van derden of enige service van derden. Bezoek sites van derden op eigen risico. Ik ben niet rechtstreeks een partnerschap aangegaan met Google of een andere derde partij. Deze website gebruikt cookies alleen voor analyse en basiswebsitefuncties. Dit artikel vormt geen juridisch advies. De auteur aanvaardt geen enkele aansprakelijkheid die zou kunnen ontstaan door toegang tot de gegevens die op deze site worden gepresenteerd. Links naar interne paginas promoten mijn eigen inhoud en services. ” Shaun Anderson, Hobo