Ein Beispiel: Der Schließtag für eine Tabelle wurde vergessen. Ein Browser setzt nun selbst nachdem die letzte Zeile geschlossen wurde den fehlenden Tag ein und sorgt so für eine korrekte Darstellung. Ein zweiter Browser interpretiert, dass ein nach der Tabelle stehender Schließ-Tag für ein Div wohl eher für die Tabelle gedacht war und schon kann es zu großen Problemen bei der Darstellung des Layouts kommen.

Die Anzahl der verfügbaren Browser ist enorm. Dies fängt bei den großen Browsern wie Firefox, Internet Explorer, Opera und Google Chrome an und geht weiter über die verschiedenen Browser auf Mobiltelefonen, iPods und alle möglichen und unmöglichen Exoten. Durch validen Quelltext kann man mit ziemlicher Sicherheit davon ausgehen, dass die Seite auf allen Browsern korrekt dargestellt wird.

Andere Fehler haben keine Auswirkungen die man direkt sieht, etwa das fehlende alt-Attribut bei Bildern. Barrierefreiheit ist kein simples Schlagwort mehr sondern Tatsache: Viele Internetnutzer sind blind oder haben andere Sehstörungen die die Verwendung von Textbrowsern oder Vorlese-Programmen nötig machen. Diese Internetnutzer sind aber keine seltene Kuriosität sondern inzwischen Alltag im World Wide Web. Für den Seitenbetreiber sind diese Menschen Besucher oder auch Kunden wie jeder andere. Mit dem kleinen Unterschied, dass sie das hübsche Katzenbildchen nicht sehen können und bei fehlendem alt-Attribut ein kaltes “BILD” von ihrem Vorleseprogramm an den Kopf geklatscht bekommen. Ein leeres alt-Attribut, etwa für Layout-Bilder würden hier einfach zu keiner Ausgabe führen, für Bilder die für den Inhalt relevant sind sollte dort eine kurze Beschreibung stehen. Suchmaschinen haben übrigens die ähnliche Probleme mit Bildern umzugehen. Ein alt-Tag bringt also auch etwas für die Positionierung in Suchmaschinen.

Kommen wir zum letzten Fall: Dem Mir-doch-egal-Fall. Dieser tritt weniger bei der Validierung von HTML auf als bei CSS. Verschiedene Browser haben unterschiedliche Probleme bei der Darstellung und insbesondere der Internet Explorer ist seit jeher ein Feind jedes Webdesigners. Oft ist man einfach nur erleichtert wenn eine Seite in allen Test-Browsern wie gewünscht dargestellt wird und keiner mehr den Content über die Navigation klebt statt beides nebeneinander darzustellen. Wenn dann der Validator rot aufblinkt und den schicken Wordaround ankreidet gibt es nur zwei Möglichkeiten: Zeitintensiv einen anderen Weg finden oder “Mir doch egal” denken und sich damit zufrieden geben, dass die Seite korrekt dargestellt wird.

Spätestens hier sollte man sich dann allerdings von den beliebten “HTML valid”-Buttons die gern in der Navigation oder dem Fußbereich der Seite angebracht werden verabschieden. Nicht nur, dass es dann nicht stimmt (wie bei den meisten Seiten die solche Buttons verwenden), es interessiert auch im Grunde keinen. Solange die Seite richtig dargestellt wird und funktioniert muss der Quelltext nicht hinterfragt werden, man provoziert höchstens spöttische Kommentare, vergisst man doch mal ein alt-Attribut. Wird die Seite nicht korrekt dargestellt, dann hilft auch kein valides Ergebnis beim Validator.

Fazit:
Meiner Meinung nach ist valides HTML/CSS ein guter Weg um sicher zu stellen, dass die Seite auf möglichst allen Browsern korrekt dargestellt wird und es zu keinen Problemen führt. Durch den Validator lassen sich die eigenen Fehler und auch Faulheiten (alt-Attribut) gut erkennen und anschließend korrigieren. Ein Allheilmittel ist valider Quelltext allerdings nicht und mir ist es wesentlich lieber eine Seite ist invalide, wird aber richtig dargestellt als eine valide Seite mit fehlerhafter Darstellung.

Screenshot vom Tiled backgrounds designer

