Tard dans la nuit de novembre, j'ai survolé ma ville natale de Tucson, en Arizona, et j'ai été frappé par la disposition en forme de grille de cette ville. Tucson est l'une des villes construites par la planification d'en haut aux États-Unis. ressemble à une grille. Elle a été soigneusement aménagée par le concepteur (Figure 1, je viens de rentrer de Londres). La configuration urbaine de Londres (Figure 2) a des rebondissements et ressemble davantage à celle d'un pays. hors nature.
Figure 1 : Tucson, Arizona
Figure 2 : Londres
Je réfléchis à cet article depuis longtemps. La vue aérienne de ces deux villes me rappelle la conception Web. La technologie d'aujourd'hui nous permet de mettre en œuvre librement des conceptions basées sur une grille, ou de sortir complètement de la grille. L'impact sur les concepteurs de sites Web ne fait aucun doute, mais le véritable défi est de savoir comment abandonner ces pensées fermées et penser en dehors du réseau.
ambiance citadine
Si l’on compare l’urbanisme à la conception de sites Web, les similitudes entre les deux sont intéressantes. Les dispositions en grille sont idéales pour créer des sites Web prévisibles et faciles à naviguer. Les grilles sont idéales pour aider les concepteurs à planifier et à faciliter l'accès des utilisateurs (Figure 3).
Figure 3 : Ryan Brill
Du côté positif, Tucson est certainement une ville facile à visiter, un peu d'orientation ou un plan des rues suffit, les résidents donnent des indications aux autres, il suffit de dire que je suis au coin sud-ouest de l'intersection de Campbell Avenue et Prince Road N'importe où. Les transports en commun sont orientés sud et nord ou est et ouest, il est donc très facile d'identifier la route.
D'un autre côté, les concepteurs de Tucson avaient initialement prévu une expansion limitée, et des problèmes sont survenus lorsque la ville s'est développée au-delà de ses limites prévues. Les limites du réseau de Tucson empêchent l'émergence de différents styles de communautés ou de quartiers. De nombreux habitants de Tucson estiment que la ville manque d'un centre-ville dynamique ou de nombreux quartiers distinctifs. Par conséquent, même si de tels quartiers apparaissent, ils sont facilement accessibles. pas la peine de le chercher.
Londres est différente, c'est un mystère. Je sais que les Londoniens eux-mêmes comptent sur les guides de la ville pour se déplacer. Le système de transport de la ville regorge de défis et les chauffeurs de taxi doivent passer des examens spéciaux avant de pouvoir travailler. La croissance naturelle de la ville n’en fait pas un endroit facile à parcourir.
Cependant, Londres regorge de quartiers passionnants et de quartiers uniques, ainsi que de pôles culturels et de quartiers insolites. Bien qu'il soit plus difficile de voyager, en raison de la variété des goûts, les gens sont plus disposés à être parmi eux.
Cette métaphore convient également aux conceptions Web qui ont tendance à être naturelles. Comment les gens peuvent-ils facilement naviguer dans ces ruelles sinueuses ? D’un autre côté, un beau design peut être obtenu en sortant des cases dans lesquelles nous vivons. Dans la figure 4, vous pouvez voir comment le non-respect des règles de conception de grille permet à la conception de rester utilisable tout en conservant un aspect différent.
Figure 4 : AIGA Los Angeles
Le mythe du code réseau
En tant que personne qui accorde plus d'attention au code qu'à la conception, je suis confus de constater à quel point notre conception est collée au code. Je pense que c'est la disposition des tableaux à long terme qui nous fait établir une base solide (Figure 5). la dernière mise en page CSS, il est facile de savoir pourquoi.
Figure 5 : k10k
Les dispositions de table fonctionnent bien avec les conceptions de grille. Le code du tableau lui-même reproduit une grille. Nous remplissons simplement les cellules avec des images, du texte et des éléments d'interface pour compléter notre conception (Figure 6). Si nous voulons mettre en œuvre une conception complexe et non structurée, nous devons utiliser un grand nombre d'images dans le document, ce qui entraîne une surcharge de l'ensemble du document.
Figure 6 : Déplacement de poids
La disposition tabulaire présente certains avantages, mais comme dans le cas de la planification urbaine, les avantages peuvent parfois se transformer en inconvénients. Une grille basée sur un tableau garantit que toutes les cellules sont régulières. Voulez-vous que toutes les colonnes aient la même largeur ? Trop simple, telle est la nature des tableaux. Maintenir des écarts constants entre les cellules ? C’est aussi un jeu d’enfant. Cependant, que se passe-t-il si vous ne voulez pas de cette structure soignée ? Malheureusement, vous ne pouvez pas.
CSS change tout cela, c'est pourquoi je pense que nous n'avons pas encore appris à concevoir pour le Web. Nous, en particulier ceux qui utilisent CSS depuis des mises en page de tableaux de longue date, commençons tout juste à comprendre à quel point le modèle visuel de CSS peut être utile pour sortir des ornières de conception de grille. La mise en page CSS est-elle parfaite ? Non, en plus des avantages apportés par CSS, nous perdons aussi quelque chose. L'expansion des colonnes est un gros problème pour la conception CSS, tout comme l'espacement des cellules.
CSS n'est rien d'autre que des bords et des boîtes, que l'on retrouve également dans les grilles. Cependant, la différence essentielle entre les deux est que CSS nous permet de séparer une boîte de son environnement et de la disposer à volonté (Figure 7).
Figure 7
Nous pouvons utiliser des attributs de position ou de flottement pour le positionnement, et nous pouvons utiliser des images légères comme arrière-plans. Par conséquent, lorsque nous utilisons Box, nous pouvons implémenter plus efficacement la disposition en grille et la disposition sans grille. Vous pouvez le voir dans Blood de Dave Shea. dans Lust, l'un des nombreux modèles qu'il a utilisés dans son CSS Zen Garden (Figure 8).
Figure 8 : Jardin Zen CSS : soif de sang
La figure 9 montre la conception non structurée basée sur BOX utilisée dans Blood Lust, et montre également comment utiliser CSS et BOX pour implémenter des grilles non structurées indépendantes.
Figure 9
Une fois que nous comprenons les capacités de BOX, nous pouvons facilement surmonter les contraintes du réseau. Une conception très non structurée, voire libre, est illustrée à la figure 10.
Figure 10 : Université de Kutztown : Département de conception de communication
Ces BOX sont positionnées en CSS :
Figure 11
Non seulement le code est plus propre, mais il est également plus intuitif et plus simple pour les concepteurs familiarisés avec la mise en page CSS. Le design est également intuitif, facile à utiliser et non conventionnel.
Perspectives
La beauté de la technologie de mise en page moderne réside dans le fait que nous disposons d’un plus grand choix d’options. En utilisant CSS, nous pouvons créer des conceptions gérables, légères et visuellement riches qui peuvent être basées sur une grille si nous le souhaitons, et nous pouvons facilement briser ou casser la grille.
Cela ouvre davantage de possibilités pour la conception Web contemporaine, et nous ne devrions pas commettre les mêmes erreurs simplement parce que nous sommes plus familiers avec la conception de grilles.
Pour ceux d’entre nous qui sont obsédés par la disposition des tables depuis longtemps, les difficultés sont particulièrement grandes. Pour ceux qui sont concepteurs de sites Web depuis de nombreuses années, cela signifie rompre avec ce qu’ils ont toujours utilisé. Certains ne trouveront peut-être pas cela difficile, mais la plupart des gens trouveront cela intimidant. Nous devons apprendre comment fonctionnent les modèles CSS et avoir le courage de dire au revoir aux anciennes règles.
C’est auprès de ces nouveaux venus que nous espérons voir davantage de percées dans les stéréotypes du design, pour qui nos méthodes passées sont étranges et rigides.
Le Web mûrit, notre façon de concevoir évolue et nous avons devant nous davantage d’innovation et de créativité. Nous ne nous en tiendrons pas aux villes planifiées, nous pouvons réaliser des designs uniques. Nous, les anciens designers, combinés aux nouveaux venus d'aujourd'hui, ferons évoluer le Web chaque jour qui passe.
Auteur de cet article :
Molly E. Holzschlag est une défenseure et évangéliste bien connue des normes Web. Le best-seller de ses plus de 30 livres est The Zen of CSS Design (Zen Web Design), qu'elle a co-écrit avec Dave Shea. Molly est une experte invitée des groupes de travail du W3C et l'ancienne directrice du Web Standards Project Group (WaSP). Molly travaille avec des concepteurs, des développeurs, des praticiens et des décideurs pour créer un Web utile, beau et significatif.
Post-scriptum
Il s'agit d'un article publié dans A LIST APART en 2005. En 2005, la mise en page CSS n'était pas aussi courante qu'aujourd'hui et la mise en page des tableaux a submergé de nombreuses personnes. En tant qu'experte senior dans le domaine du Web, l'auteur Molly E. Holzschlag Elle. est également une utilisatrice de longue date de la mise en page des tableaux. Lorsque CSS approche de sa maturité et que les mises en page basées sur CSS sont rafraîchissantes, elle a des sentiments mitigés sur la conception de grilles basées sur des tableaux, comme le montre l'article.
Cependant, en 2009, alors que le CSS est devenu omniprésent et que la mise en page CSS est devenue familière, il est nécessaire pour nous de repenser à la conception des grilles. La grille est-elle morte ou les tables sont-elles mauvaises ? La réponse n'est pas si simple. Peu importe la manière dont il évolue, le Web d'aujourd'hui a un objectif éternel. En plus des applications Web, la mission en constante évolution du Web est d'exprimer et de transmettre des informations. Si vous êtes un lettré, vous tomberez amoureux. avec Londres Cependant, si vous étiez facteur, vous choisiriez Tucson. Par conséquent, qu'il s'agisse d'un design en grille ou d'un design naturel, il n'y a pas d'avantage ou d'inconvénient absolu. Le design en grille est plus clair et plus soigné, tandis que le design naturel est plus élégant et raffiné.
Et les tableaux ne sont pas aussi méchants que beaucoup de gens le disent. Il convient de noter que les tableaux d'aujourd'hui ne sont plus les tableaux du passé. BOX peut être combiné avec CSS, et les tableaux peuvent également être utilisés. Un tableau entièrement modifié avec CSS est comme un. ensemble de combinaisons et d'interactions organiques. BOX, lorsque vous n'avez pas besoin du positionnement précis des cellules qu'il contient, le tableau est un conteneur plus parfait que BOX, car il est le mieux compatible avec tous les navigateurs, il ne s'effondrera pas, et sa longueur ne sera pas différente, son comportement est plus facile à répondre aux attentes et, plus important encore, c'est le moyen le plus direct pour les gens d'organiser les choses.
Auteur original Molly E. Holzschlag
Source de traduction chinoise : site officiel de COMSHARP CMS, traducteur à 35 kilomètres.