10 Vorteile von CSS
Sie sind noch nicht von den Vorteilen von CSS überzeugt? Sie wissen vielleicht noch nichts über Sie? Oder Sie brauchen Entscheidungshilfe ob sich der Lernaufwand lohnt? Vielleicht sind Sie ja auch schon auf Standard-basiertes Design eingeschossen und benötigen Argumentationsshilfe um den Chef zu überzeugen? Egal aus welchem Grund, dieser Text soll helfen die Vorteile von CSS zu verdeutlichen.
In aller Kürze hier eine Liste von eindeutigen Argumenten die für den Einsatz von CSS sprechen. Nach dem Durchlesen dieses Artikels werden Sie merken: je schneller und je kompletter Sie auf CSS für Formatierung und Layout umsteigen, desto besser.
- CSS ist der aktuelle Standard
- CSS erfüllt das Versprechen, Struktur von Gestaltung zu trennen
- CSS bringt übersichtlichen HTML-Code
- CSS bietet Gestaltung nicht nur für den Bildschirm
- CSS bietet mehr gestalterische Möglichkeiten
- CSS ermöglicht komplette Designänderungen um Handumdrehen
- CSS bringt eine bessere Suchmaschinenplazierung
- CSS ermöglicht barrierefreiere Seiten
- CSS verringert die Hosting-Kosten
- CSS verringert die Wartungskosten
Der aktuelle Standard
Dies ist ein sehr technisches Argument. Es mag daher nicht jeden Ansprechen verliert damit jedoch nicht seine Gültigkeit.
Das fürs WWW zuständige Normierungs- und Standardgremium, das W3C, hat festgelegt, dass HTML lediglich für die Auszeichnung einer Dokumentstruktur zu verwenden ist. Für's Aussehen (und nicht nur dafür) dagegen sind die CSS zuständig.
Trennung Struktur von Gestaltung
Mit Einsatz von CSS befinden sich im HTML-Code nur noch struktur-relevante Informationen. Jegliche Formatierungsangaben werden (idealerweise in externe Dateien) ausgelagert. Dieses Prinzip bildet die Grundlage für die meisten der hier genannten Vorteile.
Übersichtlicher HTML-Code
Statt "CSS bringt..." müsste es eigentlich heißen: "CSS erfordert übersichtlichen HTML-Code". Denn eine Grundvorraussetzung für den erfolgreichen Einsatz von Stylesheets ist die Verwendung von gültigem, standardkonformem HTML. Die Webseite muss obendrein noch gut strukturiert und schlank sein, damit alle Vorteile ziehen.
Im Umstieg von einem Tabellenbasiertem Layout und unter den Anforderungen des richtigen Lebens müssen natürlich Abstriche gemacht werden, Kompromisse müssen eingegangen werden. Aber letzten Endes führt der durchgänge Einsatz von CSS zu deutlich "besserem", übersichtlicherem HTML-Code.
Gestaltung nicht nur für den Bildschirm
CSS unterstützt eine Vielzahl von Medientypen. Es ermöglicht Webdesign nicht nur für den Bildschirm. So ist es per CSS möglich, die Sprachausgabe von Webseiten zu beeinflussen (aurale Stylesheets), die Druckausgabe einer Website unterschiedlich von der Bildschirmausgabe zu gestalten (print-Stylesheets), die Ausgabe auf einer Braille-Zeile zu steuern (für Blinde oder stark Sehbehinderte Nutzer) oder Layouts zu erstellen, die auf die Bedürfnisse von PDAs zugeschnitten sind (handheld media). Und das alles ohne verschiedene Versionen eines Dokuments vorhalten zu müssen. Alles ist aus einer Datei möglich.
Mehr gestalterische Möglichkeiten
CSS bietet nicht nur einfach die gleichen oder äquivalente Gestaltungsmöglichkeiten wie HTML-Formatierungen. Es bietet in vielen Bereichen weitaus größere Flexibilität und nie gekannte Eingriffsmöglichkeiten.
Vor allem im typografischen Bereich kennt CSS eine Vielzahl von Eigenschaften, die bislang nur aus dem DTP-Bereich bekannt waren und dem Web-Gestalter so nicht zur Verfügung standen. So sind z.B. Einrückungen möglich (text-indent), fallende Schatten (text-shadow) oder Kontrolle der Wort- und Buchstabenabstände (letter-spacing bzw. word-spacing und vieles mehr.
CSS ermöglicht komplette Designänderungen um Handumdrehen
Dadurch, dass alle Styling- und Layout-Eigenschaften komplett im Stylesheet liegen, das sich optimaler in einer einzigen externen Datei liegt, die von allen Seiten einer Website eingebunden wird, werden Designänderungen schnell möglich. Man muss schliesslich nur an einer Datei einen Wert ändern, und schon sind auf der kompletten Site z.B. die Überschriften in einer anderen Schriftart.
Auch bei Redesigns verringert sich so logischerweise der Aufwand. Es muss lediglich ein neues Stylesheet erstellt werden, der HTML-Code braucht idealerweise nicht geändert zu werden. Das bedeutet eine dramatische Zeitersparnis! Ein eindrucksvolles Beispiel dafür ist der CSS Zen Garden, wo Grafikdesigner aus aller Welt einem immergleichen HTML-Dokument per CSS viele vollkommen verschiedene, grafisch Attraktive Designs gegeben haben.
Doch nicht nur das: Design-Änderungen sind auch "On-the-fly" möglich. Eine Seite kann mehrere Stylesheets benutzen, zwischen denen der Benutzer schnell wechseln kann, und das ohne die Seite neu zu laden.
CSS ermöglicht mehr Barrierefreiheit
Um wirklich barrierefreie Webseiten herzustellen, muss ein hoher Aufwand betrieben werden. Oftmals wurden sogar eigenes sog. "text-only"-Versionen erstellt um den vielfältigen Bedürfnissen behinderter Nutzer gerecht zu werden.
Durch die Trennung von Gestaltung und Struktur wird barrierefreies Webdesign wesentlich vereinfacht. Es ist ein leichtes dem Nutzer verschiedene Stylesheets zur Auswahl zu geben, zwischen denen er dann wählen kann. Speziell angepasste Stylesheets etwa mit höherem Kontrast oder größerer Schrift können die barrierefreiheit einer Website verbessern. Vor allem aber wird dem Nutzer mehr Einfluss eingeräumt. So kann ein Websurfer die Gestaltung von Webseiten die er besucht etwa durch speziell auf seine individuellen Bedürfnisse angepassten sog. User-Stylesheets verändern. Durch konsequenten Einsatz von CSS wird auch die Ausgabe durch etwa Sprachausgabe oder Braillezeilen vereinfacht.
CSS ermöglicht eine bessere Suchmaschinenplazierung
Auch dieses Argument macht zuerst stutzig. Doch es ist wahr, auch wenn es wieder einmal eher eine "Nebenwirkung" von CSS ist. Durch den Strukturierteren HTML-Code der mit der Einführung von CSS einhergeht (wenn man den Ratschlag denn beherzigt) kann sich das Suchmaschinenranking verbessern.
Google, der fast-Monopolist bei den Suchtechniken bewertet Seiten höher, die die gesuchten Stichwörter weit oben im Quelltext stehen haben. Noch höher wird es bewertet, wenn diese etwa in Überschriften vorkommen, die durch <hn> (h1, h2, h3...)-Tags ausgezeichnet werden. Es gibt sogar sogenannte "Suchmaschinenoptimierer" die extra solche Versionen von Websiten (oft auch mit falschen oder zusätzlichen Stichwörtern) erstellen und damit die Suchmaschinen "füttern" um so höhere Positionierungen zu erreichen. Doch die Betreiber lassen so einen "Betrug" auf lange Sicht nicht zu.
Wenn man viel visuelles Markup verwendet, <font>-Tags oder komplexe Layouttabellen, verschiebt sich der wichtige Inhalt weiter nach unten, die Suchmaschine bewertet ihn in Folge dessen schlechter. Mit schlankem, suchmaschinenoptimiertem HTML-Code in Kombination mit CSS sind genauso komplexe und grafisch anspruchsvolle Designs möglich, aber höhere Platzierungen.
Obendrein noch ein spezifischer Vorteil von CSS: durch die völlige Abstraktion von Struktur und Aussehen ist es mit CSS-Positionierung möglich Inhalte, die im Quellcode weit oben stehen und so hoch bewertet werden, im Layout woanders unterzubringen.
Einsparungen bei den Traffic-Kosten
Dieser Punkt trifft kleine Webseitenbetreiber nicht so sehr wie große Websites mit vielen Besuchern. Bei diesen besteht der größte Teil der Hosting-Kosten aus dem verursachten Datenverkehr. Konsequenter Einsatz von CSS verringert die Dateigrößen der einzelnen Webseiten signifikant. Multipliziert mit vielen tausenden von Benutzern, kann dies enorme Einsparungen bei den laufenden Kosten bedeuten. So rechnet etwa der US-Sportfernseh-Sender ESPN mit einer Einsparung von 730 terabytes pro Jahr an Datenverkehr auf ihrer Website durch den Umstieg auf Standards-basiertes Design mit CSS.
CSS verringert die Wartungskosten
Für kleinere Websites, Private Homepages oder die meisten Firmenpräsenzen ist dieser Punkt vielleicht viel ausschlaggebender. Musste man früher oft viel Geld an Agenturen bezahlen, damit diese die Webseiten unterhalten und updaten, ist dies durch den vereinfachten Code einfacher geworden. Waren Redesigns früher teuer und Zeitaufwendig, sind Änderungen der visuellen Erscheinung nun im Nu möglich. Es bedeutet eine wesentliche Arbeitserleichterung, damit Zeit- und Geldersparnis, eine einfacher wartbaren Website zu besitzen. CSS ermöglicht eben dies.
Schlusswort
Diese Liste sollte ziemlich klar machen, was man mit dem Einsatz von CSS alles erreichen kann. Doch Achtung: machen Sie nicht den Fehler, CSS als Allheilmittel anzusehen. Die 10 genannten Punkte sind keine notwendigen Folgen des Einsatzes von Stylesheets. Sie sind vielmehr Ziele, die bei bei richtigem Einsatz von CSS erreicht werden können.
Sie erreicht man auch nicht durch den Einsatz von CSS alleine. Es ist lediglich ein Baustein im Gebäude. Gut Strukturiertes, simples HTML gehört genauso dazu wie eine gehörige Portion Erfahrung. Doch gradueller Umstieg auf moderne Webstandards ist der erste Schritt. Je mehr diese beherzigt werden, desto einfacher wird es.
Mit CSS kann man genau die gleichen Fehler machen die zu aufgeblähtem HTML-Code mit Tabellenlayout und Font-Tag-basierter Gestaltung geführt haben. Das Erreichen der Ziele erfordert das Schreiben von nicht fehlerhaftem HTML-Code. Es erfordert das Schreiben von schlankem, strukturell sinnvollem Code. Kurzum: es erfordert eine Menge Erfahrung und Kompetenz. Kompetenz die zumindest teilweise zu vermitteln sich auch diese Website auf die Fahnen geschrieben hat. Kompetenz aber auch, die nicht vom Himmel fällt.