Tapetentexturen, ob im derzeit sehr beliebten barocken Stil oder modern sind ein echter Hingucker auf vielen Seiten. Nur sind die Muster oft schwer zu finden und noch schwerer ist es diese Muster kachelbar und in den richtigen Farben zu finden. Eine einfache Lösung bietet hier der Tiled backgrounds designer von BgPatterns.

Das JavaScript-Tool ermöglicht die Auswahl aus einer Vielzahl verschiedener Muster die frei gedreht und skaliert werden können. Die Farben für Vorder- und Hintergrund lassen sich frei wählen. Zudem kann aus einer von fünf Tapetenstrukturen ausgewählt werden. Die Größe der Kacheln kann zwischen 25×25 und 190×190 Pixeln eingestellt werden was eine große Bandbreite an zusätzlichen Möglichkeiten erzeugt. Nun, einen Haken hat die Sache leider dann doch: Die Vorschau sieht weit besser aus als die JPEG-Datei die man sich nachdem man mit dem Ergebnis zufrieden ist herunterladen kann. Hier wirkt das Muster deutlich verwaschener was wohl am JPEG-Format liegt. Eine PNG-Datei wäre hier wohl besser geeignet, als gekachelter Hintergrund fällt diese Unschärfe zum Glück nicht mehr so stark auf.

Tiled backgrounds designer

<style type="text/css" media="screen">
#demo_shadowbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-box-shadow: 3px 5px 15px #333;
	margin: 10px 0;
}
</style>
<div id="demo_shadowbox"></div>

Text Schatten
Auch Text kann mit Schatten versehen werden.

<style type="text/css" media="screen">
#demo_shadowtext {
	font-size: 20px;
	text-shadow: 2px 2px 2px #333;
	margin: 10px 0;
}
</style>
<div id="demo_shadowtext">Dieser Text wirft einen Schatten</div>

Abgerundete Ecken
Abgerundete Ecken setze ich schon einige Zeit ein, da sie bereits von vielen Browsern korrekt dargestellt werden, ihr Fehler allerdings keine wirklichen Probleme aufwirft.

<style type="text/css" media="screen">
#demo_roundcornerbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin: 10px 0;
}
</style>
<div id="demo_roundcornerbox"></div>

Transformieren
CSS 3 ermöglicht es auch Texte und Boxen zu transformieren, also beispielsweise zu drehen.

<style type="text/css" media="screen">
#demo_transformbox {
	font-size: 20px;
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	margin: 10px 0;
}
</style>
<div id="demo_transformbox">Schieflage?</div>

Dies sind nur einige der nützlichen Neuerungen und die Tatsache, dass auch Microsoft mit dem Internet Explorer 9 auf den Zug modernen Webdesigns aufspringt lässt hoffen. Weiterhin wird es allerdings das Problem der Nutzer geben die an ihrem veralteten Browser festhalten, denn noch immer gibt es genug aktive IE6 Nutzer. Diese werden wohl aber in den sauren Apfel beissen müssen: Dank HTML 5 und CSS 3 werden sich viele Webdesigner künftig unnötige Arbeit für diese Gruppe sparen und die Nutzer von veralteten Browsern müssen mit gewaltigen optischen Abstrichen auf vielen Seiten leben müssen – oder einfach kostenlos einen anständigen Browser installieren. Ich werde künftig auf jeden Fall schon einmal hier und dort ein paar Gimmicks mit den neuen Möglichkeiten einbauen, auch wenn diese noch nicht vom W3C abgesegnet und standardisiert sind.

Weitere interessante Beispiele und Informationen rund um CSS 3 und HTML 5 gibt es bei Dr. Web:
HTML 5 & CSS 3: Tutorials, Tipps und Referenzen
HTML5- und CSS3-Templates und -Tutorials

Vier Microbanner

Microbanner, auch gerne mal Antipixel genannt, sind eine beliebte Methode um insbesondere in Blogs links einzubauen. Besonders bei der Blogroll, also der Linkliste verwenden viele Blogger gerne die Banner im Format 80×15 Pixel aber auch um auf das eigene RSS-Feed zu verweisen oder mit einem XHTML valid das eigene Technikgeschick anzupreisen werden sie verwendet. Nur wie erstellt man solche Banner? Schon das finden einer passenden Schriftart ist nicht unbedingt einfach. Schnell und recht unkompliziert geht das mit ButtonBrowser bzw. dem dort verfügbaren Buttonmaker.

