Tabless Web Design

Tabless Web Design (oder Tabless Web Layout) ist ein Web-Design Methode, die die Verwendung von vermeidet HTML -Tabellen zum Seitenlayout Kontrollzwecke. Anstelle von HTML -Tabellen,, Stilblatt Sprachen wie Cascading Style Sheets (CSS) werden verwendet, um Elemente und Text auf a zu arrangieren Website.

Geschichte

Html ist a Auszeichnungssprache deren visuelle Präsentation dem Benutzer zunächst überlassen wurde. Allerdings als die Internet Mitte der neunziger Jahre von der akademischen und Forschungswelt in den Mainstream erweitert und medienorientierter wurde, suchten Grafikdesigner nach Wegen, um das visuelle Erscheinungsbild ihrer Webseiten zu kontrollieren. So populär, besonders vom Designer David Siegel in seinem Buch Erstellen von Killer -Websites erstellen, Tische und Abstandhalter (Normalerweise transparente Einzelpixel GIF Bilder mit explizit angegebener Breite, Höhe oder Rand) wurden verwendet, um Seitenlayouts zu erstellen und zu pflegen.[1]

In den späten neunziger Jahren die erste einigermaßen mächtig Wysiwyg Die Redakteure kamen auf dem Markt an, was bedeutete, dass Webdesigner kein technisches Verständnis von HTML mehr benötigten, um Webseiten zu erstellen.[2] Solche Redakteure förderten indirekt die umfangreiche Verwendung verschachtelter Tabellen, um Designelemente zu positionieren. Als Designer ihre Dokumente in diesen Herausgebern bearbeiteten, wurden dem Dokument unnötige Code und leere Elemente hinzugefügt. Darüber hinaus verwendeten ungelernte Designer Tabellen wahrscheinlich mehr als erforderlich, wenn ein WYSIWYG -Editor verwendet wurde. Diese Praxis führte häufig zu vielen in Tabellen verschachtelten Tischen sowie Tabellen mit unnötigen Zeilen und Spalten. Die Verwendung von Grafikeditoren mit Schnittwerkzeugen, die HTML und Bilder direkt ausgeben, förderte auch einen schlechten Code, wobei Tabellen häufig viele Zeilen von 1 Pixelhöhe oder Breite aufweisen. Manchmal wurden viel mehr Codezeilen verwendet, um Inhalte zu rendern als der tatsächliche Inhalt selbst.

Die Abhängigkeit von Tabellen für Layoutzwecke verursachte eine Reihe von Problemen. Viele Webseiten wurden mit Tabellen entworfen, die in Tabellen verschachtelt sind, was zu großen HTML -Dokumenten führte, die mehr Bandbreite als Dokumente mit einer einfacheren Formatierung verwenden. Wenn ein Tabellenbasis linearisiert wird, kann beispielsweise die resultierende Reihenfolge des Inhalts etwas durcheinander und verwirrend sein.

Cascading Style Sheets (CSS) wurden entwickelt, um die zu verbessern Trennung zwischen Design und Inhaltund wechseln Sie zurück zu einer semantischen Organisation von Inhalten im Web. Der Begriff "dablloser Design" impliziert die Verwendung von CSS anstelle von Layouttabellen, um HTML -Elemente auf der Seite zu positionieren.[3] und werden manchmal auch immer noch als Layoutgeräte in Situationen verwendet, in denen die CSS -Unterstützung schlecht oder problematisch ist, wie vertikal ein Element. Ein weiterer Bereich, in dem noch Tische verwendet werden, sind E-Mailer, da viele beliebte E-Mail-Kunden nicht mit dem modernen HTML- und CSS-Rendering Schritt gehalten haben. In einem solchen Szenario verlieren komplexe E-Mailer einen Teil ihrer strukturellen und kreativen Ausrichtung.

Annahme

