Mojo für den Browser: Hardboiled Webdesign mit HTML5 und CSS3

Oft wird erwartet, dass Websites in gängigen Browsern gleich aussehen. Kunden wollen punktgenaue Pixelperfektionen, die sich moderner Technologien bedienen, auf einer wachsenden Vielfalt von Endgeräten korrekt dargestellt werden und am besten auch noch bis IE6 abwärtskompatibel sind. Mit einem Wort: die eierlegende Wollmilchsau.
Hier stellt sich allerdings die Frage, ob pixelgenaues Webdesign überhaupt noch zeitgemäß ist. Fakt ist nun einmal, dass Websites mittlerweile auf sehr unterschiedlichen Endgeräten funktionieren müssen. Vom Smartphone, über Tablets bis hin zum 30 Zoll Monitor. Die Vielfalt an Endgeräten und Darstellungsformen (Format, Auflösung, Orientierung, Landscape vs. Portrait Modus) ist so breit gefächert, wie noch nie. Aber macht es überhaupt noch Sinn, pixelgenaue Websites zu konzipieren und deren Umsetzung anzustreben? Dem User ist es doch im Grunde egal, ob die Darstellung der Website im Internet Explorer von deren Darstellung im Firefox abweicht, solange das Design wiedererkennbar und nutzbar bleibt. In den meisten Fällen werden Abweichungen gar nicht erst wahrgenommen, weil der durchschnittliche User wahrscheinlich kaum eine Website parallel in verschiedenen Browsern betrachtet, um Unterschiede ausfindig zu machen.
Viel wichtiger ist doch jener Ansatz, aus jeder Website das Maximum an Experience für den User heraus zu holen, Technologien wie HTML5 und CSS3 auszureizen und das passende Layout mit dem optimalen Design zu kleiden. Die vermittelbare Experience ist natürlich abhängig vom Browser und Endgerät, das stellen wir hier auch nicht in Frage. Auch muss eine Website weiterhin abwärtskompatibel und accessible sein, auch das stellen wir nicht in Frage. Warum aber soll eine Website nicht in der Lage sein, dem User genau das auszuliefern, was den Gegebenheiten des Browser und des Endgeräte gerecht wird? Hier fallen zwei Stichwörter, „Hardboiled Webdesign“ und „Responsive Layouts“.
Sowohl in der Konzeptions- als auch Design-Phase wird von vornherein berücksichtigt, welche zusätzliche Experience mittels HTML5 und CSS3 erzeugt und vermittelt werden kann. Natürlich auch mit dem Wissen, dass nicht alle User die gleiche Experience erleben werden. User, die in modernen Browsern und Oberflächen unterwegs sind, werden mit innovativen Features, Effekten und Zuckerl belohnt. Können Browser mit eingesetzten Technologien (noch) nicht umgehen, so wird ihnen eine abgespeckte Variante der Website ausgeliefert. Die Website bzw. das ausgelieferte Erlebnis wird damit nicht nur wesentlich reaktionsfreudiger, sondern kann auch perfekt auf die Gegebenheiten des Users antworten. Das ist Responsive Webdesign. Semantik wird auch weiterhin eine wichtige Rolle spielen, denn Responsive Webdesign bedeutet auch, den Source-Code schlank zu halten und gut zu strukturieren. Damit bleibt die Struktur und das Markup der Website hochgradig flexibel und kann in unterschiedliche „Einheiten“ verpackt werden. Hello Hardboiled Webdesign!
Hardboiled Webdesign bedeutet nichts anders, als dass wir uns weg vom Betrachten und hin zum Erleben einer Website bewegen. Es bedeutet auch, die Gegebenheiten des Users abzufragen, abzufangen und das perfekt zugeschnittene Ergebnis zurückzuliefern. Ein sehr guter Ausgangspunkt für die Umsetzung von Responsive Webdesigns bietet zum Beispiel das HTML5 Boilerplate, das sich in angepasster Form auch in dem WordPress Framework Bones wiederfindet.

Das HTML5 Boilerplate ist ein solides HTML5 Framework mit jQuery Integration, das sich auf die Auslieferung von Responsive Layouts via Media Queries und die Komprimierung von Bildern und CSS-Code spezialisiert. Abgesehen davon wurde das Framework umfassend durch Scripts wie Modernizr und Selectivizir erweitert und bietet damit sehr gute Voraussetzungen, um HTML5 und CSS3 Features browserübergreifend implementieren zu können. Aus unserer Sicht bietet das HTML5 Boilerplate eine sehr gute Basis, um ein Maxium an Userexperience aus modernem Webdesign heraus zu holen.
Da wir euch mit diesem Artikel nur einen sehr kleinen Einblick in die Materie geben können, legen wir euch zwei weiterführende Bücher ans Herz:

„Hardboiled Webdesign“von Andy Clarke

„Responsive Webdesign“ von Ethan Marcotte

Wie sind eure Erfahrungen mit Responsive Webdesign, HTML5 und CSS3?