Pourquoi adopter le responsive design. Quels bénéfices apporte cette nouvelle technologie aux éditeurs de site web ? État des lieux et perspectives.

Article rédigé par Stéphane Cholet. Directeur technique de l’agence web CLAP40, il accompagne ses clients dans
leur stratégie web, mobile, sociales et CRM (acquisition, fidélisation, notoriété… ). Stéphane est également photographe à ses heures, et édite le site bokeh.fr.

Le contexte de consommation de l’internet nous pousse inévitablement vers un mode de consommation en mobilité. Aujourd’hui, les tendances, la mode des tablettes et des smartphones prouvent que les habitudes changent.

Devant ce constat, les éditeurs tendent à adapter leurs sites pour une utilisation sur les nouveaux supports. Les applications remportent un large succès. Mais elles ne touchent malheureusement pas tout le monde. Pour palier à cette lacune, et pour d’autres raisons que vous allez découvrir, les éditeurs s’intéressent de plus en plus à la technologie du responsive design.

Le responsive design, qu’est-ce que c’est ?

Le responsive design devient de plus en plus en vogue sur le web. Il s’agit de pages web adaptables au format de lecture utilisé. Pour une même adresse web (http://monsite.com) la présentation du site sera adapté au support de lecture utilisé. Ainsi, en surfant sur ce même site avec un écran de haute résolution vous bénéficierez d’une présentation adaptée pour ce format. Avec une tablette de type iPad (la plus utilisée) le site se dessinera d’une autre façon. Sur Smartphone le contenu présentera le contenu le plus pertinent à la situation de mobilité.

Pour illustrer ces propos, je vous invite à vous rendre sur le site bien connu du monde du web : Smashing Magazine. En mode full HD (1920×1080), le site occupe la largeur de l’écran. Si vous faites l’exercice de réduire la taille de la fenêtre avec votre souris, vous vous apercevrez qu’au fur et à mesure, le site s’adapte à la taille de l’écran. Pour les plus petites tailles, seuls les contenus les plus intéressants restent affichés sur la page. Si vous visionnez cette technologie pour la première fois, c’est assez bluffant. En tout cas, cela l’a été pour moi en découvrant cette technologie. Dans les versions mobiles, vous découvrirez également qu’il n’est plus nécessaire de zoomer pour lire le contenu.

Version Desktop HD :

smashing01 Responsive design, quels bénéfices pour les éditeurs de site web ?

Version Desktop classique :

smashing02 Responsive design, quels bénéfices pour les éditeurs de site web ?

Version Tablette :

smashing03 Responsive design, quels bénéfices pour les éditeurs de site web ?

Version mobile :

smashing04 Responsive design, quels bénéfices pour les éditeurs de site web ?

La technologie derrière le responsive design

Le responsive design repose sur les media queries des feuilles de style. L’éditeur du site choisit les « break points » pour lesquels il souhaite adapter son site, et y définit les styles qui permettront de s’adapter à la taille du break point. Ce terme désigne le passage d’un mode lecture à un autre. On considère bien souvent 4 break points dont les tailles sont les suivantes :

  • Supérieur à 940px de large pour les écrans de bureau
  • Entre 768 et 939px de large pour les tablette en mode portrait
  • Moins de 767px de large pour les smartphones en mode paysage
  • Moins de 380px de large pour les smartphone en mode portrait

Pour chaque breakpoint, il est possible de masquer certain bloc d’information afin de mettre en avant les contenus les plus pertinents.

Il ne reste plus qu’un seul site à maintenir pour tous les supports de lecture. A l’inverse des sites mobiles dédiés, cette solution permet de ne construire un seul site pour quelques adaptations de feuille de style seulement. Magique.

Les bénéfices du responsive design

Vous l’aurez compris cette technologie offre aux éditeurs de site les bénéfices suivants :

- Une expérience utilisateur enrichie
- Un seul site à maintenir. Fini le site mobile dédié avec une url m.monsite.com
- Une seule url à communiquer. Idéale pour les campagnes de communication online.
- Plus besoin de tester le user-agent du visiteur. Le site s’affiche correctement en fonction de la taille de l’écran. Fini l’accueil du type. Souhaitez surfer en mode mobile ou en mode « normal ».
- Il est toujours possible d’offrir au visiteur la version normale du site pour ceux qui souhaitent conserver le visuel du site auquel ils sont habitués.
- le tracking analytique reste le même pour le site web.
- Le coût de développement est moins onéreux qu’un site mobile dédié

Je conseille et mets en place cette technologie pour mes clients en recherche de contact. Les taux de transformation sont en nette hausse par rapport aux pages classiques. On constate que les internautes s’engagent davantage sur les terminaux mobiles que sur la version dite desktop.

Contrainte technique

Dans chaque révolution, il existe des contraintes qui ne sont pas acceptable par tous. Le responsive design offre un excellent confort de lecture quelque soit le support utilisé. En revanche, il oblige un chargement de tous les éléments de la page. Que vous surfiez depuis un desktop, ou depuis un mobile, vous chargerez tous les éléments qui constituent la page même si le site n’affiche que les éléments les plus pertinents en version mobile. Cela peut s’avérer décevant en terme de performance. En mobilité avec un réseau Edge, vous aurez plus de difficulté à télécharger le contenu d’un site responsive que le contenu d’un site mobile dédié.

Il existe néanmoins des solutions pour palier à ce genre de problème. Elle demande malheureusement un peu plus d’investissement lors de la phase de conception et développement du site.

Pour clore cet article, j’aimerais vous proposer de 2 sites populaires aux Etats-unis en cette période d’élection présidentielle américaine :

Essayez de prendre du temps en surfant sur ces deux sites avec les supports smartphone 3g / edge et tablette. Les 2 sites sont ils aussi agréables à utiliser ? Pour ouvrir le débat en tant qu’internaute : est-ce que l’information vous paraît plus accessible sur le site responsive de Barack Obama ?