Die CSS1 -Spezifikation wurde im Dezember 1996 von der veröffentlicht W3c[4] Mit dem Ziel, sich zu verbessern Web -Barrierefreiheit und Betonung der Trennung von Präsentationsdetails in Stilblättern von semantisch Inhalt in Html Unterlagen. CSS2 im Mai 1998 (später in CSS 2.1 und CSS 2.2 überarbeitet) erweiterte CSS1 mit Einrichtungen für die Positionierung und Tabellenlayout.

Die Präferenz für die Verwendung von HTML -Tabellen und nicht für CSS zur Steuerung des Layouts von ganzen Webseiten war aus mehreren Gründen:

  • Der Wunsch von Inhaltsverlage, ihre bestehenden zu replizieren Unternehmensdesign Elemente auf ihrer Website;
  • die Einschränkungen zum Zeitpunkt der CSS -Unterstützung in Browsern;
  • das installierte Grundlage von Browsern, die CSS nicht unterstützten;
  • Die mangelnde Vertrautheit der neuen Webdesigner mit den CSS -Standards;
  • das Mangel an Kenntnis oder Sorge aus den Gründen (einschließlich HTML Semantik und Web -Barrierefreiheit) CSS anstelle dessen zu verwenden, was als eine einfachere Möglichkeit wahrgenommen wurde, die beabsichtigten Layouts schnell zu erreichen, und
  • eine neue Generation von Wysiwyg Webdesign -Tools, die diese Praxis ermutigten.

Sehenswürdigkeiten bei der Einführung von CSS-basierten Layouts umfassen die Webstandards Projekt's Browser -Upgrade -Kampagne von Februar 2001 und das Web Design Magazine Eine Liste auseinander's gleichzeitige Neugestaltung, gefolgt von der Verdrahtet Neugestaltung im Jahr 2002.[5] Das CSS Zen Garden Die 2003 gestartete Website wurde der Popularisierung von Tabless -Layouts zugeschrieben.[6]

Begründung

Der beabsichtigte und semantische Zweck von HTML -Tabellen liegt in der Präsentation Tabellendaten[3][7] anstatt Seiten auszulegen.[8] Die Vorteile der Verwendung von CSS für das Seitenlayout beinhalten eine verbesserte Zugänglichkeit der Informationen an eine breitere Vielfalt von Benutzern mit einer Vielzahl von Vielfalt von Benutzeragenten. Es gibt Bandbreiteneinsparungen als große Anzahl von semantisch bedeutungslos

, und Tags werden von Dutzenden von Seiten entfernt, die weniger, aber aussagekräftigere Überschriften, Absätze und Listen hinterlassen. Layoutanweisungen werden in ortsweite CSS-Stylesheets übertragen, die sein können heruntergeladen einst und zwischengespeichert Zur Wiederverwendung, während jeder Besucher die Website navigiert. Websites können besser gewartet werden, da die gesamte Website in einem einzigen Pass neu gestaltet oder umbenannt werden kann, indem nur die Aufzeichnung des spezifischen CSS geändert wird, was auf jede Seite auswirkt, die sich auf dieses Stylesheet stützt. Neue HTML -Inhalte können so hinzugefügt werden, dass die vorhandenen CSS ohne weitere Anstrengungen unmittelbar auf ihn angewendet werden.

Vorteile

Barrierefreiheit

Hauptartikel: Web -Barrierefreiheit und Suchmaschinenoptimierung

Wegen des raschen Wachstums des Internets, erweitern Sie sich Diskriminierungsgesetzgebung für Behinderungenund die zunehmende Verwendung von Mobiltelefone und PDAsEs ist erforderlich, dass Webinhalte für Benutzer zugänglich gemacht werden, die eine Vielzahl von Geräten über die relativ einheitlichen Personen hinaus betreiben Desktop-Computer und CRT -Monitor Ökosystem Das Web wurde zum ersten Mal populär. Das dabllose Webdesign verbessert sich erheblich Web -Barrierefreiheit In dieser Hinsicht müssen die Tabellen, die zu breit für einen Bildschirm sind, seitwärts scrolliert werden, um vollständig gelesen zu werden, während sich der Text umwickeln kann.

