Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Webseiten sind keine Gemälde

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Webseiten sind keine Gemälde

Das klassische Tabellenlayout hat ausgedient. Moderne Browser – auch der Internet Explorer – können hinreichend mit CSS umgehen, dass keine Layoutkrücken mehr benötigt werden. Es ist Zeit, sich an die Anwendung der Webstandards zu gewöhnen und moderne Webseiten zu erstellen.

Modernes Webdesign mit XHTML und CSS

HTML wurde entwickelt, um Texte zu strukturieren. Mithilfe der Tags zeichnet man Strukturelemente einer Seite aus, nicht das Layout. Tags umschließen (im Normalfall) Seitenteile und geben den Browsern so den Hinweis, um welches Strukturelement einer Seite es sich hierbei handelt. Auf diese Weise erkennen Browser (und Suchmaschinen!) Überschriften, Absätze, Listen, Bilder und Tabellen.

Die visuelle Präsentation erledigen hingegen Stylesheets (CSS). Solche Stilvorlagen kennt man auch bei Freehand, QuarkXPress oder Word (Formatvorlagen). Diese theoretische und klare Aufteilung hapert in der Realität an den Browsern. Insbesondere in den Kindertagen des Web ging die CSS-Unterstützung in den Browsern kaum über die Einfärbung von Texten hinaus.

Mit der Kommerzialisierung des Web wurden Wege gesucht, interessante Layouts zu erstellen und Unterhaltung statt Information zu verbreiten. Tabellen wurden zu Layoutzwecken missbraucht und Schriften wurden direkt per HTML (<font>) definiert. Man lehnte sich damit stark dem Printdesign an, was nur natürlich war, schließlich kannten die Designer nichts anderes. Mit der Veröffentlichung von XHTML im Jahr 2000 versuchte das W3C, den Focus wieder stärker auf die Trennung von inhaltlicher Struktur und Layout zu setzen.

Aber, einmal gelernt tun sich die meisten Designer und Webentwickler heute schwer damit, sich vom Tabellenlayout zu lösen. Die eingeschränkte CSS-Unterstützung in den meisten Browsern und die teilweise grob fehlerhafte Implementierung im marktführenden Internet Explorer (Windows) führen regelmäßig zu Komplikationen. Da ist es für die meisten Webentwickler einfacher, in gewohnten Fahrwassern zu bleiben. Doch ein Umdenken in Richtung qualitativ besserer Webseiten ist notwendig, damit das Web erwachsener wird.

Webseiten

Webseiten sind Texte, keine Gemälde. Deshalb ist die Grundlage für moderne Seiten ein Umdenken im Erstellungsprozess einer Webseite. Man sollte vom Inhalt, nicht von der Optik, der Präsentation her denken. Es ist deshalb wichtig, dem Inhalt eine semantisch korrekte Struktur durch HTML (oder XHTML) zu verpassen. Tabellarische Daten gehören in eine Tabelle, Listen werden mit UL, OL oder DL ausgezeichnet usw. Mit (X)HTML wird also ausgezeichnet, was etwas ist, nicht wie es aussehen soll. Wird die Optik dank eines rückständigen Browsers nicht fehlerfrei transportiert, könnte so zumindest noch der Inhalt ankommen.
Zudem sollte man immer im Hinterkopf haben, dass es keine absolute Sicherheit für die Optik einer Webseite gibt. Nicht nur die unterschiedlichen CSS- und HTML-Fähigkeiten der Browser sind dafür verantwortlich. Formularelemente werden beispielsweise vom Betriebssystem zur Verfügung gestellt und kein Browser erlaubt es, diese Elemente nach Belieben umzugestalten. Auch die sichtbare Fläche einer Webseite ist in allen Browsern uneinheitlich. Zudem nutzen Browser selber Stylesheets, um die HTML-Elemente formatiert auszugeben. Diese Stylesheets unterscheiden sich teilweise stark voneinander, wie man im Vergleich einer einfachen HTML-Seite zwischen dem IE6 und Firefox 1.0.4 sieht. Zu guter Letzt kann der User durch ein User-Stylesheet, das Einstellen größerer oder kleinerer Schriften im System oder im Browser sowie durch die Verkleinerung der Browseroberfläche mittels nachinstallierter Browserleisten Einfluss nehmen.

Vergleich einer ungestylten Seite in Firefox 1 und IE 6

Die drei Schichten-Theorie: Struktur, Design, Dynamik

Eine Webseite kann aus drei Schichten bestehen. Optimal ist es, wenn die unterste Schicht alle relevanten Informationen beinhaltet und ohne die beiden anderen existieren kann. Die unterste Schicht ist der Seiteninhalt, dessen Information durch HTML oder XHTML strukturiert wird. Die so strukturierte Information kann durch CSS gestaltet werden (zweite Schicht). In der dritten Schicht kann durch JavaScript Dynamik in die Webseite gebracht werden. Eine Vermischung der drei Schichten sollte tunlichst vermieden werden. Doch noch viel zu oft werden ganze Texte oder Menüs mit JavaScript on-the-fly erzeugt. Hat man JavaScript deaktiviert, wie es gerade in Firmennetzwerken passiert, ist man von Teilen der Webseite oder möglicherweise der gesamten Website ausgeschlossen. Auch das Erzeugen von Inhalten durch CSS, das theoretisch möglich ist (nur der Internet Explorer kann es mal wieder nicht) ist nur dann sinnvoll, wenn durch die Deaktivierung von Stylesheets keine relevanten Informationen fehlen. Die Vorteile dieses modernen Webdesign-Ansatzes, der Befolgung der Webstandards, sind:

  1. Der Code wird übersichtlicher. Es ist nicht mehr nötig, sich durch mehrfach verschachtelte Tabellen kämpfen.
    Suchmaschinen können sich leichter im Quellcode orientieren und demnach auch die Seite besser verschlagworten.
  2. Die Seite wird schneller geladen.
  3. Die Seite wird meist leichter, die Bandbreite und damit womöglich der eigene Geldbeutel, wird geschont. Alternative Geräte wie PDAs oder Screenreader haben weniger Probleme, den Inhalt zu erfassen.

Design fürs Internet

Im Gegensatz zum klassischen Printdesign leben wir mit der großen Unsicherheit, wie der Betrachter die Seite zu sehen bekommt. Wir können noch unsere eigenen Testgeräte und die des Kunden erfassen, aber wie der einzelne Surfer unsere Seite sieht, können wir nicht mit Sicherheit wissen. Wir können zwar ein paar Informationen anhand der Serverstatistiken (falls eine Seite schon existiert) gewinnen, doch viele weiterführende Informationen fehlen uns.

Wir können bei einer schon bestehenden Seite erfahren, mit welchen Bildschirmauflösungen, Betriebssystemen und Browsern die Surfer vorbeikommen. Auch die Farbtiefe erfahren wir und von woher sie auf unsere Seite kommen. Aber wir wissen nicht, ob auf dem Computer extra große Schriften eingestellt wurden, ob im Browser vielleicht sogar größere Schriften eingestellt wurden. Wir wissen nicht, ob mit maximiertem Browser gesurft wird oder mit einem verkleinerten Fenster.

Diese Ungewissheit sollte uns davon abhalten, Gestaltungen zu erstellen, die bei geringer Abweichung gegen unser angenommenes Ideal auseinanderfallen oder nicht mehr zugänglich sind. Auch die exzessive Benutzung von Bildern sollten wir hinterfragen, insbesondere wenn diese nur Texte darstellen. Texte sind Texte, Bilder sind Bilder. Es sollte so gut wie möglich vermieden werden, Texte als Bilder zu verwenden. Wenn überhaupt, dann nur bei Überschriften. Hier sollte dann auf die ALT- und TITLE-Attribute geachtet werden. Dadurch haben wir auch den Vorteil, dass Überschriften – wenn sie nicht als Bild, sondern als Text erstellt werden – von den Suchmaschinen erfasst werden und dadurch unsere Seite leichter gefunden werden kann. Zudem ermöglicht es den Nutzern alternativer Darstellungsmedien – Screenreader für Blinde oder PDAs für den gestressten Manager – den Inhalt einer Seite zu erfassen. Die Seite lädt schneller und es werden weniger Daten übertragen, was bei stark frequentierten Seiten eine echte Kostenersparnis bedeuten kann.

