Qu’est-ce que le mobile first design ?

De plus en plus de personnes visitent les sites Web avec leurs appareils mobiles. Le monde de la con­cep­tion Web réagit à cette tendance en adoptant l’approche « mobile first » : les sites Web sont d’abord conçus et pro­gram­més pour les smart­phones et les tablettes, puis la version de bureau s’appuie sur cette structure de base.

Mobile first : dé­fi­ni­tion

Le mobile first Web design est un concept de design optimisé pour les mobiles. La page optimisée pour les terminaux mobiles est créée en premier, suivie par des ex­ten­sions suc­ces­sives pour le na­vi­ga­teur de bureau. L’approche mobile first est donc une tendance de design qui réagit à l’évolution des moteurs de recherche comme Google dans le secteur mobile.

Jusqu’à présent, il était courant que les con­cep­teurs et les pro­gram­meurs Web créent un site Internet pour les or­di­na­teurs de bureau en priorité. Ils uti­li­saient alors toute la palette de fonctions, de dessins et de pos­si­bi­li­tés créatives pour concevoir un site adapté aux grands écrans et aux con­nexions de données rapides. L’interface mobile ne venait alors que dans un second temps. La stratégie mobile first inverse ce flux de travail et fixe les priorités dif­fé­rem­ment, ce qui a également un impact sur la con­cep­tion de l’in­fras­truc­ture technique derrière le site Web.

Quelles sont les mesures comprises dans l’approche mobile first ?

Lors de la con­cep­tion d’une stratégie mobile first, on commence par définir les aspects centraux de l’offre et du site. Il ne s’agit pas seulement des contenus et des images, mais surtout des prin­ci­pales fonctions et des modules qui doivent être intégrés comme éléments sur le site Web. Con­crè­te­ment, les mesures suivantes sont prises en compte dans le design Web selon le principe mobile first :

• Se limiter à l’essentiel
• Pas plus de pro­gram­ma­tion que né­ces­saire
• Per­for­mance maximale sur tous les terminaux
• Accès rapide aux in­for­ma­tions grâce à des contenus bien struc­tu­rés
• Con­cep­tion adaptée à l’écran du smart­phone
• Pas de grandes images ni de fonctions inutiles
• Code source minimal
• Pas d’uti­li­sa­tion de Ja­vaS­cript, la page est pro­gram­mée di­rec­te­ment en HTML5

Le dé­ve­lop­pe­ment d’une solution optimale pour les terminaux mobiles est au cœur du processus. Ce n’est qu’ensuite que les pré­sen­ta­tions pour or­di­na­teurs de bureau et portables sont op­ti­mi­sées selon le principe de l’amé­lio­ra­tion pro­gres­sive (« pro­gres­sive en­han­ce­ment »). Un design mobile first est res­pon­sive, c’est-à-dire que la pré­sen­ta­tion du contenu sera optimale sur tous les appareils. De plus, on utilisera souvent des grilles CSS pour que le site reste évolutif.

Quels sont les avantages du design mobile first ?

Le design Web devrait désormais se con­cen­trer prin­ci­pa­le­ment sur les pages mobiles. En effet, les sites Web optimisés pour les mobiles at­teig­nent un très large public : les visiteurs sont de plus en plus nombreux à consulter tous types de sites Internet sur leur smart­phone ou tablette.

Le mobile first Web design offre une adap­ta­bi­lité rapide : grâce à une structure allégée qui se limite à l’essentiel, l’interface Web peut être plus fa­ci­le­ment modifiée par la suite et de nouveaux dé­ve­lop­pe­ments peuvent être in­tro­duits plus fa­ci­le­ment. Étant donné que seuls les éléments es­sen­tiels sont intégrés dans le site en raison de la taille limitée de l’écran, les sites Web mobiles offrent souvent une con­cep­tion de l’ex­pé­rience uti­li­sa­teur améliorée et une plus grande con­vi­via­lité.

