Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations

Florent Verschelde du collectif Alsacréations nous propose deux méthodes pour réaliser un design fluide avec trois colonnes en utilisant le positionnement flottant. Je me suis surtout intéressé à la première méthode, la deuxième faisant appel à la notion de contexte de formatage dont j’ai encore du mal à saisir toutes les subtilités.

Pour avoir un design fluide (ou liquide), Florent dote les deux colonnes latérales d’une largeur, et donne à la zone centrale des marges droites et gauches au moins égales à la valeur des colonnes. Reste à spécifier float: left et float: right pour que ces colonnes flottent de part et d’autre du contenu. On obtient ainsi une mise en pages en 3 colonnes qui prend toute la largeur de l’écran.

Soit la structure HTML :

<div id="sideleft"></div>
<div id="sideright"></div>
<div id="content"></div>

… associée aux règles CSS :

#sideleft {
     width: 280px;
     float: left;
}
#sideright {
     width: 180px;
     float: right;
}
#content {
     margin-left: 280px;
     margin-right: 180px;
}

Pour obtenir un espacement entre les colonnes et le contenu, on peut ajouter quelques pixels à margin-left et margin-right de div#content.

Remarquez que l’auteur du tutoriel a très justement nommé ces colonnes colonne 1 et colonne 2 au lieu de sideleft et sideright, puisqu’en permutant les propriétés float des colonnes latérales il est possible de mettre la colonne gauche à droite et vice-versa. Prenez le temps quand même de modifier également les marges droites et gauches de content si les width des colonnes sont différentes.

Dans ce billet je considère que chaque colonne reste à sa place. (N’y voyez aucune allusion au positionnement flottant de certaines personnalités politiques qui passent tantôt à droite du contenu, tantôt à gauche…). On obtient donc une structure solide pour gérer une maquette en 3 colonnes avec une zone centrale dont la largeur s’adapte à la taille de l’écran. Ce qui est un pas supplémentaire en direction de l’utilisateur en lui permettant de lire selon ses préférences et non les vôtres.

It’s a bug?..

L’article de Florent a provoqué moult commentaires dont je vous recommande la lecture. Une intervention a retenu mon attention : cette structure place les deux colonnes latérales au début du code HTML, ou en tout cas avant le contenu principal. Ce qui peut poser des problèmes d’accessibilité pour les humains et des difficultés pour référencer correctement le contenu des pages web :

• Il est généralement recommandé de mettre le contenu en avant pour que Google, Yahoo et MSN alimentent leur index avec du contenu renouvelé : les barres latérales contiennent le plus souvent des éléments qui ne changent pas souvent (menu, éléments de navigation, présentation du site ou de l’auteur, etc.). Encore que la deuxième colonne latérale sert souvent à présenter les derniers articles, les derniers commentaires ou les dernies liens entrants. Rien n’empêche de placer cette colonne en premier dans le code.
• Etant plus loin dans le code, le contenu est moins accessible dans tout les sens du terme pour les humains porteurs de handicaps ou surfant depuis des périphériques mobiles.

… or a feature

A la réflexion, ces deux points, s’ils ne sont pas faux, ne sont pas à prendre au pied de la lettre non plus :

• Les moteurs de recherche scannent toute la page et pas seulement le début, et les descriptions qui apparaissent dans les résultats sont de plus en plus contextuelles : les moteurs vont chercher des phrases un peu partout dans la page pour former la description. Si le contenu est mis à jour régulièrement, Google le trouvera même s’il se trouve dans la cave !
• En ce qui concerne l’accessibilité pour les humains, je pense que les liens d’évitement de la forme « Aller au contenu » (appellés très justement d’ailleurs skip-link dans le thème Sandbox) sont fait pour passer au-dessus d’une navigation qu’il parait logique de placer avant le contenu !

Et oui, à force de penser SEO ou SEM finirait-on par oublier l’essentiel ? Le texte nu (en l’absence de prise en charge des feuilles de style) en début de page sans le contexte de la navigation et la présentation du site ou de l’auteur, peut être perturbante lorsqu’on arrive sur un site. N’est-il pas judicieux, quand on se préoccupe des utilisateurs de JAWS, de faire aussi attention à tous les utilisateurs occasionnels (de plus en plus nombreux) qui préfèrent trouver les points de repères en haut de la page plutôt qu’en bas ?..

Le chêne et le roseau

Ces deux objections étant écartées, ce genre de structure me convient parfaitement. D’autant plus qu’en ajoutant une div id= »wrapper » sous le body avec une width en valeur relative comme em ou ex, on bénéficie d’une structure ni fixe ni fluide, mais élastique. La page web peut ainsi supporter un facteur d’agrandissement presque sans limite. A condition toutefois que toutes les valeurs width, height et font-size, etc. soient, elles aussi, en valeur relative.

/* layout global */
#wrapper {
     width: 80em;
     margin: 0 auto;
}
    #primary {
        float: left;
        width: 16em;
    }
    #secondary {
        float: right;
        width: 16em;
    }
    #content {
        margin-left: 16em;
        margin-right: 16em;
    }
    #footer {
        clear: both;
    }

On pourrait objecter que le webdesigner a souvent besoin d’un container de largeur fixe pour mettre des images en background. En tâtonnant un peu, il est très rapide de déterminer les valeurs em ou ex correspondant à une valeur précisée en pixel par un logiciel graphique. Une largeur peut être « déterminée » sans pour autant être « fixe ».

Ainsi, pour peu que l’habillage graphique soit conçu sur le principe de la répétition en x ou y, ou sur l’utilisation des portes coulissantes, votre page aura la souplesse du roseau plutôt que la rigidité du chêne. Au point qu’il suffira de modifier l’unité de la largeur du wrapper pour passer d’un design fixe (pixels) à une maquette fluide (pourcentage) ou une mise en pages élastique (em, ex).