Le responsive design à l’assaut des terminaux mobiles

Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation.

Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. Jusqu’à présent, lorsqu’un internaute visitait un site ayant plusieurs interfaces, il était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage (ex : IMDB.com qui renvoie vers m.IMDB.com si vous le consultez avec un smartphone). Le principe du Responsive Web Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS (et les media queries qui peuvent maintenant s’exprimer en largeur de page).

Illustration du responsive design

L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce n’est donc pas qu’une question de largeur de page, mais une nouvelle façon de penser les interfaces web. L’approche de l’auteur (traduction française disponible ici : Le Web Design Réactif) est donc de prévoir à la fois une mise en page qui s’adapte (nombre et largeur des colonnes), mais également des images qui se redimensionnent et même des éléments qui sont repositionnés voir supprimés.

Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour « penser » une interface en plusieurs largeurs. Il existe heureusement un certain ombre d’article traitant de ce sujet :

  • Responsive Web Design: What It Is and How To Use It
  • Understanding the Elements of Responsive Web Design
  • Les Media Queries CSS3
  • The best responsive web design examples and resources

Avec la récente sortie de nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…), l’utilisation de ce type de technique va devenir une réalité et évitera de devoir passer par du code javascript et des acrobaties pour assurer une t-rétro-compatibilité.

Encore une fois, c’est un sujet assez technique, mais qui concerne une approche radicalement novatrice dans la distribution de contenus et services en ligne. La plupart des réalisations déjà disponibles concernent des sites de designeurs (visibles sur MediaQueri.es), mais nous commençons à voir des sites de beaucoup plus grosse importance adopter cette technique comme la rubrique Election du Chicago Tribune :

Le site du Chicago Tribune en 3 versions

Les exemples listés sur MediaQueri.es sont illustrés en 3 largeurs (smartphones, netbooks/tablettes et ordinateurs) mais peuvent potentiellement s’adapter à n’importe https://simpleweb.fr/files/2011/03/23/quelle interface (téléphones mobiles, tv connectées, consoles portables…). Je suis particulièrement enthousiaste quant à cette approche de la mise en page d’un site ou service en ligne. D’ailleurs une réécriture du gabarit de ce blog est en cours pour justement exploiter les medias queries. Des explications détaillées seront publiées quand ce nouveau thème sera en ligne.

