Comment créer un site mobile friendly ?

Un site mobile friendly est un site Web dont l’affichage s’adapte automatiquement aux différentes tailles d’écran des terminaux numériques : smartphone, phablette, tablette, laptop, ordinateur et écran large.

Les techniques permettant de concevoir votre site mobile friendly sont au nombre de trois. Chacune aura des conséquences en matière de coûts, de performances et de moyens.

Première technique - Responsive Web Design

Cette technique consiste à utiliser les media queries pour rendre votre affichage adaptable en fonction de la taille et de la résolution d’écran. Grâce à cette technique basée sur le CSS, le serveur renvoie le même code HTML à tous les types d’écrans. Les navigateurs Web sont en mesure d’identifier automatiquement la configuration requise si les user-agents ne sont pas bloqués par le fichier htaccess.

Deuxième technique - Diffusion dynamique

C'est la solution à mi-chemin des deux autres. L'url reste la même, mais le code html change en fonction du type d'écran employé. Cette technique permet de personnaliser le contenu en fonction du type d'appareil utilisé par l'internaute tout en conservant la même url. L’inconvénient est qu’elle nécessite des compétences pointues en matière de détection des user-agents qui provoquent souvent des erreurs tragiques pour le référencement naturel et l’expérience utilisateur.

Troisième technique - Site web mobile spécifique

Cette solution conduit à créer un site web dédié aux mobiles que seuls les mobinautes verront. Généralement, il est accessible via une url du type « m.domaine.com » distincte de l’url pour ordinateurs qui le plus souvent, est sous le format « www.domaine.com ». Le système détecte automatiquement le type de support utilisé par l'internaute et le redirige vers le site adéquat à condition toutefois que vous aidiez les moteurs de recherche à détecter les chaînes de user-agents. Cette technique est très clairement déconseillée.

La solution Responsive Web Design est recommandée par Google. C’est aussi ma préférée car elle possède plusieurs avantages que nous allons voir à présent.

Avec l'ajout du code CSS adéquat via les Media Queries, vous changerez sans peine la structure de navigation pour l'adapter aux mobiles. Selon moi, cette solution dispose de plusieurs avantages.

• La même url et le même contenu s'affichent quel que soit le type d'appareil utilisé, ce qui facilite grandement la mise à jour des pages et leur référencement.
• L'architecture du site s'adapte à tous types d'écrans, y compris les écrans larges et les futurs écrans qui n'existent pas encore.
• Le design et l'image de marque, si importants sur Internet, restent rigoureusement les mêmes sur smartphone et sur ordinateur. Les visiteurs ne sont pas perdus quand ils passent de l'un à l'autre.
• Le contenu revient moins cher à fabriquer car il n’est pas à réadapter.
• Le budget de crawl alloué à votre site Web par les moteurs de recherche est optimisé (1 visite = 1 page) ce qui favorise l’exploration de la totalité des pages.

Il existe un certain nombre d’outils présent sur le Net permettant de vérifier la comptabilité mobile de votre site Web.

Premier outil - Chrome Dev Tools

Pour accéder à cet outil, vous devez vous rendre sur votre navigateur Chrome et taper « F12 » ou « CTRL SHIFT I ».

Ensuite, activez la barre d’outil de l’appareil en cliquant sur l’icône smartphone à gauche de « Éléments » ou grâce à « CTRL SHIFT M ». Vous pourrez alors saisir la largeur de vos écrans pour voir à quoi ressemble votre site Web. Vous pouvez aussi faire glisser la barre latérale du milieu pour voir comment les éléments se positionnent.

Avantage de Chrome Dev Tools : il permet de faire de très nombreuses choses pour bâtir un site Web de qualité. À noter que tous les navigateurs (Brave, Firefox, Opera, Edge, Vivaldi, etc.), proposent le même outil.

Deuxième outil - Google Search Console

L’outil « Search Console » de Google, présente l’avantage incomparable de surveiller en temps réel votre site Web et de vous avertir par mail des problèmes que Google rencontre. Ainsi, si l’une de vos pages n’est pas configurée pour le mobile, Google vous préviendra.

Vous pouvez aussi à tout moment vérifier les pages de votre site Web qui rencontreraient un problème de compatibilité en cliquant sur l’onglet « Ergonomie mobile » dans la partie « Expérience ». Seul problème : l’outil ne vous permet pas de visualiser vos pages au moment où vous les construisez.

Troisème outil - Test my site

En saisissant directement l’url de votre page Web dans l’outil « Test my site » de Google, ou bien en copiant/collant votre Code, l’outil vous dira si votre site est adapté aux mobiles. Si ce n’est pas le cas, il vous indiquera comment résoudre les problèmes. Cet outil est gratuit.

Avantage de « Test my Site » ? Il est facile d’utilisation même si vous ne pouvez pas visualiser votre site Web dans ses différentes configurations.

Quatrième outil - XRespond

Xrespond permet à partir d’une simple url de voir en temps réel l’affichage de votre site Web sur plusieurs types d’écrans, du mobile 3G au format 16/9. Vous pouvez ajouter vous-même plusieurs écrans spécifiques si vous le souhaitez. Il est très simple à utiliser et totalement gratuit.

J’ai cependant deux petits bémols à exprimer concernant cet outil : d’une part, il est très (trop ?) tourné vers les écrans Apple et d'autre part, si votre site Web est correctement configuré en matière de sécurité, il ne s’affichera pas.

Cinquième outil - Responsive Design Checker

Responsive Design Checker est un outil gratuit assez proche de Xrespond. Il permet d’afficher un écran à partir d’une url. Ensuite, soit vous modifiez manuellement les tailles en largeur et hauteur en haut à droite de la barre de recherche, soit vous cliquez sur les icônes à gauche représentant les trois types d’écrans les plus fréquents : ordinateurs, tablettes, smartphones. À noter toutefois qu’il ne s’affichera pas si votre site Web a une configuration optimale en matière de sécurité.

Sixième outil - MattKersley

MattKersley est un petit outil très sympa parce qu’il a été fait par un web designer qui s’en sert personnellement. Il permet d’afficher 4 types d’écrans différents.

L’avantage de cet outil, c’est qu’il permet de le charger sur votre propre machine à partir de la page Github de l’auteur. Si votre site est bien sécurisé, il ne fonctionnera pas.

Septième outil - Screenfly

Screenfly est mon outil préféré, car il est très simple d’utilisation. Il est gratuit et permet d’afficher tous les écrans, depuis un mobile Motorola RAZR V3M jusqu’au téléviseur 8k. J’aime aussi beaucoup la fonction de rotation de l’écran particulièrement utilise sur mobile. Lui non plus ne fonctionne pas si vous avez bien sécurisé votre site Web.

Huitième outil - Am I Responsive

Am I Responsive est un outil très simple et gratuit. Il vous permet de tester simultanément l’affichage de votre site web sur quatre types d’appareils : ordinateur, laptop, tablette et smartphone. Il possède un avantage pour les UX Designers : il leur permet de présenter les résultats de leur travail en un seul clic.

Vous trouverez de très nombreux autres outils sur le Web pour visualiser vos pages avec tous types d’écrans. Mais je pense qu’avec cette liste, vous êtes déjà bien équipés.

Références

• Thesempost - Google Doesn’t Expect Full Navigation in Mobile First Pages (en anglais).
• Google – Choisir une configuration pour mobile.
• Google – Site dédié au mobile.
• ThinkwithGoogle - Principles of mobile site design: Delight users and drive conversions.
• Web Fundamentals - Google's opinionated reference for building amazing web experiences.