Architektur | Programmierung | Web Development
Besseres Webdesign ist ein Konzept, das auf Standardkonformität und semantische Korrektheit sowie die Verwendung nicht-proprietäter Techniken setzt, dabei aber den Wunsch nach Originalität in Layout und Struktur berücksichtigt.
Ergebnis sind Webseiten, die sich mit einer Vielzahl unterschiedlicher Browser und Systeme problemlos nutzen lassen und sich durch ihre Individualität positiv aus der Masse abheben.
Kann ich das genauer wissen?
„Besseres Webdesign ist ein Konzept, das auf Standardkonformität und semantische Korrektheit sowie die Verwendung nicht-proprietäter Techniken setzt, dabei aber den Wunsch nach Originalität in Layout und Struktur berücksichtigt.”
Das klingt zunächst einmal ziemlich offentsichtlich. Standardkonform, gut zugänglich, individuell layoutet – so sollten Webseiten sein.
Die Realität sieht aber meist anders aus. Und dabei spreche ich wohlgemerkt nicht von selbstgebastelten privaten Webseiten, sondern durchaus von kommerziellen Projekten. Dem Webdesign als naturgemäß relativ junger Disziplin mangelt es an allgemein anerkannten Qualitätsstandards, die über rein technische Kompatibilität hinausgehen.
Besseres Webdesign ist ein Webdesignstandard, der sich durch die drei bereits angesprochenen Punkte definiert:
Doch der Reihe nach:
HTML (die Sprache, in der Webseiten verfasst werden), hat natürlich Regeln. Diese vom World Wide Web Consortium verfassten Regeln bilden einen allgemeinen Standard, dessen Einhaltung garantiert, dass eine Webseite mit allen gängigen Browsern korrekt angezeigt wird.
So weit die Theorie. In der Praxis ist es so, dass die verschiedenen Browser bei der Anzeige von Webseiten durchaus ihre Tücken und Eigenheiten haben. Eine der spannendsten (und zugegebenrmaßen manchmal ärgerlichsten) Phasen des Webdesign ist demnach der Test eines Layouts auf unterschiedlichen Browsern.
Gängige Praxis ist, entweder von vorneherein nur für einen Browser zu schreiben (meist für den Internet Explorer, der früher Quasi-Monopolist war und heutzutage immer noch einen Marktanteil von 65% (Mai 2009) hat, was aber auch heißt, dass 35% ihn nicht benutzen und mit solchen Seiten dann häufig Probleme haben) oder sich die bekanntesten Browser zu nehmen und mittels irgendwelcher nicht-standardkonformer Zusatzformatierungen dafür zu sorgen, dass das Layout in diesen funktioniert (was bei zukünftigen Versionen schon wieder ganz anders aussehen kann).
Beide Varianten setzen beim Betrachter eine mehr oder weniger vorher definierte Konfiguration voraus. Die Idee hinter HTML ist aber eigentlich, dass möglichst jeder Benutzer eine Webseite sinnvoll nutzen kann, unabhängig davon, was er für ein Gerät oder Programm verwendet, solange sich dieses an den definierten Standard hält.
Mit standardkonformem HTML bleibt einem natürlich der Test auf verschiedenen Browsern nicht erspart, doch man produziert Seiten, die mit hoher Wahrscheinlichkeit auch auf ausgefallen Systemen funktionieren und auch mit zukünftigen Versionen gängiger Browser noch problemlos zu betrachten sein sollten.
Dass ich in den vorangegangenen Absätzen des Öfteren konkret von HTML gesprochen habe, hat übrigens seinen Grund: Standardkonformität meint Konformität mit offenen Standards. Proprietäre Techniken wie Adobe Flash fallen also aus, da man sich dadurch wieder auf eine einzige vorbestimmte Betrachtungsweise festlegt. Dinge wie Flash können in nach den Regeln des Besseren Webdesign gestalteten Webseiten auftauchen, wenn man auch auf sie verzichten kann, ohne die Seite unbenutzbar zu machen. Das heißt, an Stelle eines Bildes ist eine Flash-Animation willkommen, niemals jedoch z.B. für die Webseiten-Navigation.
Diese Regel gilt im Übrigen auch für alle anderen Techniken wie JavaScript oder sogar CSS: Die Webseite darf ohne sie etwas umständlicher zu bedienen oder unschöner werden, niemals jedoch unbenutzbar (im Falle von CSS wird dies durch die im nächsten Punkt angesprochene semantische Korrektheit erreicht). Für JavaScript bedeutet das: Man kann bei den Errungenschaften des Web 2.0 ruhig aus dem Vollen schöpfen, eine Webseite sollte jedoch auch einen Fallback-Modus aufweisen, der ganz ohne clientseitige Skripte auskommt (wir sprechen hier von öffentlichen Webseiten, nicht von Online-Anwendungen, für die man guten Gewissens Web-2.0-taugliche Geräte voraussetzen kann).
Dieser Punkt baut auf dem vorherigen auf: Ohne standardkonformes HTML keine semantische Korrektheit.
Semantische Korrektheit geht aber deutlich weiter: In HTML gibt es definierte Markierungen für verschiedene Bausteine einer Seite (wie z.B. Überschriften, Textabsätze, Listen, etc.). Diese lassen sich allerdings völlig frei formatieren, so dass dem Betrachter z.B. problemlos eine große rote Überschrift präsentiert werden kann, die eigentlich nur aus einem entsprechend formatierten gewöhnlichen Textabsatz besteht; optisch gibt es keinen Unterschied. Dies wird häufig praktiziert, da man sich so nicht mit den unterschiedlichen HTML-Elementen herumärgern muss.
Solange der Betrachter einen aktuellen grafischen Browser benutzt, ist auch alles schön und gut, aber was ist, wenn er z.B. blind ist und ein Vorleseprogramm verwendet? Ein großer roter Textabsatz unterscheidet sich plötzlich nicht mehr von einem kleinen schwarzen Textabsatz; der Sinngehalt der Seite geht völlig verloren. Insofern halten wir fest: Semantisch korrektes HTML hilft Benutzern, die andere als die gängigen Anzeigeformen verwenden. Von semantisch korrektem HTML ist es übrigens nur noch ein relativ kleiner Schritt bis zu anerkannt barrierefreien Webseiten.
Semantisch korrektes HTML ist auch einfacher zu administrieren: Da es für sich genommen nicht mehr und nicht weniger als eine sinnvoll gegliederte Textseite darstellt, lässt sich im Idealfall eine Webseite mit einem völlig neuen Layout ausstatten, ohne eine einzige Zeile am Inhalt zu ändern. Außerdem ist es problemlos möglich, mittels unterschiedlicher Stylesheets (d.h. Formatierungsvorlagen) ein und dieselbe Seite für unterschiedliche Ausgabegeräte (PC, Handy, Drucker...) individuell zu formatieren. Semantisch korrektes HTML ist also auch flexibler.
Und nicht zuletzt hilft semantisch korrektes HTML bei der Platzierung in Suchmaschinen. Bei Google & Co. sitzen selbstverständlich keine Personen, die das Internet durchsuchen und interessante Seiten eintragen; das funktioniert automatisch. Die Suchprogramme haben dabei – ähnlich wie das oben erwähnte Vorleseprogramm – wenig Sinn für schöne Gestaltung, sondern schauen sich einzig und allein Struktur und Inhalt einer Seite an. Und welche Seite wird ihnen wohl besser erscheinen – eine mit Überschriften, Untertiteln, sinnvollen Textabschnitten usw. oder eine, die ausschließlich aus gleichwertigen Textabsätzen besteht?
Sie können die semantische Korrektheit von Webseiten übrigens ganz einfach selbst überprüfen, indem Sie den Webseiten-Stil abschalten. Im Firefox geht das z.B. unter Ansicht -> Webseiten-Stil -> kein Stil. Sie sehen dann die Webseite ohne Layout und können selbst beurteilen, ob sie sinnvoll zu nutzen ist oder nicht.
Das Layout lässt sich natürlich nicht so objektiv klassifizieren wie die beiden anderen Punkte, es ist zu einem gewissen Grad immer von persönlichen Vorlieben abhängig. Gutes Layout meint einerseits, dass die Webseite sich dem Benutzer ohne große Umstände erschließt und möglichst intuitiv zu bedienen ist. Andererseits muss das Layout die Idee, die hinter der Seite steht bzw. den Anspruch des Anbieters transportieren.
Ein wichtiger Punkt bei der Layoutentwicklung sind die Unterschiede zwischen Print- und Weblayout. Letzteres lässt sich nie so exakt kontrollieren wie ersteres, da das Rendering der Seiten erst beim jeweiligen Besucher geschieht. Dafür lassen sich die Grenzen des Printlayouts an anderen Stellen wunderbar durchbrechen. Das Layout einer guten Webseite sollte also die Tatsache transportieren, dass es sich um ein Weblayout handelt, dabei aber trotz aller Standardkonformität nicht langweilig oder alltäglich sein. Der Reiz besteht vielmehr genau darin, außergewöhnliche Ideen standardkonform umzusetzen – erst wenn man die Standards genau kennt, kann man ihre Möglichkeiten optimal ausschöpfen.
Genau dieses Zusammenspiel einer starken Layoutidee und fundierter technischer Umsetzung führt zu hochwertigen und individuellen Webseiten. Der hohe Standard bringt natürlich einen Mehraufwand bei der Webseitenerstellung mit sich, besonders da bei der standardkonformen Umsetzung spezieller Gestaltungswünsche immer wieder eine gewisse Erfindungsgabe gefragt ist. Das Ergebnis ist dafür eine Webseite, die in jeglicher Hinsicht höchsten Ansprüchen genügt.