Eines späten Abends im November flog ich über meine Heimatstadt Tucson, Arizona. Ich war beeindruckt von der gitterartigen Struktur dieser Stadt. Von oben her ist alles in dieser Stadt entstanden Es sieht aus wie ein Gitter. Es wurde vom Designer sorgfältig entworfen (Abbildung 1). Das Stadtbild von London (Abbildung 2) hat eher Wendungen aus der Natur.
Abbildung 1: Tucson, Arizona
Abbildung 2: London
Ich habe lange über diesen Artikel nachgedacht. Die heutige Technologie ermöglicht es uns, rasterbasierte Designs frei umzusetzen oder völlig aus dem Raster zu springen Auswirkungen auf Webdesigner Es besteht kein Zweifel an der Dynamik, aber die eigentliche Herausforderung besteht darin, wie wir diese engstirnigen Gedanken loslassen und über den Tellerrand hinaus denken können.
Stadtgefühl
Wenn man Stadtplanung mit Webdesign vergleicht, sind die Ähnlichkeiten zwischen beiden interessant. Rasterlayouts eignen sich hervorragend zum Erstellen vorhersehbarer, einfach zu navigierender Websites. Raster eignen sich hervorragend, um Designern bei der Planung zu helfen und den Benutzern den Zugriff zu erleichtern (Abbildung 3).
Abbildung 3: Ryan Brill
Positiv zu vermerken ist, dass Tucson auf jeden Fall eine leicht zu besichtigende Stadt ist. Ein wenig Orientierungssinn oder eine Straßenkarte reichen aus. Die Bewohner geben anderen den Weg. Es genügt zu sagen: Ich befinde mich an der südwestlichen Ecke der Kreuzung von Campbell Avenue und Prince Road Einfach überall. Die öffentlichen Verkehrsmittel verlaufen nach Süden und Norden bzw. nach Osten und Westen, sodass die Straße sehr leicht zu erkennen ist.
Andererseits planten die Planer von Tucson ursprünglich eine begrenzte Erweiterung, und Probleme traten auf, als die Stadt über die geplanten Grenzen hinaus wuchs. Die Einschränkungen des Tucson-Rasters verhindern die Entstehung verschiedener Arten von Gemeinden oder Vierteln. Viele Einwohner von Tucson haben das Gefühl, dass es in der Stadt an einer lebendigen Innenstadt oder zahlreichen einzigartigen Vierteln mangelt Ich mache mir nicht die Mühe, danach zu suchen.
London ist anders, es ist ein Rätsel. Ich weiß, dass die Londoner selbst auf Stadtführer angewiesen sind, um sich fortzubewegen. Das Transportsystem der Stadt ist voller Herausforderungen und diese Taxifahrer müssen spezielle Prüfungen bestehen, bevor sie arbeiten können. Das natürliche Wachstum der Stadt macht sie nicht zu einem einfachen Reiseziel.
London ist jedoch voller aufregender Bezirke und einzigartiger Viertel sowie kultureller Zentren und skurriler Viertel. Obwohl es aufgrund der Geschmacksvielfalt schwieriger ist zu reisen, sind die Menschen eher bereit, sich darauf einzulassen.
Diese Metapher eignet sich auch für Webdesigns, die eher natürlich sind. Wie können sich Menschen problemlos durch die verwinkelten Gassen navigieren? Auf der anderen Seite kann schönes Design dadurch erreicht werden, dass wir aus den Schubladen, in denen wir leben, ausbrechen. In Abbildung 4 können Sie sehen, wie das Durchbrechen der Regeln des Rasterdesigns dazu führt, dass das Design verwendbar bleibt und dennoch anders aussieht.
Abbildung 4: AIGA Los Angeles
Der Mythos des Grid-Codes
Als eine Person, die mehr auf Code als auf Design achtet, bin ich verwirrt darüber, wie unser Design am Code festhält. Ich glaube, dass es das langfristige Tabellenlayout ist, das uns eine solide Grundlage bietet (Abbildung 5). Beim neuesten CSS-Layout ist es leicht zu wissen, warum.
Abbildung 5: k10k
Tabellenlayouts funktionieren gut mit Rasterdesigns. Der Code der Tabelle selbst reproduziert ein Raster. Wir füllen die Zellen einfach mit Bildern, Text und Schnittstellenelementen, um unser Design zu vervollständigen (Abbildung 6). Wenn wir ein komplexes unstrukturiertes Design implementieren möchten, müssen wir eine große Anzahl von Bildern im Dokument verwenden, wodurch das gesamte Dokument aufgebläht wird.
Abbildung 6: Gewichtsverlagerung
Das tabellarische Layout hat einige Vorteile, aber wie bei der Stadtplanung können sich die Vorteile manchmal in Nachteile verwandeln. Ein tabellenbasiertes Raster stellt sicher, dass alle darin enthaltenen Zellen regelmäßig sind. Möchten Sie, dass alle Spalten die gleiche Breite haben? Zu einfach, das ist die Natur von Tabellen. Gleichbleibende Abstände zwischen den Zellen einhalten? Es ist auch ein Kinderspiel. Was aber, wenn Sie diese übersichtliche Struktur nicht möchten? Das geht leider nicht.
CSS ändert das alles, weshalb wir meiner Meinung nach noch nicht gelernt haben, für das Web zu entwerfen. Wir, insbesondere diejenigen, die von langjährigen Tabellenlayouts zu CSS kommen, beginnen gerade erst zu verstehen, wie hilfreich das visuelle Modell von CSS dabei sein kann, aus den Trotts des Rasterdesigns auszubrechen. Ist das CSS-Layout perfekt? Nein, zusätzlich zu den Vorteilen, die CSS mit sich bringt, verlieren wir auch etwas. Die Spaltenerweiterung ist ein großes Problem für das CSS-Design, ebenso wie die Zellenlücke.
CSS ist nichts anderes als Kanten und Boxen, die auch in Gittern zu finden sind. Der wesentliche Unterschied zwischen beiden besteht jedoch darin, dass wir mit CSS eine Box von ihrer umgebenden Umgebung trennen und nach Belieben entsorgen können (Abbildung 7).
Abbildung 7
Wir können Positions- oder Float-Attribute für die Positionierung verwenden und leichte Bilder als Hintergrund verwenden. Daher können wir bei der Verwendung von Box sowohl das Rasterlayout als auch das Nichtrasterlayout effektiver implementieren. Sie können dies in Dave Sheas Blood sehen in Lust, einem der vielen Designs, die er in seinem CSS Zen Garden verwendete (Abbildung 8).
Abbildung 8: CSS Zen Garden: Blood Lust
Abbildung 9 zeigt das BOX-basierte unstrukturierte Design, das in Blood Lust verwendet wird, und zeigt auch, wie CSS und BOX verwendet werden, um unabhängige unstrukturierte Gitter zu implementieren.
Abbildung 9
Sobald wir die Fähigkeiten von BOX verstanden haben, können wir die Einschränkungen des Rasters leicht durchbrechen. Ein stark unstrukturiertes, sogar freies Design ist in Abbildung 10 dargestellt.
Abbildung 10: Kutztown University: Abteilung für Kommunikationsdesign
Diese BOX werden per CSS positioniert:
Abbildung 11
Der Code ist nicht nur sauberer, sondern auch intuitiver und einfacher für Designer, die mit dem CSS-Layout vertraut sind. Auch das Design ist intuitiv, einfach zu bedienen und unkonventionell.
Ausblick
Das Schöne an der modernen Layout-Technologie ist, dass wir mehr Optionen zur Auswahl haben. Mit CSS können wir überschaubare, leichte und visuell ansprechende Designs erstellen, die auf Wunsch gitterbasiert sein können, und wir können das Gitter leicht durchbrechen oder durchbrechen.
Dies eröffnet mehr Möglichkeiten für zeitgenössisches Webdesign, und wir sollten nicht dieselben Fehler machen, nur weil wir mit Grid-Design besser vertraut sind.
Für diejenigen unter uns, die schon lange von der Tischgestaltung besessen sind, sind die Schwierigkeiten besonders groß. Für diejenigen, die schon seit vielen Jahren als Webdesigner tätig sind, bedeutet dies, sich von dem zu lösen, was sie immer verwendet haben. Manchen fällt es vielleicht nicht schwer, aber die meisten Menschen werden es einschüchternd finden. Wir müssen lernen, wie CSS-Modelle funktionieren, und den Mut haben, uns von den alten Regeln zu verabschieden.
Von diesen Neuankömmlingen hoffen wir auf weitere Durchbrüche bei Design-Stereotypen, für die unsere bisherigen Methoden seltsam und starr sind.
Das Web wird reifer, die Art und Weise, wie wir entwerfen, verändert sich und wir haben noch mehr Innovation und Kreativität vor uns. Wir werden nicht an geplanten Städten festhalten, wir können einzigartige Designs schaffen, kombiniert mit den Neulingen von heute, werden das Web mit jedem Tag verändern.
Autor dieses Artikels:
Molly E. Holzschlag ist eine bekannte Verfechterin und Evangelistin von Webstandards. Das meistverkaufte ihrer mehr als 30 Bücher ist The Zen of CSS Design (Zen Web Design), das sie gemeinsam mit Dave Shea verfasst hat. Molly ist eine eingeladene Expertin in W3C-Arbeitsgruppen und ehemalige Direktorin der Web Standards Project Group (WaSP). Molly arbeitet mit Designern, Entwicklern, Praktikern und Entscheidungsträgern zusammen, um ein Web zu schaffen, das nützlich, schön und bedeutungsvoll ist.
Nachtrag
Dies ist ein Artikel, der 2005 in A LIST APART veröffentlicht wurde. Im Jahr 2005 war das CSS-Layout noch nicht so verbreitet wie heute, und das Tabellenlayout hat viele Menschen überfordert. Als leitende Expertin im Webbereich hat die Autorin Molly E. Holzschlag She ist auch eine langjährige Nutzerin von Tabellenlayouts, wenn CSS sich der Reife nähert und CSS-basierte Layouts erfrischend sind, hat sie gemischte Gefühle gegenüber tabellenbasiertem Rasterdesign, wie aus dem Artikel hervorgeht.
Doch im Jahr 2009, als CSS allgegenwärtig wurde und das CSS-Layout bekannt wurde, müssen wir erneut über das Rasterdesign nachdenken. Ist das Raster tot oder sind Tabellen böse? Die Antwort ist nicht so einfach: Das Web von heute hat einen ewigen Zweck und besteht darin, Informationen auszudrücken und zu übermitteln Wenn Sie jedoch ein Postbote wären, würden Sie sich für Tucson entscheiden. Unabhängig davon, ob es sich um ein Gitterdesign oder ein natürliches Design handelt, gibt es keinen absoluten Vor- oder Nachteil. Das Gitterdesign ist klarer und ordentlicher, während das natürliche Design eleganter und raffinierter ist.
Und Tabellen sind nicht so böse, wie viele Leute sagen. Es sollte beachtet werden, dass die Tabellen von heute nicht mehr mit CSS kombiniert werden können, und Tabellen können auch vollständig mit CSS kombiniert werden Eine Reihe organischer Kombinationen und Interaktionen. Wenn Sie die genaue Positionierung der Zellen darin nicht benötigen, ist die Tabelle ein perfekterer Container als BOX, da sie mit allen Browsern am besten kompatibel ist und nicht zusammenbricht Es wird sich nicht in der Länge unterscheiden, sein Verhalten ist einfacher, Erwartungen zu erfüllen, und was am wichtigsten ist, es ist die direkteste Möglichkeit für Menschen, Dinge zu organisieren.
Originalautorin Molly E. Holzschlag
Chinesische Übersetzungsquelle: Offizielle Website von COMSHARP CMS, Übersetzer 35 Kilometer.