. .

Tabellen vs. CSS, Do-it-Yourself vs. Framework, YAML vs. den Rest

Wenn du nicht genau weisst warum du dir die Mühe machen sollst YAML zu erlernen, bist du auf dieser Seite richtig. Wir haben festgestellt, dass viele Webdesigner die Nachteile von Tabellen basierten Layouts nicht erkennen. Deshalb stellten wir hier eine Liste mit 10+ Argumenten für CSS-Layouts auf. Für alle die die Vorteile von CSS-Layouts erkannten, Layouts aber erstellen ohne die Stärken von CSS Frameworks zu nutzen, denen zeigen wir 5 Gründe warum ein CSS-Framework zu benutzen sinvoll ist. Sich für das richtige CSS-Framework zu entscheiden ist nicht ganz trivial, unsere Erfahrungen helfen dir bei der Wahl.

10+ Argumente für CSS-Layouts

  1. SEO (Suchmaschinenoptimierung) funktioniert besser bei CSS Layouts
  2. Design Flexibilität - du bist in einem layer basiertem Layout viel flexibler Änderungen vorzunehmen als in einem tabellen basierten Layout
  3. Sauberer Code and Struktur - weil das HTML viel schlanker und sauberer ist, lässt es sich einfacher bearbeiten. Zusätzlich sind Tabellen Layouts gewöhnlich ein chaotisches, verschachteltes Tabellen in Tabellen in Tabellen Konstrukt . Ein weiterer Vorteil: bessere Trennung in Abteilungen bei Team Arbeit (ein Programmierer muss sich nicht mit dem Layout herumplagen, sondern verteilt nur CSS Klassen, welche vom Webdesigner layoutspezifisch definiert werden können).
  4. Browserübergreifend - Wenn du mal verstanden hast wie man mit Layern korrekt arbeitet, ist es einfach ein browserübergreifend funktionierendes Layout zu erstellen.
  5. iPhone - schon mal versucht ein Layout für mobile Geräte zu optimieren und es mit Tabellen als sehr schwierig oder unmöglich empfunden? Mit einem CSS-Layout kein Problem.
  6. Animation und Effekte - visuell ansprechende Website zu erstellen ist mit Layern viel einfacher, nämlich mit jQuery.
  7. Zugänglichkeit - Ja, die meisten unserer Kunden sind nicht eingeschränkt. In vielen Ländern und Industrien (z.B. Behörden) müssen aber Websites einem Web Standard gerecht werden.
  8. Benutzerfreundlichkeit - vielleicht denkst du Dinge sind so wie du sie siehst. Denke nochmals, zum Beispiel an druckoptimierte Websites. Wir empfehlen auch diese Website zu lesen: useit 
  9. Web Standards  -  Sie sind das Konzentrat der Erfahrung der besten Spezialisten des Webs. Wenn du zu einer Umsetzung anderer Meinung bist, hast du vermutlich etwas übersehen.
  10. Zukunftssicher - Wenn du den Dot Com Bust (Internet-Blase) erlebt hast, weisst du was Browser Generationen bedeuten - Jede Website muss an die neuen Browser angepasst werden. Wenn du dich an die Standards hältst, ersparst du dir diese unproduktive Arbeit.
  11. Professionalität - Wahrscheinlich werden es deine Kunden heute nicht bemerken, wenn du ihnen ein Tabellen-Layout bastelst die gegen die Web-Standards verstösst. Aber sie werden dich „lieben“, wenn sie es dann doch mitkriegen. Wie wirst du dich rechtfertigen, wenn dein Kunde verklagt wird weil seine Website nicht behindertengerecht ist oder wenn er deinetwegen weniger verkauft weil seine Website nicht gut gefunden wird?

Mehr zum Thema: CSS vs. Tables, 13 Reasons oder Top 10 Reasons why CSS is better than HTML tables

Warum ein CSS-Framework?