Je flexibler ein Layout angelegt ist, desto weniger Schwierigkeiten dürften in der Praxis auftauchen. Pixelgenaue Layouts gehen oft ins Auge. Im Gegensatz zum Print kann man die Umgebung der Seite nur schlecht kontrollieren. Popup-Fenster, die auf eine genaue Pixelgröße festgezurrt werden, lösen das Problem nicht wirklich. Auch die Darstellung in diesen Fenstern kann in den meisten Browsern beeinflusst werden. Zudem erschweren Popup-Blocker die Arbeit, und nicht jeder User mag es, wenn ihm die Kontrolle über seinen Browser genommen wird.

Auch wenn es sich manchmal so anhört, als sei mit dem Wechsel zu tabellenlosem Design die Welt komplizierter geworden, stimmt dies so nicht. Der Verzicht auf Layouttabellen zwingt zu einer Betrachtung des Seiteninhaltes, nicht der Optik und macht so die Sicht klarer auf den eigentlichen Charakter der Seite. Zudem öffnen sich auch neue Möglichkeiten mit CSS, die man in dieser Form mit einem puren Tabellendesign nicht hat. Mittels CSS können beispielsweise Objekte gestapelt werden. So könnte man zwei Bilder sich überlappen lassen oder Text über ein Bild legen.

Grundlagen von CSS

Mit CSS geben wir der Struktur der XHTML-Seite Form und Gestaltung. Wir haben dabei vier Möglichkeiten, um die Gestaltung an das XHTML-Objekt zu bringen.

  • Über die direkte Ansprache eines Tags.
  • Über die Ansprache einer Klasse.
  • Über die Ansprache einer ID.
  • Über die Ansprache einer Pseudoklasse (bspw. a:hover)

Im Zusammenhang mit CSS erlangen zwei XHTML-Tags eine besondere Bedeutung: DIV und SPAN. Diese beiden Tags sind fast eigenschaftslos, denn sie bezeichnen nicht wie z.B. TABLE eine Tabelle oder wie P einen Absatz. Beide grenzen schlicht Bereiche ein. Der Unterschied zwischen beiden liegt darin, dass DIV vor und nach sich einen Absatz erzeugt, SPAN hingegen nicht. Deshalb nennt man DIV ein Block-Element, SPAN ein Inline-Element.

Klassen und IDs

Da es sehr wahrscheinlich ist, dass man nicht immer alle Tags gleichbehandeln möchte, gibt es zwei Möglichkeiten, zusätzliche Unterscheidungen einzufügen: Klassen und IDs.
Eine Klasse definiert man in XHTML, indem man dem betreffenden Tag das Attribut class mitgibt und diesem einen Namen gibt. Beispiel:

<p class="eingerueckt">Hier steht Text.</p>

Eine Klasse spricht man durch ihren Namen mit einem vorangestellten Punkt an. Sie kann mehrfach auf einer Seite vertreten sein und ist zudem nicht an einen Tag gebunden. Auf der gleichen Seite kann die Klasse eingerueckt beispielsweise auch noch einem Listenelement und dem Tag <code> zugewiesen werden.
Eine ID hingegen ist einmalig auf der Seite. Sie wird durch eine vorangestellte Raute im CSS-Code angesprochen. In XHTML gibt man dem betreffenden Tag das Attribut id mit, dem man einen Namen zuweist. Beispiel:

<p id="fussnote">Hier steht mal wieder Text.</p>

Der CSS-Code für beide Beispiele könnte so aussehen:

.eingerueckt {margin-left: 10px;}
#fussnote {border-top: 1px solid black; font-size: 10px;}

Zusätzlich zur direkten Ansprache eines Objektes – sei es ein Element, eine Klasse oder eine ID – kann man auch verschachtelte Objekte ansprechen. Dafür muß man sich eine XHTML-Datei einfach anhand eines Baumdiagrammes vorstellen. Wenn man einen Mozilla oder den neuesten Firefox besitzt, kann man dies anhand des DOM-Inspektors auch tun. Eine Webseite könnte als Baumstruktur aussehen wie in der folgenden Abbildung:

Eine einfache Dokumentenstruktur als Beispiel für die Kaskade

Das oberste Element einer Seite ist immer <body>, denn dieser Tag umschließt den im Browser sichtbaren Bereich der Seite (mit Ausnahme des Seitentitels). Darunter kommen, nach außen gleichwertig, Tags, die von keinen weiteren Tags umschlossen werden. Innerhalb dieser können sich wiederum Tags befinden. So wurde in diesem Beispiel der Tag span innerhalb eines Absatzes benutzt. Absätze befinden sich einmal innerhalb eines DIV-Containers und einmal auf der obersten Ebene. Dieses Schema zeigt uns deutlich, wie wir bestimmte Tags direkt ansprechen können, in diesem Fall auch ohne die Nutzung von IDs oder Klassen.
Nehmen wir an, der Absatz auf der obersten Ebene soll einen schwarzen Hintergrund und eine weiße Schrift bekommen, der in das DIV geschachtelte Absatz hingegen einen roten Hintergrund und weiße Schrift bekommen. Wir würden folgendes notieren:

p {background-color: black; color: white;}
div p { background-color: red; color: white;}

Die erste Zeile können wir als „Alle Absätze sollen einen schwarzen Hintergrund und eine weiße Schriftfarbe haben“ lesen. Die zweite Zeile lautet hingegen: „Alle Absätze innerhalb eines DIVs sollen einen roten Hintergrund und weiße Schrift haben.“ Wichtig bei der zweiten Zeile ist, dass zwischen dem DIV und dem P ein Leerzeichen ist. Stünde dort ein Komma, handelte es sich um eine Aufzählung, die man einsetzen sollte, um den CSS-Code übersichtlicher zu gestalten. Wäre keines von beiden vorhanden, wüsste der Browser nichts damit anzufangen, denn der Tag divp existiert nicht.

Vererbung

Wie beim DOM nutzen wir auch in CSS die Begriffe "Eltern-Element" und "Kind-Element". Jedes Element, das ein anderes enthält, ist diesem gegenüber das Elternelement. <ul> ist demnach für jedes Listenelement <li> innerhalb seiner Liste das Elternelement. Diesen Umstand kann man sich zu Nutze machen, indem man Eigenschaften vererbt. So kann man einer Liste über das <ul>-Element eine globale Schriftart und -größe mitgeben. Selbstverständlich kann man trotzdem einzelne Ausnahmen von dieser Regel definieren. Allerdings kann man nicht alle Eigenschaften vererben, so z.B. nicht die Eigenschaften border und background.
Die Vererbung kann Stylesheets kompakt und lesbar machen. Nicht jeder Fall muss mehr dezidiert erwähnt werden.

Ein Reset am Anfang

Wir haben zu Beginn gesehen, dass Browser von sich aus jede ungestylte HTML-Seite interpretieren. Nur tun sie dies nicht einheitlich. So haben Überschriften unterschiedliche Schriftgrößen, Zeilenhöhen, Abstände nach unten. Um sich nicht unnötig Probleme einzuhandeln sollte man deshalb am Anfang eines jeden Stylesheets eine Art Reset vornehmen. Das ist weder ein Zauberwerk, noch bedarf es viel Code. Mit

* {
margin: 0;
padding: 0;
}

nehmen wir allen Elementen einer Seite sowohl den Innen- (padding) als auch den Außenabstand (margin). Nachfolgend fügen wir dann im Stylesheet die jeweiligen gewünschten Abstände hinzu. Insbesondere bei Listen ist diese Kombination wichtig. Denn die einen Browser nutzen padding für den Einzug der Listenelemente von Links, die anderen nutzen margin. Mit

p, li, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1em;
}

geben wir allen Überschriften, Listelementen und Absätzen die gleiche Schriftgröße und beseitigen Fettformatierung bei Überschriften. Die hier vorgeschlagene Schriftgröße ist ein Beispiel.

