Responsive Web Design : l'expérience de SmashingMag

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

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.