Si vous êtes de la « vieille école », vous avez certainement connu une époque, pas si lointaine, où 95% des sites étaient consultés depuis un ordinateur. C'était en 2011. Un temps révolu : depuis 2014, année de bascule, le mobile a dépassé le desktop et ne cesse de progresser, hors épisode COVID.

D'où le développement des sites en responsive design, appelé également sites web adaptatifs. Le principe : appliquer des règles de conception afin d'adapter automatiquement le design du site à la taille de l'écran de l'utilisateur. 

Autre avantage : le temps de développement. Le responsive design permet en effet de travailler sur un seul projet pour déployer votre site Internet sur toutes les plateformes disponibles : ordinateurs, mobiles et tablettes. Plus besoin de créer des versions distinctes pour chaque appareil et de dédier des ressources spécifiques, le contenu s'adapte de manière dynamique. Un gain de temps, et d'argent !

2.1 Choisir un framework responsive

Chez Tuesday, nous utilisons Bootstrap. Mais Bootstrap qu'est ce que c'est ?
Bootstrap est un framework open source de développement web qui permet de créer des sites web et des applications responsives. Il comprend une collection de composants HTML, CSS et JavaScript qui peuvent être utilisés pour créer une variété de designs différents. Bootstrap est gratuit et facile à utiliser, ce qui en fait un choix populaire pour les développeurs.

En quoi Bootstrap est un bon framework responsive ?

Bootstrap est un framework mobile friendly car il permet aux sites web de s'adapter à différents appareils et résolutions d'écran. Il fait cela en utilisant un système de grille responsive qui divise l'écran en une grille de colonnes. Le nombre de colonnes et leur taille peuvent être modifiés en fonction de la largeur de l'écran, ce qui permet au site web de conserver son aspect et sa convivialité sur différents appareils.

2.2 Utiliser des médias queries

Ces instructions CSS permettent de définir, en fonction de la taille de l'écran, des règles spécifiques. Ainsi, pour chaque format choisi, un style particulier sera appliqué. Si vous travaillez sous le CMS Drupal, nous vous recommandons d'appliquer un sous-thème personnalisé plutôt que de modifier directement le thème principal. Lors des mises à jour de ce dernier, vous préserverez ainsi les modifications apportées. 

2.3 Optimiser le temps de chargement 

Le temps de chargement est crucial pour les utilisateurs mobiles, car ils sont souvent en déplacement et ont moins de temps à consacrer à la navigation sur votre site web. Pour diminuer le temps de chargement, vous pouvez utiliser des images optimisées pour le web (jpeg, png ou webp), réduire le nombre de scripts et de plugins, et utiliser une compression de fichiers pour réduire la taille des pages.

2.4 Tester votre site Web sur différents appareils et navigateurs. 

Une étape à ne surtout pas négliger : malgré tous les efforts consentis, vous n'êtes pas à l'abris d'une mauvaise surprise. Lors de la recette, il est important de vous assurer que votre site s'affiche correctement. Vous pouvez utiliser différents navigateurs pour effectuer les tests sur différents appareils ou vous pouvez utiliser un outil de test mobile comme Google Mobile Friendly Test.

3.1 Simplifiez la navigation

La navigation doit être simple et intuitive sur un site web adapté aux mobiles. Vous pouvez simplifier la navigation en utilisant des icônes et des menus déroulants, en réduisant le nombre de catégories de navigation.
 

3.2 Utilisez des polices lisibles

Les polices doivent être lisibles sur les petits écrans des appareils mobiles. Évitez d'utiliser des polices trop stylisées ou trop petites. Les polices sans-serif sont plus faciles à lire sur les écrans de petite taille.
 

3.3 Optez pour des boutons d'appel à l'action clairs

Les boutons d'appel à l'action doivent être clairs et faciles à trouver. Utilisez des couleurs vives et contrastées, et placez-les à des endroits stratégiques pour faciliter la conversion des visiteurs en clients, tout en veillant à ce que les boutons et les liens soient suffisamment grands pour être cliqués facilement avec les doigts

« Quand on pense ou repense un site de zéro, nous nous devons d’intégrer le responsive dans notre réflexion et plan d’action. La plupart des sites internet sont maintenant consultés sur les smartphones alors les sites webs, quels qu’ils soient, se doivent d’avoir un format smartphone et dans le meilleur des cas un format tablette en plus.
Pour cela il est nécessaire de travailler avec les grilles et « l’auto-layout » sur Figma, pour mon cas. Ces 2 conseils pris en compte, vous pourrez travailler et produire un site qui sera donc responsive. »

Claire Pinot, UX/UI Designer