Trotz aller Unzulänglichkeiten der heutigen Browser, insbesondere des Internet Explorer, ist ein modernes Design ohne Layouttabellen mit CSS keine Hexerei. Die Vorteile eines CSS-Designs überwiegen eindeutig das traditionelle Tabellenlayout. Mit einer sauber anhand von Webstandards erstellten Seite ist dann auch eine barrierefreie Umsetzung keine Hexerei mehr. Und da manche (potentielle) Kunden gesetzlich zu barrierefreien Webseiten verpflichtet sind, ist dies für jeden professionellen Webworker von Interesse.

Zum Autor:

Jens Grochtdreis ist Senior Frontend Engineer bei SinnnerSchraderStudios in Frankfurt. Er ist Begründer der WebKrauts und führt leidenschaftlich gern sein Weblog, in dem Webstandards und vor allem CSS die Hauptrolle spielen.

Zum Artikel

Dieser Artikel erschien im Original in der Zeitschrift "PHPMagazin. Er erscheint hier mit freundlicher Genehmigung des Verlages und des Chefredaktuers, Björn Schotte.

Kommentare

Heiko
am 01.09.2006 - 12:36

Glückwunsch zum Artikel! Eine wirklich für jedermann gut verständliche Zusammenfassung des Themas, dass in Zukunft hoffentlich noch mehr Berücksichtigung bei der Umsetzung von Webprojekten finden wird.

Permanenter Link

Martin Kliehm
am 01.09.2006 - 12:53

Saubere Arbeit, Jens! Lediglich die Klasse .eingerueckt ist mir aufgefallen, weil sie nicht generisch die Funktion des Absatzes beschreibt (so wie die ID #fussnote), sondern die Optik. Andererseits ist eine vernünftigere Beschreibung in dem kurzen Beispiel auch nicht erklärbar. ;-)

Permanenter Link

Lars Krahl
am 01.09.2006 - 15:18

Bookmarked! Sehr guter Einstiegsartikel; ich werde in Zukunft auf diesen verweisen, wenn wieder einer seine tabellenbasierte Website zu Bewertung stellt.

Permanenter Link

Arne Kriedemann
am 01.09.2006 - 15:19

Sehr schöner Artikel!

Was fällt mir dazu ein?

David Siegels Einlassung:

The web is ruined and I ruined it!

1. Absatz, letzter Satz:

How would you like to visit the Louvre with images turned off?

Und dieser Artikel jährt sich dieser Tage zum neunten Mal!

;o)

Permanenter Link

Mike
am 01.09.2006 - 15:31

Webseiten sind zwar nach heutigen Standards keine Gemälde mehr, dafür mutieren sie immer mehr zu unansehnlichen und unleserlichen Textwüsten, deren Benutzeroberfläche verzweifelt die gängigen Betriebssysteme zu imitieren versucht. Bei aller überschwenglichen Euphorie wird gerne übersehen, daß Designer in der Regel nicht unter Gefühlsarmut leiden und ihre kreativen Ergüsse irrationaler Natur sind. (X)HTML & Co. ist aber eine Erfindung von verklemmten Wissenschaftlern, deren ästethisches Empfinden sich allerhöchstens in der Selbstverliebtheit ihrer eigenen Worte widerspiegelt.

Die Einführung der sogenannten Webstandards hat die Qualität des Designs nicht verbessert, im Gegenteil; Millionen von Webseiten gleichen sich wie ein Ei dem anderen. Dabei sollen Standards doch als Hilfsmittel oder zur Orientierung dienen und nicht um der Vervielfältigung der eigenen Ideenlosigkeit Vorschub zu leisten.

Permanenter Link

Siegfried
am 01.09.2006 - 21:15

Hi,
sehr gute Einführung. Allerdings ist auch mir gleich das class="eingerückt" aufgefallen. Und bei einem zweiten Durchlesen generell, daß die Verbindung zwischen IDs und Klassen einerseits und css-basierten visuellen Effekten andererseits viel zu stark ist. Es ist ein großer Fehler, einen Klassennamen oder eine ID genau darum zu vergeben, weil man so ein "handle" für css bekommt. Klassen und IDs sind dazu da, die Textstrukturierung zu präzisieren, oder im Falle von div und span, überhaupt erst zu definieren. Textstrukturierung, nicht Präsentation. Wenn man Klassennamen als Handles für visuelle Gestaltung auffasst, dann sind Klassennamen wie "eingerückt" zwangsläufig und logisch. Aber damit hat man die Trennung von Inhalt und Layout zur Farce gemacht. Ein div class="eingerückt" besitzt keine Trennung von Bedeutung und Layout. Genauer: Er hat überhaupt keine Bedeutung, sondern nur ein Layout. Und das nicht in einer externen, getrennten Datei, sondern im html-Markup. Auch, wenn das Layout in einer getrennten Datei dann näher ausgeführt wird, der Kern des Layouts ist in diesem Fall Bestandteil des html Markups. Nicht Sinn der Sache.
Letztendlich muß man im Kopf die zwangsweise Verheiratung von Klassennamen und css aufgeben.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 01.09.2006 - 21:37

Hallo Mike, ich glaube nicht, dass das Erscheinungsbild von Webseiten durch die Technologie geprägt ist. Webseiten gleichen sich, weil sie benutzbar sind, weil der Ottonormalverbraucher dadurch jede Webseite benutzen kann und nicht erst lernen muss die Webseite zu benutzen. Das ist ein Vorteil.

Zudem beschneiden Webstandards ja nicht in der Kreativität. Auch eine Webseite mit animierten GIFs und Under-Construction-Grafiken kann valide sein und Webstandards entsprechen. Genauso gibt es Webseiten, die keinen guten Code haben und trotzdem gut aussehen.

Wenn du dich mit dem Thema befasst und Galerien wie den CSSZenGarden (http://csszengarden.com/) oder CSSMania (http://cssmania.com/) anschaust wirst du auch unter standardsbasierten Webseiten das ein oder andere Sahnestückchen finden.

Permanenter Link

Kai Laborenz
am 03.09.2006 - 09:57

@Mike: Was will uns der Autor wohl sagen?

Bei aller überschwenglichen Euphorie wird gerne übersehen, daß Designer in der Regel nicht unter Gefühlsarmut leiden und ihre kreativen Ergüsse irrationaler Natur sind...

Design ist also irrational? Da verwechselt wohl jemand Design und Kunst.
Den Absatz über die Wissenschaftler muss ich gar nicht kommentieren, er spricht für sich. Komisch, das solche Postings fast immer von Leuten stammen, die keinen identifizierbaren Namen oder eine Webadresse angeben. Naja, vielleicht aber auch nicht.

Ansonsten hat die Verwendung von Webstandards natürlich nichts mit mangelnder visueller Attraktivität eines Designs zu tun - nur damit, dass grundlegende handwerkliche Regeln beachtet werden. Wer das als Ausrede für schlechtes Design verwendet hat einfach noch erheblichen Schulungsbedarf in Sachen Webstandards.

Permanenter Link

ralph
am 03.09.2006 - 11:14

Sehr guter Artikel für den Einstieg, den man guten Gewissens weiterreichen kann :-)

Permanenter Link

Mike
am 03.09.2006 - 12:23

Hallo Eric,

es ist völlig richtig und meines Erachtens für alle Bereiche erstrebenswert, wenn sich dem Betrachter der Inhalt oder die Information durch die Gestaltung erschließt. Andererseits war und ist das Web von der Diktatur der Technik dominiert, die dem Designer gar keine andere Möglichkeit läßt, als sich dieser zu unterwerfen und sich mit ihr auseinanderzusetzen. Formatierungs- und Programmiersprachen bieten zwar eine enorme Fülle an Erweiterungen für eine Webseite, gleichzeitig verkommt die Gestaltung zum Stiefkind einer visuell geprägten Generation, die es eigentlich besser wissen müßte. Viele Webseiten mögen zwar auf den ersten Blick den so heißgeliebten Standards entsprechen, doch ich bin der Auffassung, das Standards und Technik auf gar keinen Fall die Gestaltung dominieren dürfen. Sonst stirbt die Vielfalt.

