Quelles sont les meilleures tailles décran pour une conception Web réactive?

Divulgation: « Cet article est une opinion personnelle de recherche basée sur mon expérience de près de 20 ans. Il ny a pas de publicité de tiers sur cette page ou des liens monétisés de toute sorte. Les liens externes vers des sites tiers sont modérés par moi. Clause de non-responsabilité. « Shaun Anderson, Hobo

Il ny a pas de meilleure taille décran pour concevoir. Les sites Web doivent se transformer de manière réactive et rapide à toutes les résolutions décran sur différents navigateurs et plates-formes. Accessible. Adapté aux mobiles. Concevez dabord pour votre public. Conception de 360 × 640 à 1920 × 1080.

• Conception pour écrans de bureau de 1024 × 768 à 1920 × 1080
• Conception pour écrans mobiles de 360 × 640 à 414 × 896
• Conception pour les écrans de tablette de 601 × 962 à 1280 × 800
• Vérifiez Google Analytics et optimisez les tailles de résolution les plus courantes de votre public cible
• Ne pas concevoir pour une taille de moniteur ou une résolution décran. Les tailles décran et létat de la fenêtre du navigateur varient selon les visiteurs.
• La conception doit être réactive et rapide. Utilisez une mise en page liquide ou réactive qui se transforme en fonction de la taille de la fenêtre de lutilisateur actuel.
• Surveillez les alertes relatives à la convivialité et à la convivialité de Google Search Console

Cela devrait toujours être beau et fonctionner bien dans toutes les tailles, cest pourquoi jai * lhabitude de * recommander une mise en page liquide hautement accessible utilisant des largeurs en pourcentage pour contrôler la mise en page. Désormais, la recommandation est un modèle de site Web réactif.

Les trois principaux critères doptimisation dune mise en page pour une certaine taille décran sont:

• Page Web Visibilité initiale: tout est essentiel informations visibles au-dessus du pli pour que les utilisateurs puissent les voir sans faire défiler? Il sagit dun compromis entre le nombre déléments affichés et la quantité de détails affichés pour chaque élément.
• Lisibilité des pages Web: est-il facile de lire le texte dans différentes colonnes, compte tenu de leur largeur allouée?
• Esthétique de la page Web: Quelle est la qualité de votre page lorsque les éléments sont à la taille et à lemplacement appropriés pour cette taille décran? Tous les éléments salignent-ils correctement – cest-à-dire, les légendes se trouvent-elles immédiatement à côté des photos, etc.?

Les consignes dutilisation vous recommandent également de considérer les trois critères dans la gamme complète des tailles. Vérifiez la fenêtre du navigateur avec des résolutions décran de 360 × 640 à 1920 × 1080.

Votre page doit obtenir un score élevé sur tous les critères sur toute la plage de résolution.

Votre page doit également fonctionner à même des tailles de plus en plus grandes, bien que ces extrêmes soient moins importants.

Bien que ces utilisateurs devraient certainement pouvoir accéder à votre site, leur donner un design moins que génial est parfois un compromis acceptable.

Les dix résolutions décran les plus courantes

Analyse des visiteurs de près dun demi-million de visiteurs au cours des 6 premiers mois de 2020:

Un modèle de site Web réactif est un bon pari

QUOTE: « Responsive Web Design: Sert le même code HTML sur la même URL quel que soit lappareil de lutilisateur (par exemple, ordinateur de bureau, tablette, mobile, non visual browser), mais peut rendre laffichage différemment en fonction de la taille de lécran. Google recommande le Responsive Web Design, car il sagit du modèle de conception le plus simple à mettre en œuvre et à gérer.  » Google Developer Guides, 2020

De nos jours, de nombreuses personnes utilisent des appareils portables (tablettes et smartphones) pour naviguer sur le Web et concevoir un site Web réactif ( RWD) est apparue comme une solution très probable (elle est toujours débattue par les aficionados) aux problèmes de taille décran.

Cette méthode séloigne de lutilisation de sites Web à largeur fixe et utilise à la place des requêtes multimédias dans des feuilles de style CSS pour créer un site Web qui répond en taille aux différentes fenêtres des appareils portables et des écrans plus petits que les gens utilisent.

