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

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 :

Version Desktop classique :


Version Tablette :


Version mobile :


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 ?

Invité
5 octobre 2012

Je savais qu’on pouvait adapter la taille des éléments, mais je ne pensais pas qu’on pouvait aller aussi loin dans la customisation. Intéressant !

Invité
5 octobre 2012

L’article est très intéressant, le sujet est encore assez développé sur le web. La technique est intéressante en même temps c’est un peu plus lourd a gérer tant pour le déveloopeur que sur le réseau.

Invité
5 octobre 2012

A mon sens il y a aussi une question relative au budget, pour les grosses sociétés cela est encore envisageable. Par contre pour la PME, ça devient juste hors de prix, alors que bien souvent déjà le site de base n’est pas vraiment optimisé.

Du responsive pourquoi pas, mais je pense qu’il faut déjà bien donner les priorités au site classique et seulement quand celui-ci apporte pleinement satisfaction, voir pour adapter le site sur les autres supports.

Invité
6 octobre 2012

Au contraire le responsive est extremement simple à développer et c’est très léger:seul le css évolue. La faiblesse: le contenu et les fonctionnalités ne changent pas car le html reste le même.

Invité

C’est une technique encore trop peu utilisée, même si de nouveaux outils tel que l’excellentissime bootstrap utilisent le responsive design de base, « obligeant » les développeurs à s’y mettre et à se renseigner. Par contre, c’est également un investissement pour une société de créer un site web responsive car cela demande de créer plusieurs css – un par support – et donc de passer plus de temps que prévu initialement…affaire à suivre en tout cas!

Invité
Roubaud mickael
6 octobre 2012

Hello, la question des performances n’est pas forcément vraie. Si on fait du « mobile first » avec des bonnes media queries on peut avoir ce comportement:
-en dessous de 380px on ne charge qu’un fichier CSS vraiment très basique, et léger
-on enrichi la css à chaque breakpoint avec par exemple un nouveau fichier CSS
-on peut avoir un mode ‘retina’/hd avec de nouvelles images

Du coup le site est aussi optimisé pour les bas débits presque autant d’un site dédié mobile.

Invité
6 octobre 2012

Bonjour,

Cette technique présente en effet bien des avantages, notamment pour les clients au budget serré qui n’ont pas les moyens de développer en + 1 site mobile.

De plus en plus de thèmes WordPress sont faits sur ce format, y compris des gratuits, ce qui fait qu’aujourd’hui, on peut très bien bénéficier d’1 site web lisible avec n’importe quel matériel pour 1 coût raisonnable.

Invité
6 octobre 2012

@Bruno : Pour une création graphique spécifique (hors thème de base gratuit), le coup du responsive design est non négligeable. Aller aussi loin dans la customisation demande beaucoup de temps.

Invité
6 octobre 2012

Bonjour, je regroupe ne nombreux outils et thèmes sur mon site: http://theme-responsive.com/

N’hésitez pas à y faire un tour

Invité
6 octobre 2012

Je pense que le responsive est une tendance lourde car maintenant j’ai 1 client sur 2 qui m’en fais la demande lors de ma définition de projet.
Pour la création de blog, la déclinaison multi support est une nécessité et le responsive nous fais gagner beaucoup de temps en réalisant 1 seul template pour toutes les déclinaisons.

 
Lire les articles précédents :
Actus du Web : la sélection PowerPress de la semaine

La sélection des meilleurs communiqués publiés sur PowerPress durant la semaine écoulée. Ceux qui ont opté pour une formule Intégrale...

Fermer