Dazu ein kleiner Vergleich:
Stelle Dir vor, Du würdest Dich in einem Supermarkt befinden und jede Verpackung der angepriesenen Produkte, unabhängig von deren Inhalt, würde gleich aussehen. Wärest Du nicht dazu geneigt, schreiend aus dem Supermarkt herauszurennen? Oder Dir verzweifelt die Haare zu raufen?

Warum gibt man den Designern nicht endlich ein sinnvolles Instrument in die Hand, das es ihm ermöglicht, sich voll und ganz auf seine Aufgabe zu konzentrieren? Bis heute existiert keine Software, die auch nur ansatzweise die gängigen Standards integriert hat. Ich habe eher den Eindruck, das eine vielversprechende Vision eines benutzerfreundlichen Webs zur bloßen Modeerscheinung verkommt oder gar inquisitorischen Auswüchsen anheim fällt.

Permanenter Link

Mike
am 03.09.2006 - 18:47

@Kai Laborenz

O welche Ehre wird mir zuteil! Jetzt bin ich ein wenig beschämt und angenehm überrascht. Nie hätte ich damit gerechnet, daß Sie sich dazu herablassen und mich unerfahrenen und unbedarften Menschen mit Ihrer Demagogie zu erfreuen. Gerne nehme ich ihr freundliches Schulungsangebot an. Sollten wir uns zum nächsten Termin persönlich begegnen, würde ich mich außerordentlich glücklich schätzen, wenn Sie mein erstandenes Exemplar Ihres Buches "CSS-Praxis" (das ich ruhigen Gewissens meinen Studenten empfehlen kann) signieren würden. Vielleicht wäre auch eine Widmung nicht schlecht? Bis dahin wünsche ich Ihnen viel Spaß beim googlen.

Permanenter Link

Siegfried
am 03.09.2006 - 20:25

@Mike: Auch, wenn es jetzt etwas sarkastisch klingen mag, es gibt ein Werkzeug, das dem Autoren jede, absolut jede erdenkliche Möglichkeit bietet, Webstandard-konforme Dokumente zu erstellen: Notepad! Und Angst vor'm Sourcecode gilt nicht. Siehe hier: Accessibility explained the Star Wars way.

Permanenter Link

Arjun Muralidharann
am 04.09.2006 - 06:48

Interessanter Artikel, teils sehr gute Punkte. Die drei-schichten-Theorie gefällt mir, nur das sie später mit CSS propagieren, Elemente so zu gestalten, das sie Zweickentfremdet werden, indem sie allen Ueberschriften diesselbe Grösse geben.

Eine andere Theorie wäre, das jede Schicht in wichtigkeit und ausdehnung immer kleiner werden sollte, von unten nach oben. Die Gestaltung sollte nur zum Zweck dienen, das Javascript für innovative Interaktion (wie die Live-Vorschau dieses Kommentares).

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 04.09.2006 - 12:04

Hallo Mike, dein Supermarktvergleich hinkt, weil Webseiten eben *nicht* alle gleich aussehen. Verpackungen hingegen sind sich in der Regel ziemlich ähnlich: vorne und oben die Aufschrift und ein Bild, hinten ein bisschen Blablah, an den Seiten Anleitungen. Meistens sind sie quaderförmig. Und warum? Weil's praktisch ist.

> Bis heute existiert keine Software, die auch nur ansatzweise die gängigen Standards integriert hat.

Naja, XML ist eine gängige Datenaustauschsprache und auch Standard, aber du scheinst dich auf (X)HTML zu beziehen. Und da gebe ich dir recht. Es gibt keine WYSIWYG-Software, die Webstandards so integriert wie das der Fall sein sollte. Der Grund ist einfach:

Zu Webstandards gehört vielmehr als das bloße Schreiben von validem Code. Semantik ist wichtig. Aber Semantik kann nur ein Mensch. Nur du selbst kannst entscheiden ob deine Webseite eine Inhaltsspalte und eine Navigationsspalte hat. Ein Computerprogramm kann dir sicherlich beide Spalten auch valide produzieren (vielleicht mit den IDs col1 und col2?), wirkliche Webstandards können das jedoch noch nicht sein.

Soweit ich weiß soll Dreamweaver einigermaßen validen Code hinbekommen, aber da kenne ich mich als Handcoder zu schlecht mit aus, als das ich das bestätigen könnte.

Permanenter Link

Mike
am 04.09.2006 - 19:27

Hallo Siegfried, hallo Eric,

Natürlich ist man mit konventioneller Software (Notepad, TextEdit, SimpleText, Dreamweaver, GoLive, BBEdit usw.) bereits in der Lage, eine halbwegs vernünftige Website zu erstellen. Für mich stellt sich aber die Frage, warum sich ein Designer selbst nach heutigen Maßstäben und geltenden Regeln überhaupt für den Quelltext interessieren muß!? Ein Designer (entgegen der landläufigen Meinung halte ich diese Berufsbezeichnung durchaus für schützenswert) sollte nicht nur allein die Fähigkeit besitzen, hübsche und ansprechende "Verpackungen" für den/die gemeine/n Hausfrau/-mann zu gestalten. Er sollte auch in der Lage sein, aus allem, was ihn umgibt das Wesentliche zu filtern, neu zu interpretieren und eine Form zu verleihen.

Das ist die Kunst, die er mit einem Musiker, einem Dichter und einem Maler gemein hat.

Liest sich zwar etwas abgehoben, jedoch ist dies für mich eine unabdingbare Voraussetzung für den Beruf des Designers, unabhängig davon, für welche Bereiche (Print, Web, usw.) er sein hart erworbenes Wissen und seine manchmal gnadenlos unterschätzte Erfahrung einsetzt. ;-)

Aufgrund dieses hohen Anspruches in Bezug auf das Studium und seitens der freien Wirtschaft, die selbigen nur unzureichend honoriert, würde ich es durchaus begrüßen, wenn sich die Verfechter der sogenannten Webstandards nicht nur durch ihren missionarischen Eifer bemerkbar machen würden. Sie sollen sich auch darüber Gedanken machen, wie man dem Designer eine zeitgemäßes technisches Hilfsmittel (Software) zur Verfügung stellt, das es ihm gestattet, sich allein auf die Gestaltung und nicht auf den Quelltext zu konzentrieren. Alles andere ist zeit- und kostenaufwendig und widerspricht den Idealen eines "besseren" Web.

Permanenter Link

Jens Grochtdreis
am 04.09.2006 - 23:28

@Mike: Laß den Designer ruhig designen. Wenn die Designs umgesetzt werden sollen, sollte er entweder mit den Tools umgehen können und wissen was er tut, oder die Umsetzung lieber den Profis überlassen. Ich als Webentwickler bilde mir auch nicht ein designen zu können, nur weil ich Photoshop bedienen kann. Dazu gehört mehr.

Und zur Erstellung einer Webseite gehört mehr, als der gute Wille und ein gutes Tool. Es gibt Doppelbegabungen in dieser Hinsicht, aber sie sind selten.
Wenn Softwarehersteller nicht in der Lage sind, gute Tools und gute Browser herzustellen, dann können Menschen wie wir leider nur von außen Hinweise und Kritik einstreuen. Letztendlich entscheidet nur die Marktmacht. Die hat Microsoft zu einem besseren IE, dem IE7, getrieben, die hat Microsoft zu einer Ablösung von Frontpage getrieben. Leider ist das alles nicht perfekt, aber ein richtiger Anfang ist es.

Es ist in Ermangelung kinderleichter Tools aber in meinen Augen trotzdem nicht zuviel verlangt, wenn Profis sich auch professionell mit ihrem Metier auseinandersetzen. Wenn Designer den Quellcode nicht verstehen, stattdessen lieber designen, dann ist das okay und keine Schuld falscher Tools.

Tools sind nur Krücken, denn für ein Endergebnis benötigt man sie nicht. Man kann eine Webseite egal ob mit Notepad oder Dreamweaver erstellen. Das ist das Tolle an HTML. Jedem nach seinem Wunsch und seinen Ansprüchen.

BTW: es sind keine "sogenannten Webstandards", es sind "Webstandards". Richtig verstanden und angewendet machen sie uns das Leben leichter. Sie machen vor allem die Endergebnisse sinnvoller, zukunftssicher und flexibel.

Permanenter Link

