Concevoir : Ressources pour un site Adaptatif (Responsive Design)

Tout pleins de ressources (images, vidéos et slideshows) pour réaliser un site au design adaptatif !

http://blog.websourcing.fr/webdesign-express-responsive-slideshow-image-video/

Concevoir : Tester le rendu de vos design adaptatif

Matt Kersley, designer web, propose une page permettant de visualiser rapidement le rendu de votre site à différentes résolutions.
Simple et pratique : http://mattkersley.com/responsive/

Concevoir : L'adaptabilité des vidéos

Vous voulez que vos vidéos YouTube, Dailymotion, Vimeo, etc. s’adaptent à la taille de la fenêtre de l'utilisateur.
Pour cela, utilisez FitVids.js : un plugin jQuery qui permet une largeur adaptative.

Encore du RWD (Responsive Web Design) !

Concevoir : L'adaptabilité grâce à des frameworks...

Aujourd'hui, je vous propose deux frameworks à mettre en oeuvre et à suivre de près... N'hésitez pas à me faire part de vos premières impressions !

• http://lessframework.com/ qui se base sur le concept de Responsive Design
• http://centage.peruste.net/ qui se base sur LESS (une syntaxe structurée pour le CSS) et calcule la mise en page optimale en fonction de l'équipement de lecture.

Concevoir : L'adaptabilité maximale ou le Responsive Design

La multiplication des médias permettant l'accès à nos sites devient extrême.
Là où, il y a encore 2 ans, on devait traiter le cas de l'affichage d'un site dans 2 résolutions cibles (800x600 et 1024x768), on arrive à un nombre de résolutions possibles quasiment égal au nombre de terminaux (tablette, smartphone, portable, TV, ...).

Si vous avez déjà été confronté aux problématiques d'impression sur des sites Web, vous avez surement, au moins une fois, résolu cette problématique par l'utilisation d'une feuille de style dédiée à l'impression(media="print").
De même, il est envisageable de traiter la multitude de support par du spécifique :

• définition de redirection en fonction du média sur un site dédié = une charge de maintenance importante (même si c'est en partie géré si l'on utilise un CMS)
• chargement d'une feuille de style spécifique au média = autant de CSS que de terminaux, à faire évoluer pour tout nouveau terminal non compatible
• optimisation du site pour les médias de faible résolution = limitation des possibilités en terme d'ergonomie et de contenu

On voit clairement qu'il n'y a pas de solution miracle parmi celles ci-dessus, une réponse à ce manque d'adaptabilité passe par le "Responsive Design". Basé sur les "Fluid Grids", "Fluid Images"  ce concept propose une mise en page adaptative...

A partir de votre Mockup, vous définissez l'unité de base de votre page et toute la mise en page est définie sur la base de cette unité via la définition de taille en ems (si vous avez bataillé avec IE pour le redimenssionnement de texte cela ne doit pas être une unité inconnue ;)).

De cette manière, vos conteneurs (div) sont eux aussi proportionnels à votre contenu, dans l'exemple d'Ethan Marcotte,

on définit :

• corps de texte : 16px (soit 1 em)
• Titre H1 : 1,5em (24px/16px)
• Enumeration : 0,875em (14px/16px)

En traitant les conteneurs à l'identique (#page{max-width.61.75em} soit 988px/16px) on a une taille maximale variable fonction de la taille du texte du navigateur.

Ajouter à cela la nouvelle capacité de CSS3, à savoir les media queries et vous avez un environnement adapté au média qui consulte vos pages au sein d'un même design : That's all folks !


Sources :
http://www.w3.org/TR/css3-mediaqueries/
http://www.alistapart.com/articles/howtosizetextincss/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids/
http://unstoppablerobotninja.com/entry/fluid-images