Logo Camille.Davidp15
Un site responsive : qu’est ce que c'est ?

Un site responsive : qu’est ce que c’est ?

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.

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 :

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 :

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 :

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.

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 :

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 :

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.

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.

Rejoins les coulisses ! ☕

Découvre mes coulisses, mes réflexions mais aussi des conseils et des ressources pour t’aider et te guider dans ta vie freelance.