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 :

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 ?

33 commentaires

  1. 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 !

  2. 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.

  3. 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.

  4. 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.

  5. 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!

  6. Roubaud mickael on

    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.

  7. 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.

  8. @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.

  9. 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.

  10. citron mecanic on

    c’est vachement bien le RD mais ne s’adapte pas à tous les sites, pour un site simple de type blog ça va mais pour un gros portail plus complexe genre allociné, bonjour le casse tête

  11. Ok. L’article est vraiment sympa. Merci ;)

    Par contre, le rose autour rend la lecture très fatigante. Je n’aurais pas lu 10 lignes supplémentaires….

  12. Stephane-Cholet

    Le responsive design n’est absolument pas une contrainte pour la création artistique. Il existe des gros portails édités avec cette technologie. ex : le Boston Globe http://bostonglobe.com/

    Nous en faisons également pour nos clients : e-boutique, corporate, …

  13. Le responsive est une belle avancée, mais ce n’est pas la panacée. S’il tient compte de la variété des supports de lecture, il oublie le contexte, qui est au moins aussi important. Sur son ordi ou sa tablette, on est à la maison ou au bureau, dans un confort et une « immobilité » qui nous laissent le temps de consulter les contenus d’un site. Sur mobile, on est dans la rue, ou debout… les attentes et l’environnement de l’utilisateur ne sont pas les même, et les fonctionnalités associées non plus : géolocalisation, infos pratiques, deviennent essentielles.
    C’est bien le contenu du site qui doit évoluer en fonction du support, et pas uniquement l’affichage.
    Evidemment, ce commentaire ne s’applique pas à tous les sites.

  14. Le responsive design est très utile pour la majorité de site. Mais je mets un bémol pour tous les sites qui sont destinés principalement à être visionnés sur mobile et où le temps de chargement est un élément crucial. Je pense notamment aux sites d’hôtels, restaurants et tout ce qui tourne autour du voyage et autres informations pratiques que l’on consulte avec son mobile. Et là malheureusement le responsive design ne permet pas de fournir des temps de chargement adaptés comme indiqué dans l’article. Et ne permet pas non plus d’user des technologies propres au mobile (géoloc, etc) comme le signale David ci-dessus.
    Enfin, en terme de référencement, avoir son site disponible sur une url propre au mobile permet d’intégrer et se positionner plus facilement dans les index mobiles des moteurs de recherche, ce qui n’est pas négligeable ;)

  15. Ce que vous dites ne contre en rien l’approche tout responsive. Pour les usages en situation de mobilité: optez pour les applis, les sites responsive se veulent être une approche contenu qui ne doit en rien être plus léger que la version originale. J’ajoute que la geoloc est utilisable sur un site responsive grace aux fonctionnalité HTML5 et aux capacités des derniers browsers. Tout site peut s’adapter, tout dépend du webdesigner et de l’intégrateur qui veilleront à avoir un site ayant un poids raisonnable, la vieille école connait bien se problème qui se posait déjà au temps du 56K. Malheureusement ce sont des contraintes oublié depuis l’adsl. Bref tout ca pour dire que le responsive design va devenir une norme d’ici 2-3 ans lorsque les stats de traffic vont affichés une audience tablette/mobile supérieure au PC desktop. D’ailleurs je tiens à rappeler qu’apres avoir conseillé la création d’un sité spécial mobile, Google préconise maintenant l’utilisation du Responsive comme solution d’affichage multiplateforme. A bientot

  16. Ben non Will, dans les liens que tu cites il est clairement indiqué que Googlebot-Mobile crawlait les sites optimisés pour Mobile. Il est même possible de spécifier un sitemap pour les mobiles dans GWT ;)

  17. Pingback: Responsive design, quels bénéfices pour les éditeurs de site web ? | Numérique OTSI | Scoop.it

  18. Le google mobile bot a ou va être unifié et de cette manière, il y aura beaucoup moins de pertinence à séparer son contenu (je ne retrouve plus mon lien vers la conf qui parle de cela mais je posterais si je retrouve) . D’ailleurs cette question a été largement débattue sur les blogs anglo-saxon et il en ressort que restreindre son contenu pour les utilisateurs de mobile est un Mythe appuyé par aucune étude réelle.
    Le succès des apps met bien en évidence qu’elles sont plus adapté en mobilité.

  19. Pingback: Responsive design, quels bénéfices pour les éditeurs de site web ? | creation de sites web | Scoop.it

  20. Stephane-Cholet

    @David, en effet… On utilise la tablette dans un contexte plutôt non mobile. Mais cela n’empêche pas de consulter le site dans un format adapté pour la tablette. Même si la taille est proche du PC, il y a toujours moyen de rendre la lecture plus agréable. Surtout pour un site média.

  21. Merci de nous donner tous ces détails.

    Je connaissais depuis quelques temps le responsive design et je pense que c’est l’avenir. De plus en plus de connexion se font depuis les supports mobiles et l’expérience utilisateurs en est grandement amélioré.

    J’y réfléchis sérieusement pour mon prochain site.

  22. @mickael : je suis curieux de savoir comment on détecte un mode HD/retina.
    Pensez-vous qu’il faille uniquement tester la résolution ? Je ne pense pas. Même si un iPhone en retina permet d’avoir un affichage de meilleure qualité (pour les photos par exemple), on ne peut pas forcément afficher les mêmes choses car l’écran reste à la même taille (et nos doigts aussi !).
    Quelle est la solution dans ce cas ?

  23. Un très bon article, j’en ai lu pas mal en anglais mais c’est un des premiers en français aussi complet. Ce genre d’article technique est très appréciable sur Presse Citron.

  24. Stephane-Cholet

    @Nicolas, ravi que cela t’intéresse :)

    @Jérémie : on peut définir des medias queries pour le retina. J’ai pas d’exemple sous la main, mais c’est possible.

  25. Pour ce qui est du référencement, je pense que si l’on part sur un sous-domaine du type m.site.com, cela risque d’être un peu plus complexe à référencer car il va falloir effectuer du netlinking pour cette URL. Même si celle-ci profitera de l’autorité du domaine, il y aura plus de travail qu’en servant dynamiquement un contenu différent sur le même set d’URLs.

    Enfin, une question que je me pose, si l’on crée une version mobile ne contenant pas exactement le même nombre de pages que la version desktop, vers quoi faire pointer le link rel= »alternate » des pages du site desktop ?

  26. Pingback: Responsive design, quels bénéfices pour les éditeurs de site web ? | Conseils en communication visuelle | Scoop.it

  27. Pas mal l’article …mais pas si simple en pratique et encore beaucoup d’inconvénients (pour le moment) … quelques reflexions pour continuer le débat : l’usage en mobilité est-il le meme qu’au bureau ? (le contenu et les fonctionnalités sont différentes à mon avis) pour un site d’info type presse (genre WordPress) là d’accord, puisqu’il s’agit simplement de mise en page. Ensuite le problème de budget (le client à deja du mal à se payer un site desktop bien fait, alors un site qui fait tout …) sans parler de la complexité en phase de conception (wireframe), le temps de chargement et de la création de visuels adaptés (retina et autres tailles). Je ne suis pas contre (au contraire) mais pas dans les tous les cas de figure et seulement si necessaire. a bientôt

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