22 commentaires pour “Le responsive design à l’assaut des terminaux mobiles”

  1. Posté par Amaury Bouchard a dit : le

    Il y a malheureusement certaines limites à l’optimisation que permet ce genre de technique. Plus particulièrement, je pense aux images qui sont redimensionnées (ou cachées) par CSS. Il n’empêche que c’est l’image pleine taille qui est téléchargée ; ça ne pose pas de problème avec un navigateur web, mais sur un téléphone portable c’est vite gênant.

    J’ai donc le sentiment qu’on va encore continuer à voir pendant un bon moment des sites en version optimisée pour téléphone, tablette, et ordinateur. C’est à la fois plus simple à développer (même s’il faut le refaire plusieurs fois), mieux optimisé, permet de définir des ergonomies différentes (en prévoyant du tactile sur les tablettes, par exemple).

  2. Posté par Frédéric CAVAZZA a dit : le

    @ Aumaury > Peut-être que les solutions de compression d’images vont améliorer ça (téléchargement initiale d’une version dégradée et de l’image en qualité réelle si visionnée avec un écran large).

  3. Posté par Ne négligez pas les smartphones low cost | TerminauxAlternatifs.fr a dit : le

    […] Tout ceci nous ramène donc à la conclusion logique que l’approche la plu sage est de ne pas miser votre stratégie de distribution sur des environnements propriétaires comme iOS mais plutôt de répartir le risque en ciblant d’autres plateformes avec un modèle universel reposant sur une interface HTML5 (cf. Le responsive design à l’assaut des terminaux mobiles). […]

  4. Posté par Jean-Michel DAIX a dit : le

    Concernant la traduction en français de Responsive je me demande si la conception d’interfaces Web « réactives » porte bien l’idée d’adaptation à son environnement. Peut-on parler d’interfaces Web adaptatives ? D’autres idées ?

  5. Posté par Web design / L’ affichage devient flexible « Orbis-Editing a dit : le

    […] […]

  6. Posté par florian lainez a dit : le

    >> c’est l’image pleine taille qui est téléchargée
    > Peut-être que les solutions de compression d’images vont améliorer ça
    Le problème concerne seulement les devices mobiles, or des navigateurs supportant le SVG (dont le poids est largement inférieur à celui des bitmaps type png/gif/jpg) sont intégrés sur ces devices.

    Serait-ce (enfin) le moment où ce format va être adopté ? Bien entendu cela ne fonctionne pas avec les photos …

  7. Posté par Phil a dit : le

    Bonsoir,

    je suis le propriétaire de gobanclub.net, qui présente la traduction française de « Responsive Webdesign » et je trouve hallucinant que vous ne citiez à aucun moment de votre article le nom de l’auteur : Ethan Marcotte. Pourriez-vous m’expliquer pourquoi, car cela m’apparait comme la moindre des choses.

    Merci

  8. Posté par Frédéric CAVAZZA a dit : le

    Bonsoir Phil, je ne cite pas le nom de l’auteur car cela n’apporte rien à l’article. A partir du moment où il y a des liens vers la source (et la votre), je respecte les us et coutumes de la blogosphère.

  9. Posté par Web design / L’ affichage devient flexible | Orbis-Editing a dit : le

    […] […]

  10. Posté par Phil a dit : le

    Merci d’avoir répondu.
    Je comprends mieux votre point de vue, même si je continue à le trouver étrange.

  11. Posté par Le responsive design | Fabrice Arsicot a dit : le

    […] un article de Fred Cavazza. […]

  12. Posté par JFlarouche » Interfaces tactiles, web 3.0 et cie a dit : le

    […] SimpleWeb.fr > Le responsive design à l’assaut des terminaux mobiles http://www.simpleweb.fr/2011/03/23/le-responsive-design-a-lassaut-des-terminaux-mobiles/ […]

  13. Posté par Lancement de la bêta Hallspark.com | Hallspark.com a dit : le

    […] à la technologie du « Web Responsive » ou Site réactif en français, Hallspark.com est accessible depuis toutes les plateformes équipe […]

  14. Posté par Responsive Web Design, mon grain de sel 😉 | BLOG E-COMMERCE de François Ziserman, Consultant e-commerce a dit : le

    […] Fred Cavazza qui en parlait déjà en Mars 2011 Tweet […]

  15. Posté par jim a dit : le

    on peut aussi prévoir d’intégrer dans un design « réactif » (le bon mot français reste à trouver effectivement mais celui-ci me plaie bien) des images qui sont retaillées pour faire la largeur maximale d’une colonne, dans le cas d’un grid design .. le résultat est suprenant !

  16. Posté par Développer un site internet avec du responsive design a dit : le

    […] sur les perspectives à envisager je vous invite à lire l’article de Fred Cavazza sur le sujet : Le responsive design à l’assaut des terminaux mobiles. Nous allons nous intéresser à son intégration.Pré-requisOn oublie le code javascript pour une […]

  17. Posté par lackland a dit : le

    […] je suis le propriétaire de gobanclub.net, qui présente la traduction française de « Responsive Webdesign » et je trouve hallucinant que vous ne citiez à aucun moment de votre article le nom de l’auteur : Ethan Marcotte. Pourriez-vous m’expliquer pourquoi, car cela m’apparait comme la moindre des choses. [….]
    en même temps il n’est pas « l’inventeur » de cette technique (peut-etre du terme). Nous sommes de nombreux WebDesigner à avoir contribué pour ce que l’on apelle aujourd’hui le responsive design… La seule nouveautée est le MediaQuery qui nous permets de cibler le media et de switcher les css selon le format d’écran…

  18. Posté par matthieu a dit : le

    Ethan Marcotte a en effet été un précurseur sur l’utilisation du RWD ( Responsive Web Design) j’ai également été enthousismé quand j’ai lu son livre aux éditions Eyrolles et découvert son site la première fois, le citer est incontournable, par qui pourrait m’éclairer sur le  » HD WEB  » (une alternative au RWD apparemment)

  19. Posté par Adobe lance une suite d’outils de développement HTML5 « InterfacesRiches.fr InterfacesRiches.fr a dit : le

    […] Edge Reflow, un outil de production de gabarits de page en responsive design; […]

  20. Posté par Nicolas ROSSI a dit : le

    Ce qui est intéressant avec le RWD est de n’avoir qu’un seul site à administrer.
    De plus, cela ne peux que renforcer l’image de marque d’une société.
    Et oui, les sites adaptatifs sont l’avenir du web ! Enfin, pour certain, c’est le présent…

  21. Posté par Thomas a dit : le

    Bonjour
    Que pensez vous de : http://www.hd-web.fr ?

  22. Posté par Nicolas ROSSI a dit : le

    Salut Thomas,
    Le site que tu propose n’est pas responsive lui-même, cela ne donne pas confiance du tout.
    Il n’existe pas de solution toute faite en responsive design.
    Si tu veux quelque chose de bien (et donc personnalisé), il faut faire du sur mesure.
    Va voir plutôt http://www.sitadapt.com, avec un joli travail au niveau du menu responsive.
    A+