CSS-Layouts sind aufgrund von zahlreichen Browser-Bugs alles andere als trivial. Mit CSS-Frameworks spart man sich die Arbeit, die man sich nicht machen muss. Grundsätzlich möchte sich jeder Webdesigner nicht mit verschiedenen Browsern und deren Interpretation des gleichen (X)HTML/CSS Codes rumplagen. Der Hauptvorteil von CSS-Frameworks ist zweifellos, dass sich ein grundlegendes, browserübergreifend funktionierendes Layout rascher erstellen lässt. CSS-Frameworks enthalten flexible Grundvorlagen, die leicht anpassbar sind und die gängigsten Layouts gleich mitbringen. Das spart jede Menge Arbeit und bringt mehr Zeit für die Seitengestaltung.


Vorteile von CSS-Frameworks:

  • Steigerung der Produktivität
  • Vermeiden von alltäglichen Fehlern
  • Einheitliche Code-Basis
  • Verbesserter Workflow bei Team-Arbeit

Nachteile von CSS-Frameworks:

  • Erlernen der Arbeitsweise des Frameworks kostet Zeit
  • Man vertaut dem Framework, nicht seinen eigenen CSS-Kenntnissen
  • Frameworks erzeugen Overhead im Code

Top 5 Argumente ein Framework zu verwenden für CSS-Layouts

  1. mehr Produktivität - das Framework erspart dir viel Arbeit - zum Beispiel durch die saubere Trennung der Zuständigkeiten, Druckbarkeit etc.
  2. weniger Fehler und leichtere Fehlerbeseitigungmistakes - viele Fehler — wie browserspezifische Bugs — behebt das Framework automatisch und erspart dir deshalb viel Zeit (=Geld)
  3. Wissen aus der Box  - Ja, du solltest verstehen was du machst. In 90% der Fälle bist du aber froh dass es funktioniert ohne dass du exakt wissen musst wie du einen bestimmten Bug umgehen kannst
  4. Baue auf Bestehendem - erfinde nicht das Rad neu, nutze getestete und bewährte Medhoden
  5. Community - Wenn alle dieselben Tools verwenden, wirst du einfacher eine genaue Anleitung für ein bestimmtes Problem finden und du wirst einfacher nach Hilfe fragen

Warum YAML?

Bevor man sich mit YAML beschäftigt, sollte man wissen warum es CSS-Frameworks gibt und deren Vor- und Nachteile kennen. mehr Informationen »

Die meistverbreiteten CSS-Frameworks sind YUI Grids von Yahoo, Blueprint CSS, 960 Grid System und YAML (Yet Another Multicolumn Layout). Sie haben viele Gemeinsamkeiten, unterscheiden sich im Detail aber enorm. Die grid basierten Frameworks YUI, Blueprint und 960gs sind Baukasten, mit denen man sich mit wenig Aufwand und mit wenig Know-how ein Layout zusammenbaut. Solange man einfache Layouts hat und im Raster bleibt, ist es praktisch. Das Raster simuliert das Verhalten von Tabellen und ist so einfach zu verstehen, verstosst aber gegen grundlegende CSS-Konzepte (wie Trennung Inhalt/Layout). YAML hingegen richtet den Fokus auf professionelle, auf den CSS-Prinzipien aufgebaute Designs. YAML bietet die ausführlichste, transparenteste und verständlichste Dokumentation; es ist das einzige CSS-Framework bei dem man die Wahl des Layouttyps (fix, flexibel, elastisch) hat. All dies ermöglicht mehr Flexibilität und Kreativität. Dazu erlaubt es — im Gegensatz zu den Grid-Frameworks — die sinnvolle Trennung von Inhalt und Design und das Erstellen von elastischen, barrierenarmen Layouts.

Vergleich YUI, 960, Blueprint & YAML

yaml

960 grid system

blueprint

YUI CSS

Framework Umfang gross sehr klein mittel mittel
Bereit für simple Layouts ja ja ja ja
Bereit für komplexe Layouts ja nein nein nein
Aufwand nach Einarbeitung klein klein klein klein
Elastische Layouts ja nein
(nur mit plugin)

