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