Fait vivre votre communication

Webmaster à temps partagé - 01 - 71 - 69 - 39
10 impasse des Acacias
Berzé-la-Ville
Bourgogne
71960
France

La gestion des photos en responsive web design #rwd

Revue de quelques techniques disponibles et appréciation personnelle

En matière de responsive web design, les images posent problème pour deux raisons :

La première difficulté se résout assez facilement. On demande à l’image d’adapter sa largeur à la largeur disponible. Quant à la hauteur, elle sera calculée de manière automatique. Cette technique évite donc à l’image de “déborder” du cadre et évite un fastidieux scrollage horizontal.


img {
width: 100%;
height: auto:
}

La seconde difficulté est en cours de résolution, au niveau du W3C (le consortium qui préside à l’évolution des languages informatiques de l’internet). Dans la pratique, cela veut dire que plein de gens bien intentionnés proposent des solutions différentes mais non standardisées. Traduction: qui ne marchent pas partout, ou bien qui sont relativement lourdes à mettre en place.

  1. utiliser l’élément “picture” : balise en cours d’étude au W3C ? Non car inutilisable en l’état actuel des navigateurs
  2. utiliser le polyfill Picturefill (émulateur Javascript de la balise “picture”) ? Non car trop lourd à mettre en application
  3. utiliser l’attribut “srcset” pour indiquer une version “HD” de la photo ? Non car implémenté de manière inégale dans les navigateurs
  4. réduire le nombre d’images pour la version mobile via CSS ? Non car l’expérience utilisateur sera incomplète et la page/l’article peut perdre son sens
  5. jouer sur la manière de compresser les photos et trouver un compromis qualitatif entre les affichages pour terminaux fixes et mobiles, sans alourdir le processus de publication ni “squizzer” des navigateurs peu performants ? Oui
  6. Les experts en web mobile et les avant-guardistes du CSS doivent hurler à la mort en lisant ces propos. D’une certaine manière, nous comprenons leur réaction car il ne s’agit pas d’une approche qui favorise la R&D expérimentale. Il s’agit d’une approche pragmatique qui présuppose que le web doit être facile et rapide à mettre à oeuvre. Chez Jean Sam Communication, nous mettons en ligne plusieurs articles par jour, et “bidouiller” avec un polyfill ou une balise insuffisamment prise en compte par les navigateurs, est tout simplement inenvisageable.

    En revanche, nous menons une veille technique quotidienne et sitôt que l’une ou l’autre de ces solutions sera largement déployée et standardisée, nous l’adopterons sans tarder.

    Article écrit par Jean Sam Denis

    jean-sam

    Bonjour, je suis Jean-Sam, webmaster / community manager à temps partagé, auprès de PME installées en Bourgogne, en Franche-Comté et Rhône-Alpes. J'essaie d'apporter de la cohérence et de l'ambition aux projets internet, afin qu'ils soient durables et profitables.
    Ma particularité est de rester à proximité du client durant toute la durée de notre collaboration, en assurant la maintenance complète ou partielle du site (rédactionnel, photo, vidéo, newsletter, réseaux sociaux, référencement...).

    Me joindre par mail ou me joindre par téléphone

De 2007 à 2017