Relaunch in HTML5, CSS3, WAI-ARIA und hcard
Bei genauerer Betrachtung erschien das alte Layout dieser Seite nicht unverwechselbar genug und es gelüstete mich schon seit längerem, eine Seite komplett in HTML5 zu erstellen, um bereits heute für den kommenden neuen Standard gerüstet zu sein.
Ziel des Relaunches war daher, diese Seite mit soviel neuer Webtechnik wie möglich (und noch sinnvoll vetretbar) zu gestalten. Der Quellcode ist somit komplett in HTML5 ausgezeichnet und es wurde nicht nur der neue Doctype <!DOCTYPE html> genutzt, sondern auch die neuen Elemente <header>,<hgroup>,<section>,<aside>,<footer>,<nav>,<article> und <time>. Meine Seite ist daher ein lebendiger Beweis, dass HTML5 bereits heute genutzt werden kann, obwohl noch weit davon entfernt, bereits Standard und offiziell eingeführt zu sein.
Hat HTML5 auch Nachteile?
Nun, so angenehm und schön es ist, bereits heute HTML5 einzusetzen, es hat selbstverständlich auch Nachteile, da es nativ nicht in jedem Browser wie gewünscht angezeigt wird. Der Internet Explorer Familie sowie dem Firefox 2 sind die neuen Elemente nicht bekannt und speziell die Internet Explorer gleich welcher Versionsnummer erkennen die Elemente nicht als öffnende und schließende Tags wie angedacht, sondern als jeweils eigene Elemente, denen ein schließendes Tag verpasst wird. Mein Kollege Peter Kröner hat das in seinem Artikel "HTML5 – Was geht heute schon, was geht nicht? Der große Überblick." wunderbar mit Codebeispielen verdeutlicht.
Die Auswirkungen dieser Verfahrensweise im Internet Explorer sehen dann so aus:
Da diese Darstellungsweise natürlich nicht im Sinne des Erfinders sein kann, nutzt man ein kleines JavaScript, um die unbekannten Elemente anzumelden und damit designbar zu machen. Ein Beispielcode sähe so aus:
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
Der Firefox 2 kann mit dieser Art der "sanften Überredung" leider wenig anfangen und die Mittel ihn zu einer korrekten Darstellung zu überzeugen wären nicht so einfach. Da dieser Browser aber nur von einer definitiven Minderheit von ca. 3% aller User noch genutzt wird, habe ich darauf verzichtet, für diese 3% zu optimieren. Abhilfe schafft einfach ein Update auf die aktuelle Firefoxversion.
Das neue Layout, Besonderheiten des CSS
Wenn man A sagt, sollte man auch B sagen. Daher verwendet das neue Layout einige CSS3 Spielereien um die Seite etwas unverwechselbarer und schöner zu machen – auch hier in vollem Bewusstsein – dass zur Zeit nur Firefox 3 und die Webkit Familie (Safari 4 und Google Chrome) dies darstellen.
Mittels CSS3 wurden die "runden Ecken" mit border-radius und der Schatten unter den Boxen und unter den Grafiken mit box-shadow realisiert. Sehr interessant erscheint hier auch das neue text-shadow, womit man bei einzelnen Textbereichen plastische, fast dreidimensionale Wirkungen erzielen kann, was man besonders deutlich bei den Überschriften beobachten kann, welche mit text-shadow im Normal, wie auch im Hover Zustand versehen sind.
Für Opera und Internet Explorer heißt es bei diesen neuen Funktionen leider "Wir müssen draußen bleiben". Da ich jedoch im Internet Explorer gern auch die abgerundeten Ecken haben wollte, musste ich dies mittels jQuery lösen und verwendete für den IE daher das jQuery Corner Script. Bei einem direkten Vergleich der Rundungsmethoden wird klar, dass jQuery die Ecken lange nicht so sauber und exakt rendert, wie es in der CSS Version der Fall ist. Daher wird das Script nur auf den IE angewendet, was jedoch für den Opera bedeutet, dass er leider der einzige Browser ist, der bei meiner Webseite keine abgerundeten Ecken darstellt. Okay, man muß halt Prioritäten setzen...
Das Stylesheet validiert aufgrund der unglaublich miesen Qualität des W3C CSS Validators natürlich nicht, da er keine CSS3 Eigenschaften akzeptiert. Er gibt daher die folgende Fehlermeldungen aus: Die Eigenschaft existiert nicht in CSS level 2.1, aber in [css2, css3]. Beim Lesen solcher Fehlermeldungen fehlen mir immer wieder die Worte.
Anzumerken wäre hier noch, dass das HTML5 selbstverständlich auf jeder einzelnen Seite sauber validiert. Da die Qualität des W3C Markup Validators für HTML5 noch nicht so berauschend ist (er erkennt nicht mal nicht geschlossene Divs), nutzte ich zur Validierung den um Klassen besseren Validator.nu (X)HTML5 Validator, welcher zwar auch Highly Experimental, aber deutlich zuverlässiger ist.
Warum meine Sidebar ein <aside> ist
Die korrekte Auszeichnung der Sidebar scheint das meist diskutierte Element von HTML5 zu sein und die meisten Fragen aufzuwerfen. Muss die Sidebar nun ein <section> oder ein <aside> oder doch eher ein <div> sein?
Die WHATWG schreibt in ihrem HTML5 Working Draft zum Section Element folgendes:
The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Das <aside> Element hingegen wird so beschrieben:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
Nun, in der vollen und wahrscheinlich sehr berechtigten Annahme, dass diese Jungs schon exakt wissen, was sie tun, habe ich meine Sidebar nun als <aside> ausgezeichnet; insbesondere auch, weil die WHATWG auf ihrer HTML5 Demoseite zum jetzigen Zeitpunkt genauso gehandelt hat.
Grundsätzliches zum neuen Layout
Auch das neue Layout von the-netBRain.de ist wieder ein Flexibles und skaliert ab einer Auflösung von 1024 Pixeln wunderbar und ohne horizontale Scrollbalken in der Breite mit. Als Hauptschriftart für den Contentbereich habe ich wieder die Vistaschriftart "Calibri" verwendet, welche für mich in Punkto Lesbarkeit immer noch ein Traum ist. Nicht Vista oder Windows 7 User sehen hier die allseits bekannte "Arial" wie gehabt. Als kleines Goodie für Mac-User verwenden die Überschriften als Hauptschriftart die "Helvetica Neue" Georgia Schrift, wobei Windows User hier auch die "Arial" Georgia zu sehen bekommen. Der Erste Buchstabe der Überschriften wird bei beiden Systemen als "Georgia" angezeigt, sowie in Schriftgröße und Farbe anders dargestellt.
Gleiches gilt hier für die horizontale Hauptnavigation, wo ebenfalls mit Typographie und Schriftarten experimentiert wurde. Selbstverständlich ist auch eine hervorragende Zoombarkeit des Layout für unsere seheingeschränkten Mitmenschen gegeben.
Ich beneide dich Andreas, das du diesen technischen Schritt gewagt hast. Ich traue mich derzeit noch nicht voll auf HTML 5 umzusteigen – noch sind mir die IE User ans Herz gewachsen ;)
zum Design: Das geht garnicht. Eine reine Katatrophe :( ich hab in der Webkrauts Group ja schon vor Tagen davon gelesen aber ich konnte nicht glauben dass das hier wirklich endgültig ist…
@Jared: Schade, dass Dir mein neues Layout nicht gefällt. Ich persönlich finde es recht ansprechend und es unterscheidet sich sehr wohltuend von anderen Seiten:-)
Ein sehr gelungenes Redesign Andreas! Vor allem das du es komplett mit der neuesten Technik ausgestattet hast, finde ich klasse. Sieht bei mir im 3.5 FF supi aus. Die neuen Boxen sind toll, auch wenn sie mich ein wenig an Frank Bültge seine Boxen erinnern :)Weiter so.
Für Mac User bietet sich evtl. auch die Schriftart Myriad an, von der schwärmt mein Kollege immer so.
Liebe Grüße Oli
@Oli: Schön, dass es Dir gefällt, dass freut mich sehr! Myriad schau ich mir mal die Tage an, evtl. ändert sich ja noch was. Und jetzt wo Du es sagst, der Frank hat tatsächlich entfernt ähnliche Boxen, aber andere Ecken an den Boxen gerundet. Und gottseidank in ner anderen Farbe, einem anderen Radius und er nutzt Grafiken zur Rundung, wie ich eben gesehen habe. Und unser beider Layout unterscheidet sich so dermaßen, dass ich nicht nochmal bei meinem bei muss.
Man kann ja auch nicht jede bestehende Seite im Netz anschauen, um zu vermeiden, das etwas entfernt ähnlich wird…
War ja auch nicht böse gemeint, sondern es war nur das erste was mir in den sinn gekommen ist ;-)
Ich weiß nicht, was Kollege (#1) mit “geht gar nicht” meint.
Im Vergleich zu vorher, hat sich – abgesehen von der Sache mit HTML5 – sichtbar in der Informationsstruktur ja nix verändert.
Bloß die Optik haste aufgepeppt. Ich könnte jetzt nicht sagen “das geht nicht” oder “das ist super”. Für meinen Geschmack ist der Schattenschlag der Boxen etwas übertrieben. Tja, Geschmacksache halt.
Auf jeden Fall aber feine Arbeit, vor allem auch die Umstellung auf HTML5.
Genauso schauts aus. Da meine Seite eine ewige Baustelle ist, kann sich durchaus auch der Schatten noch in der Farbe ändern, sobald ich eine besser passende gefunden habe.
Schöner Artikel und ebenso schöne Umsetzung des Relaunchs! Ich freue mich immer, wenn ich testweise eine “schattige” Textstelle markiere und dann erkenne, dass es sich um text-shadow handelt. Meine neue Website (zurzeit offline) wird auch in HTML 5 und CSS 3 umgesetzt sein, wenn ich endlich mein CMS fertig habe. ;-)
Weiter so! :)