eclaireur.net » Technique

Développer un site internet avec du responsive design

David — Tue, 24 Jan 2012 08:53:48 +0000

Qu'est-ce qui ce cache derrière ce nouveau mot à la mode, comment créer un site web qui propose ce genre de fonctionnalité ? Ce tutoriel explique les concepts et leurs limites, et vous guidera à travers les étapes de base pour créer un site qui s'adapte aux différentes tailles d'écrans.

Le responsive design est une manière de concevoir les sites internet afin qu'ils s'adaptent à tous les types d'écran. En effet au vue du nombre croissant d'appareils différents (tablettes, smartphone, ... ) et leurs écrans plus petits que les écrans d'ordinateurs, il devenait indispensable de palier à ce problème. Dans ces pages réactives les éléments (textes, graphiques...) deviennent réactifs et peuvent changer de taille en fonction de la taille d'écran en utilisant les feuilles de styles CSS (CSS3) et leurs media queries (on y reviendra dans l'article).

Voici quelques unes des différentes tailles d'écrans que nous sommes amenés à rencontrer:

240 x 320 (petit téléphone)
320 x 480 (iPhone)
480 x 640 (petite tablette)
768 x 1024 (iPad - Portrait)
1024 x 768 (iPad - Paysage)

Exemple de site avec du responsive design

voir une galerie de site développé avec du responsive design, un autre showcase

Pour ceux qui veulent en savoir plus sur les perspectives à envisager je vous invite à lire l'article de Fred Cavazza sur le sujet : Le responsive design à l’assaut des terminaux mobiles. Nous allons nous intéresser à son intégration.

Pré-requis

On oublie le code javascript pour une fois, en revanche il est nécessaire de le tester sur les nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11...). Les vieux navigateurs (ie6, ie7, ie8, safari 3.2...) ne supportent pas les CSS queries, je vous laisse regarder la liste des navigateurs à proscrire.

Intégration

Media Query en HTML

Media Query avec @import

@import url(example.css) screen and (max-width: 1024px)

Media Query dans une feuille de styles

@media screen and (max-width: 1024px) { /* les différents styles... */ }

Certains sites vont jusqu'à 5 voir 6 tailles d'écran différentes (exemple smashingmagazine.com) mais généralement il est préférable de tabler sur 3 séries à l'aide des medias queries. Donc voici comment traiter les autres tailles d'écran :

@media only screen and (min-device-width: 768px) and (orientation: portrait), screen and (max-width: 994px) { /* 1 - pour les tablettes en mode portrait ou les ordinateurs avec une résolution horizontale de moins de 994px */ }

@media screen and (max-width: 555px), screen and (max-device-width: 480px) { /* 2 - pour les ordinateurs avec une résolution horizontale de moins de 555px et la plupart des smartphones en mode paysage (480px de large) */ }

@media screen and (max-width: 320px) { /* 3 - tous les autres appareils avec moins de 320px de large (principalement les smartphones en mode portrait */ }

Important : le viewport meta tag

En plus d'ajouter des medias queries, il est nécessaire d'utiliser une balise meta viewport pour définir l'échelle initiale du site et surtout de désactiver le zoom sur les appareils mobiles et les tablettes. On l'écrit ainsi :

Retrouvez tous ces différentes CSS queries dans le fichier de Démonstration

Une des bonnes pratiques pour réussir à mettre en œuvre des sites avec du responsive design consiste à déterminer les résolutions auxquelles votre site doit "répondre". En effet vous pourrez anticipez en amont toute les probabilités pour les différentes résolutions d'appareils (1024px et 768px pour l'iPad, 960px et 640px pour iPhone 4 et 480px 320px et pour les iPhone 3G etc).

Conclusion

Le responsive design répond avec brio aux nouvelles problématiques d’élasticité des sites internet. On peut même dire qu'on attendait une solution de ce genre, mais il faudra encore être patient avant que ces techniques ne se démocratisent. Vous pouvez d'ores et déjà tester vos réalisations avec un outil en ligne http://mattkersley.com/responsive/.

