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 :

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

Laisser un commentaire