Carnet Wiki

responsive-adaptive

Version 4 — February 2014 jeanmarie

C’est un domaine technique naissant dans lequel aucune solution technique n’est idéale ni ne s’impose à ce jour. La bonne approche sera celle qui sera normalisée par le W3C et implémentée dans les navigateurs et disponible pour tout le monde dans 5 ans ou plus le temps que le parc se renouvèle.
En attendant on est conduit à faire du bricolage avec ce que permet HTML/CSS/JS, et de trouver le meilleur compromis possible.

Plugins SPIP

Les SPIPeurs disposent de 2 plugins au choix pour gérer cette problématique sur leur site. Il y a eu quelques échanges entre les créateurs de ces plugins, mais les bases des plugins sont différentes.

-  plugin image_responsive, de Arno*

  • http://plugins.spip.net/image_responsive.html - pas de doc ( Des infos par : http://seenthis
  • http://plugins .net/messages/183681 )
  • http://plugins.spip.net/html5_responsive.html - pas de doc mais un projet : fournir des “outils de base pour html5 et responsive”

-  adaptive_images, de Cerdic

Comment ils se distinguent et comment choisir ?

Ces 2 plugins correspondent aux 2 grandes approches qu’on rencontre en général :

-  la famille des solutions basées sur JS, explorée par Arno : dans ce cas le markup initial est peu modifié, la sélection et le choix des images se fait côté navigateur en JS, ce qui permet potentiellement plus de finesse dans l’adaptation des images à la taille réelle affichée ;

-  la famille des solutions qui repose sur un markup amélioré, dans la limite de ce que permet HTML, et qui repose le moins possible sur Javascript. C’est la voie que Cerdic a exploré, dans le but d’avoir une solution qui fonctionne même sans javascript (ou si javascript est cassé à cause d’un bug d’un js chargé).

Le choix entre l’une ou l’autre méthode reste du ressort de celui qui fait le site in fine, et peut dépendre aussi du projet lui même et des priorités associées.

Liens utiles

-  http://css-tricks.com/which-responsive-images-solution-should-you-use/