Ainsi, quel que soit lappareil quune personne utilise pour afficher votre site Web, vous êtes en mesure de lui offrir lexpérience la plus complète possible.

Table des matières

Google Prefers Mobile-Friendly Sites

Google dicte le flux et le reflux du commerce en ligne et ils viennent de dire que vous devez concevoir une expérience utilisateur satisfaisante sur plusieurs appareils SI vous voulez vous attendre à obtenir un classement élevé pour les mots-clés concurrents sur Google.

CITATION: « Google utilise deux robots dexploration différents pour lexploration de sites Web: un robot dexploration mobile et un robot dexploration de bureau. Chaque type de robot dexploration simule un utilisateur visitant votre page avec un appareil de ce type. Google utilise un type de robot dexploration (mobile ou ordinateur) comme robot dexploration principal de votre site. Toutes les pages de votre site explorées par Google sont explorées à laide du robot dexploration principal. Le robot dexploration principal pour tous les nouveaux sites Web est le robot dexploration mobile. De plus, Google réexplore quelques pages de votre site avec lautre type de robot dexploration (mobile ou bureau).Cette opération sappelle lexploration secondaire et permet de voir dans quelle mesure votre site fonctionne avec lautre type dappareil.  » Consignes Google aux webmasters, 2020

Depuis le 21 avril 2015, à léchelle mondiale, la compatibilité dun site avec les mobiles a affecté les performances de classement des sites Web sur divers appareils.

Si vous créez des sites Web pour de petites entreprises – vous saurez quils veulent un site Web qui fonctionnera bien dans les listes organiques de Google – vous savez quils sont intéressés par loptimisation des moteurs de recherche:

CITATION: « Jai 20 ans dexpérience dans la pratique du référencement professionnel. Ce tutoriel SEO est ma collection de conseils et de bonnes pratiques SEO que jutilise pour classer les sites Web sur Google. » Shaun Anderson, Hobo 2020

Le référencement est désormais basé, en partie, sur une bonne UX de site Web, comme Google le quantifie, du moins pour les utilisateurs mobiles.

CITATION: « Les recherches sur mobile dépassant désormais les recherches sur ordinateur, il est important que votre site soit adapté aux mobiles. Googlebot utilise désormais un robot dexploration mobile comme robot dexploration par défaut pour les sites Web.  » Consignes aux webmasters de Google, 2020

Pour le moment, cela signifie essentiellement une conception de site Web réactive et adaptée aux mobiles, en particulier avec Google « faisant de notre index une priorité pour les mobiles « .

Statistiques de résolution décran de bureau dans le monde de mai 2019 à mai 2020

Pour référence, voici une liste des résolutions décran les plus élevées dans le monde telles quelles ont été enregistrées récemment (2020):

Tailles de résolution décran de bureau les plus courantes dans le monde

• 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%

Statistiques de résolution décran mobile dans le monde de mai 2019 à mai 2020

Tailles de résolution décran mobile les plus courantes dans le monde

• 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%

Statistiques de résolution décran de la tablette dans le monde de mai 2019 à mai 2020

Tailles de résolution décran de tablette les plus courantes dans le monde

• 768 × 1024 – 51,98%
• 1280 × 800 – 7,11%
• 800 × 1280 – 5,34%
• 601 × 962 – 4,47%
• 600 × 1024 – 2,85%
• 1024 × 1366 – 1,96%

Statistiques de résolution décran de bureau aux États-Unis Mai 2019 – Mai 2020

Principales résolutions décran aux États-Unis (2020)

Taille de résolution décran de bureau la plus courante aux États-Unis dAmérique

• 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%

Statistiques de résolution décran mobile aux États-Unis de mai 2019 à mai 2020

Taille de résolution décran mobile la plus courante aux États-Unis dAmérique

• 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%

Statistiques de résolution décran des tablettes aux États-Unis de mai 2019 à mai 2020

Taille de résolution décran de tablette la plus courante aux États-Unis dAmérique

• 768 × 1024 – 54,68%
• 800 × 1280 – 5,75%
• 1280 × 800 – 5,73%
• 601 × 962 – 5,41%
• 1024 × 1366 – 3.06%
• 600 × 1024 -2.57%

Statistiques de résolution décran de bureau au Royaume-Uni Mai 2019 – Mai 2020

