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 : Less, moins de CSS pour d'avantage d'efficacité

Une bonne façon de s'obliger à structurer ses développements CSS : http://lesscss.org/

"LESS est un langage de présentation qui étend CSS pour lui apporter ce qu’il manque : productivité, facilité de maintenance et un héritage de propriétés. Il ressuscite quelque peu le fameux CSS Server Side.
À vrai dire, il apporte tout ce qu’il manquait à la réalité du terrain. De la souplesse et une possibilité supplémentaire d’industrialiser les développements d’interface."

Un très bon article de Thomas Parisot sur le sujet : http://www.clever-age.com/veille/blog/less-moins-de-css-pour-davantage-d-efficacite.html

Concevoir : CSS3, un bon site pour trouver de l'inspiration

Vincent De Oliveira nous propose différentes créations en CSS3 avec de bonnes explications.
Un très bon point de départ et de nombreuses inspirations pour le développement CSS3.

Il faut un navigateur compatible...

http://www.css3create.com/

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