Site web Google Mobile Friendly

Responsive web-design

Évolution de l'algorithme Google

Depuis le 21 avril 2015Google a fait évoluer ses algorithmes, apparition du Google Mobile Friendly afin de prendre en compte la compatibilité des sites web avec un affichage sur terminaux mobiles.

Il est aujourd’hui plus que nécessaire de penser l’accès à son site web en prenant en compte les nouveaux moyens de consommer l’information : smartphone, tablette.

Un choix en lien avec cette donnée :

En 2015, Google indiquait que pour la première fois les résultats de recherche sur mobile dépassaient les recherches sur desktop.

De nouvelles situations de mobilité

Des résultats de recherches géolocalisés

L’adaptation mobile s’avère répondre à une nécessité pour de plus en plus de recherches qui se font avec un caractère express et localisé.

Ainsi lorsque vous recherchez pizzéria il y a fort à parier que votre recherche dispose d’un caractère quelque peu urgent et local.

Votre acte d’achat sera facilité s’il vous est permis de contacter les pizzérias présentes aux alentours, grâce à votre position géographique obtenue via votre mobile (position GPS, distance à un hot-spot Wi-Fi, une antenne réseau, …).

Des sources de trafic mobile : ex. vos e-mails, les réseaux sociaux

Les situations de mobilité se multiplient, là où auparavant un utilisateur ouvrait son logiciel client de messagerie sur son poste fixe, il accède maintenant à l’ensemble de ses emails depuis son smartphone (via son application dédiée ou via un web mail), or combien de liens comportent ces emails?

De même avec les applications des différents réseaux sociaux (Facebook, Twitter, …)?

Autant de sources de trafic qui impliquent un comportement de consultation mobile (smartphone, tablette).

Site web avec version mobile et site responsive design

Version mobile d’un site web

Le site mobile (version dédiée – ex. m.zalando.fr) est à privilégier dans le cadre d’un projet complexe (ex. site e-commerce), son interface est spécifique et uniquement destinée à une prise en main mobile.

Dans un tel cas, une attention toute particulière sera portée sur le risque de duplication de contenu (pénalisation de votre référencement naturel) et sur la perte de notoriété dû à la dilution des flux.

En matière de coût, une telle architecture s’avère plus onéreuse (différents rendu d’un même site selon les résolutions cibles <=> surcoût en maintenance (mise à jour, tests, …)).

Site web responsive design

Sachez dans les grandes lignes que les sites web responsive sont des sites dont le rendu s’adapte en fonction des différentes résolutions d’écran (disposition du contenu, mode d’affichage du menu, …).

Contrairement à la version dite mobile, le site responsive n’est pas une variante du site principal, il s’agit du même site mais dont le rendu s’adapte automatiquement.

Cependant, en fonction de la pertinence de l’information, certains éléments d’un site peuvent être masqués ou adaptés (ergonomie différente).

Nous retrouverons ainsi assez régulièrement des sites qui disposent d’un menu adapté (type menu hamburger Android), des boutons de taille plus importante facilitant l’usage tactile.

Parmi les avantages du site responsive :

  • une seule URL d’accès, le contenu s’adaptant en fonction du média utilisé (smartphone, tablette, desktop)
  • par conséquent, une seule interface de gestion du contenu (Back Office) / une unique base de données

Le site web responsive design répond à la plupart des attentes concernant les sites vitrines d’aujourd’hui, son affichage est fluide (adaptation automatique au média).

C’est la méthode préconisée par des sociétés telles que Microsoft ou Google.

Responsive web-design

Comment Google considère l’adaptation mobile de mon site?

Afin d’assurer un bon référencement naturel (SEO) de votre site web, pensez à vérifier l’audit fourni par le site-outil Test d’optimisation mobile – Google Search Console.

Comment tester le rendu de mon site sur différents médias ?

Vous souhaitez vérifier visuellement le rendu de votre site web sur plusieurs appareils (devices) mais ne disposez pas de l’ensemble des appareils? Utilisez les différents outils de simulation de rendu.

Focus sur l’expérience utilisateur : émergence des mobinautes

Problèmes

Les principaux problèmes rencontrées par les internautes :

  • Textes de taille trop petite rendant le contenu illisible ou nécessitant de zoomer
  • Nombreux scrolls (défilements)
  • Temps de chargement trop longs

Prenez en compte l’expérience utilisateur.

La part de marché du m-commerce (commerce depuis un mobile) suit cette courbe d’adoption, avec des actes d’achats sur mobile qui entrent dans nos habitudes.

Ne dégradez pas une expérience qui pourrait bloquer l’acte d’achat ou être un mauvais indicateur de la qualité de vos services.

Solutions

Les temps de chargement

La connexion au réseau cellulaire demeure encore un des freins à la consommation de contenu numérique depuis mobile, il est donc extrêmement important de prendre en compte ce fait et d’adapter la création de sites web afin de les rendre les plus légers possible tant dans leur structure (scripts Javascript, feuilles de style CSS minifiées) que dans leur contenu (images optimisées, à l’échelle).

Un mobinaute quittera votre site si celui-ci met plus de 3 secondes à s’afficher.

La résolution d’écran est une autre propriété intéressante à prendre en compte, impossible de fournir le même rendu quand la largeur physique de l’écran change.

Les frameworks responsive design

Grâce aux frameworks offrant des systèmes de grilles et un usage poussé des media queries CSS 3 permettant de détecter la résolution d’écran (ex. Bootstrap) il est maintenant possible d’adapter la disposition du contenu (bascule du contenu sur une ou plusieurs colonnes en fonction de cette résolution, …).

Voici les principales résolutions d’écran à prendre en compte :

  • Smartphone : largeur inférieure à 768 pixels
  • Smartphone (Phablette) et tablettes orientation portrait : largeur comprise entre 768 pixels et 1024 pixels
  • Desktop : largeur supérieure à 1024 pixels

Mais de nombreux points de ruptures supplémentaires peuvent être définis afin de correspondre à des exigences particulières (iPhone 5 portrait / paysage, iPhone 6 portrait / paysage, iPhone 6+ portrait / paysage, …).

D'autres optimisations possibles

Plusieurs autres adaptations vous permettront d’améliorer l’ergonomie mobile :

  • augmentation de la taille des boutons
  • mise en avant du contenu pertinent (ex. informations de contact, …)
  • remplacement des animations Flash (non supportées sur iphone / ipad, …) par du HTML5

Dans tous les cas, pensez bien à contrôler le rendu de votre site web sur mobile.

Remarque : de nouvelles cibles émergent telles que peuvent l’être les dispositifs TV (Android TV), avec leurs résolutions / points de rupture particuliers.

Mes derniers conseils directement dans votre boîte mail

Augmentez votre trafic, améliorez vos revenus

Home-5-Solutions-Image