Impressum

Quelques aspects du design ergonomique des sites web : ICY, JELLY et FLUID

La Glace, la gelée et le Liquide selon Glenn Davis
jeudi 9 décembre 2004
par  François Daniel Giezendanner
popularité : 1%

Le design des sites web peut être classé en trois grandes catégories :

  • Le design ICY : c’est un design rigide, le site a une largeur fixe (en général 760px) quelle que soit la définition de l’écran et est calé à gauche ou à droite du navigateur, généralement à gauche. On peut le définir comme un design « Fixe-Latéral ».
  • Le design JELLY : c’est une déclinaison du précédent, le site a une largeur fixe et se place toujours au milieu du navigateur, conservant ainsi, même dans les plus hautes définitions d’écran un meilleur équilibre visuel. On peut le définir comme un design « Fixe-Centré ».
  • Le design FLUID : le site a une taille exprimée en pourcentage et s’adapte automatiquement à la largeur disponible du navigateur (largeur proportionnelle). Pour un site comportant plusieurs colonnes (c’est généralement le cas), certaine colonnes peuvent avoir des largeurs fixes (pixels), d’autres proportionnelles (%), mais il faut au minimum une colonne de largeur proportionnelle (%). On peut définir le design FLUID comme un design « Proportionnel-Centré ».

Retour aux sources : Glenn Davis propose un festin « Glace, Gelée et Liquide »

L’expression design LIQUID est également utilisée, mais avec une certaine confusion, voir à ce sujet les articles de Raphael Goetter et de Clément Hardoüin [1].

Dans son article « Liquid Web Design : Build it right and it will work no matter what the container » du 29 aout 1999,
http://www.digital-web.com/articles/liquid_web_design/,
Nick Finck utilise également l’expression design LIQUID comme équivalent à design FLUID. Il cite Glenn Davis : « C’est là que l’idée de Davis de design liquide entre en jeu. Pendant ses années de développement web, il est arrivé à la conclusion qu’il y a trois types d’interfaces sur le web aujourd’hui : ceux qui sont le Liquide , ceux qui sont la Gelé et ceux qui sont la Glace » . Ainsi, selon Glenn Davis nous avons l’équivalence :

  • design ICY = design GLACE (un design « Fixe-Latéral »).
  • design JELLY = design GELEE (un design « Fixe-Centré »).
  • design FLUID = design LIQUIDE (un design « Proportionnel-Centré »).

design ICY, JELLY ou FLUID ? Faites votre choix !

Cette terminologie étant maintenant clairement établie, penchons nous sur un site GIF - 2.3 ko web que vous souhaiteriez créer. Le choix de son design est la première chose que vous devez décider, et je suis convaincu que vous ne manquerez pas d’arguments pour choisir entre ICY, JELLY et FLUID.

D’aucuns voudraient nous faire croire que les mises en page FLUID sont la panacée pour les sites web. Mais, devant s’adapter automatiquement à la largeur disponible du navigateur, le design FLUID est probablement un des modèles les plus difficiles à mettre en œuvre. Il implique de nombreuses préméditations et anticipations dans la conception des pages web. Le concepteur doit prévoir non seulement les questions typiques des pages web comme les dispositions complexes, les enveloppes de texte et les « dysfonctionnements » des navigateurs qui n’assument que partiellement les standards CSS, mais également la largeur et la hauteur de n’importe quel écran. Les utilisateurs des hautes définitions ont l’habitude des sites ICY ou JELLY et surfent la plupart du temps en mode fenêtré. L’argument « ... avec son design FLUID, ce site est lisible aussi bien sur PC que sur un Palm » est discutable. On ne cherche pas le même type de contenu quand on surfe sur un PC ou sur un appareil nomade, d’où la quasi-obligation de faire une feuille de style spécifique pour les deux supports.


 Design FLUID et « Règles des Quatre Pouces » du monde de l’imprimerie

Pour certains designers, le meilleur design est celui qui embrasse entièrement le médium en permettant un ré-écoulement de l’information dans l’espace rendu disponible par l’élargissement (ou hors de l’espace rendu indisponible par le rétrécissement). De plus, il y a une règle implicite dans l’imprimerie qui déclare que la largeur du texte ne devrait pas excéder 4 pouces (4x2.54 cm = 10.16 cm), soit 10 cm. Certes, le fait est bien connu des ergonomistes, on ne lit pas à l’écran de la même manière que sur une feuille-papier imprimée, mais grosso modo, l’ordre de grandeur d’une largeur de 10 cm reste valable. Ainsi, en transposant cette règle à l’écran des PC, nous pouvons incorporer le même concept dans la conception du ré-écoulement de l’information avec un bloc d’une largeur fixe n’excédant pas 10 cm et disposée à l’intérieur d’un bloc de largeur proportionnelle 100 %. Cela permet non seulement une meilleure lisibilité aux définitions d’écran plus élevées, mais permet également au concepteur d’incorporer l’espace vide approprié requis pour faire apparaître la page esthétiquement plus agréable à l’œil. Sur cette base, on voit qu’il y a des raisons non seulement esthétiques, mais également ergonomiques pour mettre en œuvre un judicieux mélange de blocs de largeur fixe avec un ou plusieurs blocs de largeur proportionnelle.


 Design FLUID : Attention aux contenus graphiques

Certains considèrent ques les sites FLUID sont globalement moches car les contraintes graphiques sont trop importantes (taille des images, répétitions, etc.). Tout le monde n’est pas du même avis mais si vous choisissez le design FLUID, vous devez tenir compte du fait qu’il doit s’adapter aux dimensions variables du navigateur (lesquelles sont tributaires de la définition de l’écran utilisé). Pour que l’adaptation du site soit harmonieuse lors des élargissements et rétrécissements du navigateur, vous devez éviter de concevoir un site de type entièrement graphique qui posera problème avec ses dimensions fixes. De même, un site FLUID dont tous les éléments sont définis en mode proportionnel (%) ne donne pas forcément un « beau look », les meilleurs résultats sont obtenus avec un judicieux mélange de blocs fixes et de blocs proportionnels. Ainsi, avec un design comportant plusieurs colonnes, vous devez penser aux éléments de dimensions fixes et à ceux de dimensions variables (ajustement proportionnel aux élargissements/rétrécissements imposés au navigateur par la technologie et par l’utilisateur). Pour que l’intégration des éléments fixes et variables reste harmonieuse, vous devez identifier la manière dont chaque bloc, chaque structure va se comporter en relation avec les autres lors des redimensionnements. C’est ce que nous verrons dans les exemples que nous traiterons et où la mise en page multi-colonnes, l’ergonomie et la cosmétique sont assurées par les CSS et non pas par les tableaux.


 Quelques références webographiques parmi bien d’autres


[1] Par exemple, Raphaël Goetter l’utilise pour le design JELLY dans l’article « Faire un site pour toutes les résolutions »
http://www.alsacreations.com/articles/fluide/
et Clément Hardoüin l’utilise à juste titre pour le design FLUID dans l’article : « Icy, jelly ou liquid ? conceptionWeb » du 24-07-2003.
http://www.fastclemmy.com/index.php?viewlog=3_IcyJellyLiquid.


Publications

Derniers articles publiés

Navigation

Articles de la rubrique

Agenda

<<

2017

 

<<

Octobre

 

Aujourd'hui

LuMaMeJeVeSaDi
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


1 site référencé dans ce secteur