Cominweb

Webdesign und Auktionsshop in Köln

Allgemeines

Webseiten gestalten heisst nicht Desktop Publishing für den PC.
Der Bildschirm ist kein Printmedium, sondern bietet so ganz andere Möglichkeiten, die wir nutzen sollten.
Wie sollten uns nicht einschränken, indem wir versuchen, Seiten starr und unveränderlich zu gestalten.

Das habe ich vor nicht allzu langer Zeit lernen müssen, habe die 'alten' Gefilde der Webseitengestaltung dann verlassen, mich auf den Weg gemacht und entdecke jeden Tag Neues.
Bestimmt unterlaufen mir hierbei auch Fehler und das eine oder andere könnte sicher besser gemacht werden. Falls Sie etwas entdecken:
Über Rückmeldungen freue ich mich!

Sehen

Vielleicht gehören Sie zu den Menschen, die eine normale Sehfähigkeit haben. Herzlichen Glückwunsch!
Stellen Sie sich aber mal vor, Sie hätten eine verminderte Sehfähigkeit . Zum Lesen einer Zeitung würden Sie möglicherweise eine Lupe benutzen. Würden Sie das auch am Bildschirm machen?
Nein, denn hier können Sie ja in Ihrem Browser im Menüpunkt Ansicht, Anzeige oder entsprechendem Menüpunkt einstellen, dass er z.B. auf den Faktor 200% zoomen soll.
Schon mal probiert? Tun Sie es.
Versuchen Sie es auf verschiedenen Webseiten, die Sie besuchen und stellen Sie fest, ob Sie eine Chance hätten, den Text lesen zu können.

Rot-Grün-Fehlsichtigkeit finden wir bei 8-10% in der Bevölkerung. Diese Farben können im Einsatz problematisch werden.
Können Sie sich Situationen vorstellen, wie z.B. blinde Menschen auf verschiedene technische Ausgabegeräte angewiesen sind? Meistens können diese Geräte die noch gängigen Webseiten kaum darstellen, da sie den Anforderungen nicht gerecht werden. Auch bei diversen anderen Handicaps und Behinderungen werden viele Menschen ausgeschlossen, das Internet voll zu nutzen.

Das soll und muss anders werden!

Standard

Hier helfen Standardisierungen: Seit 1994 werden für die Entwicklung der Browser und damit auch für die Entwicklung von Webseiten Empfehlungen herausgegeben. Verantwortlich für die Entwicklung dieser Quasi-Standards ist das 'World Wide Web Consortium' - kurz W3C.
Das Web soll zugänglich sein für jeden - ohne Beachtung seiner Behinderungen.

Tim Berners-Lee, W3C Director und 'Erfinder' des World Wide Web sagt dazu:

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. "

Bild: Pfeil nach oben

Trennung von Inhalt und Stil

Ein wesentlicher Aspekt der Webgestaltung im Sinne dieser Standards ist die klare Trennung von Inhalt und Stil der Dokumente.
Ursprünglich war dies für den wissenschaftlichen Austausch von Dokumenten gedacht: Ein Html-Text wird sinnvoll strukturiert - es wird angezeigt, wann eine Überschrift kommt, dass hier eine Liste steht, dass dort ein Text hervorgehoben werden soll usw.

Die verschiedenen Browserentwickler der letzten Jahre haben in der Interpretation dieser Darstellungen ihre eigenen Süppchen gekocht und dazu Unmengen an Html-Features erzeugt, die der Präsentation der Dokumente dienten. Das führte zu oftmals chaotischen Situationen bei dem verzweifelten Versuch der Designer, Ihre Webseiten unter den verschiedensten Bedingungen möglichst gleich aussehen zu lassen.

Wie geht das?

Webentwickler sollten strukturell gegliederte Html-Dokumente auf der einen Seite erstellen - wesentlich schlanker als mit all den darstellungsbezogenen Hinweisen. Und auf der anderen Seite wird diesen Html-Dokumenten eine Stildatei zugeordnet, wie z.B. eine Cascading Style Sheet -Datei, kurz CSS-Datei.
Darin sind detaillierte Informationen enthalten, wie die einzelnen Elemente der Html-Dateien positioniert und dargestellt werden sollen.

Ein immenser Vorteil wird sofort offensichtlich: Änderungen brauchen in der Regel nur in der CSS-Datei zu erfolgen, die Html-Dateien können unberührt bleiben.
Die Stilangaben müssen allerdings nicht in einer separaten Datei untergebracht werden, sie können im Kopfbereich der Html-Datei stehen - mit den daraus entstehenden Nachteilen. Wenn z.B. nur eine einzige Datei benötigt würde, kann es aber sinnig sein, die Stilangaben dort auch unterzubringen. Entscheidend ist der Punkt, dass die Html-Elemente nicht mehr darstellungsbezogen ausgewiesen werden.

