CommentCréerunSiteWebResponsive?

Google l'annonçait en septembre 2017 : en France, les recherches sur smartphones ont dépassé les recherches sur ordinateurs.

Avec l'augmentation des usages mobiles qui continuent de croître (encore +5% en 2022 pour représenter plus de 60% du trafic web mondial), il est indispensable de penser son site responsive pour qu'il puisse gérer les l'adaptation automatique aux différentes tailles d'écran.

Avoir un site responsive va permettre aux visiteurs de votre site d'accéder à son contenu sur n'importe quel appareil, qu'il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un téléphone portable.

Voyons ensemble quelles sont les pratiques à adopter pour créer un site web responsive.

Voici les principales pratiques que vous pouvez adopter pour créer votre site internet responsive :

• Concevoir votre site en mobile first! Cela signifie de penser mobile par essence avant de s'attaquer à la version desktop de votre site. Ainsi, au lieu de créer des déclinaisons mobiles de votre site desktop, vous allez concevoir d'abord la version mobile et ensuite créer le site pour ordinateur autour de cette version.
  C'est notamment la stratégie d'Instagram qui va propose plus de fonctionnalités sur sa version mobile que sur sa version ordinateur.

• C'est un classique : utiliser des médias queries pour appliquer des styles différents en fonction de la taille d'écran qui va afficher votre site.

• Une autre pratique couramment adoptée : l'utilisation des unités de mesure relatives comme les pourcentages ou les em pour définir les dimensions de vos éléments de pages. Cela leur permettra de s'adapter à différentes tailles d'écran.

• Utiliser un framework CSS : un framework CSS va rassembler plusieurs styles prédéfinis que vous pourrez appliquer à votre site web afin de faciliter sa mise en page. Si Bootstrap et Foundation comptent parmi les framework les plus célèbres, notre préférence chez Blacksmith se porte sur tailwindcss qui intègre un compilateur et délivre un rendu CSS dans un délai très rapide ! TailwindCSS permet également d'utiliser les classes CSS génériques directement dans la propriété class d'un élément HTML, ce qui est un gain de temps pour les développeurs.
  Enfin, le framework présente d'autres avantages, dont la minification en une ligne de commande ;)
  Utiliser un framework, permet de facilement créer une disposition de base pour son site web qui s'adapte à différentes tailles d'écran.

• Utiliser des images adaptatives qui vont s'adapter en fonction des différentes tailles d'écran.
  Vous pouvez aussi utiliser des images vectorielles (.SVG, etc.) qui peuvent être agrandies ou réduites sans perte de qualité.

• BONUS : penser à tester son site web sur différentes tailles d'écran pour vous assurer qu'il est bien réactif.
  N'hésitez pas à utiliser les devtools de votre navigateur pour simuler différentes tailles d'écran.

Nous avons vu dans cet article l'importance de proposer une expérience mobile de son site internet, mais également quelques techniques permettant de gérer le responsive de son site.

Si vous avez besoin d'aide pour créer votre site web responsive, n'hésitez pas à contacter notre agence de développement web à partners@blacksmith.studio !