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"
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 :
- Outil Google Gratuit de test à partir d'une URL (Lien vers l'outil Google)
- "A la mano". Saisissez votre téléphone mobile, et parcourez la version mobile votre site web de long en large !
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
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.
.jpg)
.jpg)
