divulgation: « cet article est une opinion personnelle de la recherche basée sur mon expérience de près de 20 ans. Il n’y a pas de publicité de tiers sur cette page ni de liens monétisés de quelque sorte que ce soit. Les liens externes vers des sites tiers sont modérés par moi. Avertissement. « Shaun Anderson, le Hobo

Il n’y a pas une seule taille de l’écran de la conception. 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. Mobile-friendly. La conception de votre public, d’abord. Conception de 360×640 à 1920×1080.

  • conception pour les écrans de bureau de 1024×768 à 1920×1080
  • conception pour les écrans mobiles de 360×640 à 414×896
  • conception pour les écrans de tablette de 601×962 à 1280×800
  • Vérifiez Google Analytics et optimisez pour les tailles de résolution les plus courantes de votre public cible
  • ne. La taille de l’écran et l’état de la fenêtre du navigateur varient selon les visiteurs.
  • La conception doit être réactive et rapide., Utilisez une disposition liquide ou réactive qui se transforme en taille de fenêtre de l’utilisateur actuel.
  • surveillez les alertes conviviales et conviviales de Google Search Console

Il devrait toujours être beau et bien fonctionner à toutes les tailles, c’est pourquoi je *recommandais* une disposition liquide très accessible en utilisant des largeurs en pourcentage pour contrôler la disposition. Maintenant, la recommandation est un modèle de site web réactif.,

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

  • visibilité initiale de la Page Web: toutes les informations clés sont-elles visibles au-dessus du pli pour que les utilisateurs puissent les voir sans défilement? Il s’agit d’un compromis entre le nombre d’éléments affichés et la quantité de détails affichés pour chaque élément.
  • lisibilité de la Page 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 à l’emplacement appropriés pour cette taille d’écran?, Est — ce que tous les éléments s’alignent correctement-c’est-à-dire que les légendes sont immédiatement à côté des photos, etc.?

les directives D’utilisation vous ont également recommandé de considérer les trois critères à la gamme complète de tailles,. Vérifiez la fenêtre du navigateur de 360×640 à 1920×1080 résolutions d’écran.

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

votre page devrait également fonctionner à des tailles encore plus petites et plus grandes, bien que de tels extrêmes soient moins importants.,

bien que ces utilisateurs devraient certainement être en mesure d’accéder à votre site, leur donner un design moins que génial est parfois un compromis acceptable.,

Top Ten Most Common Screen Resolutions

analyse des visiteurs de près d’un demi-million de visiteurs au cours des 6 premiers mois de 2020:

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

citation: « Responsive Web Design: sert le même code HTML mais peut rendre l’affichage différemment en fonction de la taille de L’écran. Google recommande Responsive Web Design car c’est le modèle de conception le plus facile à mettre en œuvre et à maintenir., »Google Developer Guides, 2020

dans le monde d’aujourd’hui, beaucoup de gens utilisent des appareils portables (tablettes et smartphones) pour naviguer sur le web et la conception de sites Web réactifs (RWD) est apparue comme une solution très probable (elle est toujours débattue par les aficionados) aux défis de taille d’écran.

Cette méthode s’éloigne de l’utilisation de sites web à Largeur fixe et utilise plutôt 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 d’affichage des appareils portables et des écrans plus petits que les gens utilisent.,

donc, quel que soit l’appareil qu’une personne peut utiliser pour afficher votre site Web, vous êtes en mesure de lui donner l’expérience la plus complète possible.

table des matières

Google préfère les Sites adaptés aux mobiles

Google dicte le flux et le reflux du commerce en ligne et ils ont juste dicté que vous devez concevoir pour une expérience utilisateur satisfaisante sur plusieurs appareils si vous voulez vous attendre à classer haut pour les mots clés compétitifs dans Google.

citation: « Google utilise deux robots d’exploration différents pour explorer les sites web: un robot d’exploration mobile et un robot d’exploration de bureau., Chaque type de robot simule un utilisateur visitant votre page avec un appareil de ce type. Google utilise un type de robot (mobile ou de bureau) comme robot principal pour votre site. Toutes les pages de votre site qui sont explorées par Google le sont à l’aide du robot principal. Le robot principal pour tous les nouveaux sites web est le robot mobile. De plus, Google recrache quelques pages sur votre site avec l’autre type de robot (mobile ou de bureau). C’est ce qu’on appelle l’analyse secondaire, et est fait pour voir comment votre site fonctionne avec l’autre type de périphérique., »Google Webmaster Guidelines, 2020

Depuis le 21 avril 2015, à l’échelle mondiale, la manière dont un site adapté aux mobiles a affecté les performances de classement des sites Web sur divers appareils.

Si vous créez des sites Web pour les petites entreprises-vous saurez qu’ils veulent un site web qui fonctionnera bien dans Google organic listings – vous savez qu’ils sont intéressés par l’optimisation des moteurs de recherche:

citation: « j’ai 20 ans d’expérience dans la pratique du référencement professionnel. Ce tutoriel SEO est ma collection de conseils et de meilleures pratiques SEO que j’utilise pour classer les sites Web dans Google., »Shaun Anderson, Hobo 2020

Le référencement est maintenant basé, en partie, sur un bon site Web UX, comme Google le quantifie, au moins pour les utilisateurs mobiles.

citation: « les recherches mobiles dépassant désormais les recherches de bureau, il est important que votre site soit adapté aux mobiles. Googlebot utilise désormais un robot mobile comme robot par défaut pour les sites web. »Google Webmaster Guidelines, 2020

pour le moment – cela signifie essentiellement maintenant une conception de site Web réactive et adaptée aux mobiles, en particulier avec Google « faire de notre index mobile d’abord ».,

statistiques de résolution D’écran de bureau dans le monde mai 2019 – mai 2020

pour référence, voici une liste des meilleures résolutions d’écran actuelles dans le monde telles qu’enregistrées récemment (2020):