Résolutions décran supérieur au Royaume-Uni (2020)

La taille de résolution décran de bureau la plus courante au Royaume-Uni

• 1920 × 1080 – 20,62%
• 1366 × 768 – 17,32%
• 1440 × 900 – 11,65%
• 1536 × 864 – 8,38%
• 1280 × 720 – 5,2%
• 1280 × 800 – 4,73%

Statistiques de résolution décran mobile au Royaume-Uni Mai 2019 – Mai 2020

Taille de résolution décran mobile la plus courante au Royaume-Uni

• 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%

Statistiques de résolution de lécran des tablettes au Royaume-Uni de mai 2019 à mai 2020

Tailles de résolution décran de tablette les plus courantes au Royaume-Uni

• 768 × 1024 – 58,31%
• 1280 × 800 – 6,92%
• 800 × 1280 – 6,02%
• 601 × 962 – 3,68%
• 600 × 1024 – 3,26%
• 1024 × 1366 – 1,71%

Part de marché des ordinateurs de bureau, des mobiles et des tablettes dans le monde

Part de marché des ordinateurs de bureau par rapport aux mobiles par rapport aux tablettes dans le monde

1. Mobile – 50,48%
2. Desktop – 46,51%
3. Tablette – 3.0%

* Remarque – les statistiques ci-dessus proviennent dune seule source (bien que crédible), elles pourraient donc être faussées dune manière que nous ne saurions peut-être pas. Graphiques fournis par http://statcounter.com/.

Comment concevoir un site identique dans tous les navigateurs & Résolution?

Vous ne pouvez pas.

Il est impossible de concevoir un site Web de la même manière dans tous les navigateurs, plates-formes et résolutions décran, alors évitez dessayer.

Vous pouvez opter pour une mise en page fluide sans tableaux pour votre conception, avec des% de largeurs qui sétendent et se contractent pour sadapter aux paramètres du navigateur des visiteurs OU vous pouvez envisager de rechercher des solutions de conception réactives qui permettront datteindre à peu près la même chose.

Google privilégie les designs responsives, ce qui est une bonne nouvelle pour ceux qui lont adopté:

QUOTE: « des sites qui utilisent un design web réactif et qui mettent correctement en œuvre la diffusion dynamique (qui inclut tout le contenu du bureau et le balisage) na généralement rien à faire. » Google NOV 2017

MOBILE EST EN HAUSSE – donc si vous développez un nouveau site Web – vous DEVEZ réfléchir à la convivialité de votre site Web pour les mobiles dès le départ.

Mon objectif est de garder les choses simples quand je suis en train de coder des choses.

Vous ne pourrez pas – ne pouvez pas – plaire à tout le monde – et la question de savoir quelle taille de site Web est la meilleure est toujours un sujet brûlant débat entre les concepteurs avec plus de convivialité et dexpertise UX que moi.

Ce que je sais par expérience, cest quil est dune importance cruciale pour vous didentifier VOTRE public et les appareils quils utilisent, et de créer votre site Web (sur lensemble) pour convenir à CETTE audience.

Et cette audience comprend GOOGLEBOT.

Votre site mobile est-il redirigé vers une autre URL & Version de Votre site?

Ce nest pas lidéal. En fait, cela na jamais été le cas.

Il y a bien longtemps – certains utilisaient des versions TEXTE UNIQUEMENT dun site Web pour produire du contenu pour les utilisateurs / navigateurs qui ne prennent pas en charge les éléments de leur site Web sites – dans une tentative (généralement vaine) de rendre leur contenu plus accessible.

Le W3C avait même lhabitude de le recommander, je pense que si tout le reste échouait:

Une page contenant uniquement du texte, avec des informations ou des fonctionnalités équivalentes, doit être fournie pour rendre un site Web conforme aux dispositions de cette partie, lorsque la conformité ne peut être obtenue daucune autre manière. Le contenu des pages contenant uniquement du texte sera mis à jour chaque fois que la page principale change. SECTION 508

Il a TOUJOURS été idéal de fournir une URL à un visiteur à des fins daccessibilité, et il ny a aucune différence lors de la diffusion de contenu mobile ou smartphone si vous êtes vous envisagez de créer une version « mobile » de votre site. Ceci, bien sûr, pourrait bien être encore PLUS IMPORTANT si Google passe à un PREMIER INDEX MOBILE.