Siegfried
am 05.09.2006 - 08:59

Hi Mike,
nun ja, der Begriff "Designer" ist ja nun nicht auf, um es mal drastisch und salopp zu formulieren, das "visuelle Aufhübschen" von Irgendwas beschränkt. Einer der Grundsätze eines guten Designers sollte lauten"Form follows funktion". Ein designer erstellt nicht nur bunte Verpackungen. Der Begriff Designer umfasst eben eine ganze Menge.

Im Fall Webdesigner umfasst dieser Begriff nicht nur den visuellen Teil. Und noch nicht mal der ebenfalls wichtige künstlerische Aspekt ist auf Farben und Formen beschränkt. Gute Texte zu verfassen gehört ebenfalls zur Kunst. Bei Webdesignern kommt jedoch noch mehr als bei manchen anderen Designern das zugrundeliegende Handwerk hinzu. Handwerk und Technik, das sind Dinge, die vielen sogenannten Künstlern nicht besonders liegen. Ich kann mich da an eine Aussage von einem Künstler erinnern (ich glaube, es war ein Bildhauer, aber ich weiß den Namen nicht mehr): "Ein Künstler, der nicht zuallererst Handwerker ist und sein Handwerk beherrscht, ist ein Nichts".

Du hast mit dem künstlerischen Aspekt schon Recht. Und in den gegenwärtigen Diskussionen um Zugänglichkeit und Standards geht dieser sehr wichtige Aspekt mitunter ziemlich unter. Aber Eines nach dem Anderen. Zuerst das Handwerk, und erst, wenn man das beherrscht, dann tritt der Künstler zu Tage, und erst hier entstehen wirklich bedeutende Werke. Alles Andere ist nur Flitterkram.

Permanenter Link

Mike
am 05.09.2006 - 22:46

@Jens

Letztendlich bedeutet dies, das man den Menschen mit primitiven Mitteln eine fortschrittliche Technologie zur Verfügung stellt. Doch man sollte es mit der Philosophie des Zen nicht übertreiben. Es sollte auf jeden Fall für einen gerechten Ausgleich gesorgt werden. Das erfordert nicht nur eine Auseinandersetzung auf theoretischer Ebene. Der Dialog muß auch in die Reihen derjenigen getragen werden, die ihre Marktmacht den Käufern und Konsumenten verdanken.

In den vergangenen Jahren habt ihr "denen da unten" eure heilbringende Botschaft verkündet, jetzt sind "die da oben" an der Reihe. Man kann sich nicht einerseits über das scheinbar mangelnde Verständnis der breiten Masse beklagen und andererseits ohne Zutun darauf hoffen, das zu irgendeinem Zeitpunkt irgendein Software-Hersteller eure zukunftsweisenden Ideen aufgreift. Ich denke, es gibt mittlerweile genügend Programme, die nichts anderes als reine Spaßprodukte sind.

Vor dem Quelltext hat sich niemand zu fürchten, er ist für einen halbwegs intelligenten Menschen auch leicht zu verstehen. Zuweilen leichter, als von der jeweiligen Browser-Software. Früher oder später darf das Web eine ähnliche Umwälzung erfahren wie der Printbereich, in welchem die einzelnen Arbeitsschritte zusammengefasst, vereinfacht, oder bestimmte Berufsbilder völlig von der Bildfläche verschwanden und neue geschaffen wurden.

Doppelbegabungen sind (wie Du sehr treffend bemerkt hast) hie und da vereinzelt anzutreffen, leider verdienen jene zu meinem tiefsten Bedauern nicht die nötige gesellschaftliche Akzeptanz und fristen ihr Dasein im Schatten der Mittelmäßigkeit.

Permanenter Link

Hilde
am 06.09.2006 - 11:26

Mike, ich glaube Du richtest Deinen Appell an die falschen Leute. Das sind Programmierer und BWLer. Die ziehen eine gerade Strecke von A nach B und denken, sie hätten die Weltformel entdeckt. Und danach hat sich jeder zu richten, sonst iser nicht up-to-date. Aber Leidenschaft lässt sich eben nicht in Standards pressen. Denen ist es völlig schnuppe ob vieles gleich aussieht. Hauptsache, es funzt.

Permanenter Link

Herbert
am 06.09.2006 - 19:36

@Hilde

"Das sind Programmierer und BWLer." Das glaubst nur Du. Fest steht: Leute die hier keinen Link zu ihren Kunstwerken hinterlassen, haben Angst davor selbst was falsch zu machen oder sind ganz einfach nur neidisch. Anders kann man sich solche Äußerungen nicht erklären.

p.s.: Die Weltformel kann ich Dir gerne schicken.

Permanenter Link

John
am 07.09.2006 - 01:47

Guter Überblick über die Thematik Jens, sollte irgendwo auf der ersten Seite festgepinnt werden. ;)

Mike schrieb:

Die Einführung der sogenannten Webstandards hat die Qualität des Designs nicht verbessert

Scheint mir ein Verständnis-Problem zu sein. Das W3C und andere definiert die Straßen auf denen Webdesigner fahren. Mit welchem Auto Du das machst liegt an Dir.

Will sagen: Eine etwaige mangelnde Vielfalt im Webdesign (die ich so nicht sehe), liegt an jedem Einzelnen der eine Webseite erstellt. Wie schon weiter oben gepostet, gibt uns CSS (um mal nur beim visuellen Apsekt zu bleiben) die notwendigen Mittel an die Hand visuelle Leckerbissen wie auf CSS Zen-Garden zu gestalten. Wenn wir diese Möglichkeiten nicht nutzen ist es unsere Schuld, nicht die der Standards.

Und nein, ich wünsche mir nicht die Zeit der tabellen- zerstückelten Ganzseitengrafiken zurück. Dann könnte wir auch alle tolle Bilder in Photoshop basteln und das Web würde nur noch aus JPEGs bestehen. Kreativität ist gefragt, wenn sie nicht vorhanden ist, sollte man das zumindest nicht auf die A-nach-B-Wissenschaftler "da oben" schieben.

Permanenter Link

Mike
am 07.09.2006 - 12:39

Hallo John,

nun, wenn Du Verständnis mit Unterwerfung gleichsetzt, dann mag ich Dir gerne zustimmen. Aber ob ich mit einem nutzlosen Haufen Schrott oder mit einem bedienbaren Fortbewegungsmittel mein Ziel erreiche, ist ein erheblicher Unterschied. Und wie die Praxis beweist, lässt sich die Straße der Glückseligkeit nur auf Umwegen erreichen.

Die Qualität von Webseiten nur nach der Einhaltung von Standards und technischen Features zu beurteilen, halte ich für falsch. Die Qualität eines Designers oder Programmierers in Frage zu stellen, nur weil er keine standardkonformen Webseiten erstellt, halte ich für falsch. Und konstruktive Kritik als persönlichen Angriff zu werten, halte ich ebenso für falsch.

Im übrigen birgt die Headline von Jens durchaus empfehlenswerten Artikel einen Widerspruch. Ein Gemälde, egal wie altertümlich oder modern es auch sein mag, ist nicht nur eine Anhäufung von Pinselstrichen. Zuweilen läßt sich bei näherer Betrachtung eine Perspektive, der goldene Schnitt, ein Lichteinfall, ein Format, usw. erkennen.

Sind das nicht immer wiederkehrende Standards? Kann man demnach ein Kunstwerk und dessen Schöpfer einzig und allein nach diesen Kriterien beurteilen?

Nein, denn sehr häufig ist die Aussage des Motivs und der Name des Künstlers von Bedeutung. Es ist für die meisten von uns eher nebensächlich, welche Technik, welche Standards verwendet wurden. Ich sehe darin sowohl eine Übereinstimmung mit den Kommentaren diverser Verfasser (wohlgemerkt, wenn sie richtig gelesen und nicht überflogen werden!) als auch einen Zusammenhang mit den heutigen Anforderungen an das "Look and Feel" von Webseiten.

Permanenter Link

Monika
am 07.09.2006 - 17:23

Jens
ich verstehe mehr als gut was Du ausdrücken magst.
(Das .eingerückt ist eben passiert, sollte nichts Schlimmeres als das geben;))

Wie ein weiblicher DonQuijote komme ich mir manchmal vor, wenn ich verkünde:Web Design ist weder Printdesign alleine, noch Grafikdesign alleine, noch ...alleine,- sondern eine Mischung für das Medium "Internet".

Darum auch Web Design und nicht Webdesign.;)

Für 99% der Kunden ist dies anders. Es hat sich eingebürgert, dass unter Web Design Grafikdesign allein verstanden wird. Absolutes Unverständnis, dass ein Layout nicht die .psd Datei ist.

Design:

die Formgebung für einen Inhalt unter dem Aspekt der Nützlichkeit.
Dass die Nützlichkeit auch ästhetisch *Schön* sein kann zB wie ein Gemälde ist die hohe Kunst unserer Zunft.

lg
Monika

Permanenter Link

John
am 08.09.2006 - 01:14

Mike schrieb:

Und konstruktive Kritik als persönlichen Angriff zu werten, halte ich ebenso für falsch.

Ich habe Deine Ausführungen in keinster Weise als Angriff, schon gar nicht als persönlichen betrachtet. Wenn überhaupt könnte man an der Konstruktivität des Kommentars Nr. 24 zweifeln.

Ich kann nur trotz Deiner ausführlichen Argumentation nicht genau den Punkt sehen auf den Du hinaus willst. Korrigiere mich wenn ich es falsch verstehe, aber im Kern verstehe ich es so, daß Du Webstandards eher als Kreativitätsbremse ansiehst, als Gängelung des freien Webdesigners... so in der Art?

Daraufhin mein Unverständnis, daß die vom W3C & Co. aufgestellten Richtlinien die Kreativität nicht einschränken. "Anything goes" gilt doch auch trotz XHTML, CSS, WAI usw.

Nehmen wir nur mal den Relaunch von Spiegel-Online vor einigen Tagen. Die Seite ist noch ein gutes Stück vom Webstandard-Perfektionismus entfernt, aber die Richtung stimmt und der Verzicht auf Tabellen und andere alte Kamellen hat der Seite einen gehörigen Geschwindigkeitszuwachs beschert. Die Optik der Seite hat darunter keineswegs gelitten, im Gegenteil. Speed und Zugänglichkeit wurden dabei verbessert.

Anyway... Standards und Vielfalt schließen sich nicht gegenseitig aus, sondern können wunderbar als Team auftreten und wenn man momentan überall auf ähnliche Weblogs, mit ähnlichem Design, große Buchstaben und bunte Farben trifft, dann hat das was mit Trends und diesem Web 2.0-4.0 zu tun, nicht mit Kreativität beschneidenden Regularien.

Permanenter Link

Mike
am 09.09.2006 - 14:14

Hallo John,

das schreibe ich zu Dir und allen anderen, die sich bis jetzt mit meinen Ausführungen befasst haben:
Weder die Deutsche Industrie Norm (DIN), noch die Webstandards können als Maßstab für die Gestaltung gelten. Beide sind nichts anderes als Orientierungshilfen und dienen dem Zweck, den "Produktionsprozeß" zu vereinfachen und zu beschleunigen. Machen wir ein paar Schritte rückwärts, lassen sich sogar Gemeinsamkeiten erkennen. Das ist z. B. die Art und Weise, wie wir sie heute anwenden, darüber debattieren und ihnen letztendlich die Rolle zusprechen, die sie verdienen. Eine ähnliche Diskussion durften auch unsere Vorväter führen. ;-)

Die Gestaltung unterliegt sehr häufig der subjektiven Empfindung eines Einzelnen. Allerdings sollte dem Individuum die Möglichkeit gegeben werden, das zu betrachtende Objekt der Begierde von den anderen unterscheiden zu können. Beraubt man es (das Individuum) um diese Möglichkeit, dann kann es sich geistig nicht weiterentwickeln. Ist diese Entwicklung jäh unterbrochen, stumpft es ab. Die "Kreativitätsbremse", von der Du sprichst, hat also nichts mit der bloßen Existenz von Standards zu tun. Es geht darum, wie man jene anwendet und welche Bedeutung man jenen in Zukunft beimessen möchte.

Wenn ich mir anmaße, die Qualität von Webseiten oder Drucksachen zu bemängeln, ist nicht allein der technische Aspekt ausschlaggebend. Es ist vor allem die fehlende Individualität, die sich mir als Betrachter und Anwender präsentiert.

Noch ein kleiner Nachtrag zum Thema "Konstruktive Kritik":
Das bezog sich nicht auf Dich, sondern war nur eine reine Feststellung. Sehr schnell verkommt eine Ideologie auf allen Ebenen zum Dogma. Und das halte ich angesichts der gesammelten Erfahrungen für nicht besonders hilf- und geistreich.

Permanenter Link

Jens Grochtdreis
am 09.09.2006 - 14:58

Ich verstehe nicht ganz die immer wiedr auftretenden Probleme bezüglich mangelnder oder tatsächlicher Kreativität. Niemand will Kreativität begrenzen, wozu auch. Es geht nicht ums Design, sondern dessen Umsetzung. Daß das Design selten ein Hemmschuh bei der Umsetzung ist, sieht man am CSS-Zengarden.
Es geht um die handwerkliche korrekte Umsetzung der Designs. Daran hapert es. Natürlich muß auch ein Designer sich an die Realitäten des Internet halten und kann diverse Sachen nicht machen, das ist aber bei jedem Medium so. Wenn es mit HTML nicht geht, dann vielleicht mit Flash.
Mit geht es um die handwerklich gute Umsetzung. Wenn das jemand nicht kann, weil seine Krücke, der Editor, es nicht richtig umsetzt, dann sollte er seine Krücke wegwerfen und selber laufen lernen. Ich weiß wovon ich rede, mir ging es genauso.
Es geht hier auch nicht um Ideologien, sondern darum, in einem Medium so zu arbeiten, wie es gedacht war. Und Layouttabellen waren nicht im Plan :-) Wer sich ihrer noch immer behilft muß entweder ein Intranet mit uralten Browsern beliefern oder er ist in seiner Entwicklung vor etwa fünf bis sechs Jahren stehengeblieben. So oder so tut er mir leid.

Permanenter Link

Reinmar Müller
am 13.09.2006 - 16:25

Die oft anzutreffende ablehende Haltung gegenüber dem Sammelbegriff "Webstandards" und allem, was er repräsentiert, könnte unter anderem folgende Ursachen haben:

Schock: Webstandards erfordern ein radikales Umdenken. Sie zwingen uns, die Arbeit im Medium Web in einem neuen Licht zu sehen; nicht nur technisch, sondern in gewisser Hinsicht auch philosophisch (auch wenn das jetzt leider dramatisch klingt). Das fällt uns nicht leicht. Es ist einfach menschlich, sich an gewohnte Muster zu klammern, selbst wenn es handfeste, logische und belegbare Gründe/Beweise gibt, diese abzulegen.
Trotzreaktion: Der leider manchmal zu missionarische Ton, in dem Webstandards verkündet werden, kann abschrecken. Vor allem, da die Kompetenz der "Nicht-Standardistas" dabei angzweifelt wird, und sich diese dadurch direkt oder indirekt beleidigt fühlen.

Die Vorteile der Verwendung von Webstandards sind jedoch inzwischen offensichtlich, nachweisbar und messbar. Darüber gibt es keine Zweifel mehr. Dieses Bewusstsein setzt sich auch allmählich bei der informierten Kundschaft durch. Wieso sollte ein Kunde heutzutage auf eine flexible, Bandbreitenschonende Website, die einfacher zu redesignen und strukturell zu erweitern ist, und darüber hinaus suchmaschinenfreundlicher und einem grösseren Spektrum an Endgeräten--und somit Besuchern--zugänglich ist, verzichten? Auch wenn die technischen Details dem Kunden wenig imponieren mögen, die nachweisbare Kostenreduzierung und der erhöhte Umsatz durch zufriedenere Endkunden sind Faktoren, die ihm wichtig sind. Sogenannte Webdesigner, die dies nicht einsehen wollen, werden vermutlich mittelfristig auf der Strecke bleiben.

Sturheit ändert nichts an der Tatsache, dass das Medium Internet lange missbraucht wurde und sich das nun ändert. Als praktizierender "Webstandardist" kann ich übrigens mit Freude verkünden, dass ich mich als Designer dadurch nicht beeinschränkt fühle :)

Permanenter Link

chris
am 13.09.2006 - 21:43

der artikel ist wirklich sehr anschaulich geschrieben, wollte eigentlich nur drüberfliegen habe ihn mir aber dann doch komplett durchgelesen, ich bin beeindruckt!!

Permanenter Link

Andreas Punke
am 21.09.2006 - 10:25

"Die Einführung der sogenannten Webstandards hat die Qualität des Designs nicht verbessert ..."

... aber ein besseres Design auch nicht verhindert. Das tun die Leute selbst.

"Dabei sollen Standards doch als Hilfsmittel oder zur Orientierung dienen ..."

Tun sie auch. Vorausgesetzt, die Anwender können mit den Regeln kreativ umgehen.

"... und nicht um der Vervielfältigung der eigenen Ideenlosigkeit Vorschub zu leisten."

Tun sie auch nicht. Wer sich damit herausredet, sollte lieber kein Design machen.

Permanenter Link

Urs Felix
am 16.10.2006 - 09:49

Sehr schöner Artikel, hab ich mit großem Interesse gelesen. Mich wundert es auch oft, was für ein Code-Durcheinander auf manchen Pages herrscht. Wenn sich doch nur jeder an die Standards halten würde...

Gruß, Urs

Permanenter Link

milo
am 23.10.2006 - 10:08

Interressanter Artikel.

Permanenter Link

Wolfgang
am 25.10.2006 - 12:08

Ich lese Dr.Web. Und der (das?) führte mich zu diesem Artikel und den Kommentaren. Vorab: ich bin weder Web-Designer noch Designer (auf beiden Gebieten bin ich Autodidakt). Dennoch biete ich meinen Kunden auch WebDesign. Inzwischen CSS-basiert. Standards sind notwendige Übel, deren man sich bedienen muß, um wenigstens den kleinsten gemeinsamen Nenner zu realisieren. Mich behindert das aber nicht bei der Erreichung des eigentlichen Ziels: die für den Kunden und seine Ziele optimale Lösung zu entwickeln. Das Ergebnis muss keine Awards gewinnen. Creative is only when it sells.

Permanenter Link

Struppi
am 01.01.2007 - 16:47

ich verstehe die ganze Diskussion nicht, mein Eindruck als nicht Designer ist, das dank CSS und der Diksussion um Webstandards viele Internetseiten besser aussehen und sich besser benutzen lassen als zu Zeiten des Tabellenlayouts. Auch die Vielfalt ist wesnetlich größer geworden. Dass bei ständig wachsender Anzahl von Seiten es viele gibt die ähnlich sind, ist aber auch normal und war zu Frames/Tabellenzeiten doch genauso.

Und zur Technik, wenn ein Designer ein Künstler ist und er Webdesign macht, muss er natürlich den Code anfassen, genau wie es für einen Musiker sinnvoll ist Noten zu können, auch wenn es nicht immer nötig ist, es gibt ja auch Flash.

Auch der Supermarktvergleich paßt zum Webdesign. Viele Verpackungen sind genormt (Dosen, Flaschen, Tetrapacks) und werden oberflächlich gestaltet. Aber der Designer muss wissen was drin ist und muss sich mit dem Material und dem Format auskennen und beim Webdesign ist es nicht anders, wenn der Designer die Technik nicht kennt kommt halt irgendwas seltsames raus. Was wir oft im Internet sehen gleicht meiner Meinung eher einem Tetrapack wo der Designer ein DIN A4 Blatt mit seinen Vorstellungen draufklebt. Geht zwar, sieht manchmal auch gut aus, ist aber unpraktisch.

Permanenter Link

GE
am 13.01.2007 - 22:44

An Jens, Beitrag 26:

Und Layouttabellen waren nicht im Plan Wer sich ihrer noch immer behilft muß entweder ein Intranet mit uralten Browsern beliefern oder er ist in seiner Entwicklung vor etwa fünf bis sechs Jahren stehengeblieben. So oder so tut er mir leid.

Vielen Dank für Dein Mitleid. Ich bin einer, der sich immer noch mit Layout-Tabellen behilft. Ich esse auch beim Chinesen mit Messer und Gabel, obwohl das da eigentlich nicht "im Plan" ist ;-).

Ich bin auch keinesfalls in meiner Entwicklung vor 5-6 Jahren stehengeblieben, wohl aber die Browser, die ich im Blickfeld habe. Ein Browser, der auf einem Computer installiert ist, entwickelt sich leider nicht weiter, wenn keine Updates gemacht werden. Und meine Kunden sind, im Gegensatz zu den Besuchern dieser Seiten hier, ganz normale Internet-Konsumenten, denen ein neuer Browser nur mit einem neuen Computer ins Haus kommt. Und alle 2 Jahre ein neuer Computer ist bei denen entweder nicht drin, oder sie haben besseres mit ihrem Geld vor.

Ich mache so etwas normalerweise nicht, aber jetzt will ich Dir mal schildern, was ich im Augenblick auf meinem IE6 zu sehen bekomme, wenn ich diese Seite starte:

Den Header oben und die Navigation rechts, ansonsten dezentes weiss. Erst wenn ich mehr als einen kompletten Bildschirm nach unten gescrollt habe, erscheint der Inhalt. Ich mache das (runterscrollen), weil ich mich auskenne, und es stört mich auch nicht, weil ich um die Probleme von CSS-Layout gerade bei IE5/6 weiss. Meinen Kunden kann ich so etwas nicht zumuten.

Das heisst, ich kann es mir gar nicht leisten, jetzt schon auf CSS-Layout umzusteigen. Ich habe gerademal mitte 2006 angefangen, die Stylesheet-Datei vor dem NN4 zu verstecken, weil ich nun doch zu der Überzeugung gekommen bin, dass die paar NN4 aus den Statistiken Leuten wie mir gehören, die sich ab und zu mal den Spass machen, damit zu surfen. Aber zur Zeit (und wohl noch in den nächsten Jahren) ist der IE5/6 für mich immer noch das Mass aller Dinge. Deshalb arbeite ich nach wie vor mit Layout-Tabellen, auch wenn ich inzwischen fast alle anderen Formatierungen mit CSS umsetze. Aber vorsichtig, Level 1.

Ich befasse mich intensiv und aufgeschlossen mit den Entwicklungen im WebDesign, sonst wäre ich nicht hier auf diesen Seiten. Dass ich diesen Trends in meiner Art, Internetseiten zu erstellen, 5-6 Jahre hinterherhinke, ist eine Entscheidung, die ich ganz bewusst für mich getroffen habe. Ich befinde mich damit im Einklang mit den Browsern meiner Kunden (die von schlauchboote-spezial.de, damit verdiene ich mein Geld).

Ich gehe davon aus, dass immer noch 50-70% der Normalsurfer mit IE5/6 unterwegs sind. Ich vermute weiterhin, dass das auch noch eine Weile so bleibt. Und nun bitte nicht Eure Statistiken, die sind nicht repräsentativ. Und CSS-Hacks (ja, ich weiss, was das ist) mag ich überhaupt nicht, zumal die mit zunehmender Verbreitung des IE7 so manchem auf die Füsse fallen werden.

Der einzige CSS-Hack, den ich regelmässig einsetze, ist eine Layout-Tabelle, und dieser Hack ist sogar IE7-kompatibel ;-)))

PS: Der Link, den ich angebe, führt direkt zu einem Artikel, den ich Ostern 2006, vom schlechten Wetter gelangweilt, genau zu diesem Thema geschrieben habe. Nicht mehr ganz aktuell, aber ich stehe noch dazu.

Permanenter Link

GE
am 14.01.2007 - 12:11

An Jens, Nachtrag zu Beitrag 34

Hallo Jens,

mein Beitrag von gestern abend ist viel länger geworden, als ich wollte, ist einfach so aus mir herausgeflossen. Und was ich eigentlich sagen wollte, habe ich am Ende vergessen. Deshalb dieser Nachtrag:

