21. November 2005 in Journal » Webstandards
Plädoyer für CSS
Trennung von Struktur und Layout
Die strikte Trennung von Struktur und Layout macht es sehr leicht Änderungen am Aussehen einer Website vorzunehmen. Außerdem kann man dem Besucher einer Seite eine Auswahl an verschienen Layouts anbieten — und das ohne große Mühe. Auch Style Sheets für Handhelds (PDAs, Handys usw.) und Drucklayouts sind sehr benutzerfreundlich. Das Drucken wird für den Besucher günstiger und auf Handhelds wird der Besuch zu einem Vergnügen.
CSS ist Kunst
Es gibt zahlreiche Techniken die es z.B. ermöglichen, alle Auszeichnungs-Elemente (Überschriften, Links usw.) durch Bilder zu ersetzen (diese Technick wird Image-Replacement genannt). Das macht die ganze Website meist viel anschaulicher. Auch die Typographie kann optimiert werden, um den Lesekomfort zu verbessern.
Viele Galerien zeigen es — CSS kann so schön sein. Als bestes Beispiel dient wohl der CSS Zen Garden. Dort findet man über 100 verschiede Designs für ein und dasselbe XHTML-Dokuments — eins schöner als das andere.
Zugänglichkeit
Das Anbieten eines kontrastreichen Layouts macht auch den Besuch sehschwacher oder farbenblinder Menschen leicht. Das Unterscheiden von besuchten, externen oder markierten Links optimiert die Navigation der gesamten Seite erheblich.
Geschwindigkeit
Moderne Browser laden eine CSS-Datei nur einmal und prüfen dann nur noch den Größenunterschied zwischen der bereits geladenen und der Version auf dem Webserver. So gewinnt die Webpräsenz auch mit einer Modem-Verbindung Geschwindigkeit.
Eine Studie besagt, dass ein Besucher nicht länger als 15 Sekunden auf den Seitenaufbau wartet. 3 Sekunden sind optimal und 8 Sekunden noch akzeptabel. Möchten Sie nur wegen einer aufgeblähten Website auf Besucher, also auch Kunden, verzichten?
Eine Website kommt mit einer CSS-Datei komplett aus. Dadurch erreicht man ein gleichmäßiges Layout auf jeder Seite. Außerdem spart man sich das lange Suchen in allen Seiten nach einer bestimmten Style-Anweisung, somit wird auch eine große Änderung der Website in einer erstaunlich kurzen Zeit möglich.
Diskussion geschlossen
Die Kommentarfunktion ist vom 16. bis zum 25. August 2008 deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
18 Kommentare
Martin Labuschin am 21. November 2005 #
Sorry, dass mir die Rechtschreibfehler im Dokument mir so spät aufgefallen sind. Habe jetzt aber alle verbessert :)
sas171 am 21. November 2005 #
Die druckfreundliche Version ist nicht Valid: "unescapted ampersand".
"TIDY" rockt =)
Martin Labuschin am 21. November 2005 #
Ist valid, war ja nur eine warnung, aber ich habs verbessert. danke für den tipp!
Günter am 21. November 2005 #
Zum ersten Absatz muss ich gleich widersprechen. CSS ist nicht schwer und kompliziert - wegen den Eigenheiten der jeweiligen Browser bestenfalls komplizierter als nötig. Man muss nur einmal den ersten, entscheidenden Schritt machen und die Trennung von Inhalt und Format verinnerlichen. Das Schwierige ist eher ein ansprechendes Layout zu kreieren, nicht es in CSS umzusetzen. Hässliche CSS-Sites gibt es nämlich auch - leider.
Martin Labuschin am 21. November 2005 #
Du kannst doch nicht wirklich von dir behaupten, dass es dir leichter fiel als das damalig aktuelle Tabellen-Design, oder? Naja, manchen fällt es leicht anderen nicht.
Sicherlich ist es genau nach diesem von dir genannten Verständnis Format und Inhalt' leicht CSS zu lernen. Doch genau dieses Denken beginnt erst nach dem Kennenlernen von CSS.
Günter am 21. November 2005 #
Doch, ich denke, dass die Gestaltung mit CSS einfacher ist, als mit Tabellen. Schon allein der Irrsinn, dutzende Blind-Gifs zum Positionieren, Bilder, die du mit Image-Ready erst aufwändig zerteilst, nur um sie dann mit ebenso viel Aufwand wieder zusammen zu setzen et cetera. Meiner Meinung nach ist das viel komplizierter als CSS. Hinzu kommt, dass ich die Erfahrung gemacht habe, dass sich eine CSS-Datei auch schneller mit einem Texteditior bearbeiten lässt, als mit den dafür vorgesehenen Funktionen in Dreamweaver. Bei Tabellen, vor allem, wenn sie dann auch noch verschachtelt sind, führt andereseits fast kein Weg an einem WYSIWYG-Editor vorbei.
Martin Labuschin am 21. November 2005 #
und genau dieser ist doch (leider) leicht im umgang :) doch ledier falsch. aber ich bleibe dabei: manchen fällt es leichter als anderen. warum gibt es denn soviele tabbellenseiten wohl noch? doch nicht weil sie schwer zu machen sind ;)
tomsw am 21. November 2005 #
Ein sehr ansprechendes CSS-Layout zu entwickeln, welche nicht nur vom Kontrast sprich vom Aussehen her selber zusagt, sondern die dazuhgehörige Semantik vergessen manchmal sehr viele Designer.
Zum Glück hat mir dabei Martin sehr gut helfen können (in Semantik).
Ich hoffe ich kann auch nach meinem "2. Redesign" überzeugen, welches eigentlich kein wirkliches Redesign ist, sondern eher eine Neu-Strukturierung der WP-Umgebung.
Grüsse, Tom
Martin Labuschin am 21. November 2005 #
wie war das nochmal ...? Good Designers Redesign, Great Designers Realign http://www.alistapart.com/articles/redesignrealign
tomsw am 22. November 2005 #
Du solltest die Artikel vielleicht auch lesen, nicht nur empfehlen ;)
Martin Labuschin am 22. November 2005 #
Wieso? Damit wollte ich sagen, dass du wohl eher zu den Realigners gehörst ;)
tomsw am 22. November 2005 #
Achso, naja :p
Darren am 22. November 2005 #
@tomsw
Wieso hast du denn die Live-Suche weggestrichen?
Ist diese schon fertig oder lässt du das weg?
Wäre natürlich schade, hätte das gerne mal gesehen.
tomsw am 22. November 2005 #
Es ist so dass die Live Suche ein guter Freund implementiert hätte, da er jetzt aber an einem anderen "Projektchen" arbeitet findet er momentan dazu keine Zeit.
Ich denke ich werde die LiveSuche später noch einbauen, welche ich hoffentlich mit meinem eigenen Wissen realisieren möchte (kaufe Bücher und so :p)
Aber ganz aus der Geschichte gestrichen ist es nicht, denke ich.
Darren am 23. November 2005 #
Gut, dann werd ich mich weiterhin fleißig in Geduld üben.
Viel Erfolg.
B. Scheuert am 23. November 2005 #
Hallo,
@Günter
Was glaubst Du macht man mit grafisch aufwendigen Sites, die CSS verwenden/anwenden? Die zerschneiden Ihr Template genauso. Angefangen habe ich mit FrontPage und heute mache ich alles händisch, meine Browser sind meine WYSIWYG Anzeiger. Ich persönlich mag es so, denn dein Programm ist nur so gut wie der, der vor dem PC sitzt und wer was lernen will, der tippt sich die Figer blutig. Die Verwendung verschiedener Editoren erleichtert hier und da das Erstellen, aber sie sind nicht gerade verständnisfördernd und machen alle samt einen sch... Quelltext. Hinzukommt das gute WYSIWYG-Editoren auch gutes Geld kosten, das sind wieder 3 - 5 gute Bücher zum Lernen!
Martin Labuschin am 23. November 2005 #
Naja, nicht nur vor dem PC *g*Ich schreibe auch lieber selbst, statt mich auf irgendwelche wysiwyg-editoren zu verlassen. da ist die fehlersuche bei browser-cross-designs extrem schwierig. und man kann sich code sparen ohne ende. kommentare sind auch super, sie helfen vergangenes wissen wieder zu verstehen, oder arbeiten weiterzugeben.
Jeena Paradies am 1. Dezember 2005 #
Nein, das ist keineswegs leichter. Ich habe gerade mit einem Tabellendesign zu kämpfen, da das vorgegebene Design nicht mit herkömlichen CSS alleine hinzubekommen ist und ich es nicht geschafft habe den Auftraggeber ein anderes Design zu wählen. Ich habe nie mit Tabellen gearbeitet und finde sie für Layoutzwecke furchtbar umständlich zu benutzen.