Mobile, Desktop... Parlons de responsive design et de son importance

Aujourd’hui nous allons parler d’un des sujets les plus importants du web et qui pourtant est encore trop souvent négligé par beaucoup.
Ce sujet, c’est le Responsive Design.

“Qu’est-ce que c’est encore ton truc ? Un gadget de plus pour faire beau ? 🙄

Pour faire beau oui, mais c’est tout sauf un gadget. 😀 Il s’agit ici d’adapter la taille de votre site web sur tous les formats d’écran. En partant d’un smartphone jusqu’à une TV ou même un rétroprojecteur.

En quoi c’est important ? A votre avis sur quel appareil consulte-t-on le plus souvent Internet de nos jours ? Un smartphone, en effet. 😛

Selon Médiamétrie : 37,4 millions de Français accèdent à Internet chaque jour avec leur mobile, contre 22,6 millions avec un ordinateur et 11,4 millions avec une tablette

Vous comprendrez donc facilement pourquoi votre site/appli doit s’afficher de la meilleure manière sur des petits écrans. Tout autant que sur les grands, on ne néglige pas pour autant les PC.

Mobile first

En général, sauf cas exceptionnel, on développe désormais tout d’abord une version mobile avant d’augmenter les échelles pour les résolutions plus grandes.

Pourquoi ? Parce que c’est beaucoup plus simple et que cela demande moins de code d’agir dans ce sens.

Je m’explique :
Plutôt que de démarrer votre CSS ou même votre design en lui-même à partir d’une grande taille (1080p, 4K, …), il vaut mieux commencer par une petite taille d’un smartphone en partant du principe que si l’écran est plus grand, il y aura de toute façon de la place pour y mettre les éléments.

De plus, ils se placeront plus facilement grâce à quelques règles dans de grands espaces plutôt que sur un espace de plus en plus restreint.
On place donc nos blocs HTML sur la plus petite surface possible et on augmente progressivement.
Cette façon de concevoir les choses permet de diminuer grandement les lignes de codes qui viendraient dans le cas contraire rectifier l’affichage mobile par rapport à l’affichage PC.

Versionner ou adapter le CSS ?

Pour pratiquer le responsive il y a deux manières de faire :

• Soit vous divisez votre site en deux parties distinctes. L’une mobile, l’autre ordinateur. Pour ce faire vous pouvez soit créer un sous-domaine pour la version mobile ou bien charger des feuilles de styles différents en détectant (via Javascript par exemple) que vous vous trouvez sur un smartphone et non un PC.
  Exemple : [mon-site.fr](http://mon-site.fr) (pour la version PC) et [mobile.mon-site.fr](http://mobile.mon-site.fr) (pour la version mobile)
• Soit vous utilisez uniquement du CSS pour gérer les différentes tailles. A mon sens cela reste la meilleure façon de faire et surtout la plus pratique. Et oui, pourquoi chercher à diviser votre code ou vos noms de domaines quand CSS peut déjà tout gérer lui même. Pour cela il vous suffira d’utiliser les media-queries qui permettent de conditionner votre code en fonction de la largeur de l’écran.

“Bon c’est bien joli ton truc (sans mauvais jeu de mot) mais à part faire beau ça sert à quoi du coup ?”

Référencement

Au-delà de l’aspect évidemment esthétique du responsive, il y a aussi une très forte incidence sur le référencement de votre site. En effet, les moteurs de recherche se basent désormais d’abord sur le rendu mobile avant les autres appareils.
Cela signifie donc que votre affichage doit non seulement être optimal mais aussi le plus rapide possible sur smartphone.

Si vous souhaitez faire le test sur le vôtre vous pouvez utiliser cet outil de Google

La conversion

Imaginez maintenant qu’un potentiel client arrive sur votre site depuis son smartphone. Il voit la page d’accueil qui s’affiche à peu près correctement, il regarde vos prestations rapidement et aimerait en savoir plus en vous contactant.
Problème ? Votre site n’est pas suffisamment responsive. Le texte et les images s’affichent assez bien sur un téléphone mais les boutons sont difficilement visibles et cliquables.

Et oui, car une fois pour toutes il ne s’agit pas uniquement de faire de belles choses. Tout comme un design PC, il faut que cela soit utilisable et offre une expérience utilisateur valorisée.

Augmentez la taille de la police pour une meilleure lisibilité, augmenter les marges et les paddings pour que ce soit plus facile de cliquer avec un doigts, …

Bon, j’espère vous avoir convaincu qu’en 2022 on ne peut pas se passer d’avoir son site en responsive. Cela donne une mauvaise image de vous ou de votre entreprise et vous pouvez concrètement y perdre des clients et/ou de précieuses places en référencement.

Ne négligez donc pas cette le responsive dans vos futurs projets 😉