Du Responsive Design au Mobile First

D’après Statista, la projection du nombre d’utilisateurs de smartphones pour 2021 sera de 3,8 milliards, soit une évolution de près de 8% (presque 10% en 2020). Cela implique que l’augmentation de l’audience sur smartphone continue d’augmenter de manière significative. Le Responsive Design est déjà fortement implanté comme une évidence dans nos projets Web mais nous nous dirigeons toujours plus vers des logiques Mobile First. Dans cet article, nous tenterons de proposer quelques bonnes pratiques pour vous accompagner dans cette structuration du “Pensons mobile”.

Source : Statista

Pourquoi le Responsive Design

Avant de commencer à parler de “Mobile First”, définissons la notion de “Responsive Design”. Cela consiste en l’adaptation de vos interfaces Web pour tous les types de périphériques et tailles d’écrans (taille donc résolution).

Aujourd’hui, la diversité des périphériques, tailles et résolutions d’écrans obligent les concepteurs à adapter tous leurs contenus.

Pour ceux qui douteraient encore de l’aspect incontournable du Responsive Design, voici une statistique intéressante : près de 65% des requêtes Google proviennent de périphériques mobiles.

Vous ne saviez pas ce qu’était le Responsive Design ? N’hésitez pas à lire notre article : Pourquoi le Responsive Design.

La différence avec le Mobile First

Du coup, la question qui se pose est de connaître la différence entre le Responsive Design et la Mobile First. La ou le Responsive vise à optimiser l’affichage des pages Web sur tous les types de périphériques en partant du desktop, le Mobile First a pour objectif de concevoir les interfaces Web pour les mobiles dès le départ et non pas d’adapter les sites desktop pour les mobiles.

La logique de conception est donc inversée et permet d’ouvrir l’univers des possibles quant aux fonctionnalités mobiles plutôt que de se contraindre par l’univers desktop.

Vers des univers de conception multiples

Dissipons immédiatement tout malentendu, le mobile First ne signifie pas qu’il ne faut pas travailler son contenu pour le desktop, bien au contraire. En réalité, on se dirige plus vers une stratégie de conception multiple pour les différents supports.

Au niveau de la méthodologie, nous pouvons identifier les étapes suivantes :

• Faire l’inventaire des contenus que vous souhaitez mettre à disposition. Cet inventaire doit faire état du type de contenus, de leur nature, de leur hiérarchie etc.
  
  
• Prioriser vos contenus de manière à identifier ceux qui ont une forte valeur ajoutée
  
  
• Identifier et calibrer vos Calls-To-Action : à ce stade, la différence entre les écrans entre en jeux. Vos imaginez bien qu’un clic au doigt n’a pas la même précision qu’un clic via une souris. Entre également en jeu l’emplacement du CTA sur l’écran.
  Et profitez-en pour les travailler en suivant nos conseils !
  
  
• S’affranchir des contraintes Web classiques et penser application, rechargement partiel via AJAX, widgets etc.
  
  
• Penser aux performances de chargement : un site attractif visuellement mais qui pêche au niveau des temps de chargement ou de réactivité est contre-productif. L’idée est d’allier visuel et performances !
  
  
• Tester votre production sur des périphériques physiques : ne vous contentez pas des émulateurs divers, ne serait-ce que pour vérifier le confort d’utilisation (accessibilité des CTA pour le pouce sur un mobile, distance de scroll, etc.).
  
  
• Tracker les comportements et interactions de manière à comprendre où l’engagement est le plus fort. 
  Vous ne savez pas par où commencer ? Suivez nos recommandations pour mettre en place une stratégie de tracking dans Google Analytics.
  
  
• Suivez votre site régulièrement et apporter du contenu à jour à vos visiteurs : un blog peut être un excellent moyen de dynamiser votre contenu.
  Vous n'avez pas (encore) de blog ? Découvrez pourquoi le blog est un excellent vecteur de trafic et de génération de leads qualifiés.
  
  

Conclusion

Le Responsive Design par la dégradation du contenu desktop sur mobile est loin derrière nous. Le Mobile First a même révolutionné les moteurs de recherche.

A titre d’exemple, à partir de septembre 2020, Google utilisera par défaut son moteur d’indexation Mobile First. Cela signifie que la conception de votre site pour mobile aura plus d’impact en termes de SEO que votre site en version desktop.

Dès lors, l’objectif est de bien adapter sa stratégie en Mobile First, en priorisant vos contenus et en tenant compte de toutes les contraintes du digital.

Vous avez un projet de refonte de site ? Contactez-nous !