Un des cotés négatif majeur vient du contenu mobile car celui-ci n'est pas allégé par rapport à celui de la "version ordinateur", on peut effectivement "cacher" des parties mais pour le mobile cela peut entraîner des surcharges inutiles lors du chargement d'éléments qui ne sont pas utilisés (fichiers JS, fichiers CSS, images). Donc pour certains projets il vaudra mieux faire un site mobile dédié pour contrôler tous les éléments indépendamment. Le responsive design donne la possibilité suivant les projets d'offrir un site élastique, encore faut-il l'avoir prévu en amont de la réalisation.

Pour aller plus loin

Les spécifications de la W3C pour les CSS3 et les Media Queries
Une grosse quantité de ressources et de techniques compilées par Smashing Magazine

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Comment utiliser Facebook à son potentiel maximum ?

David — Tue, 18 Oct 2011 16:56:26 +0000

Le dernier BlogCamp de septembre proposé un tour d’horizon sur l’univers Facebook. Durant son intervention Axel Aigret (HighLight) revient sur les bases pour bien animer une page fan, développer une présence sur Facebook et générer du business.

http://www.vimeo.com/29922861

La semaine prochaine aura lieu le prochain BlogCamp dédié à l’unvivers podcast avec comme invité Cédric Bonnet, podcasteur et co-fondateur de nowatch.net. Pour ne pas le rater inscrivez-vous sur blogcamp.fr.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Bonnes pratiques pour accélérer votre site web

David — Fri, 22 Jul 2011 08:45:15 +0000

Le temps de chargement d’un site est un aspect important à ne pas laisser de coté lors du développement. 80% du temps de réponse du navigateur est passé sur le front-end, il se doit d’être optimisé. En effet un visiteur qui doit attendre sagement 2 minutes que le site se charge, je n’en connais pas (même les retraités passent leur chemin), de plus Google a annoncé officiellement qu’il tenait compte dans son algorithme de positionnement de la rapidité des sites. Cet article vous permettra de gagner de précieuses secondes au chargement ou bien une meilleure note au test webpagetest.org. Voici comment améliorer significativement le temps de chargement des pages de votre site en quelques points.

Optimiser la page et les médias

Il semble évident qu’un page HTML plus légère s’affichera plus vite qu’une autre plus lourde. Mais il faut tenir compte également des médias (images, flash…) surtout s’ils sont trop nombreux et non optimisés. Ils augmenteront énormément ce temps de chargement. Il n’est rare de voir des sites qui utilisent un image de taille fond d’écran pour l’afficher en vignette ! Pour cela rien ne vaut l’outil en ligne smushit qui donne de très bons résultats et d’afficher les médias dans la taille adaptée. il faut se rappeler que 40 à 60% des visiteurs de votre site arrivent avec un cache navigateur vide, il devront tout charger.

Réduire les requêtes HTTP

Après avoir réduit le poids reste la quantité, moins vous avez d’éléments, plus vite le navigateur va les charger. Avec le couple d’extension Firebug et Page Speed vous pouvez vous en rendre compte assez facilement. Le but est de minimiser le nombre d’élément à charger afin de réduire les requêtes HTTP (i.e les demandes faites du navigateur client au serveur). Il existe pour cela beaucoup de techniques :

Les Sprites CSS sont la excellente méthode pour réduire le nombre d’images. Combinez vos images de fond en une seule image et utiliser les propriétés CSS background-image et background-position pour afficher la portion d’image désirée.
Combiner tous les fichiers CSS en un seul fichier
Combiner tous les fichiers JS en un seul fichier

Afin de ne pas avoir à modifier tous vos fichiers voici des ressources qui peuvent être utiles :

minify-js : Script PHP pour optimiser et combiner vos fichiers JS
minify-css : Script PHP pour optimiser et combiner vos fichiers CSS
WP-Minify : Extensions WordPress qui combine vos fichiers CSS, JS et optimise le code HTML.

Accélérer l’affichage du site à l’aide de la mise en cache

La mise en cache consiste à conserver une copie locale ou distante de certains éléments déjà affichés afin d’éviter de les télécharger ou les reconstituer. Le cache peut se situer sur le serveur (cache serveur) ou dans le navigateur (cache client).

Cache navigateur

Le navigateur peut garder des fichiers afin d’éviter de les charger à chaque visite du site. Il convient pour cela de modifier les entêtes suivant ces 2 cas de figure :
Pour les composants statiques (images, flash…) : à l’aide de l’entête expire repousser la date de chargement d’un ressource. Par exemple cette ligne permettra de laisser votre ressource dans le cache navigateur pendant quelques années :

