L’utilisation de tablettes ou de mobiles pour consulter un site web est en constante augmentation. Grâce à une bande passante de plus en plus rapide et à la démocratisation du prix de tels périphériques, nous sommes de plus en plus nombreux à nous connecter hors de chez nous. Pour se donner une idée de cette évolution au niveau national, en Janvier 2013, nous étions 4,17% à nous connecter à Internet depuis un mobile et 5,01% à utiliser une tablette (contre 90,82% pour les ordinateurs). En octobre 2014, ces chiffres ont littéralement explosé puisque nous atteignons 22,46% pour les mobiles et 13,13% pour les tablettes, contre… 64,41% de connexions depuis un ordinateur !
Au vu d’une telle augmentation, il devient indispensable de s’adapter et de proposer une solution de qualité aux utilisateurs.

Evolution du Responsive Webdesign entre Janvier 2013 et Octobre 2014 en Belgique.
Sources: Statcounter.com

« Responsive », qu’est ce que cela signifie ?

Un site responsive est un site qui est optimisé afin de s’adapter à la navigation du support qui l’utilise. Le premier élément qui vient en tête reste bien entendu le format. Un site responsive posséderait donc un design dont les pages s’ajustent automatiquement au terminal. Qu’il s’agisse d’un écran d’ordinateur, d’une tablette, d’un mobile, d’une liseuse ou d’une TV connectée, l’expérience visuelle en sera beaucoup plus agréable pour les utilisateurs.

A ceci s’ajoute la notion d’ergonomie. En effet, il ne suffit pas de s’adapter au format de l’écran, il faut aussi que l’utilisation soit pratique. Zoomer, dézoomer, zoomer encore, tenter de sélectionner des liens minuscules… Bref, un site responsive doit aussi faire le bon choix en proposant une ergonomie bien pensée. En connaissant les zones idéales pour l’affichage des données, et en agençant les API quotidiennement utilisées (réseaux sociaux, You Tube,…) de manière cohérente, il est possible de parvenir à créer le site idéal, celui qui nous encouragera à venir le visiter encore et encore…

Un exemple de zones à favoriser pour créer une design ergonomique.

Le design responsive améliore grandement l’expérience de navigation et d’achat. En effet, l’e-commerce en 2013 à été marqué par un taux de conversion sur tablette supérieur à celui effectué sur ordinateur (2,54% contre 2,4%). Dès lors, ne pas proposer son site en responsive pourrait engendrer une perte de clientèle, mais surtout, faire fuir les prospects.

Le Responsive est aussi technique…

Un site responsive c’est donc un site qui adapte l’agencement de son contenu de manière stylée, logique et pratique… Mais ce n’est pas tout…
Puisqu’un site responsive a pour but de faciliter la vie de l’utilisateur, il faut également proposer des pages fluides, qui se chargent rapidement. Pourtant, un mobile télécharge les informations d’un site beaucoup plus lentement que d’autres périphériques (tel qu’un ordinateur). Les images peuvent littéralement saboter le chargement d’un site et pousser le navigateur à chercher ses informations ailleurs. Pour pallier à cela, différentes méthodes ont été développées. La principale consiste à créer un code qui analyse le périphérique qui consulte le site, et à prendre en compte ses performances. En développant des règles bien précises, nous pourrons, par exemple, choisir d’afficher une image de poids léger s’il s’agit d’un mobile ou plus lourde s’il s’agit d’un ordinateur. Nous pouvons également faire le choix d’afficher un contenu particulier ou d’en supprimer un autre trop gourmand lors du téléchargement.

L’exemple de Packdog.com:
de gauche à droite, mobile (portrait), mobile (paysage), tablette et écran.

Mais quelle est la différence avec un site développé uniquement pour mobiles ?

Certaines sociétés ont opté pour le développement en annexe d’un site uniquement dédiés au mobile. Par exemple, lorsque nous naviguons avec notre smartphone vers l’adresse www.site.com, nous sommes automatiquement redirigés vers un site distinct : www.m.site.com. Ceci offre malheureusement de nombreuses contraintes…

• A l’inverse des sites uniquement développés pour les mobiles, le site responsive engendre une adresse unique. Ceci facilite donc les partages des utilisateurs et évite aussi les éventuels problèmes de redirection.

• Les coûts de maintenance sont donc moins élevés que ceux des sites web mobiles séparés puisqu’il s’agit d’un seul et même site dont il faut s’occuper.
• N’avoir qu’une seule et même adresse permet aussi de gagner beaucoup de temps dans l’analyse et dans le suivi des statistiques de visites du site.
• Le référencement naturel se voit également simplifié grâce à l’adresse unique.
• Il en va de même pour les campagnes de communications qui sont beaucoup plus cohérentes.
• Enfin, Last but not least, le responsive webdesign suit les recommandations des moteurs de recherche tels que Google, ce qui signifie un meilleur référencement à moyen ou long terme.

Développer un site responsive, c’est donc choisir les solutions idéales en matière de design, d’agencement, d’ergonomie, de performance et de référencement avec, à la clé, la création d’une expérience-utilisateur agréable. Ce qui pouvait s’apparenter auparavant à une simple mode est, aujourd’hui, devenu une norme qui propose une solution adéquate à des utilisateurs toujours plus nombreux et plus exigeants.

Pour un aperçu direct de l’effet responsive de notre site Screenlab.be, n’hésitez pas à diminuer la largeur de votre fenêtre. Et pour d’autres détails concernant les services web que nous proposons, c’est ici! ;-)

Partagez cet article !