Webflow et le responsive design

Créer un site web dit “responsive” est devenu vital pour le succès de ton business. En 2022, 80% de la population française navigue sur internet depuis un téléphone portable (source We Are Social / Hootsuite). En plus de l’importance de penser aux mobiles, nous devons aussi penser à tous les types d’appareils utilisés dans nos quotidiens.

L’optimisation d’un site web en responsive devient donc un élément essentiel dans la stratégie de toute entreprise qui cherche à promouvoir son produit ou son service. Ainsi le choix de l’outil s’avère déterminant. Nous abordons la création de site responsive avec Webflow dans cet article.

‍

L’importance du responsive design

Commençons par la définition du terme : un site web responsive s’adapte sur tous les appareils, des ordinateurs de bureau, aux tablettes jusqu’aux téléphones portables. Cela signifie que, quelle que soit la résolution de ton écran, ton site web doit s’afficher correctement.

‍

Les avantages d'un site internet responsive

Le site web offre déjà une meilleure expérience utilisateur en s’adaptant à tous types d’écran. Nous sommes tous d’accord pour dire que ce n’est pas agréable de “zoomer” une page sur notre mobile parce qu’elle n’est pas optimisée pour un smartphone, n’est-ce pas ?

Pour Google, l’expérience utilisateur d’un site web fait partie des critères pour le référencement. Si tu souhaites être visible dans leur moteur de recherche, le responsive est une des étapes à travailler. En résumé, plus de personnes peuvent accéder à ton site web et profiter d’une bonne navigation, mieux c’est pour ton business.

Grâce au large éventail d’outils NoCode, il est possible de développer ton site web responsive plus rapidement et à moindre coût (tu savais que j’allais arriver sur ce sujet 😏). Pour cela, de notre côté on utilise l’outil Webflow.

‍

Découvre notre Agence Webflow

‍

Créer un site web responsive avec Webflow

L’outil a des fonctionnalités très simples à prendre en main pour créer du responsive. Il te permet de visualiser lors du développement le rendu pour chaque format. Cela permet aussi d’offrir des interfaces personnalisées pour chaque type d’écran.

‍

Les fonctionnalités Webflow pour le responsive design

Les breakpoints

Les breakpoints, ou points de ruptures, sont là pour faciliter la mise en page pour chaque format de page. Les ruptures font référence au nombre de pixels d’un écran. Sur Webflow, ils sont présentés sous les formats de desktop (1920 px et 1290 px), tablette (991 px), mobile landscape (767 px) et mobile portrait (478 px).

‍

‍

‍

Les boutons de breakpoint vont servir à voir et modifier le design de la page en fonction du device (ou appareil) utilisé. Tout cela en quelques clics.

Dans l’exemple, on peut voir qu’on a paramétré un changement de couleur du texte et un retournement d’image sur les versions mobiles et tablette.

‍

‍

Le flexbox

Le flexbox, ou boîte flexible, permet de ranger les éléments dans un container défini. Une fonctionnalité assez classique dans le développement, qu’on retrouve également sous Webflow. Elle permet donc de travailler l’alignement et la mise en place de tout le contenu.

‍

‍

Le flex fonctionne par encapsulation, c’est-à-dire que nos éléments vont être placés de manière hiérarchique dans des containers, qui seront eux-mêmes placés dans d’autres containers et ainsi de suite. Ainsi, lorsque le format change, le système réajuste la position des éléments dans chaque container. Mieux encore, on va gagner un temps précieux pour la suite puisqu’il ne sera plus nécessaire de bouger les éléments un par un (pour tout déplacer d’un coup) mais qu’il suffira de saisir un container entier.

‍

‍

Les animations

Dans le cadre des personnalisations, les animations peuvent aussi être déclenchées (trigger) en fonction du breakpoint (mobile, desktop etc.) sans avoir le besoin d’utiliser de code classique.

Dans l’exemple, selon le format d’écran l’animation est faite différemment.

‍

‍

‍

Conclusion

Pour résumer, est-il pertinent d’utiliser Webflow pour créer un site web responsive ? Oui ! Avec cet outil NoCode, nous pouvons développer des sites web personnalisés et adaptés sur tous types d’appareils dès le départ, de façon réactive et intuitive.

‍