Expires: Thu, 15 Apr 2015 20:00:00 GMT

Pour les composants dynamiques : l’utilisation de l’entête Cache-Control pour définir la date de mise à jour du composant au navigateur

Cache-Control: max-age=3600, must-revalidate

Vous pouvez également ajouter les lignes suivantes à votre fichier .htaccess (exemple de Léo) afin de définir un temps d’actualisation propre à chaque type de fichier :

ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType audio/mpeg "access plus 1 year"

Cache serveur

Vous pouvez compresser le contenu d’une page ou d’un fichier à l’aide de la compression GZip ou Deflate. En effet la compression réduit le temps de réponse en réduisant la taille de la réponse HTTP. GZip est le module de compression des versions d’Apache 1.3 et les suivantes (module mod_gzip) tandis que les versions 2 d’Apache et les suivantes se basent sur Deflate (module mod_deflate).

Pour activer la compression vous devez configurez votre serveur sous Apache en fonction de sa version. Voici un exemple pour un serveur avec une d’Apache 2.0 qui compresse les fichiers HTML, PHP, TXT, XML, JS et CSS :



SetOutputFilter DEFLATE

Avec les points listés ci-dessus vous pourrez significativement améliorer la rapidité de votre site. Si vous voulez pousser encore plus loin voici des ressources qui vous permettront d’en connaître un rayon sur l’optimisation !

Plus d’informations

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Ajouter le bouton Google +1 à votre site

David — Tue, 07 Jun 2011 08:00:19 +0000

Google a récemment lancé son très attendu bouton +1. Il permet avant tout d’ajouter un aspect social aux résultats de recherche de Google. Par le passé le célèbre moteur a tenté de faire dans le social mais sans réel succès, mais cette fois-ci, je pense que la mayonnaise prendra.

Tour d’horizon

Il s’agit d’un concept assez similaire à celui du bouton « J’aime » de Facebook, sauf qu’il est mixé avec les résultats de recherche. Pour Google il s’agit plus d’une recommandation, d’une approbation afin que vos amis ainsi que les autres personnes cherchant des réponses précises puissent trouver les meilleurs résultats.

Ajouter ce bouton à votre site WordPress ou autre

Vous pouvez configurer le lien directement depuis le site de Google prévu à cet effet : http://www.google.com/webmasters/+1/button/. Un fois le code généré il ressemblera à celui-ci pour la taille standard :

Pour un site classique il faudra respecter les recommandations de Google : placer l’insertion javascript dans l’entête HTML (avant la balise) et l’autre bout de code à l’endroit exact où vous voulez insérer le bouton +1.

Pour wordpress vous pouvez utiliser le plugin wp-plus-one si vous voulez l’utiliser seul. Dans le cas où vous voulez le faire figurer à coté de Twitter et Facebook utilisez plutôt sharebar dans lequel il faudra insérer le code précédent dans les réglages de l’extension.

Bonne intégration +1

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

IE6 bientôt mort et enterré ! Microsoft pousse enfin !

David — Mon, 07 Mar 2011 17:37:17 +0000

Le rêve de tout travailleur du web va peut être se concrétiser bientôt. Quel intégrateur ou développeur n’a pas passé des heures à faire des contorsions dans son code pour un résultat plus que limité, seulement pour satisfaire le navigateur historique de Microsoft, IE6 datant de 2001. Depuis 10 ans beaucoup de navigateurs se sont succédés, et tous, offrent plus de confort, de possibilités. Il est temps que le web tourne enfin la page IE6 !

IE6 un navigateur obsolète qui persévère

Au moment où j’écris cette page, IE6 représente encore près de 12% des navigateurs alors qu’IE9 vient de sortir. Pourquoi me diriez-vous les utilisateurs de PC avec IE6 ne s’équipent pas d’un navigateur plus récent ? Plusieurs réponses possibles :