Bildschirmleser und Blindenschrift Geräte haben weniger Probleme mit Tabless -Designs, da sie einer logischen Struktur folgen. Das gleiche gilt für Suchmaschine WebcrawlerDie Software -Agenten, auf die die meisten Website -Publisher hoffen, werden ihre Seiten finden, sie genau klassifizieren und ermöglichen potenziellen Benutzern, sie bei geeigneten Suchanfragen leicht zu finden.

Infolge der Trennung von Design (CSS) und Struktur (HTML) ist es auch möglich, unterschiedliche Layouts für verschiedene Geräte bereitzustellen, z. Handhelds, Mobiltelefone usw. Es ist auch möglich, ein anderes Stilblatt für den Druck anzugeben, z. Um das Erscheinungsbild von Anzeigen oder Navigationselementen zu verbergen oder zu ändern, sind irrelevant und ein Ärgernis in der druckbaren Version der Seite.

Die W3Cs Richtlinien für Zugänglichkeitszüge auf Webinhalte'Richtlinie Nr. 3 Zustände "Verwenden Sie Markup- und Stilblätter und tun Sie dies richtig."[9] Der Checkpoint 3.3 der Richtlinie, ein Priority-2-Checkpoint, besagt: "Verwenden Sie Stilblätter, um das Layout und die Präsentation zu steuern."[10]

Bandbreite Einsparungen

Tabless Design produziert Webseiten mit weniger HTML -Tags, die nur zur Positionierung von Inhalten verwendet werden. Dies bedeutet normalerweise, dass die Seiten selbst kleiner zum Download werden. Die Philosophie impliziert, dass alle Anweisungen bezüglich Layout und Positionierung in externe Stilblätter verlegt werden. Nach den grundlegenden Fähigkeiten von HttpDa sich diese selten ändern und sich gemeinsam für viele Webseiten bewerben, werden sie nach dem ersten Download zwischengespeichert und wiederverwendet. Dies reduziert die Bandbreite und die Downloadzeiten auf der Website weiter.[11][12]

Wartbarkeit

Die Wartung einer Website erfordern möglicherweise sowohl kleine als auch große Änderungen, die je nach Site -Zweck einen visuellen Stil einer Website haben. Unter Tabellenbasis ist das Layout Teil des HTML selbst. Als solches ohne Hilfe von vorlagenbasierten visuellen Redaktoren wie z. B. HTML -RedakteureDas Ändern des Positionsanlagens von Elementen an einem ganzen Standort erfordert möglicherweise viel Aufwand, abhängig von der Menge der erforderlichen sich wiederholenden Änderungen. Sogar Beschäftigung sed oder ähnliche globale Find-and-Replace-Versorgungsunternehmen können das Problem nicht vollständig lindern.

In dabllosen Layout unter Verwendung von CSS können sich die Layoutinformationen in einem CSS -Dokument befinden. Da die Layoutinformationen zentralisiert werden können, ist es möglich, dass diese Änderungen standardmäßig schnell und global vorgenommen werden können. Die HTML -Dateien selbst müssen möglicherweise nicht angepasst werden, wenn Sie Layout -Änderungen vornehmen.

Da die Layoutinformationen extern in der HTML gespeichert werden können, ist es möglicherweise recht einfach, neue Inhalte in einem dabllosen Design hinzuzufügen, unabhängig davon, ob eine vorhandene Seite geändert oder eine neue Seite hinzugefügt wird. Im Gegensatz dazu erfordert das Layout für jede Seite möglicherweise ohne solches Design eine zeitaufwändigere Handbuchung der einzelnen Instanz oder Verwendung globaler Find-and-Replace-Dienstprogramme. Site -Eigentümer möchten jedoch häufig, dass bestimmte Seiten sich von anderen auf der Website entweder für kurze oder langfristige Zeiten unterscheiden. Dies erfordert häufig ein separates Stilblatt für diese Seite. Der Inhalt der Seite (oder Vorlage) kann jedoch normalerweise unverändert bleiben, was in einem auf Tabellen basierenden Design nicht der Fall ist.