Es gibt sowohl die Möglichkeit einen zweigeteilten Banner zu erstellen als auch nur ein Feld zu verwenden. Über Eingabefelder können Text, Textfarben und Hintergrundfarben und die Breite der Felder bzw. des Feldes festgelegt werden. Über Auswahlfelder kann zudem die Ausrichtung auf linksbündig, rechtsbündig oder zentriert gesetzt werden. Auch der typische Rahmen lässt sich in der Farbe anpassen. Zur Auswahl stehen sechs Pixelfonts die alle recht gut lesbar sind. Allerdings schränkt oft die Länge des Textes die Auswahl der Schrift stark ein.

Etwas störend fällt teilweise die relativ lange Ladezeit auf, was insbesondere wenn man oft hinter einander eine neue Vorschau erstellen möchte um sein Ergebnis zu perfektionieren nervt. Trotzdem geht es wesentlich einfacher und flinker von der Hand als die Suche nach einer passenden Schrift mit anschließendem Pixelschieben in Photoshop.

ButtonBrowser

Da werden Fotos geliefert, wie ich sie nur aus den Fotoalben meiner Eltern kenne: Matte, verfälschte Farben von Stränden, an denen sich Leute tummeln, deren Badebekleidung man ansieht, dass es sich wohl die frühen 90er Jahre waren, als das Foto aufgenommen wurde. Dazu dann ein Logo im EPS-Format. Stolz schwillt die Brust des Lehrers über diese technische Höchstleistung, um anschließend in sich zusammen zu fallen, nachdem klar wird, dass er die verwendete Schriftart weder in Pfade konvertiert hat noch die Schriftart im Archiv enthalten war. Dazu kommen allerlei Buttons und Icons, die ebenfalls wohl kurz nach dem Mauerfall entworfen wurden. Die Frage die sich nun stellt: Wie soll ein Schüler mit diesem Material eine ansprechende Internetseite gestalten? Nicht nur, dass ihm die Ausbildung und die Software dazu fehlt – selbst mir im Non-Print-Bereich wurde das Programmieren mit Dreamweaver oder anderen WYSIWYG Editoren beigebracht – sondern, weil es unmöglich ist mit solchem Material zu arbeiten.

Die Tatsache, dass Berufsschullehrer wohl noch allzu gern 20 Jahre in der Vergangenheit leben statt mit der Zeit zu gehen, Themen wie Facebook und Twitter aufzugreifen und ihr Material wenigstens alle fünf Jahre einmal auf einen aktuellen Stand zu bringen, finde ich schockierender als die PISA-Studie. Dabei ist es heute keine Kunst mehr kostenlos und legal an gutes Bildmaterial zu kommen, sich fertige Buttons und Icons herunterzuladen oder, für die ganz engagierten Lehrkräfte: Selbst Buttons und Icons zu basteln, Tutorials gibt es genug im Netz.

Screenshot COLOURlovers

Viele kennen das Problem sicherlich: Man möchte eine Seite gestalten, hat aber keine gute Farbkomposition im Kopf oder schlimmer noch, man sucht passende Farben zu einer bereits vorgegebenen Farbe. Hier ist COLOURlovers genau die passende Seite. Eine Unmenge an ansprechenden Farbkombinationen wartet auf einen Webdesigner.

Neben einer Hexwert-Suche in die man seinen vorgegebenen Farbwert eingeben kann um dann passende Paletten zu finden gibt es auch die Möglichkeit über Schlagworte nach einzelnen Farben zu suchen. Hat man eine ansprechende Farbe gefunden reicht ein Klick auf die Farbe und passende Farbkompositionen werden angezeigt. Zudem liefert COLOURlovers auch eine Vielzahl an Patterns, also Hintergrundmustern die man zudem alle mit den gewünschten Farben einfärben kann.

Auch ohne konkrete Vorstellungen lohnt sich das Durchstöbern von COLOURlovers, ein Trendbericht zeigt anhand von verschiedenen Internetseiten auf, welche Farbpaletten verwendet wurden. Für mich war COLOURlovers bisher immer ein guter Ausgangspunkt bei einem kleinen Kreativ-Tief und auch wenn es etwas Zeit in Anspruch nehmen kann eine passende Farbpalette zu finden gestaltet es sich so wesentlich einfacher als mit eigenhändigen Versuchen in Photoshop oder anderen Programmen.

Zu COLOURlovers