Innovablog, Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

Ce billet sera donc consacré à la mise en place d’un gabarit (layout) full CSS. La question du gabarit full CSS, par opposition à la technique de mise en page par tableaux tend à se répendre comme un standard. Cependant, sa mise en oeuvre peut très rapidement devenir fastidieuse. Ce tutoriel vous permettra de comprendre rapidement le fonctionnement, mais également de vous en inspirer et même de l’utiliser comme base de votre futur site / blog personnel.

Mise en page full CSS : pourquoi abandonner les tableaux ?

Historiquement la mise en page des pages web (à l’instar des auters documents bureautiques) utilisaient les tableaux (l’élément table) pour réaliser leur mise en page. Cette technique peut toujours sembler fonctionner très bien, d’un point de vue visuel, et dans certaines conditions bien précises. Or on peut faire plusieurs reproches à cette technique notammennt :

• Relatifs à la lourdeur du code produit : une mise en page élaborée à base de tableaux rend le code fouilli, volumineux, et donc moins aisé à maintenir.
• Un tableau est avant tout un outil de présentation de données et pas de mise en forme. D’un point de vue sémantique, une balise offre un description du contenu qu’elle contient. Or si les tableaux possèdent des descripteurs (d’en-tête, decontenu notamment), on est vite limité. L’accessibilité en sera donc nettement compromise, notamment pour les personnes utilisant des lecteurs d’écran.

Le CSS c’est bien, pour :

• Une mise en page dite full-CSS permettra donc d’être sémantiquement plus correcte.
• De tenter de respecter les standards du web et donc directement de renforcer l’accessibilité de vos pages.
• D’alléger le poids de vos pages.

Etape 1 : détails du gabarit

Passons maintenant à la pratique. Je vous propose un gabarit relativement standard, qui peut correspondre aux besoins d’un blog par exemple, avec :

• Côté dimensions, j’ai pris le choix de fixer sa largeur à 1000 pixels,
• avec un positionnement centré.

Il répond ainsi à des configurations d’écrans minimales de 1024×768 pixels (qui tend à devenir la norme). Notons qu’il serait intéressant (note pour plus tard) de vous présenter une version étirable (variable) de gabarit (fréquemment appelée “en pourcent”).

En ce qui concerne la présentation et la structuration de la page, voici mon postulat, qui là encore se veut assez générique, permettant à un maximum d’utilisateurs de s’y retrouver (vous retrouverez au passage le gabarit d’Innovablog) :

• Un contenu principal de la page (Content),
• Une en-tête (Header),
• Une barre latérale (Sidebar) située sur la droite de l’écran,
• Et enfin un pied de page (Footer).

Etape 2 : le squelette (ou gabarit, ou layout,…)

La première étape, la plus importante, va consister à créer le squelette de notre future page. Pour celà, seules quelques lignes de code suffiront à mettre en place une structure :

<div class="conteneur">
   <div class="header"></div>

    <div class="contentmain">
        <div class="sidebar"></div>

        <div class="content"></div>

    </div>

    <div class="footer"></div>

</div>

8 lignes de code permettent donc de bâtir une structure cohérente, prêt à afficher et présenter de l’information.

Pour être complet, affichons le code CSS correspondant, qui au passage, lui aussi tient en quelques lignes :

.conteneur {

position:relative;

width:1000px;

min-height:700px;

margin:0 auto;

}

.header {

height:175px;

background-color:#EC008C;

}

.contentmain {

background-color:#FFBA0E;font-size:16px;

min-height:400px;

}

.content {

margin-right:290px;

min-height:440px;padding:10px;

background-color:#FEFDEF;

}

.sidebar {

position:absolute;

right:0;width:260px;

padding:15px;

}

.footer {

min-height:50px;

background-color:#464646;

padding:20px;

}

Voire ici l’exemple N°1.

Etape 3 : du contenu

Une fois notre squelette ou gabarit de réalisé, je vous propose de lui faire passer le premier test : peut-il être le réceptacle de l’information et des données que l’on souhaite afficher ? Je vais donc rajouter à cette étape du contenu, à savoir par exemple :

• Header : Un emplacement pour un logo, un titre de blog, un bandeau publicitaire ainsi qu’un menu.
• Contenu : du texte et un titre correspondant à un billet.
• Barre latérale : un emplacement publicitaire ainsi des l’espace pour plusieurs widgets.
• Footer : une blogroll ainsi des les n derniers billets affichés.

Voire ici l’exemple N°2.

Etape 4 : du CSS, encore !

Je ne peux décidemment pas laisser la page dans cet état, suppossons que l’on y passe une petite couche CSS, cette fois-ci de pure mise en forme, sans retoucher évidemment la structure, la page pourrait alors ressembler à quelque chose comme celà :

Voire le résultat final ici.

Sympatique, non ?