Les utilisateurs immobilistes de XP : les premiers acheteurs de XP voient le web depuis la fenêtre de leur navigateur préféré : IE6 ! En effet bon nombre d’utilisateurs de windows XP n’ont jamais fait de mise à jour de leur équipement (une des raisons aussi de la faible résistance de leur système face aux virus avec le dernier en date Jnanabot) ;
Applications métiers dépendantes : beaucoup de PME et grosses entreprises utilisent des applications web propriétaires qui fonctionnent seulement sous IE6 et manquent de volonté ou de budget pour refondre leurs applications ;
Les administrateurs réseaux attentistes : pour les entreprises qui utilisent encore IE6, Microsoft propose « la migration des ateliers » conçu pour aider à la transition vers un navigateur plus moderne afin de faciliter le travail des administrateurs. Mais vient se poser un autre problème qui rejoint le premier point, la majorité des salariés ne se plaignent pas d’IE6 au contraire cela leur convient ! Ils sont habitués à l’utiliser et quand un site ne s’affiche pas correctement c’est évidemment la faute du site !

La lumière au bout du tunnel

On l’a souvent répété IE6 est un calvaire pour les développeurs soucieux de respecter les standards. Le Web a beaucoup changé au cours de ces 10 dernières années. En 2009 plusieurs sites web norvégiens ont lancé une campagne de sensibilisation en direction des utilisateurs d’IE6, les encourageant à mettre à jour leur navigateur obsolète. Et maintenant c’est également autour de Microsoft de faire bouger les choses ; en effet la firme de Redmond préconise l’abandon d’Internet Explorer 6, en lançant un site Web qui explique en détail le vieillissement, les problèmes de sécurité et de la lenteur inhérente du navigateur. Il est clair qu’après avoir dominé le marché des navigateurs depuis des années, Microsoft fait face à une forte concurrence de la part de Mozilla Firefox et Google Chrome et se doit de faire bouger les choses. Donc en quelque sorte Microsoft balaye devant sa porte, en lançant le site theie6countdown.com, littéralement « Le compte à rebours Internet Explorer 6, ». Ce site utilise des données relatives à l’implantation d’IE6 partout dans le monde. Malgré sa part de marché minuscule dans des pays comme les États-Unis (2,9%) et le Canada (3,3%), le navigateur détient encore une part importante du marché dans une grande partie de l’Asie, y compris la Chine (34,5%), la Corée du Sud (24,8%) et Japon (10,3%).

Plus d’informations

Le jour où le Web refusa le navigateur Internet Explorer 6
IE6 No More : Les sites qui veulent la mort du navigateur
the ie6 countdown

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Rapport sur les CMS sur l’année 2010

David — Wed, 12 Jan 2011 09:36:49 +0000

La version 2010 du rapport Idealware sur le CMS est sortie il y a quelques jours. Ce document permet de comparer sur plusieurs critères les CMS les plus utilisés dans le monde et elle confirme notamment la monté du CMS Plone.

Joomla, Drupla, WordPress… et Plone

La version 2010 du rapport Idealware confirme la montée en puissance de Plone : facilité d’utilisation, optimisation pour le référencement naturel, excellente gestion des droits utilisateurs et des Workflows, possibilité d’extension et sécurité. Ce CMS obtient dans la plupart des tests d’excellentes notes (surtout sur la rapidité et la sécurité). Après les seules faiblesses de Plone résident principalement dans l’hébergement et l’installation du système, qui nécessitent paraît-il un savoir-faire de spécialiste. Je pense que je vais le tester d’ici peu pour me faire une idée. Ceux qui l’ont déjà utilisé peuvent donner leur avis sur ce CMS.

Synthèse en images des différences entre CMS

Plus d’informations

Pour consulter le rapport en intégralité (en anglais)
En savoir plus sur Plone
Appel à témoin du JDN pour savoir quel CMS vous utilisez le plus et ceux que vous recommandez.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Les outils pour créer des applications mobiles CSS/JavaScript

David — Tue, 07 Dec 2010 17:15:42 +0000

A ce jour il existe au moins cinq principaux outils pour créer des applications mobiles CSS/JavaScript sur le marché. Quand je dis applications mobiles en CSS/JavaScript, il s’agit de web applications, à ne pas confondre avec les applications téléchargeables sur l’AppStore pour l’iPhone et ou l’Android Market pour Android. Je ne rentrerai pas dans le débat applications ou web applications, en sachant que je parle ci-dessous que d’applications web.

Les principaux outils

Voici la liste, selon moi des outils qui valent le détour à ce jour pour développer de belles interfaces mobiles :

Personnellement j’ai travaillé avec IIU et jQTouch. J’avoue que Sencha et JQuery Mobile sont particulièrement bien réalisés également. Donc on a que l’embarras du choix pour développer des interfaces soignées sur mobiles.

Les plateformes Appcelerator et Ansca Corona

Appcelerator et Ansca Corona sont des plateformes pour développer des applications mobiles (iPhone sous Mac et Android). Ce genre de plateforme permet de développer avec un seul langage pour plusieurs systèmes d’exploitation mobile ou bureau. Cela économise aux développeurs d’apprendre plusieurs langages de programmation, en revanche il doit s’accoutumer à l’interface de la plateforme de développement.

Je pense qu’il vaut mieux développer avec le langage HTML, CSS et JavaScript dans ses vues et faire en sorte que son application soit bien fonctionnelle sous tous les OS. Aujourd’hui les améliorations d’interface sont assez complètes pour avoir de réelles expériences utilisateurs, notamment avec les possibilités liées au html5 (voir le diaporama des fonctionnalités). Car ne l’oublions la plupart des smartphones de dernière générations peuvent lire le HTML5. Car les dernières versions des navigateurs Internet mobiles ont déjà pris en compte une grosse partie des recommandations du HTML5.

Si vous aussi vous avez déjà développer des web applications pour mobile, faites part de vos expériences.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Des extensions Firefox pour améliorer votre productivite sur Gmail

David — Wed, 17 Mar 2010 22:38:08 +0000

Voici une sélection d’extensions Firefox 3 vous permettant d’améliorer votre expérience utilisateur sur Gmail. J’ai utilisé toutes ces extensions mais à vrai dire aujourd’hui je n’utilise plus que Minimalist Gmail car en effet installer trop d’extensions peut nuire à la rapidité du navigateur et à l’utilisation de Gmail. La plupart de ses extensions utilisent des scripts Greasemonkey, ce qui permet de changer l’affichage par défaut de gmail.

Minimalisme de Gmail

Matt Constantine a crée une extension qui enlève tout le bruit de l’interface en laissant apparaitre un bouton dans le coin en haut à droite sur lequel vous pouvez voir toutes les options à cacher. Je trouve que cette extension apporte énormément en terme de lisibilité et de confort de navigation, il est vrai que la pub en moins ainsi que certaines informations du pied de page ne sont vraiment pas nécessaires. Après c’est sûr il va falloir apprendre quelques raccourcis clavier pour bénéficier d’un plus grand confort. Voici ci-dessous une copie d’écran avant et après l’activation de l’extension.

Autres extensions Firefox / Gmail utiles et efficaces

Gmail Notifier : Une extension simple qui permet de voir le nombre d’email non lus de la boite de réception et peut même fonctionner sur plusieurs comptes gmail.
Gmail Manager : Cette extension est plus complète que la précédente, elle offre la possibilité de visualiser le nombre d’e-mails non lus dans la boîte de réception ainsi que dans les labels (à l’aide d’une alerte visuelle et audio), le nombre de spam, les brouillons, l’espace disque utilisé…
Better Gmail 2 – Une extension Firefox qui combine les meilleurs scripts Greasemonkey pour Gmail et facilite ainsi leur installation. Vous pouvez choisir les fonctionnalités que vous désirez utiliser par une simple interface “checkbox”. Ce que j’apprécie dans cette extension c’est le fait de visualiser les pièces-jointes sous forme d’icône fichier (image, document, zip…).
Integrated Gmail : ou comment retrouver en un seul endroit Gmail, Google Calendar et Google Reader. Une extension pour les faignants ou ceux qui veulent toujours tout avoir sur le même écran. Je rappelle que via Gmail Labs il est possible d’afficher ses documents ainsi que les événements du calendrier à venir.
Voici d’autres extensions qui sont efficaces : WiseStamp Email Signature Gmail : celle-ci ajoute vos signatures de courriels dans Gmail, Yahoo! ou encore Hotmail. Comme d’ailleurs Blank Canvas Gmail Signatures qui insère la signature en fonction de l’adresse e-mail d’envoi.

Et pour les autres ?

Et pour ceux qui n’aiment pas les extensions ou qui n’ont pas Firefox, n’oubliez pas la fameuse touche ? qui vous permet de lister tous les raccourcis clavier (il faut auparavant activer les raccourcis dans paramétrages). Vous pouvez également découvrir de nouvelles façons d’utiliser Gmail à l’aide des 5 fonctions cachées de gmail. Si vous aussi vous ne pouvez pas vous passer d’une extension Gmail, partagez-la.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Hype : un framework Flash pour faciliter le développement en AS3

David — Mon, 02 Nov 2009 16:08:03 +0000

Le talentueux artiste Joshua Davis qui a énormément contribué à ma passion pour la technologie Flash revient avec un nouveau Framework pour programmer plus facilement en actionScript 3.

A l’instar de jQuery, avec Hype vous pouvez coder rapidement et simplement en AS3. Joshua Davis prend comme exemple le simple script d’un clip suivant la souris. En AS2, ce script fait 5 lignes, 7 en AS3 et seulement 3 avec HYPE.

Les Flash designers qui étaient habitués à travailler en ActionScript2 ont eut l’impression de ne plus savoir coder lors du passage de Flash en ActionScript3. Il est vrai que le langage AS3 est plus robuste en revanche il n’accepte plus certaines approximations du langage AS2. En tout cas Hype ravira les designers qui hésitaient encore à passer en AS3.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Les framework CSS pour développer des sites plus rapidement

David — Tue, 22 Sep 2009 07:26:49 +0000

Après cette longue absence, je reviens avec une méthodologie que j’intègre peu à peu dans les conceptions web : les frameworks CSS et la notion de Grid. Il existe des frameworks pour développer plus rapidement en Ajax, PHP, Javascript ou en HTML. Mais depuis 6 mois les frameworks CSS ont connu une nouvelle expension. Pourquoi ces outils sont-ils tendances? Peut-être parce qu’ils simplifient la création des pages en proposant une nouvelle façon de travailler. Petit tour d’horizon.

Piqure de rappel

Les feuilles de style CSS (Cascading Style Sheets) permettent de travailler sur le design des pages. Elles assurent une meilleure accessibilité, évolutivité et optimisent également le chargement des pages. Les frameworks CSS sont une collection de feuilles de style qui nous permettent de concevoir rapidement une mise en page aussi bien pour un template simple (header, 2 colonnes, footer) que pour des modèles de page complexes (header, multi-colonnes, multi-bloc, elastique, footer).

J’ai découvert il y a quelques mois le système de Grilles (Grid System) qui présente de nombreux avantages :

Normalisation des placements : tous les éléments sont placés selon des tailles de bloc et non des pixels
Uniformité : les grilles fournissent une cohésion dans le placement des différents éléments
Maintenance : elles réduisent le temps de développement lors de la redéfinition de certains styles visuels ou de repositionnement d’éléments
Efficacité : elles sont cross-browser; elles sont testées et sont compatibles sur la plupart des navigateurs actuels et anciens

Etat des lieux des framework CSS

Les frameworks qui sortent du lot sont :

A ce jour, le plus répandu est surement Blueprint car il a une grosse communauté qui pousse le projet en l’utilisant et en créant des modules. Après je mettrai 960 Grid System et YUI Grid CSS au deuxième plan. Les deux frameworks sont différents mais possèdent une bonne aura et beaucoup de développeurs les ont adoptés. Enfin SenCSs est un framework CSS qui ne gère pas la mise en page mais les styles, à découvrir comme tant d’autres. Il existe en effet de plus en plus de framework CSS, en voici une liste de 45 avec quelques générateurs.

Une fois le pas franchi…

Dès que vous aurez choisi un système de grid, c’est comme l’adopter. Le code HTML et les balises CSS ne changent pas fondamentalement, ils évoluent. En revanche les frameworks CSS sont très différents les uns par rapport aux autres. Il vous faudra quelques heures ou quelques jours pour être capable de bien les cerner. Et vous avez-vous franchi le pas avec les frameworks et les Grids ?

Pour aller plus loin

Les frameworks CSS : Cet article d’Emmanuel Georjon date de 2008 mais explique très clairement le concept de Grid.
The Best Fluid CSS Grid : Un article sur le deisgn fluide à l’aide de Grid
Which CSS grid framework ? : un article qui compare les différentes solutions pour créer des sites à base de framework
Yahoo Builder : Un générateur qui permet de créer en 2 coups de cuillère à pot un modèle de page basé sur YahooUI (YUI)
BluePrint CSS Builder : Une version similaire de générateur pour BluePrint
Designshack Grid : Une section de cette galerie renferme de jolis sites réalisés à base de grid

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article