Rappel

Cela fait déjà des années que certains se sont lancé dans un approche toute différente du design web.

Après les frames et les tableaux, sont venu les div et la "divite aigue" qui va avec. A présent on voit un mélange des genres et la plupart du temps un retour à la simplicité dans l'organisation des pages.

La construction CSS engendrant avec les mise en page par trop expérimentale des problème récurrents d'autant plus que les différents navigateur semble ne jamais vouloir s'accorder sur la manière d'afficher les choses.

Bref monter un site relève parfois du défis si en amont les graphistes sont par trop audacieux. Bien sur il est toujours possible de monter un site tel que la prévu un graphiste mais rapidement lorsque les sites voient leur nombre de page et de mise en page associé augmenter, on en arrive vite à perdre l'uniformité d'un site et à obtenir un assemblage de pages sans liens (du moins si on regarde le code source)

La méthode

La méthode que certains on choisit repose sur le principe de grille. Quoi qu'est-ce ? Ben une grille ... vous savez un truc avec des lignes qui se croise.
En réalité ce n'est pas vraiment une grille. il s'agit plutôt d'un découpage en colonne sur laquelle on vient fixer notre les éléments structurant le site.

Histoire de vous donner un petit exemple je vous invite à consulter le site 960 Grid system qui résume très bien la situation.

Leur approche est simple on découpe la page de 960px en 12 (x60px) ou 16 (x40px) colonnes avec marge de 20px

  • 12*60 + 12*20 = 960px
  • 16x40+16*20 = 960px

Une feuille de style (faite pour fonctionner sous les principaux navigateur) permet ensuite lors du montage de réaliser ensuite un positionnement des éléments sur cette grille. Donc si le designer à bien calé son travail sur la grille, le montage s'en vois considérablement facilité.

Une solution de grilles plus souple : BluePrint

BluePrint est un Framework. c'est à dire qu'il propose non seulement un système de grille mais également un ensemble de feuille de style pour bien démarrer un site.

Personnellement je trouve leur solution trop figé pour la plupart des cas d'utilisation, mais les éléments de base (à savoir reset.css, grid.css et ie.css) sont parfaitement adapté à mes besoins. De plus BluePrint Grid CSS Generator va nous permettre de construire des grilles sur mesure.

  • Choix du nombre de colonne
  • Choix de la largeur des colonnes
  • Choix de la largeur des marges
  • Choix de la largeur du design

Il devient donc relativement facile de composer la grille la plus proche du format de mise en page souhaité.

Mise en œuvre

  1. récupérer le framework BluePrint
  2. En extraire les fichier de base (reset.css, grid.css et ie.css) situé normalement dans le répertoire blueprint/src/ de l'archive
  3. aller sur le générateur de grille et paramétré la grille désiré
    prévoir un découpage sur un nombre suffisant de colonne pour pouvoir gérer par la suite les décalage de contenu et autre petites astuces de mise en page (généralement 24 c'est bien)
  4. récupérer le code généré et l'injecter dans notre ficher grid.css

Voila on dispose à présent des fichier CSS de base. Coté design le générateur de grille nous permet également de récupérer un fichier png que l'on pourra utiliser en motif sous photoshop (ou autre) pour avoir une vision précise du découpage

Pour l'exemple j'ai opté pour un design de 220px de large en 15 colonnes de 10px et 5px de marge

step1.png

A présent le graphiste compose sa maquette en se basant sur cette grille

step2.png

Ce design peut alors être décomposé selon le modèle suivant :

step3.png

on va simplement recomposer le page à partir de boite de largeur déterminé (en nombre de colonne de base) inséré les une dans les autres.

  • cell (entête)
  • cell (center)
    • cell-3 (sidebar)
    • cell-12 (content)
      • cell (content - line 1)
      • cell (content - line 2)
        • cell-5 (1ère boite en bas)
        • cell-4 (2ème boite en bas - qui est découpé en 2 ligne)
          • cell
          • cell
        • cell-3 (3ème boite en bas)

On précise donc les largeur quand c'est nécessaire et si un boite prend toute la largeur disponnible à sont niveau on ne précisera rien.

Au niveau du code HTML l'écriture est la plupart du temps la même d'un système de grille à l'autre (ou très proche) pour blueprint le principe est :

container = bloc de base centré et de largeur égale à la taille du design paramétré (ici ce sera donc 220px) span-N = bloc colonne de largeur égale à N*(colwidth+marge)-marge (ici N*15-5) last = précise qu'il s'agit de la dernière colonne (à cause de la marge qui doit être substitué)

On trouvera également append-N, prepend-N, push-N et pull-N qui permette de réaliser des décalage de contenu.

Les style clear et clearfix seront eux utilisés pour gérer les problèmes juxtaposition vertical lié à l'usage du mode flottant

L'exemple précédent pourra être codé comme ceci :

 <div class="container" id=""main>
   <div id="header">Entete</div>
   <div id="center">Centre
       <div class="span-3" id=""sidebar">sidebar</div>
       <div class="span-12 last" id="content">Content
           ... etc ...
       </div>
   </div>
 </div>

Avantages et inconvénients

Coté inconvénients, il n'y en à pas beaucoup. Certes, le coté sémantique de la css en prend un coup, mais bon le système de grille pose les base du positionnement des bloc ensuite c'est à vous de gérer le nommage css des zone et de customiser la mise en forme. (cf l'exemple précédent ou j'ai nommé mes zone via l'attribut ID. le code en reste plutot lisible)

Pour les avantages, il sont nombreux.

  • Une structure clair pour les graphistes avec au final une bien meilleur vision du travail qui découlera de sa maquette.
  • Une structuration de l'information des pages clair même en l'absence de css. (c'est quand même le but des site tableless)
  • Une facilité de prise en main et la garantie d'un rendu correct sur la plupart des navigateur
  • Un travail à long terme simplifié par un code plus facile à maintenir même au fil des mise à jour.

Conclusion

Pour ma part je suis passé par les différentes étapes cité en introduction (table, iframe, divite etc...). J'était revenu à une intégration HTML mixte, basé sur des div+css et des table pour les positionnements un peu bizarre et que je n'arrivais pas à géré sur tout les navigateurs. Mais même ainsi j'avais encore des soucis (IE et son rendu des cellules de tableau par exemple)

j'ai testé BluePrint récemment pour un mini projet perso (qui restera surement dans un tiroir) et j'ai été séduit. Séduit par la rapidité d'apprentissage et surtout la facilité avec laquelle on peut réarranger le contenu du page en modifiant quelques imbrication de balise. Du coup je l'ai utilisé pour un projet au boulot et tout ce passe sans le moindre soucis.

A présent mon but et de faire intégré cette méthode par les graphistes. A leur niveau cela ne coute pas bien cher et sur la suite de la chaine de dev cela simplifie quand même beaucoup le travail.

Donc le web design en grille ! j'approuve