Google peut très bien vous évaluer PRIMAIREMENT sur votre mobile expérience dans un proche avenir – nous devons donc tous être conscients des grands changements que nous pourrions voir très bientôt dans les SERPs de Google.

Lorsque Google est le «  visiteur , il est généralement encore plus important de livrer juste une URL en raison des défis dURL canoniques pour les moteurs de recherche – et cétait le cas avant la mise en œuvre de lélément de lien canonique il y a quelque temps.

La situation idéale est donc de fournir une URL à tout moment.

Si vous avez du contenu « smartphone » (que nous considérons comme un contenu Web normal, car il sagit généralement dune norme l page HTML, juste modifiée dans la mise en page pour les petits écrans), vous pouvez utiliser le rel = canonical pour pointer vers votre version de bureau. Cela nous aide à nous concentrer sur la version de bureau pour la recherche sur le Web. Lorsque les utilisateurs visitent cette version de bureau avec un smartphone, vous pouvez les rediriger vers la version mobile. Cela fonctionne quelle que soit la structure de lURL, vous navez donc pas besoin dutiliser des sous-domaines / sous-répertoires pour les sites smartphone-mobile. Mieux encore, cest dutiliser les mêmes URL et dafficher la version appropriée du contenu sans redirection John Mueller, Google

Ignorer les recommandations de Google nest souvent pas une décision judicieuse

CITATION: Pour récapituler, nos systèmes dexploration, dindexation et de classement se penchent généralement sur le bureau version du contenu dune page, ce qui peut poser des problèmes aux internautes mobiles lorsque cette version est très différente de la version mobile. Lindexation mobile dabord signifie que nous utiliserons la version mobile du contenu pour lindexation et le classement, afin de mieux aider nos utilisateurs, principalement mobiles, à trouver ce quils recherchent. Les webmasters verront une augmentation significative de lexploration par Smartphone Googlebot, et les extraits dans les résultats, ainsi que le contenu sur les pages de cache Google, proviendront de la version mobile des pages.Google Nov 2017

Google propose les conseils suivants pour vérifier que votre site est préparé pour le premier index mobile, mais essentiellement, si vous utilisez une conception Web réactive pour votre site, vous devriez avoir des problèmes minimes avec cette modification:

• Assurez-vous que la version mobile du site contient également les , contenu de haute qualité. Cela inclut le texte, les images (avec les attributs alt) et les vidéos – dans les formats explorables et indexables habituels.

• Les données structurées sont importantes pour les fonctionnalités dindexation et de recherche que les utilisateurs adorent: elles doivent être à la fois sur la version mobile et sur la version bureau du site. Assurez-vous que les URL des données structurées sont mises à jour vers la version mobile sur les pages mobiles.

• Les métadonnées doivent être présentes sur les deux versions du site. Il fournit des conseils sur le contenu dune page pour lindexation et la diffusion. Par exemple, assurez-vous que les titres et les méta descriptions sont équivalents dans les deux versions de toutes les pages du site.

• Aucune modification nest nécessaire pour linterconnexion avec des URL mobiles distinctes (sites m.-dot). Pour les sites utilisant des URL mobiles distinctes, conservez le lien existant rel = canonical et le lien rel = alternatif entre ces versions.

• Vérifiez les liens hreflang sur des URL mobiles distinctes. Lorsque vous utilisez des éléments link rel = hreflang pour linternationalisation, créez un lien entre les URL mobiles et de bureau séparément. Le hreflang de vos URL pour mobile doit pointer vers les autres versions de langue / région sur dautres URL pour mobile, et de même associer le bureau à dautres URL de bureau à laide déléments de lien hreflang.

• Assurez-vous que les serveurs hébergeant le site ont une capacité suffisante pour gérer une vitesse dexploration potentiellement accrue. Cela naffecte pas les sites qui utilisent la conception Web responsive et la diffusion dynamique, uniquement les sites où la version mobile se trouve sur un hôte distinct, tel que m.example.com.

Les utilisateurs sattendent à faire défiler une page vers le bas

