+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 882
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 882
    Points : 66 141
    Points
    66 141

    Par défaut [Article] One Size Fits Some - Guide des solutions d'images adaptatives en Responsive Web Design

    Bonjour à tous,

    SylvainPV nous propose une traduction d'un article de Kado Damball, un développeur JavaScript intéressé par les données et la visualisation de données.

    One Size Fits Some - Guide des solutions d'images adaptatives en Responsive Web Design


    Alors que les mobiles et tablettes s'approchent de leur but final de domination du monde, le design web et la technologie s'engagent dans une course pour s'adapter au nombre toujours croissant de tailles d'écran à gérer. Cependant, élaborer des outils pour répondre aux défis engendrés par ce phénomène amène tout un nouveau lot de problèmes, dont l'un des derniers buzzwords à la mode, le « web responsive ». C'est le défi de faire fonctionner le web sur la majorité, si ce n'est la totalité, des appareils sans dégrader l'expérience utilisateur. Au lieu de concevoir du contenu adapté aux ordinateurs de bureau et ordinateurs portables, l'information doit être disponible sur les téléphones mobiles, les tablettes ou toute autre surface connectée au Web. Cependant, cette évolution responsive web design s'est avérée être difficile et parfois douloureuse.

    Bien qu'il puisse être presque trivial d'adapter du contenu textuel, la partie délicate survient lorsque l'on prend en considération du contenu multimédia comme des images responsive, des infographies, des vidéos, et autres médias créés avec uniquement les ordinateurs fixes à l'esprit. Cela n'amène pas seulement la question d'afficher le contenu correctement, mais aussi la manière dont il sera consommé en utilisant différents appareils. Les utilisateurs mobiles sont différents des utilisateurs desktop. Des choses comme les forfaits Data ou la vitesse de traitement doivent également être prises en considération. Google a commencé à mettre en avant les sites « mobile-friendly » dans ses résultats de recherche, en spéculant sur le fait que cela amènerait un gain substantiel dans le rang de la page (Pagerank) de ce type de sites. De précédentes solutions ont résolu ce problème en utilisant des domaines spécifiques aux mobiles (et des redirections) mais cela a augmenté la complexité et est vite passé de mode. (Tous les sites n'ont pas les moyens de prendre cette direction.)



    Tous les meilleurs cours et tutoriels pour apprendre Javascript
    Tous les meilleurs cours et tutoriels pour apprendre la programmation Web

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 123
    Points : 9 129
    Points
    9 129

    Par défaut

    A titre personnel, ma technique préférée est un dérivé de la technique de source shuffling. Dans le script de build (actuellement je travaille avec gulp), je renomme les attributs src des balises <img> en data-originalsrc et je remplace l'attribut src par une représentation base64 de l'image diminuée en taille par ImageMagick. Je me suis basé sur un fork de ces plugins :
    https://www.npmjs.com/package/gulp-inline-image-html
    https://github.com/scalableminds/gulp-image-resize

    J'utilisais déjà le remplacement en base64 inline pour les petits pictogrammes dans les feuilles de style, avec des plugins comme celui-ci:
    https://www.npmjs.com/package/gulp-base64-inline

    Le tout est ainsi minifié et optimisé en nombre de requêtes comme en taille pour un usage mobile. Ensuite, pour les images de plus haute résolution, il suffit d'un petit script qui vérifie si l'utilisateur a une taille d'écran suffisante pour justifier le passage en haute définition, puis récupère les éléments img[data-originalsrc] et vient charger les versions en qualité supérieure, pour les remplacer de manière totalement transparente. Il est aussi possible de coupler ça à la position de la scrollbar ou au survol à la souris pour faire du lazy loading.

    Cette solution impose un outillage assez conséquent et donne des fichiers relativement peu lisibles en sortie de build, mais elle s'avère très performante pour l'utilisateur. Si vous trouvez l'idée intéressante et si j'ai un peu de temps entre deux projets, j'essaierai d'en faire un module NPM qui puisse être utilisé par tous.

    edit: j'ai publié un prototype fonctionnel ici : https://github.com/sylvainpolletvillard/pilss
    One Web to rule them all

Discussions similaires

  1. Critique de livre : HTML5 et CSS3 pour des sites Responsive Web Design
    Par zoom61 dans le forum Général Conception Web
    Réponses: 0
    Dernier message: 30/10/2014, 15h51
  2. Réponses: 4
    Dernier message: 11/10/2011, 15h50
  3. Réponses: 0
    Dernier message: 10/10/2011, 02h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo