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 ?

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

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

    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. Jérémie on

    @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