Nachteile

Da CSS zwischengespeichert werden kann, kann ein vollständig CSS-basiertes Layout nicht ordnungsgemäß gerendert werden, wenn Änderungen vorgenommen werden und ein Kunde immer noch ein veraltetes Stylesheet verwendet. Dies kann durch sorgfältige Entwicklung und Verwendung von Cachebuster -Techniken gemindert werden.

Siehe auch

Verweise

  1. ^ Gruber, Jordan S. (1997-02-01). "Outta Site". Verdrahtet.
  2. ^ Maas, Benard. "Eine kurze Geschichte der Wysiwyg -Redakteure". 13.00 Uhr. Abgerufen 10. Februar 2015. Microsoft Office FrontPage wurde als Bündel der 1997er Version des Microsoft Office veröffentlicht. Es war das erste Mal, dass ein robuster, kommerzieller HTML-Wysiwyg-Redakteur und Publisher für jede Person verfügbar waren ... wenn eine ausgebaute Webseite ausgebaut wurde Die Wysiwyg MS FrontPage -Software würde mit einem Backend -FPSE ausführen. Es würde die volle Stärke genießen, die ein Technologe möglicherweise bauen könnte, indem er HTML -Code von Grund auf neu schreibt. Webdesigner benötigten kein technisches Verständnis von HTML mehr, um Webseiten zu erstellen.
  3. ^ a b Jennifer Kyrnin. "Tabellen für tabellarische Daten-Was sind tabellarische Daten? Wann können Tabellen in einem standardbasierten XHTML-Dokument verwendet werden.". About.com, ein Teil der New York Times Company. Abgerufen 2009-10-22.
  4. ^ Lüge, Håkon Wium; Bos, Bert (1996-12-17). "W3C Empfehlung: Kaskadierstilblätter, Stufe 1". W3c. Archiviert von das Original Am 1997-06-05. Abgerufen 2019-04-19.
  5. ^ Zeldman, Jeffrey (2003-05-14). Entwerfen mit Webstandards (1. Aufl.). Indianapolis: Neue Fahrer. pp.120-134. ISBN 978-0-7357-1201-0.
  6. ^ Zeldman, Jeffrey (2007). Entwerfen mit Webstandards (2. Aufl.). Berkeley: Neue Fahrer. p.137. ISBN 978-0-321-38555-0.
  7. ^ "17.2.1 Anonyme Tabellenobjekte". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Spezifikation. W3c. 2009. Abgerufen 2009-10-23.
  8. ^ Dominique Hazaël-Massiux (2005). "Tabless Layout Howto". W3c. Abgerufen 2007-09-08.
  9. ^ "Richtlinien für die Zugänglichkeit von Webinhalten 1.0". W3c. 1999. Abgerufen 2009-09-19. Richtlinie 3. Verwenden Sie Markup- und Stilblätter und tun Sie dies richtig.
  10. ^ "Techniken für Webinhalte -Richtlinien 1.0". W3c. 2000. Abgerufen 2009-09-19. Verwenden Sie Stilblätter, um das Layout und die Präsentation zu steuern.
  11. ^ Daniel M. Frommelt (2003). "Slashdot mit Webstandards umrüsten". Eine Liste außerhalb der Zeitschrift. Abgerufen 2009-09-20.
  12. ^ Dan Shafer (2003). "HTML Utopia: Entwerfen ohne Tabellen mit CSS, Kapitel 4: CSS -Website -Design".Sitepoint pty. Abgerufen 2009-09-20. ... zusätzlich zu den oben beschriebenen organisatorischen Vorteilen hat der Browser weniger Code zum Herunterladen.Auf stark gestalteten Websites oder Websites mit Hunderten von Seiten oder mehr kann diese verkürzte Download -Zeit sowohl auf die Benutzererfahrung als auch auf Ihre Bandbreitenkosten erhebliche Auswirkungen haben.

Externe Links