Centrer Jonathan

Traduction et Autorisation de l'auteur en cours. Traduction libre d'un article de Nick Finck - Digital Web Magazine. Seul le lien original fait référence

Web Design Liquide : Construisez-le proprement et ça fonctionnera quel que soit le contenant.

Par Nick Finck

Glenn Davis a dit une fois, "Construire des pages Web ressemble grandement à la tenue d'un bar". Construisez-le proprement et il fonctionnera quel que soit le contenant. Je pense qu'il était soit ivre mort quand il a tenu de tels propos ou vraiment avec quelque chose en tête. Quelques individus considèrent le web comme une ressource informationnelle pendant que d'autres ne jurent que par un format particulier de divertissement. Les conceptions d'interface web ont fait un vrai bond en avant durant les dernières années : des fonds gris à toutes les sauces et des listes à puces vers des interfaces colorées et interactives. Un bon concepteur Web sait comment mélanger simplement la bonne dose d'interface avec l'information, de telle manière que cela puisse être restitué sans couture et transparent pour l'utilisateur final.

C'est là où l'idée de David d'une conception liquide entre en jeu. Après des années de développement Web, il en est venu à conclure qu'il existe 3 éléments de l'interface sur le Web aujourd'hui : ceux qui sont liquides, Jell-O et Glacé. 

Glace : Asseyons-nous et Décongelons
La Glace est sans doute l'élément le plus commun trouvé sur le web aujourd'hui. Nous la voyons souvent sans réaliser que c'en est. Les designs gelés ne sont pas véritablement une mauvaise chose, mais tendent à s'éloigner d'une expérience utilisateur du site et nous renvoient aux limitations du web. Rien à propos de l'élément ne changera si la page est retaillée. Il y a beaucoup designs gelés sur le web dans lequel le site entier est sculpté. Ce sont les sites qui sont gelés dans la barre de gauche du navigateur et qui s'affichent le mieux à une certaine taille"² Quelques bons exemples de design gelés sont ZDnet, HighFive, The Webby Awards, CNN, et Adobe--la plupart des sites d'information et des sites de sociétés. En fait, pensez-y, mon propre site était conçu en Glace -- coincé dans un tableau de 600 pixels -- et taillé dans le côté gauche du navigateur. Un de mes buts pour Digital-Web.com a été de m'éloigner de la glace, aussi loin que possible.

Jell-O : Ajoutez simplement de l'eau
Quelque chose d'une rareté,  là vraiment il n'y a beaucoup de Jell-O de sortie pour la fête. Seul un petit nombre de sites font usage de ce type de conception web. Ce n'est pas très différent de la conception Glace quelque part. Ajoutez simplement quelques balises de centrage,  that's it when you get down to the nitty-gritty. Davis le décrit comme, "...un peut plus flexible. C'est une conception qui, si la fenêtre du navigateur est réajustée, elle se centrera elle-même pour s'ajuster à l'affichage."³ Quelques bons exemples de ce type de sites sont The Web Standards Project, DigitalThread, et HeadSpace. Il en existe sûrement bien d'autres, mais cela suffira pour expliquer ce point.

Liquide : Ajoutez simplement de l'eau

Liquide est peut-être un des styles les plus diffficles de conception qu'on puisse possiblement développer. "Liquide est la quintessence d'une bonne conception web et le fluide qui devrait être utilisé pour tenir les pages web ensemble. Une page liquide se réajustera pour s'ajuster quelle que soit la taille de la fenêtre du navigateur (within reason) que l'utlisateur a de disponible,"⁴ remarque Davis. Cette catégorie de conception inclut typiquement beaucoup de prévoyanace dans la conception de la page web. Le développeur doit considérer pas seulement les sortes de navigateurs aussi complexes que les gabarits, le chevauchement de texte et toutes les incohérences des navigateurs, mais aussi toutes les largeurs et hauteurs d'écrans. Quelques bons exemples de sites qui ont attaqué avec succès le problème de la conception liquide sont Builder.com, Falkon Design et ProjectCool. Jeff Zeldman mentionne aussi comment il a utilisé quelques-unes des idées de conception liquide quand il a construit A-List-Apart dans l'article "No Blue: Design Notes on Alistapart.com."

La règle des Quatre Pouces

Zeldman écrit, "Nous avons débattu du sujet depuis quatre ans, mais la vérité est, neuf fois sur dix, la meilleure mise en page est celle qui embrasse pleinement le médium, en lui allouant de renflouer comme s'il était rempli de paramétrages informatiques de lecteurs différents"⁵ Il existe une règle non écrite en impression qui établit que le texte ne devrait pas excéder 4 pouces de largeur sur une page. Tout texte inférieur à quatre pouces est plus lisible que tout texte supérieur à quatre pouces --le lecteur --the reader's whiplash will speak for itself.

En suivant cette règle, nous pouvons incorporer dans la conception web avec un tableau fixe à l'intérieur d'un tableau de 100% de large comme c'est le cas avec Digital-Web.com. Faire cela ne nous permet pas seulement une meilleure lisibilité à de plus hautes résolutions, mais aussi permet au concepteur d'incorporer l'espace blanc adéquat requis pour rendre la page plus agréable esthétiquement à l'oeil.

In following this rule we can incorporate the same concept into web design with a fixed-width table inside of a 100% width table, as is the case with Digtal-Web.com. Doing this not only allows for better readability at higher resolutions, but it also allows the designer to incorporate the proper blank space needed to make the page appear more aesthetically pleasing to the eye.

Provoquer cela sur le Papier

Si vous projetez de refaire une conception et que vous vouliez essayer de développer un site liquide, vous devez d'abord avoir une vigoureuse compréhension deu concept général du site. Aura t'il une barre de navigation à gauche ou à droite ? Y 'aura t'il des en-têtes et des pieds de page ? L'interface sera t'elle complexe et si oui tous les graphiques devront-t'ils être taqués en haut les uns contre les autres pour rendre l'interface visible et fonctionnelle ? Ce sont juste des questions à vous poser. Le meilleur moyen d'approcher  cela est d'esquisser un brouillon de votre site sur le papier, de coller une conception sur une grille et de penser original.The best way to approach this is by drafting your site on paper, stick to a grid design and think original.

Deux choses que vous devez accepter sont, d'abord, concevoir un site liquide sera une douleur énorme mais cela paiera dans le long terme ; deuxièmement la conception ne peut être parfaite pour être totalement liquide. Si vous voulez voir de la perfection en conception, le web n'est pas le lieu à regarder. Quand vous placez des tableaux sur le papier, considérez que chaque bouton est une barre de navigation horizontale devrait être dans sa propre cellule. Cela maintiendra la conception d'un éclatement sur la partie gauche de l'écran. Gardez aussi en tête que les boutons peuvent flotter un peu, particulièrement sur la distance horizontale entre chacun d'eux. Vous pouvez revenir sur cette étape si la conception échoue une fois que vous avez construit et testé le site.

Testant et Testant encore
Une fois le gabarit dessiné et tombé et les tableaux de bases esquissés, vous pouvez démarrer le développement. C'est le point où vous pourrez faire ou briser votre conception. La meilleure méthode est de teste le succès de votre conception est de charger le site dans plusieurs navigateurs différents sur différents systèmes d'exploitation, sur différentes résolutions écrans. Cela marchera ou ratera à cette étape. La validation jouera aussi un rôle-clé ici et vous aidera à trouver des solutions standardisées pour les résultats dans les différents navigateurs, plutôt qu'en environnement propriétaire-autour duquel cela peut être retouché plus tard. Vous saurez si votre conception fonctionne quand elle pourra s'épancher et se rétrécir à n'importe quelle taille d'écran dans n'importe quel navigateur, sur toutes les plate-formes. Une fois cela réalisé, vous pourrez prétendre avoir réussi une conception liquide.

Garder l'Objectif en Tête

Pourquoi cela ? Vous vous êtes bagarré durant des heures à essayer que votre conception puisse s'épancher tout simplement normalement et il ne semble pas exister de lumières au bout du tunnel. Rappelez-vous simplement votre objectif : des interfaces sans couture vers l'information. Si votre utilisateur n'émet pas de commentaires sur votre interface, cela veutdire que vous avez réussi de tirer une interface utilisateur transparente -- vous laissant à une marche de la page web idéale.

Notes de Pied de Page
name="1">¹ Zeldman, J. (8 July 1998). "15 Questions for Glenn Davis" Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

² Zeldman, J. (8 July 1998). "15 Questions for Glenn Davis" Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

³ Zeldman, J. (8 July 1998). "15 Questions for Glenn Davis" Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

⁴ Zeldman, J. (8 July 1998). "15 Questions for Glenn Davis" Jeffrey Zeldman Presents: 15 Minutes. (Online).
http://www.zeldman.com/15/davisf.html
Back to content

⁵ Zeldman, J. (1999). "No Blue: Design Notes on Alistapart.com" A List A Part. (Online).
http://www.alistapart.com/stories/noblue/
Back to content

Nick Finck passe la plupart de ses nuits et weekends à travailler sur Digital Web Magazine et le magazine A List Apart pendant que le jour il travaille pour White Horse Studios à construire des sites pour quelques-unes des sociétés multinationales du top fortune 500.