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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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).

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations”

  1. Nouky dit :

    Bravo pour cet article très instructif !

  2. br1o dit :

    Merci Nouky :)

  3. Florent V. dit :

    Bonjour,

    Pour l’ordre des différents blocs de contenus dans le flux HTML, il faut d’abord se demander s’il est problématique. Si on a un petit menu à gauche avec moins d’une dizaine d’items, ça n’est pas la même chose que deux colonnes riches en contenus parfois auxiliaires entourant le contenu principal de la page.

    Pour ce qui est de l’accessibilité, l’idéal est, en plus des liens d’évitement (ou liens d’accès rapide – voir l’article de Jean-Pierre Villain à ce sujet, sur Alsacréations également), d’avoir un ordre du flux HTML équivalent à l’ordre visuel. Donc: colonne de gauche, bloc central, colonne de droite. Cela peut se faire en rajoutant un conteneur pour les deux premiers ou deux derniers blocs:

    <div id="conteneur-gauche-centre"> <div id="gauche">…</div> <div id="centre">…</div> </div> <div id="droite">…</div>

    On pourra alors se contenter, avec le code précédent, de faire flotter à gauche div#conteneur-gauche-centre et div#gauche, et d’utiliser une marge à gauche (et pas à droite) ou un contexte de formatage pour div#centre et div#droite.

    Bien sûr, ici j’ai utilisé des div nommés en fonction de leur positionnement. Pour un vrai site, ça dépendra du contenu. On pourrait imaginer un site en trois colonnes avec un menu à gauche, un article au centre, et des informations annexes relatives à l’article à droite (autres articles sur ce thème, liens vers les sites cités dans l’article, etc.). Ce qui pourrait donner:

    <div id="navigation">…</div> <div id="contenu"> <div id="article">…</div> <div id="autres-infos">…</div> </div>

    On fera alors flotter div#navigation à gauche (marge à gauche sur div#contenu), ainsi que div#article (marge à gauche sur div#autres-infos).

    Ceci dit, le meilleur moyen de positionner des colonnes sans dépendre de leur emplacement dans le flux ou de conteneurs intermédiaires, c’est le positionnement absolu. Bien sûr, il ne faut pas avoir de contenu plus bas censé être repoussé par les colonnes (pied de page…). D’où le recours au positionnement flottant, avec des constructions parfois un peu délicates, et la nécessaire gestion de certains bugs d’IE6.

    Pour le design fluide avec largeur en EM ou EX: 1) pour commencer, on laissera de côté les EX, gérés de manière trop variable d’un navigateur à l’autre (voir notamment cette page: web.covertprestige.info/t… ); 2) pour le reste, je suis peu fan des largeurs dépendant de la taille du texte (donc en EM), et leur préfère largement les largeurs en pourcentages.

    Sur ce dernier point, il me semble que les largeurs en EM sont surtout utiles pour restreindre la largeur des lignes de texte à un nombre satisfaisant de caractères (quelle que soit la taille du texte). L’idéal dans ce cas est de combiner l’utilisation de width et de max-width, avec une valeur en EM et une en pourcentages. Par exemple:

    div#global { width: 80%; max-width: 55em; margin: 0 auto; }

  4. Bruno Bichet dit :

    Florent V. > Whoa! ça c’est du commentaire ;) Mon parti pris concernant l’ordre des éléments html est de désactiver régulièrement les feuilles de style en cours de conception pour m’assurer que le document « ressemble » toujours à quelque chose, et effectivement, l’idéal est de respecter l’ordre visuel « logique » dont tu parle. Quand tu parle du positionnement absolu comme le meilleur moyen de positionner des colonnes sans dépendre de leur emplacement dans le flux, je dirais que les limitations sont tellement énormes (ne rien avoir sous les colonnes) que je ne l’utilise pas. En revanche, j’ai tendance à abuser du positionnement absolu pour placer précisément des petits blocs au sein d’éléments positionnés eux-mêmes avec position: relative. Ca permet presque de travailler comme en PAO. J’avais déjà eu l’occasion de survoler l’article de Jean-Pierre Villain et ton commentaire m’a poussé à l’approfondir : c’est à coup sûr un article essentiel qui doit faire partie de toute toolbox qui se respecte ;) D’ailleurs, la richesse et la longueur de l’article en question me fait penser que c’est fou le nombre de choses qu’il faut maîtriser et prendre en compte pour faire un simple site web… Concernant les em vs ex, je ne connaissais pas ton test, c’est réparé ;) J’en profite pour inviter tout le monde à lire l’article sur la gestion de la taille du texte avec les em qui a lui aussi sa place dans la boite à outils !

  5. Korigan dit :

    Très bon article et très interessant!!!!

    Je venais en simple visiteur, je vais repartir mais revenir ^^

    @Bientôt!

  6. Bruno Bichet dit :

    @Korigan > merci et à bientôt, alors ;)

  7. […] le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site