Projet Web : pourquoi le responsive design devrait être votre priorité ?

Petit rappel pour les néophytes, le responsive web design, ou design adaptatif, consiste à adapter le contenu de son site Web en fonction du périphérique connecté. On pense immédiatement à la taille de l’écran mais ça concerne également l’usage du tactile et donc la gestion des interactions avec l’utilisateur. Ainsi, un site Web responsive s’adapte aux ordinateurs de bureau, aux tablettes et aux smartphones sans avoir à télécharger une application séparée. Pourquoi est-il désormais prioritaire de concevoir un site Web avec un design responsive ?

Les applications mobiles, c’est fini ?

Premier élément, l’usage des smartphones et tablettes pour se connecter sur Internet explose. A tel point qu’après avoir longtemps parlé du e-commerce pour parler de l’achat sur Internet, on parle désormais du m-commerce pour l’achat sur périphérique mobile. Les éditeurs de sites Web s’adaptent à ces nouveaux usages et, plutôt que de développer un package « site en html/css + une application iOS + une application android », préfèrent se tourner vers un design adaptatif qui permettra de servir l’intégralité des périphériques via une seule application Web.

Ceci est rendu possible grâce aux avancées des technologies et notamment aux normes HTML5 et CSS3 qui permettent de créer du contenu riche adaptatif avec du HTML/CSS natif via les médias queries.

Le design responsive remplace donc une partie des applications mobiles qui avaient pour unique but de proposer les contenus du site adaptés aux périphériques mobiles. Attention cependant, il ne prend pas la place des applications dédiées aux mobiles type jeux, services géolocalisés ou applications déconnectées, en tout cas pas encore…

Mouvance « mobile first »

Les nouveaux projets Web doivent prendre en compte la mobilité au plus tôt dans le cycle de création car c’est un usage important qui pourrait leur passer sous le nez. Dans le développement Web, il existe une mouvance dite « mobile first » qui consiste à développer d’abord le projet à destination des mobiles pour étendre ce fonctionnement aux périphériques classiques.  On démarre basique pour enrichir petit à petit en fonction de la taille d’écran disponible.

Cette mouvance prend tout son sens pour des projets encore au stade d’étude. En effet, il permet de contraindre le cycle de création et de développement selon la croissance des usages. Quelques chiffres datant de 2013 :

  • 50% des français ont un smartphone (contre 39% en 2012)
  • 23% des français ont une tablette (contre 15% en 2012)
  • 71% des francais ont un ordinateur portable (71% aussi en 2012)

Source

On comprend vite que la mobilité est devenu un enjeu majeur…

Quand on développe en mobile first, on est donc clairement dans le respect des usages utilisateurs. A noter que développer en mobile first ne signifie pas développer uniquement pour mobile. Vous aurez également besoin de développer votre plateforme pour ordinateur classique, mais sur la base de votre travail pour smartphone.

Un plus pour le SEO

Autre élément, le design adaptatif est une manne pour le référencement naturel et le SEO. D’une part, les moteurs de recherche préfèrent mettre en avant des sites Web responsives car ils s’adaptent à tous les périphériques permettant ainsi de proposer la même page pour toutes les recherches, et pour tous les périphériques utilisés pour faire les recherches ; d’autre part, le fait de centraliser les différentes adaptations d’une même ressource sur une seule URL concentre le trafic et évite la dispersion des liens entrants. Quand vous développez un site responsive, vous facilitez donc le référencement naturel de votre plateforme Web.

Opter pour la modernité

Si on se place du coté des utilisateurs, et de leur perception de votre projet, n’oubliez pas que vous n’êtes pas seul sur Internet. De plus en plus les internautes, – et les mobinautes en particulier -, ont l’habitude de naviguer sur des sites qui s’adaptent à leur périphérique. Ne pas prendre en compte cette contrainte vous fera donc passer pour un site déjà has been ! C’est bête si vous venez juste de vous lancer…

D’autant plus que les mobiles et tablettes sont un important vecteur de business. Que votre projet soit une plateforme e-commerce ou n’importe quelle autre prestation de services tarifés, le responsive design permettra de toucher un maximum de clients potentiels. Si on prend le cas d’une boutique e-commerce, le tunnel d’achat devra être adapté au périphérique connecté sans quoi vous risquez de perdre des clients ! Imaginez un bouton de validation de panier d’achats sur lequel on ne peut pas cliquer car trop petit ou une case à cocher pour accepter les CGU invisible car hors de l’écran…

Oui mais ça coûte combien le responsive design ?

Je sens que l’idée vous séduit mais vous imaginez déjà flamber 40% de votre budget développement… Il n’en est rien. La prise en compte d’un design responsive a évidement un coût. Mais, si c’est une contrainte prise suffisamment tôt, ce n’est pas un surcoût démesuré qui plombera votre projet. Au contraire, il s’agira d’une simple contrainte de développement qui ne vous coûtera rien dans le meilleur des cas et qui pourra aller jusqu’à 15% de votre budget si vous souhaitez des particularités extravagantes pour les périphériques mobiles..

Certes ce n’est pas rien, mais oublier de prendre en compte le responsive et tenter de corriger plus tard peut avoir des répercussions sur votre projet en termes d’architecture mais également en termes de business. Mieux vaut donc ne pas se louper.

Non, vous n’avez pas d’excuse pour ne pas penser au design responsive. D’autant plus que les frameworks CSS vous aidant dans cette tâche sont légions !