tailles de résolution D’écran de bureau les plus courantes li>

  • 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 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×736 – 3,74%

    statistiques de résolution d’écran de la tablette dans le monde mai 2019 – mai 2020

    tailles de résolution d’écran 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

    meilleures résolutions d’écran aux États – Unis (2020)

    taille de résolution d’écran de bureau la plus courante aux États – Unis d’Amé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%

    Mobile Résolution de l’Écran de Stats dans le NOUS Mai 2019 – Mai 2020

    la Plupart des Communes Mobile Résolution d’Écran Taille aux États-unis D’Amérique

    • 414×816 – de 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%

    Tablette Résolution de l’Écran de Stats dans le NOUS Mai 2019 – Mai 2020

    la Plupart des communes de la Tablette Résolution d’Écran Taille aux États-unis D’Amé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 dans le Royaume – Uni mai 2019 – mai 2020

    meilleures résolutions d’écran au Royaume – Uni (2020)

    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%

    Mobile Résolution de l’Écran de Stats dans le royaume-UNI Mai 2019 – Mai 2020

    la Plupart des Communes Mobile Résolution d’Écran Taille 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 – de 4,75%

    Tablette Résolution de l’Écran de Stats dans le royaume-UNI Mai 2019 – Mai 2020

    la Plupart des Communes de la Tablette Résolution de l’Écran Tailles dans le 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%

    bureau vs Mobile vs tablette marché partager dans le monde entier

    desktop vs Mobile vs tablet part de marché dans le monde entier

    1. mobile – 50.48%
    2. desktop – 46.51%
    3. tablet – 3.0%

    *remarque – les statistiques ci-dessus proviennent d’une source (bien que crédible), pourraient donc être biaisées de peut-être pas savoir. Les graphiques fournis par http://statcounter.com/.,

    Comment puis-je concevoir un Site qui ressemble à tous les navigateurs & résolution?

    Vous ne pouvez pas.

    Il est impossible de concevoir un site Web de manière à ce qu’il soit identique dans chaque navigateur, plate-forme et résolution d’écran, alors évitez d’essayer.

    Vous pouvez opter pour une mise en page fluide sans tables pour votre conception, avec des % de largeurs qui se dilatent et se contractent pour s’adapter à un paramètre du navigateur des visiteurs ou vous pouvez envisager de rechercher des solutions de conception réactives qui réaliseront à peu près la même chose.,

    Google privilégie le responsive design, ce qui est une bonne nouvelle pour ceux qui l’ont adopté:

    citation: « les sites qui utilisent le responsive web design et implémentent correctement le service dynamique (qui inclut tout le contenu du bureau et le balisage) n’ont généralement rien à faire. »Google NOV 2017

    le MOBILE est à la hausse – donc si vous développez un nouveau site Web – vous devez penser à la façon dont votre site web est vraiment mobile depuis le début.

    je vise à garder les choses simples lorsque je Code des choses.,

    Vous ne pouvez pas – ne peut – plaire à tout le monde – et la question de savoir quelle taille de site web est la meilleure est toujours un sujet de débat pour les concepteurs ayant plus de facilité d’utilisation et d’expertise UX que moi.

    ce que je sais par expérience, c’est qu’il est d’une importance cruciale pour vous d’identifier votre public et les appareils qu’ils utilisent, et de construire votre site Web (dans l’ensemble) pour convenir à ce public.

    et cette audience comprend GOOGLEBOT.

    votre site Mobile redirige-t-il vers une autre URL & Version de votre Site?

    eh Bien, ce n’est pas idéal. Il n’a jamais été, en fait.,

    Il y a longtemps – certains utilisaient des versions textuelles D’un site web pour produire du contenu pour les utilisateurs/navigateurs qui ne prenaient pas en charge des éléments de leurs sites web-dans une tentative (généralement vaine) de rendre leur contenu plus accessible.

    le W3C avait même l’habitude de le recommander je pense que si tout le reste échouait:

    Une page texte uniquement, 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 accomplie, Le contenu des pages contenant uniquement du texte est 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 d’accessibilité, et il n’y a aucune différence lors de la livraison de contenu mobile ou smartphone si 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 MOBILE FIRST INDEX.,

    Google pourrait très bien vous évaluer principalement sur votre expérience mobile dans un proche avenir – nous devons donc tous vraiment ê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 fournir une seule URL en raison des défis D’URL canoniques pour les moteurs de recherche – et cela a été le cas avant l’implémentation 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 du contenu Web normal, car il s’agit généralement d’une page HTML normale, juste modifiée dans la mise en page pour les écrans plus petits), 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 L’URL, vous n’avez donc pas besoin d’utiliser de sous-domaines / sous-répertoires pour les sites smartphone-mobile., Encore mieux cependant est d’utiliser les mêmes URL et d’afficher la version appropriée du contenu sans redirection John Mueller, Google

    ignorer les recommandations de Google N’est souvent pas un geste intelligent

    citation: pour récapituler, actuellement notre exploration, les systèmes d’indexation et de classement examinent généralement la version de bureau du contenu d’une page, ce qui peut entraîner des problèmes pour les chercheurs mobiles lorsque cette version est très différente de la version mobile., L’indexation Mobile d’abord signifie que nous utiliserons la version mobile du contenu pour l’indexation et le classement, afin de mieux aider nos utilisateurs – principalement mobiles – à trouver ce qu’ils recherchent. Les Webmasters verront l’exploration considérablement accrue 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 mobile first index, mais essentiellement, si vous utilisez un modèle de conception Web responsive pour votre site, vous devriez avoir un minimum de problèmes avec ce changement:

    • assurez-vous que-Contenu de qualité. Cela inclut le texte, les images (avec des attributs alt) et les vidéos-dans les formats crawlables et indexables habituels.,

    • Les données structurées sont importantes pour l’indexation et les fonctionnalités de recherche que les utilisateurs adorent: elles doivent être à la fois sur la version mobile et sur le 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 devraient être présents sur les deux versions du site. Il fournit des conseils sur le contenu d’une page pour l’indexation 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 n’est nécessaire pour l’interconnexion avec des URL mobiles distinctes (sites M.-dot). Pour les sites utilisant des URL mobiles distinctes, conservez les éléments existants link rel = canonical et link rel=alternate entre ces versions.

    • Vérifiez hreflang de liens sur mobile séparé Url., Lorsque vous utilisez des éléments link rel=hreflang pour l’internationalisation, liez séparément les URLs mobiles et de bureau. Le hreflang de vos URL mobiles doit pointer vers les autres versions de langue/région sur d’autres url mobiles, et lier de manière similaire desktop avec d’autres URL de bureau en utilisant des éléments de lien hreflang.

    • s’Assurer que les serveurs hébergeant le site ont une capacité suffisante pour gérer l’augmentation potentielle des taux d’analyse., Cela n’affecte pas les sites qui utilisent une conception Web réactive et un service dynamique, uniquement les sites où la version mobile est sur un hôte distinct, tel que m.example.com.

    les utilisateurs S’attendent à faire défiler une Page

    comme le premier critère l’implique, le défilement est toujours une considération clé. Les utilisateurs n’aimaient généralement pas faire défiler s’ils n’en avaient pas besoin – bien qu’au fil des ans, cela ait changé.

    Donc, lorsque vous concevez, vous devriez considérer combien les utilisateurs peuvent voir si ils défilement seulement un ou deux., Plus de cinq écrans de long pourrait être une indication pour vous qu’il pourrait y avoir trop de copier sur la page. Bien sûr, cela est équilibré avec le point de vue que certains articles sont destinés à être des éléments d’information en profondeur et les utilisateurs s’attendent à attendre un peu plus longtemps pour afficher le contenu de la page et les types de contenu.

    le défilement et la visibilité initiale dépendent é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 l’optimisation Google – avoir un site web mobile est plus ou moins pour vous assurer de garder le trafic que vous obtenez déjà, pas nécessairement vous donner plus de trafic gratuit de Google.

    Si vous n’obtenez pas déjà beaucoup de trafic de visiteurs mobiles – Je ne suis pas sûr que cette mise à jour de Google aura un effet notable sur vos niveaux de trafic (en analytique au moins) au début – mais avec le temps – ce sera probablement un défi extrêmement important pour naviguer.,

    la barre de qualité est relevée – à nouveau – par Google et ses utilisateurs – et si vous voulez rivaliser dans des SERP organiques toujours plus compétitifs, c’est un autre obstacle à surmonter pour les petites entreprises.

    à LONG terme – cette conversion mobile ne peut être qu’une bonne chose pour vos utilisateurs – mais à court terme – il sera intéressant de voir quel effet elle a sur les taux de conversion des petites entreprises – car les taux de conversion via mobile sont souvent inférieurs à ceux du bureau.,

    Google a déclaré que cet algorithme adapté aux mobiles aura un impact plus important sur les SERPs que les algorithmes Google Penguin et Google Panda – et nous en saurons plus au fil du temps.

    Comment vérifier les problèmes importants D’utilisabilité Mobile sur votre Site

    Google Search Console

    Vous devriez pouvoir suivre les erreurs mobiles dans Google Search Console (alias Google Webmaster Tools) et voir les erreurs disparaître au fil du temps si votre site est configuré correctement., »>

    Partie 1 – PageSpeed Insights, Test Mobile-Friendly et Mobile-Usability

    Partie 2 – Viewports, zoom et plugins

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

    partie 4 – redirige

    Les développeurs web devraient trouver mon autre article récent utile maintenant que la vitesse du site est un facteur de classement dans Google:

    citation: « la version mobile d’un site web devrait idéalement se charger en moins de 3 secondes et le plus vite sera le mieux., Un SITE très lent peut être un facteur de classement négatif (confirmé par Google). Il n’y a pas de seuil défini ou de score de vitesse à respecter, juste pour rendre votre page aussi rapide que possible. »Shaun Anderson, Hobo 2020

    avertissement

    avertissement: « bien que j’aie fait tous les efforts pour m’assurer que les informations que j’ai fournies sont correctes, ce ne sont pas des conseils.; Je ne peux accepter aucune responsabilité pour toute erreur ou omission. L’auteur ne garantit pas les sites tiers ou tout service tiers. Visitez des sites tiers à vos propres risques., Je ne suis pas directement en partenariat avec Google ou tout autre tiers. Ce site web utilise des cookies uniquement pour l’analyse et les fonctions de base du site web. Le présent article ne constitue pas un avis juridique. L’auteur décline toute responsabilité qui pourrait découler de l’accès aux données présentées sur ce site. Les liens vers des pages internes font la promotion de mes propres contenus et services.” Shaun Anderson, le Hobo