... Wer sich ihrer (Tabellen) noch immer behilft muß entweder ein Intranet mit uralten Browsern beliefern oder ...

Ja, ich beliefere ein Intranet mit (teilweise) uralten Browsern. Es ist sehr gross und funktioniert über Ländergrenzen und Kontinente hinweg. Deshalb nennt man es auch allgemein "INTERNET".

Für welches Netz publizierst Du eigentlich?

Permanenter Link

Fritz
am 13.02.2007 - 20:16

Hallo,
warum nur findet sich im Web immer noch so viel Schrott? Frontpage will einfach nicht sterben.
Dabei gibt es Kochrezepte, die man einfach nur beherzigen muss - wie dies hier. ;-)
Danke für diesen Artikel
Fritz

Permanenter Link

Thomas
am 01.03.2007 - 01:37

Hallo,
ich bin durch Zufall auf diese Seite gekommen und muß sagen: sehr interessanter Artikel und auch eine sehr interessante Diskussion. Meiner Meinung nach, sollte man Webseiten nur noch mit Hilfe von CSS erstellen. Wenn dann bei dem einen Browser das Layout halt einmal nicht 100% korrekt ist - was solls. Den Besucher wirds nicht stören. Vielleicht schaffen es die Browser-Hersteller ja irgenwann, das Webseiten immer gleich dargestelt werden...

Thomas

Permanenter Link

Vitaliy aus Köln
am 03.03.2007 - 17:38

Boah, das ist aber eine ganze Anleitung wie man moder im Web designt und programmier! Ich möchte mich extra für
* {
margin: 0;
padding: 0;
}

bedanken... Es ist manchmal so, man sucht nach etwas, findet's aber nicht... Mit dem kleinen Codeschnipsel sind 50% meiner Probleme bei der Webgestaltung gelöst! :) Danke!

Permanenter Link

Peter
am 29.03.2007 - 21:52

Zitat von Thomas: "Meiner Meinung nach, sollte man Webseiten nur noch mit Hilfe von CSS erstellen."

Mit Sicherheit wird man auf diesem Weg, abgesehen von sonstigen Erleichterungen, einen schönen schlanken Quelltext bekommen, der von vielen SEO Gurus als unbedingt wichtig erachtet wird. Momentan wird das aber noch nicht so von der wichtigsten Suchmaschine honoriert. Deswegen hat man auch ohne umfassendes CSS noch gute Chancen - und die Darstellung der Webseiten in unterschiedlichen Browsern ist vom CSS Verständnis der Browser nicht abhängig.

Permanenter Link

Mediation Bernadette
am 07.04.2007 - 19:46

Ich lese hier regelmäßig mit, das hilft wirklich :) Für diesen Artikel möchte ich mich extra bedanken, eine gute Lösung, sonst werden alle Browser unmöglich

Permanenter Link

yankee
am 22.04.2007 - 19:08

Klar ist CSS eine guteSache und der Quelltext wird kleiner und übersichtlicher. Es gibt aber sehr, serviele Beispiele dafür das das für SEO nicht sehr entscheidend ist. Es finden nich auch in schwierigen Keys immernoch Seiten in totalem Oldschool auf der ersten Seite oder den ersten Plätzen. CSS ist gerade imSEO Bereich auch ein Hype. Mehr sehe ich da nicht. Aber um es klar zu stelle. Ich liebe CSS

Permanenter Link

IPC Webdesign
am 27.04.2007 - 11:51

Sehr guter und informativer Artikel über die Verwendung von CSS. Dies sollte so mancher Producer berücksichtigen.

Permanenter Link

TIMBaER
am 17.08.2007 - 15:00

Sehr guter Artikel. Inzwischen bin ich auch auf CSS umgestiegen. Das vereinfacht das Arbeiten ungemein. Änderungen sind schnell durch geführt. Ich kann nur jeden der sich an ein Web-Projekt setzt, empfehlen sich mal mit CSS aus einander zu setzten.

Gruß

Permanenter Link

Peter
am 04.09.2007 - 17:15

Ich habe selten einen so guten und informativen Bericht gelesen. Werde mir die Seite gleich in die Favoriten legen.

Permanenter Link

Unbekannt
am 18.09.2007 - 15:50

Keine Frage, dass CSS einen Fortschritt darstellt.
Wenn es denn von allen Browsern gleich interpretiert werden würde.
Ich habe schon zig Beispiele gesehen, wo man doch einigen Zweifel an der Umsetzung bekommt.
Aber wer will seine Seite auch schon in mind. 4 Browsern
testen?
Spätestens wenn man mal versucht ein paar Formulare per CSS zu formatieren, wird man böse Überraschungen erleben.
Wenn man für manche CSS Layouts doppelt so lage braucht, wie für ein Tabellenlayout, dann gibt es nur das Argument der Vorteile bei späteren Änderungen.
Das Thema SEO und schlankerer Code kann mich da weniger überzeugen.

Permanenter Link

holger
am 25.09.2007 - 14:33

Ich denke ein sehr umfangreicher Artikel. Was mit persönlich wichtig ist, einfache Strukturierung und dem user das Bieter was er sucht ohne dass er suchen muss. Das muss nicht immer die höchsten optischen Ansprüchen genüge tun es soll ja nicht dem eigenen künstlerischen Ego dienen, sonder einem user das geben was er sucht.

Permanenter Link

Tobias Knobloch
am 25.10.2007 - 04:22

Vielen Dank für den informativen Artikel.Ist ein guter Einstieg für mich um mal anzufangen css zu kapieren und beim Seiten(auf)bau professioneller zu werden!

Permanenter Link

Murattx
am 25.10.2007 - 15:24

Endlich mal jemand der es auf den Punkt bringt! Gute ARbeit!

Permanenter Link

Holger
am 25.10.2007 - 16:49

Bin selber auch vor 2 Jahren auf CSS umgestiegen und dieser Artikel bringt meine Umstiegsgründe genau auf den PUNKT.......

Sehr gute Arbeit
THX

Permanenter Link

Webdesign c@tbyte
am 26.12.2007 - 15:18

Ich kann mich der Diskussion nur anschließen, eine wirklich gelungene Arbeit. Leider halten sich immer noch viel zu wenig Webdesigner an diese simplen Vorgaben, so dass unser Arbeitsalltag all' zu häufig darin besteht vermurksten HTML-Code von anderen "Kollegen" zu säubern und cross-browser-kompatibel zu machen. - Werde den Artikel beim nächsten Vorfall gleich weiterempfehlen! ;-)

Permanenter Link

PR Portal
am 04.01.2008 - 03:57

Ich träume von der Zeit, wo alle Browser gleich kompatibel sind und mann bei sehr umfangreichen Websites für jeder Browser nicht eine extra alla .css erstellen muss :(

Permanenter Link

Webdesign
am 11.01.2008 - 07:18

XHTML und CSS sind die erste Wahl für professionelle
Webseiten und Blogs wie diese tragen zum Glück sehr
zu dieser positiven Verbreitung bei.

Macht weiter so.....

Permanenter Link

Allan
am 04.05.2008 - 23:26

Für mich ist css das nächste ding. ich probier mit verschiedenen templates rum und wandel sie ab. danke für den artikel, der ist ein guter einstieg bzw hilfe!

Permanenter Link

teo
am 22.05.2008 - 23:44

Super Einführung in ein spannendes Thema. CSS macht das moderne Webdesign erst schön. Danke für die zusammenfassende Einführung

Permanenter Link

franka
am 18.07.2008 - 00:05

Endlich mal ne schönen Einführung die schnell auf die wesentlichen Punkte kommt.
Sollte Pflichtlektüre für jeden DEsigner sein.

Permanenter Link

Peter274
am 14.08.2008 - 14:11

Interessante Artikel, hatte nur am Anfang etwas Probleme mit der Übersichtlichkeit des Webdesigns (Scherz am Rande)

Permanenter Link

Melanie
am 21.08.2008 - 10:15

Wow, super Artikel. Inzwischen habe ich auch auf CSS umstellen lassen. Selber fühle ich mich damit noch nicht ganz so fit, aber man will ja immer dazu lernen.

Permanenter Link

Die Kommentare sind geschlossen.