Badge Webflow Award Winner 2023

C'est quoi un site web "Responsive Design" ?

Les chiffres sont formels, les internautes utilisent plus leur smartphone que leur ordinateur pour consulter des sites internet. Il est donc essentiel aujourd'hui de créer des sites web "responsive design"

Publié le 
23/1/2022
Modifié le 
27/3/2023
5 min
Site Webflow de mercijack.co sur 3 supports (ordinateur, tablette et smartphone)

Un site web responsive est un site dont la mise en forme s'adapte pour s'afficher sur tous les appareils : ordinateur de bureau, ordinateur portable, mobile et tablette.

Quelques chiffres :

  • En 2021, le trafic Internet mobile représentait 55,56 % du trafic Internet mondial total, soit plus de la moitié.
  • Au 1er juillet 2021, il y a plus de 4,8 milliards d'internautes dans le monde, soit 61 % de la population mondiale.

Pourquoi utiliser le responsive design ?

Optimiser son site web en responsive design est aujourd'hui obligatoire. Beaucoup de clients nous posent la question si nos sites sont vendus en responsive design car "ce n'est pas écrit dans votre devis". Nous ne le spécifions pas, car c'est pour nous évidemment une obligation. Depuis la démocratisons des smartphones, les utilisateurs du web ont fait évoluer les statistiques de navigation des sites internets. Le trafic web mobile mondial est supérieur au trafic web sur ordinateur. Il est donc indispensable d'avoir un site consultable sur mobile.

Mon site est-il responsive ?

Le meilleur moyen pour savoir si votre site est un site responsif est de le tester ! Deux méthodes pour tester l'affichage adaptatif de votre web design :

  1. Outil Google Gratuit de test à partir d'une URL (Lien vers l'outil Google)
  2. "A la mano". Saisissez votre téléphone mobile, et parcourez la version mobile votre site web de long en large !
Capture d'écran de l'outil test d'optimisation mobile de Google
Capture d'écran de l'outil de test gratuit de Google

Comment fonctionne le responsive design dans Webflow ?

Webflow est un éditeur de code visuel (HTML et CSS). C'est un CMS, c'est-à-dire un outil d'aide à la création de site web comme Wix ou bien Wordpress. Webflow est un outil de web design puissant qui propose donc évidemment une fonctionnalité de responsif design.

Le responsive design dans Webflow fonctionne en cascade, c'est-à-dire que vous avez une interface pour chaque taille d'écran et vous pouvez concevoir un design propre à chaque support.

Comment rendre une page Responsive dans Webflow ?

Par défaut, Webflow vous permet d'afficher facilement vos conceptions sur 4 supports d'écran :

  • Deskstop
  • Tablet
  • Mobile landscape
  • Mobile portrait
Webflow responsive breakpoint aperçu

Pour obtenir une mise en page spécifiques pour les appareils mobiles par exemple, vous donnerez des instructions à votre designer concernant la taille de certains éléments avec l'aperçu mobile activé. Ces instructions seront automatiquement écrites en HTML et CSS par votre designer afin d'avoir des pages adaptatives pour votre projet Web.

Pour mieux comprendre comment rendre vos pages adaptatives, nous vous suggérons de visionner ce court tutoriel en français. (Ou lire notre article sur les premiers pas dans le designer de Webflow)

Allez plus loin, avec le "fluid-responsive design"

Avec le système de cascade responsive, un point de rupture est défini. C'est ce "breakpoint" qui fait passer votre design du bureau à la tablette puis au mobile. En tant que tel, il existe des valeurs d'étirement statiques pour chaque plage dans ce système. Par exemple une image aura un affichage de 1000 pixels -> 800 px -> 600 px -> 400 px

Pour aller encore plus loin et adapter votre design responsive à chaque taille d'écran (même entre un écran de 1200 pixels et un écran de 1170 pixels de largeur - par exemple).

Par exemple, une image avec un fluid-responsive aura un affichage de 1000 pixels -> 999 px -> 998 px -> .... 402px -> 401 px -> 400 px

il existe un outil (Coucou Finsweet Plugin) qui permet d'intégrer un script java et de rendre votre projet 100% fluid-responsive design. Ils ont écrit un article que vous pouvez consulter-ici si vous voulez plus d'informations sur les cas et avantages d'application du système Fluid-responsive pour les utilisateurs finaux.

Site Web Responsif Design, conclusion

Pour conclure, en définition, le responsive design est un design qui s'adapte à tous vos appareils. Il existe deux techniques pour rendre contenu web adapatif, le système en Cascade avec les "breakpoints" et le "fluid-responsive" design.

Il est important de créer son site internet de manière responsive. On parle même aujourd'hui souvent de conception en "mobile first" car le trafic des sites mobiles a dépassé le trafic sur ordinateur ! Merci le smartphone !

Pour finir, avoir un site responsif web design améliore l'expérience utilisateur de votre site web et donc son référencement naturel (SEO) sur les moteurs de recherche comme Google.

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !