Responsive Web Design : l'expérience de SmashingMag

Photo de Stéphane

Par Stéphane Bordage le mardi 11 février 2014

Responsive Design : l'expérience de SmashingMag

Vitaly Friedman, rédacteur en chef et co-fondateur de Smashing Magazine, a partagé en décembre 2012 - je sais, j'ai un an de retard :-) - une présentation sur le Responsive Web Design et plus précisément sur les trucs & astuces qu'il a découvert lors de la refonte de Smashing Magazine.

J'en retiens essentiellement :

  • L'importance de ne pas s'attacher à une résolution en particulier.
  • Qu'il existe des techniques étrange d'optimisation du poids des images !
  • Que le chargement conditionnel de CSS et le lazy loading du JS sont clés.
  • L'idée de ne pas charger les widgets des réseaux sociaux tant que l'utilisateur ne clique pas sur l'icône.
  • Qu'on devrait commencer à utiliser l'attribut media dans la <source> d'une vidéo pour servir la version la plus adaptée.
  • L'importance de la recherche typo autour de la lisibilité.
  • L'importance du mobile first (honnêtement, tout le monde en parle, personne ne le fait).
  • Qu'il est essentiel de ne pas viser d'appareils en particulier et de se concentrer sur la lecture.

Parmi les techniques citées :

  • IconFonts (voir notre billet sur IcoMoon)
  • Utiliser height: auto; combiné à max-width: 100%;
  • Utiliser le ratio d'une vidéo pour maintenir ses proportions (padding-bottom: 56.25%; par exemple pour du 16:9)
  • Des pistes pour gérer les tableaux (voir par exemple ce que fait filamentgroup.com)

La présentation sur slideshare.

comments powered by Disqus