Qu’est-ce qu’un site
responsive ?

Petite histoire et grands écrans

On l’oublie souvent, internet a déjà derrière lui une longue histoire. Celle-ci a été ponctuée de soubresauts, de changements, d’évolutions des techniques et des usages. Lorsque réaliser des sites internet est votre métier, ces évolutions permanentes, loin de n’être qu’anecdotiques, constituent logiquement le cœur de votre quotidien. Ce qui donne lieu à des débats sans fin entre “professionnels de la profession” dont le grand public ne soupçonne pas l’existence.

Tout ça ne nous rajeunit pas

L’un de ces nombreux débats a longtemps porté sur la largeur optimale des sites à concevoir. Sans entrer dans d’obscures explications techniques, du temps où la largeur des sites était fixe, celle-ci se comptait en pixels. Oui mais ensuite ? Sur des écrans de quelles dimensions allait-on regarder le site à réaliser ? Dans quelles résolutions ?

Limitation des sites web à largeur fixe

Au fil du temps, différentes préconisations – plus ou moins officielles – ont circulé sur la question. Il ne fallait pas dépasser x pixels de large, sous peine de voir apparaître ces affreuses barres d’ascenseur horizontales au bas du navigateur de l’internaute. Et tant pis pour les privilégiés dotés d’un écran de 17 ou 19 pouces (le summum du luxe à l’époque) qui verraient un tout petit site perdu au milieu d’une grande page vide à droite comme à gauche. Puis, de nouveaux écrans, plus grands, sont apparus sur le marché. Mais ce n’était pas encore suffisant ; il fallait aussi et surtout attendre que le public s’équipe.

Quand on estimait qu’un seuil avait été franchi dans la plupart des foyers et entreprises, on s’autorisait enfin à réaliser des sites un peu plus larges – souvent plus flatteurs et agréables à consulter. Il n’a jamais été possible de satisfaire tout le monde, le web étant par nature le territoire de prédilection du compromis, du moins en termes de conception. Alors on a fait avec, au mieux, au moins pire. Ainsi, la création internet a suivi son petit bonhomme de chemin, pas après pas, année après année. Les écrans ont grandi, les sites ont suivi le mouvement.

Alors que la situation semblait enfin se stabiliser, c’est là que LA CHOSE s’est produite.

Un nouveau problème à résoudre

Au moment où les écrans d’ordinateurs devenaient quasiment panoramiques, les smartphones ont fait leur entrée en scène. Puis les tablettes. Autant de nouveaux écrans, de nouvelles tailles, de nouvelles résolutions à prendre en compte lors de la création d’un site internet. Il est alors devenu impossible de prévoir une dimension optimale ou d’envisager une taille médiane qui serait la plus couramment utilisée.

Dans un premier temps la réponse a consisté à réaliser des sites de taille très réduite, spécialement dédiés aux mobiles. Mais que faisait-on des tablettes ? Un autre défaut important de ces sites spécifiques est qu’ils constituaient une entité distincte de la version “traditionnelle” du même site. Conséquence directe : chaque modification demandait deux mises à jour, pour un coût également multiplié par deux. Pas très souple.

Désormais, chaque mois, de nouveaux périphériques font leur apparition sur le marché. Les constructeurs rivalisent d’innovations afin de se démarquer de leurs concurrents : les smartphones s’agrandissent, les tablettes se miniaturisent ou deviennent au contraire géantes. Bien malin celui qui saura prédire ce qui existera sur le marché dans seulement six mois ! Or, lorsqu’on se dote d’un site internet, c’est pour plusieurs années. L’investissement doit se montrer un minimum pérenne. C’est là que le responsive design pointe le bout de son nez.

Des rigidités héritées du passé

Nous avons déjà vu les problèmes posés par un site non responsive sur un écran d’ordinateur. Regardons maintenant comment un smartphone ou une tablette affiche ce genre de site. La page est adaptée à la hauteur de votre écran, de manière à être affichée en entier.

Affichage des sites web non responsive sur smartphones et tablettes

La conséquence logique est que tout ce qui est présent sur votre page, textes et images, devient minuscule sur votre écran. L’internaute doit sans cesse zoomer, dézoomer, pour se déplacer et consulter vos contenus. L’exercice, déjà pénible sur une tablette, devient décourageant sur un smartphone. Et par définition, l’internaute n’est pas du genre patient. Si vous ne souhaitez pas perdre vos visiteurs, autant leur simplifier la vie.

Un avenir tout en souplesse

Heureusement, le responsive design arrive à votre rescousse. Le principe : la mise en page de votre site n’est plus fixe, mais fonctionne un peu à l’image d’un “élastique”. Les éléments présents sur votre page se repositionnent en fonction de la largeur de votre écran. Ou plus exactement selon la taille de la fenêtre de votre navigateur. Ainsi, des éléments pourront être côte à côte sur un écran large, mais se superposeront sur un écran de taille réduite.

Avantages des sites responsive sur smartphones et tablettes

Résultat non négligeable : dans tous les cas, ils seront affichés de manière optimale en termes de lisibilité. Autrement dit, plus besoin de zoomer ni de naviguer au hasard sur un smartphone, il suffit de faire défiler la page de haut en bas avec le pouce, geste simple désormais naturel pour tous.

Pour savoir si votre site est responsive ou non, depuis votre ordinateur, il vous suffit de modifier la taille de la fenêtre de votre navigateur à l’aide de votre souris. Vous verrez alors si les dimensions de votre site restent fixes ou si les éléments se repositionnent à la volée.

Autre possibilité très intéressante du responsive design : vous pouvez choisir les éléments, textes ou images, qui ne s’afficheront sur votre site que lorsque votre navigateur aura des dimensions suffisantes. Ce qui vous permettra de montrer davantage de choses sur un écran large et de vous concentrer sur l’essentiel pour l’affichage sur smartphone. Un vrai atout pour un support sur lequel l’internaute passe généralement moins de temps.

Quand attendre n’est pas une option

En conclusion, le responsive design est aujourd’hui indispensable lors de la création ou de la refonte d’un site internet. Il correspond aux usages actuels et à venir des internautes. Impossible de s’en passer !

Quant aux structures bénéficiant déjà d’un site internet, mais non responsif, la question de franchir ou non le cap d’une refonte se pose naturellement avec acuité. À vrai dire, la question n’est pas de savoir si elles doivent se lancer, mais plutôt quand elles le feront. D’ici-là, combien d’internautes auront-elles perdus ?