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).
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 :
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.
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).
@ 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).
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 ?
>> 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 …
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
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.
Merci d’avoir répondu.
Je comprends mieux votre point de vue, même si je continue à le trouver étrange.
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 !
[…] 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…
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)
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…