De plus, les con­cep­teurs de sites Web peuvent se faciliter la tâche en utilisant des pré­pro­ces­seurs lors de la gé­né­ra­tion du design CSS orienté mobile first. Les pré­pro­ces­seurs CSS per­met­tent de modifier de manière variable des pa­ra­mètres tels que les couleurs, les polices, etc. qui n’ont alors pas besoin d’être modifiés la­bo­rieu­se­ment dans le code CSS.

Les avantages du mobile first en un coup d’œil

• Atteindre un large groupe cible
• Sites Web faciles à utiliser et à consulter
• Dé­ve­lop­pe­ment rapide et efficace
• In­ter­faces Web plus flexibles et plus fa­ci­le­ment adap­tables

Quels sont les in­con­vé­nients du mobile first ?

Dans de nombreux cas, la con­cep­tion de sites Web mobiles entraîne des erreurs, de sorte que le site Web optimisé n’est en fin de compte que peu convivial. Mais même sans erreur, une stratégie mobile first peut présenter quelques in­con­vé­nients.

Si vous disposez déjà d’un site Web optimisé pour les or­di­na­teurs de bureau, la migration vers les terminaux mobiles peut s’avérer difficile et né­ces­si­ter un concept de design com­plé­men­taire, voire une refonte complète. Il en va de même pour les visuels et le contenu des images : le contenu optimisé pour le design mobile peut paraître moins bon dans la version de bureau, car la ré­so­lu­tion des écrans d’or­di­na­teurs et d’or­di­na­teurs portables est to­ta­le­ment dif­fé­rente.

En outre, il convient de noter que mobile first n’est pas une solution valable pour tous les cas d’ap­pli­ca­tion : si vous souhaitez par exemple mettre à dis­po­si­tion des ap­pli­ca­tions Web complexes pour les terminaux mobiles, il se peut très bien qu’un site Web optimisé pour les mobiles ne soit pas suffisant. Dans de tels cas, il convient de réfléchir à publier une ap­pli­ca­tion mobile, ce qui implique toutefois un travail de pro­gram­ma­tion re­la­ti­ve­ment important.

Les in­con­vé­nients du mobile first en un coup d’œil

• Migration difficile des sites de bureau déjà existants
• Les visuels et images né­ces­si­tent une autre ré­so­lu­tion
• Les sites Web complexes peuvent ne pas être com­plè­te­ment re­pro­duits sur mobile
• Ne convient pas à tous les cas d’uti­li­sa­tion

Qu’est-ce que le mobile friendly ?

La question de savoir quand une page doit être con­si­dé­rée comme mobile friendly va de pair avec le concept mobile first. C’est gé­né­ra­le­ment le cas lorsque :

• Les contenus peuvent être saisis le plus ra­pi­de­ment possible
• Les contenus sont res­pon­sives et donc lisibles du premier coup
• Le site Web a des temps de char­ge­ment courts
• Les liens sont faciles à lire et à cliquer

Si le principe « mobile first » a été respecté dans le design de votre site Web, ce dernier devrait en principe répondre aux points men­tion­nés. Vous pouvez fa­ci­le­ment vérifier si votre site est reconnu comme mobile friendly par Google : l’outil Chrome Ligh­thouse fait partie de Chrome DevTools et teste votre site Web de manière au­to­ma­ti­sée.

Outre le test Mobile-Friendly de Google, des outils de contrôle de site Web per­met­tent de tester l’op­ti­mi­sa­tion mobile de son propre site. Avec l’analyse de site Web de IONOS, l’ac­ces­si­bi­lité de votre site Web est mesurée et vous recevez des astuces pour améliorer l’affichage, la vi­si­bi­lité ou la sécurité de ce dernier.

L’approche mobile first en résumé

Lors de la création d’un site Web, il convient de réfléchir à un design « mobile first », les ex­ten­sions bureau suivront. Compte tenu que le trafic mobile ne cesse d’augmenter, il convient de porter une attention par­ti­cu­lière aux in­ter­nautes surfant sur smart­phones et tablettes ! N’oubliez toutefois pas que tous les cas d’uti­li­sa­tion ne se prêtent pas au mobile first : les sites Web complexes ou même les ap­pli­ca­tions Web doivent être conçus selon un autre principe de design.