Beispiele

Wie mächtig die Möglichkeiten von CSS sind kann z.B. auf CSSZengarden betrachtet werden.
Ein anderes, spielerisches (und nicht unbedingt nützliches) Beispiel für die Möglichkeiten, die sich durch die Verwendung von CSS bietet, findet sich z.B. hier: 3DBorderDemo2.

Validierung

Um sicherzugehen, dass die Standards korrekt eingehalten werden, kann man Webseiten und die dazugehörenden CSS Dateien 'validieren' lassen. Das W3C bietet diesen hilfreichen Check an. Schauen Sie beim Surfen doch mal, ob Sie auf den besuchten Seiten Hinweise darauf finden: z.B. Validiert nach Html4 oder als Grafik.

Bild: Pfeil nach oben

Tabellenloses Layout

Das Problem der Positionierung von Elementen - für Webentwickler oft eines zum Haareraufen. Benutzer surfen mit verschiedenen Browsern, verschiedenen Bildschirmgrößen, verschiedenen Auflösungen und verschiedenen Fenstergrößen. Wie auch immer die individuellen Einstellungen sein mögen: man versucht, die Inhalte möglichst gleich aussehend vernünftig zu positionieren. Beim Verändern von Fenstergrößen oder beim Wählen einer anderen Auflösung sollte nicht alles 'zusammenbrechen'.

Tabellen

Man stellte fest, dass Tabellen ein ausgesprochen hilfreiches Mittel für die Positionierung von Elementen auf dem Bildschirm waren. Man konnte die Anzeige der Tabellenrändern unterdrücken, leere Zellen mit 'unsichtbaren' Bildern bestücken und schon hatte man ein funktionierendes Layout. Dabei wurden die kunstvollsten Konstrukte mit tief ineinander verschachtelten Tabellen entwickelt. Alle Webseiten, die ComInWeb entwickelt hat, beruhen auf Tabellenlayouts.

Tabellen sollen aber eigentlich eine andere Funktion erfüllen. Sie sollen durch ihre Offensichtlichkeit Zusammenhänge darstellen, bzw. lesbar machen - mit deutlichen Zeilen- und Spaltenbezeichnungen und entsprechenden Zelleninhalten. So können auch Screenreader Tabellen verstehen, die oben erwähnten komplex verschachtelten Systeme sind für diese Ausgabegeräte nutz- und wertlos.

Positionierungen

Mit CSS bieten sich Positionierungsmöglichkeiten, die uns wegführen von starren, unbeweglichen Layouts hin zu anpassbaren, flüssigen Designs.

Bild: Pfeil nach oben

Barrierefreiheit?

Als Voraussetzungen für barrierearme und sogar barrierefreie Seiten habe ich validierte Dateien und ein tabellenloses Layout bereits angesprochen.
Ein nächster Schritt ist die Verwendung von skalierbaren Schriften in den Maßen em oder Prozent. Seiten, deren Fontgröße in Pixel und Punkt erstellt werden, sind nicht skalierbar mit den Folgen, wie unter 'Allgemeines' erwähnt.
Als weiteren Punkt muss die Verwendung von Bildern und Grafiken erwähnt werden. Bildern sollte ein alternativer Text zugeordnet werden, der auch verständlich ist.
Das Design insgesamt sollte kontrastreich sein und die Farben Rot und Grün vorsichtig verwendet werden, denn immerhin sind ca. 10% der Besucher farbenfehlsichtig.
Soweit diese Punkte gehen, kann man wohl von barrierearmen Seiten sprechen und das ist doch schon ein großer Schritt. Zur Barrierefreiheit gehören noch weitere Aspekte, die z.B. bei 'Einfach-fuer-alle' besser zu erfahren sind und die auch diese Seiten wohl noch nicht voll berücksichtigen.
Für behördliche Anbieter sind barrierefreie Seiten ein Muss, spätestens seit Inkrafttreten des Gesetzes zur Gleichstellung behinderter Menschen. Auch hier kann man darüber mehr erfahren: www.sgb9-umsetzen.de.

Browser

Um heute und in der Zukunft Webinhalte nutzen zu können, die Informationen jedem zugänglich machen wollen, müssen die Benutzer tatsächlich nicht viel selbst tun: die jüngsten Browsergenerationen unterstützen diese Standards gut. Verzichten sollte man auf die 'Altvorderen'. Es kann sich wirklich lohnen, einen 'jungen' Browser zu installieren.

Bild: Pfeil nach oben

Link-Empfehlungen

Bild: Pfeil nach oben

Ihr Browser kann diese Seite nicht in der gewünschten Form darstellen, da er die mittlerweile gültigen Standards nicht oder nur ungenügend unterstützt. Sie können sich z.B. hier informieren: