Le “responsive”… c’est un terme que l’on voit un peu partout lorsqu’on parle de site web, mais on ne le comprend pas forcément. Dans cet article, je te propose de t’expliquer ce que c’est et comment rendre ton site “responsive” également.
Sur certains outils tu verras un l’astérisque ( * ) c’est tout simplement pour signaler que le lien est un lien partenaire. En passant par lui je toucherai une petite commission.
Sommaire
Le responsive, c’est quoi ?
Bonne question et lorsque tu as ou souhaites avoir un site web, c’est vraiment pertinent de t’interroger sur le sujet.
Malheureusement, la plupart du temps, lorsque je dis à mes clientes, dans le cadre d’une création, intégration ou refonte “Dans tous les cas ton site sera en responsive”, je peux facilement imaginer leurs sourcils qui se froncent. Puis un blanc qui s’installe dans la conversation, car n’osent pas poser de questions sur ce terme si compliqué…
Pour éviter ce malaise et la panique chez mes clients, à présent, je leur dis : “Dans tous les cas, ton site sera en responsive, adapté aux formats ordinateurs, tablettes et mobiles.”
Et là, elles comprennent tout de suite !
Donc pour faire simple, le “responsive” c’est une façon de concevoir ton site afin qu’il puisse apparaître comme tu le souhaites pour tout le monde, qu’importe si la personne va sur ton site depuis un écran géant ou un tout petit téléphone.
Personnellement, sur Elementor*, j’utilise ces largeurs pour les paramétrages :
- Ordinateur : 1420 px ou 1620 px (ça dépend)
- Tablette : 768 px
- Mobile : 360 px
Ces tailles sont à titre indicatif, tu n’es pas obligée de les respecter à la lettre.
Je te montre ça de plus près dans la petite vidéo qui va suivre :
Comment avoir un site responsive ?
Voici quelques notions de bases et petites astuces pour bien gérer le responsive de ton site.
La règle des “4 - 2 - 1”
C’est une règle très simple que je me fixe durant ma création, elle consiste à limiter le nombre de colonnes en fonction du format que tu utilises :
- 4 colonnes maximum en ordinateur
- 2 colonnes maximum en tablette
- 1 colonne maximum en mobile
Sache que parfois il y a des exceptions comme des colonnes d’icônes où je me permets d’en mettre 3 pour les tablettes parfois.
On mets des tailles à ces éléments (images, titres...) pour chaque format
C’est peut-être un peu bête, mais quand on crée sa page, il faut faire attention à la taille des éléments que l’on utilise. Parfois (notamment pour la page 404) on souhaite avoir un gros titre énorme sur ordinateur avec pourquoi pas un trait large et un peu transparent…
Mais il est aussi super important de penser à configurer ton titre et ton trait pour le mode tablette et mobile, car les tailles ne seront pas les mêmes. Si tu le ne fais pas il y a de fortes chances que sur ces formats-là, la page soit plus grande que l’écran, voire même que le titre déborde au-delà de l’écran.
Idem pour les images, généralement, je répartis la taille comme ceci :
- Ordinateur : 70%
- Tablette : 80%
- Mobile : 100%
Bien sûr, ça dépend de la page et de l’image !
Comment modifier les “points de rupture” sur Elementor ?
Pour rappel, un “point de rupture”, c’est la largeur à partir de laquelle ton site va passer d’un format à l’autre.
- 1. Tu vas dans une page ou un article pour afin d'accéder l’éditeur d’Elementor
- 2. Ensuite, tu cliques sur l’icône en bas à gauche qui ressemble à un téléphone, c’est le mode responsive d’Elementor.
- 3. Quand tu cliques dessus une petite barre grise se colle en haut de l’écran et à sa droite, tu as une icône d’engrenage.
- 4. Te voici dans les réglages du site. Ici, tu peux régler la largeur de ton site (attention ça change de largeur pour toutes les pages de ton site) et tu peux aussi modifier à partir de combien de pixel on passe au format supérieur.
Exemple : à partir de 600 px on passe du mobile à la tablette, à partir de 1040 px on passe de la tablette à l’ordinateur…
On fait attention aux marges
La plus grosse erreur en responsive, c’est de ne pas réfléchir aux marges sur tes éléments : mettre 150 px de marges en ordinateur ce n’est pas du tout la même chose qu’en format mobile.
Quand je fais une page simple avec des éléments où il y a très peu de marges, je fais d’abord ma disposition avec les sections, les éléments et ensuite, je viens rajouter les marges sur chacun des formats.
Dans certains cas, par habitude, je sais qu’il va y avoir des marges à plusieurs endroits, dans ce cas, je suis ce qu’on m’a appris en développement : mettre les marges d’abord sur le format mobile puis tablette et enfin ordinateur. Je trouve cette méthode plus longue et elle nécessite plus de réflexions. Mais au final, tu passeras beaucoup moins de temps à corriger les petites erreurs que tu n’aurais pas anticipées si tu avais commencé avec le format ordinateur.
Le responsive c’est comme les finitions d’une maison
Même si c’est important de prendre en compte cette notion de responsive, ne commence pas à réfléchir avant d’avoir construit tes blocs. C’est comme une maison, on ne fait pas les finitions si on n’a pas commencé les fondations. Quand je travaille sur une section, je le fais étape par étape :
- Je construis la structure de ma section.
- Je choisis les éléments.
- Je les configure.
- Je mets le style. (hop un ptit coup de peinture)
- J’adapte, si besoin, pour les formats tablette et mobile (si besoin, mais dans la plupart des cas, il y a toujours une chose à adapter pour chacun des formats).
Ne charge pas ta version mobile
Ce que j’entends par-là c’est que la version mobile doit être simple et directe. Autant sur ta version ordinateur, tu peux mettre des effets, une certaine disposition d’éléments, en version mobile, tu dois aller à l’essentiel, car tu n’as pas autant de possibilités et que l’écran est petit.
Est-ce que ça veut dire que je dois bâcler la version mobile ? Non loin de là, la plupart des utilisateurs utilisent leurs téléphones pour surfer sur Internet.
Tu seras sûrement amenée à modifier entièrement la version mobile par rapport à celle sur ordinateur et c’est tout à fait normal donc rassure toi !
Au début, commence par la version mobile
Si tu es débutante en création de site web ou bien que tu commences ton site, tu peux commencer à créer tes pages sur la version mobile en premier, puis tablette et en dernier ordinateur. Mais pourquoi cela ?
En commençant par la version la plus complexe, tu auras moins de changement à faire par la suite :
- images trop grandes/trop petites,
- titres trop grands/trop petits,
- marges à refaire,
- animations inutiles à enlever/à changer,
- visuels de décoration à modifier/à supprimer...
Plus tu vas faire des sites plus tu sauras d’un coup d’œil ce qui est possible pour les différents formats. Et tu pourras ainsi gagner du temps dans les adaptations d’une version à l’autre.
Des templates Elementor à modifier et à personnaliser
Conclusion
Un site en responsive, c’est tout simplement un site dynamique qui s’adapte aux différents formats d’écrans.
Pour faire un site responsive, il faut suivre des petites règles et astuces. Mais aussi, et surtout, surtout bien connaître ton outil : que ce soit un constructeur de pages ou avoir de bonnes connaissances en développement informatique si tu crées ton site à la main.
Un site mobile n’est pas forcément un site basique, tu peux avoir des versions mobiles qui se rapprochent de la version ordinateur, mais ça demande beaucoup de travail et de patience.