Comme le premier critère lindique, le défilement est toujours une considération clé. Les utilisateurs naimaient généralement pas faire défiler sils nen avaient pas besoin – même si, au fil des ans, cela a changé.

Ainsi, lorsque vous concevez, vous devriez considérer combien les utilisateurs peuvent voir sils ne font défiler quun écran plein ou deux. Une longueur de plus de cinq écrans peut vous indiquer quil y a peut-être trop de copies sur la page. Bien sûr, cela est contrebalancé par lidée que certains articles sont censés être des éléments dinformation détaillés et que les utilisateurs sattendent à attendre un peu plus longtemps pour voir le contenu de certaines pages et certains types de contenu.

À la fois défilement et initial La visibilité dépend évidemment de la taille de lécran: les écrans plus grands affichent plus de contenu au-dessus du pli et nécessitent moins de défilement.

Un changement vers un site mobile réactif entraînera-t-il beaucoup plus de trafic de Google?

Pas nécessairement, mais peut-être.

Autant de choses à faire avec loptimisation de Google – avoir un site Web adapté aux mobiles est plus ou moins pour vous assurer de GARDER le trafic que vous obtenez déjà, pas nécessairement pour vous donner plus de gratuité trafic de Google.

Si vous ne recevez pas déjà beaucoup de trafic des visiteurs mobiles, je ne sais pas si cette mise à jour de Google aura un effet notable sur vos niveaux de trafic (du moins dans Google Analytics ) au début – mais avec le temps – ce sera probablement un défi extrêmement important à naviguer.

Le qual Google et ses utilisateurs relèvent la barre de la ville – encore une fois – et si vous voulez être concurrentiel dans des SERP organiques de plus en plus compétitifs, cest encore un autre obstacle à surmonter pour les petites entreprises.

À LONG terme – cette conversion mobile ne peut être quune bonne chose pour vos utilisateurs – mais à court terme – il sera intéressant de voir son effet sur les taux de conversion des petites entreprises – car les taux de conversion via mobile sont souvent inférieurs à ceux sur ordinateur.

Google a déclaré que cet algorithme adapté aux mobiles aura un impact plus important sur les SERP que les algorithmes de Google Penguin et Google Panda – et nous en saurons plus avec le temps.

Comment Pour rechercher dimportants problèmes dergonomie mobile sur votre site

Google Search Console

Vous devriez être en mesure de suivre les erreurs mobiles dans Google Search Console (AKA Google Webmaster Tools) et voir les erreurs disparaître. heure si votre site est configuré correctement.

Outil de test de la convivialité mobile de votre site

• Outil dinspection dURL de la Search Console
• Pagespeed Insights
• Think With Google
• Test de compatibilité mobile

Comment rendre votre site Web convivial

Partie 1 – PageSpeed Insights, test doptimisation mobile et convivialité mobile

Partie 2 – Fenêtres, zoom et plugins

Partie 3 – Toucher les cibles, les marges et les tailles de police

Partie 4 – Redirections

Les développeurs Web devraient trouver mes autres post utile maintenant que la vitesse du site est un facteur de classement dans Google:

CITATION: « La version mobile dun site Web devrait idéalement se charger en moins de 3 secondes et le Plus vite, mieux cest. UN SITE TRÈS LENT peut être un facteur de classement NÉGATIF (confirmé par Google). Il ny a pas de seuil ou de score de vitesse à atteindre, ju st pour rendre votre page aussi rapide que possible. » Shaun Anderson, Hobo 2020

Clause de non-responsabilité

Clause de non-responsabilité: « Tant que jai fait tout son possible pour sassurer que les informations que jai fournies sont correctes, ce ne sont pas des conseils .; Je ne peux accepter aucune responsabilité pour déventuelles erreurs ou omissions. Lauteur ne garantit pas les sites tiers ni aucun service tiers. Visitez des sites tiers à vos propres risques. Je ne suis pas directement associé à Google ou à tout autre tiers. Ce site Web utilise des cookies uniquement pour lanalyse et les fonctions de base du site Web. Cet article ne constitue pas un avis juridique. Lauteur décline toute responsabilité pouvant découler de laccès aux données présentées sur ce site. Des liens vers des pages internes font la promotion de mes propres contenus et services. » Shaun Anderson, Hobo