couv-responsive

Introduction au responsive design

Si vous êtes en train de travailler à la création du site internet de votre entreprise, nul doute que vous avez entendu parler de responsive design. En effet avec le boom des smartphones et des tablettes, aujourd’hui la consultation des sites internet depuis les appareils mobiles ne cesse de croître. Le responsive design permet de créer des sites web qui s’adaptent à chaque support et qui sont facilement consultables depuis chaque appareil mobile.

Concrètement qu’est ce que le responsive design ?

Avant, lorsqu’on consultait un site internet depuis un téléphone connecté, deux choses pouvaient s’offrir à nous :
– le site en version normale, tel qu’on le consulte depuis un ordinateur, nous apparaissait mais en taille réduite pour rentrer dans le cadre de l’écran. Puis il fallait zoomer, dézoomer et défiler dans tous les sens pour avoir accès à l’information,
– un site spécialement conçu pour le mobile, de largeur réduite, avec moins de contenu et de gros boutons, comme celui de Burger King ou de Costco.

Le problème avec le site mobile, c’est qu’il fallait générer et gérer le contenu pour son site « principal » et son site mobile, il y a donc deux fois plus de travail pour mettre à jour ses informations. Et de plus, aujourd’hui avec la multitude de supports et de résolutions disponibles la gestion d’un site dédié à chaque appareil serait une perte de temps considérable.

Avec la technique du responsive design, nous ne créons plus qu’un seul site internet, mais celui-ci a la capacité de structurer son contenu suivant la résolution de l’écran sur lequel il est affiché. Les blocs texte vont changer de largeur, les images vont diminuer de taille, et les blocs vont se replacer les uns par rapport aux autres, de manière à s’afficher correctement suivant la largeur de votre écran.

fonctionnement-responsive-design

 

Les avantages du responsive design

La gestion de l’information : cette technique permet de gérer les blocs à afficher ou non selon la résolution de l’écran. Par exemple, sur notre image du dessus, on peut décider de n’afficher que les blocs verts lorsque le site est consulté sur le smartphone, car on considère que ces blocs verts sont la seule information nécessaire à fournir lorsque le site est consulté sur un téléphone.

Le gain de temps réalisé en ne mettant à jour qu’un seul contenu, qui est le même sur tous les support de visualisation. Et par la même occasion la minimisation des erreurs de contenu car il n’y a qu’un seul site à gérer.

Une URL unique, idéal pour une campagne de communication facile à gérer et compréhensible par son public. De cet avantage en découle un autre : notre cible peut consulter notre site depuis n’importe où ! C’est l’assurance de faire passer notre message au plus grand nombre, voire de vendre nos produits plus facilement grâce au m-commerce (lire Le Boom du m-commerce).

 

Un site responsive :
site-web-responsive

Un site non responsive :
site-web-non-responsive

 

Les inconvénients du responsive design

Le temps de chargement : même si l’affichage est adapté, c’est un site complet que l’on visionne sur son mobile. On doit charger les images, le code HTML, le javascript…bref lorsqu’on est en 3G, le temps de chargement d’un site responsive peut être élevé.

On doit respecter un design ajustable : même en étant très pointilleux sur la fabrication du site, certains éléments de texte ou des images peuvent ne pas s’adapter correctement à la résolution. Il faut donc respecter un design assez simple voire minimaliste, en colonne et très structuré. Le responsive ne peut donc pas convenir à des sites qui vont demander une structuration des texte et des images un peu originale.

Ça coûte cher : Ah. On ne construit qu’un seul site web certes, mais on le décline sous toutes les résolutions disponibles, en général 4 : grands écrans, écrans plus modestes, tablettes et smartphones. Il nous faut donc concevoir et créer 4 designs et intégrer (coder) ces 4 structures. Puis il faut optimiser les images de contenu pour améliorer l’affichage et les performances du site web, optimiser le texte et gérer les titrailles, pourquoi pas créer et utiliser une police d’icônes qui nous permet de gérer les résolutions HD comme les écrans « retina » des iPhones…bref, on peut considérer qu’il y a deux à trois fois plus de travail sur un site responsive que sur un site classique, l’investissement est donc proportionnel.

Les alternatives

Ne pas faire de site responsive : selon votre domaine d’activité et votre cible, le site responsive reste encore une option. Moi-même je consulte très peu de sites web sur mobile ou tablette et je suis plutôt défenseur du grand écran. Aujourd’hui moins de la moitié des français ont un smartphone et tous n’ont pas un bon accès au web via la 3G.

Un site mobile : ils ne sont pas morts ! Selon votre objectif un site mobile peut être une solution idéale pour interpeller les mobinautes. Le contenu peut être très restreint et adapté, ne présentant que les informations principales et ciblées à l’internaute mobile. On peut même allier site mobile et QR code pour créer une expérience utilisateur unique. Je vous propose de découvrir mon travail sur le site mobile de l’UNADEV.

Les applications : ce sont ces programmes qui s’installent sur les smartphone via les « stores ». Une application peut être utile pour créer et contrôler une meilleure expérience utilisateur car elle permet d’autres interactions que le site ne permet pas. Attention tout de même à ne pas tomber dans le piège : une application a sa propre utilité, dynamique, informative, utile et ludique. Elle ne doit pas être la copie de votre site web, ce qui serait un investissement inutile.

 

En conclusion, le responsive design est la solution idéale et un choix stratégique pour créer un support de communication multi-plateforme et élargir son public. Malheureusement son coût de développement encore élevé peut vous faire renoncer à son développement. Et n’oubliez pas que comme un site classique demande aussi du travail de la part du commanditaire, un site responsive en demandera trois fois plus.

 

[MÀJ du 07 mars 2015]

Le web va vite, très vite. 1 an et demi après l’écriture de cet article, la navigation sur mobile a explosé et aujourd’hui Google annonce qu’il favorisera les sites adaptés dans ses résultats de recherche. Si vous vous lancez sur le web, il vous faut impérativement soit un site mobile, soit un site en responsive design.

Leave a Comment