Évolution de l'algorithme Google
Depuis le 21 avril 2015, Google 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.
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