(nur mit plugin)
ja
Grid Layouts ja
(variabel, %)
ja
(fix, 12 oder 16)
ja
(fix, 24)
ja
(variabel, %)
Flexible Float Layouts ja mittelmässig
Layout Vorlagen ja
Grafik Vorlagen

(PDF, Fireworks, Photoshop, Illustrator, OmniGraffle, Visio)
ja
Umfang Dokumentation / Transparenz sehr gut mittelmässig mittelmässig mittelmässig
DotNetNuke Adaption ja ja
Builder-Tool sehr gut mittelmässig sehr gut sehr gut
Druckunterstützung ja ja
Inhaltsunterstützung sehr gut sehr gut mittelmässig
Bereit für Mobile Geräte yes / very good no / bad mittelmässig no / bad
jQuery integriert sehr gut
Accessibility-Unterstützung

(elastische / flexible Layouts, flexible Schriftgrössen,
Skip-Links, Struktur- und Layoutabhängige Bugfixes...)
sehr gut mittelmässig mittelmässig mittelmässig
Auto float clearing ja ja
Open Source ja ja ja ja
Lizenz CC-A 2.0 GPL & MIT modified MIT BSD

 

Vorteile von YAML:

  • Ausgerichtet auf zugängliche Webseiten
  • YAML Builder
  • Robustes, flexibles Layoutkonzept
  • Modularer Aufbau, anwenderorienterte Funktionaliät
  • Umfassende, mehrsprachige Dokumentation

Du und DotNetNuke profitieren wenn alle das gleiche Framework verwenden

Warum soll also jeder der DotNetNuke nutzt seine Skins mit YAML erstellen? Dies ist nur eine Empfehlung. Du kannst natürlich das CSS-Framework wählen, das deiner Vorstellungen am meisten entspricht, so wie du auch Mootools anstelle von jQuery verwenden kannst. Folgend eine Liste warum alle profitieren wenn alle dieselben Frameworks nutzen:

  • Untereinander in der Community kann einander im Bereich Skinning viel leichter geholfen werden, weil alle denselben Standard und die gleiche Basis haben.
  • Konvention steht über Konfiguration - spart Zeit und erspart dir viele Probleme
  • Jeder möchte jeden Fehler immer nur ein Mal machen, im Optimalfall macht diesen Fehler aber jemand anders und du kannst aus seiner Erfahrung lernen. Dies ist nur möglich wenn alle dieselben Tools verwenden.
  • Komplatilibität- Jedes Framework braucht einige Anpassungen und Tests damit es in DotNetNuke problemlos funktioniert. 2sic Internet Solutions pflegt und optimiert dieses Template stetig, so dass du immer von der neuesten YAML Version profitieren kannst.
  • Interoperabilität - Ein Framework wie DotNetNuke mit einem Framework wie YAML zu kombinieren braucht einige Arbeit. Sicherstellen, dass es mit einem Javasscript Framework funktioniert braucht noch mehr Arbeit, und je mehr Frameworks und Standards hinzukommen (vielleicht kommt irgendwann noch ein Flash-Framework dazu), umso wichtiger wird Interoperabilität out-of-the-box.
  • Zusammenarbeit - Stell dir vor verschiedene Teammitglieder und sogar verschiedene Agenturen arbeiten alle mit denselben Konventionen - was für eine wundervolle Welt!
 

Aktuell

24.01.2013
Neue YAML Vorlage für DNN 7 steht ab sofort zum Download bereit.


23.10.2012
Neue YAML 4 Vorlage für DNN ab Version 6.1 steht ab sofort zum Download bereit.


29.04.2011
Komplett überarbeitetes Tutorial und neue, optimierte YAML Vorlage für DNN 5.x steht ab sofort zum Download bereit


25.10.2010
YAML Version 3.3 im Basis Skin integriert Release Notes



15.12.2009
Jetzt registrieren und wir informieren dich über Neuigkeiten! weiter »