1. Teil: Das HTML 5 Markup
2. Teil: Erstellung des Stylesheets
3. Teil: HTML 5 Darstellung im IE

Vorweg

Ich werde im Folgenden nicht auf alle Einzelheiten eingehen. Formatierungen der Absätze, Hyperlinks etc. sollten klar sein. Im Wesentlichen geht es um die generelle Struktur des Templates.
Zur Vereinfachung wird auf ein komplexes Reset des Stylesheets verzichtet und stattdessen mit folgendem gearbeitet:

* {margin:0; padding:0; border:0;}

Die HTML 5 Elemente mittels CSS ansprechen

Die neuen HTML 5 Tags werden wie gewohnt mit CSS angesprochen. Allerdings hat der Browser nicht – wie bei bekannten Tags – eine Vorstellung wie er sie darstellen soll. Daher sollte man erst einmal grundlegendes festlegen. So entsprechen die verwendeten neuen Elemente den Block-Elementen wie div oder blockquote.

section, aside, article, header, footer, nav {display:block;}

Breite festlegen und zentrieren

Das Ergebnis soll später wie auf folgendem Bild aussehen:

Ich habe mich dabei auf eine Breite von 960px festgelegt und den Inhalt des section-Tags mit der ID ‘wrap’ zentriert.

#wrap {
width:960px;
margin:0 auto;
overflow:hidden;
}

Das overflow:hidden sorgt letztlich dafür, dass ich später keine Probleme habe ‘floats’ innerhalb der section zu benutzen.

Formatierung des Dokumentkopfes

Der Kopf des Dokuments enthält das Logo und die Seitennavigation. Der header des wrap-section-Elements ist mithilfe des Kind-Selektors ansprechbar. Er bekommt eine feste Höhe und wird relativ positioniert, da das Logo innerhalb absolut positioniert wurde.

section#wrap > header {
width:100%;
height:100px;
position:relative;
}

Die Positionierung des Logos werde ich überspringen, da hier lediglich das Hyperlink-Element mit den nötigen Formatierungen ausgestattet wurde und das h1 schließlich ausgeblendet. Man erinnere sich daran, dass man mit HTML 5 Blockelemente innerhalb des a-Inlineelements haben darf.
Die Navigation nav innerhalb des headers soll die Seitennavigation werden. Die Positionierung erfolgt durch:

header > nav {
margin-left: 380px;
}

Formatierung der Sidebar

aside {
width:310px;
float:left;
margin:40px 0 0 0;
height:1%; }

Die Sidebar wird mittels “float” an den linken Rand des section#wrap gesetzt. Um etwas Abstand nach oben zu wahren wird mithilfe der Kurzschreibweise ein Außenabstand von 40px nach oben gesetzt.

Formatierund des Inhalts

Der Inhalt des Blogs wird wieder durch ein section-Tag gruppiert, welches wie folgt formatiert wurde:

#content {
width:580px;
margin:40px 0 0 380px;
}

Auch hier wird neben einer Breitenangabe der Außenabstand noch oben festgelegt. Zudem wird ein Außenabstand nach links integriert, damit die Sidebar nicht gestört wird!

Das header-Tag des Inhalts enthält genauso wie das header-Tag der Sidebar und wie die Seitennavigation im header semantische Inhalte, die vom Benutzer automatisch richtig aufgefasst werden, und somit mittels des Stylesheets ausgeblendet werden.

section > header h3, aside > header > h2, section > header > h2 {display:none;}

Die Formatierung des arictle-Tags legt im Großen und Ganze lediglich Schriftformatierungen fest und ist daher eher uninteressant.

Zusammengefasst

Die Formatierung der neuen HTML5 Elemente ist nicht anders zu handhaben wie vorher auch. Warum auch? – an den Cascading Stylesheets hat sich ja nichts geändert. Ein wesentlicher Punkt möchte ich nochmal erwähnen: Da der Browser keine Vorstellung hat wie er mit den neuen Elementen umzugehen hat, ist es sinnvoll festzulegen, ob es sich um ein Inline-Element oder ein Block-Element handelt.

Das komplette Stylesheet kann man sich hier anschauen. Der komplette Aufbau des Templates mit ein paar graphischen Elementen ist hier zu begutachten.

Der Übersichtlichkeit wegen arbeite ich mit mehreren Stylesheets. Diese können mit dem media-Attribut dann für ein spezielles Ausgabemedium ausgerichtet werden. Beispiel:

<code>
<link href="style.css" rel="stylesheet" type="text/css" media="print"/>
</code>

Die Ausrichtung für Druck-Ergebnisse

Man muss nicht für alle verschiedenen Ausgabemedien ein separates Stylesheet anfertigen! Viele Sachen wie etwa “aural” für Sprachausgabe oder “braille” für Blindendrucker sind schwer zu verwirklichen, da man davon keine Kenntnis hat wie man es richtig umsetzt. Jedoch sollte es kein Problem darstellen eine Webseite für den Druck zu optimieren. Hierbei geht es nicht um Perfektion, jedoch sollte es grundlegend möglich sein, eine Seite auszudrucken, sodass der Inhalt weiterhin lesbar und klar strukturiert ist.

Ein paar Dinge, die man dabei beachten sollte:

1. Der Seitentitel sollte auch auf einer gedruckten Seite hervorgehen und an erster Stelle stehen!
2. Überschriften sollten klar deutlich sich in Schriftgröße vom übrigen Text unterscheiden. Weiterhin sollte auch eine Unterüberschrift als solche deutlich sein.
3. Hyperlinks sollten auch wenn sie nun nicht genutzt werden als solche erkenntlich sein. Das hat den Vorteil, dass dem Leser ersichtlich wird, dass ein Hyperlink ihm noch mehr Informationen beschaffen kann.
4. Formulare im Gegensatz dazu haben ihre komplette Notwendigkeit verloren. Daher kann man sie getrost herausnehmen. Dazu gehört auch eine Sucheingabe!
5. Inhaltliche Trennungen werden am ehesten deutlich, wenn sie mit einer Trennlinie gekennzeichnet werden. Dies ist in einigen Fällen einfach durch das Attribut “border-bottom” möglich.
6. Auch wenn auf den meisten Ausdrucken ein Copyright-Vermerk zu finden ist, kann es recht nützlich sein, solch einen am Ende des Dokuments zu platzieren. Falls eine solche Angabe auf der Webseite direkt nicht stehen soll, kann man es trotzdem in den Quelltext einfügen und lediglich bei der Bildschirm-Version ausblenden.

Diese Liste ist nicht vollständig. Falls ihr einen Vorschlag habt, würde ich mich über ein Kommentar freuen.

Fazit

In der Tabelle erkennt man deutlich, dass eine Optimierung des Stylesheets sich als schwierig erweist. Die drei benutzen “Optimierer” bieten drei verschiedene Ansätze an. Davon vergrößert einer sogar die Datei. Grundlegend hängt diese Optimierung stark vom Aufbau der Datei ab, kann also immer verschiedene Ergebnisse erzielen. Ich würde daher empfehlen, erst mal selbst über den eigenen Code zu schauen. Vieles kann man erst mal selbst verbessern, immerhin kennt der Ersteller sich damit am besten aus. Danach kann man immernoch einen dieser CSS-Verbesserer nutzen und vergleichen welcher den größten Erfolg verbucht.

Tipps zur Optimierung des eigenen Stylesheets

1. Mehrere IDs sind nicht immer günstig

   Mir ist aufgefallen, dass ich beim Erstellen des Stylesheets viele IDs hintereinander benutze um eine Struktur zu bewahren. Dies ist dann immer unnötig, wenn die ID in keinen Zusammenhang mit einer anderen steht. Beispiel:

   <code>
   #wrapper form#searchform {...}
   /* Dies lässt sich so vereinfachen */
   #searchform {...}
   </code>
   

   Die ID “searchform” soll immer gleich auf der Seite aussehen, egal welche andere ID davorsteht. Zudem ist klar, dass es sich um eine “form” handelt.

2. Gleiche Inhalte zusammenfassen

   Oft kommt es vor, dass man das gleiche Attribut mit dem gleichen Wert im Stylesheet öfters benutzt. Die kann man ganz einfach zusammenführen, indem man die verschieden Elemente mit Kommata abtrennt.

   <code>
   #searchform {display:none}
   .hide {display:none}
   /* Dies lässt sich so vereinfachen */
   #seachform, .hide {display:none}
   
   </code>

3. Grundlegende Formatierung vornehmen

   Darunter verstehe ich, dass beispielsweise bei einem Hyperlink das Attribut “text-decoration” auf “none” gesetzt wird. Falls man dies nicht am Anfang des Stylesheets schon festlegt, muss man jedes “a”, dass darin vorkommt mit diesem Wert zuweisen. Das verbraucht unnütz viel Speicherplatz. Einige empfehlen ein Reset-Stylesheet immer einzufügen, das solche grundlegenden Sachen übernimmt.

4. Kurzschreibweise

   Wirklich effizient ist es die Kurzschreibweise zu benutzen. Da spart man sich sehr viel Tipparbeit und es spart Platz. Dies funktioniert mit einigen Attributen sehr gut. Hierdurch kann allerdings auch einiges an Übersichtlichkeit verloren gehen. Beispiel:

   <code>
   font-family: helvetica, arial, sans-serif;
   font-size: 10px;
   /* Dies lässt sich so vereinfachen */
   font: 1px helvetica, arial, sans-serif;
   
   </code>

5. Das Semikolon vor dem Schließen weglassen

   Wenn die Wertezuweisung zu Ende ist, kann man das Semikolon getrost weglassen. Ich mache dies allerdings nicht, da einer meiner häufigsten Fehlerquellen darin liegt ein Semikolon zu vergessen. Wenn man jedoch fertig ist kann man gerne nochmal drüber schauen und die unnötigen entfernen. Beispiel:

   <code>
   a {text-decoration:none;}
   /* Dies lässt sich so vereinfachen */
   a {text-decoration:none}
   
   </code>

Der erste Blick verrät, dass dem Portfolio ein Blog integriert ist, welcher sich rund um die Themen WordPress, CSS, (X)HTML und andere Web-Angelegenheiten dreht. Wie auch bei meinem Nachbar-Projekt (offline seit April 2010), läuft das ganze auf WordPress – einwandfrei.

Web-Beobachter: Beim Öffnen der Seite sollte das Wort Web-Beobachter auffallen. Ich war mir anfangs nicht schlüssig, unter welche Kategorie ich mich einordnen soll. Zumal bin ich kein Diplom-Designer oder sonstiger Gelehrter. Trotzdem habe ich mittlerweile ein großes Fachwissen erreicht und entwickle auch meine eigenen Projekte. Um den ganzen Begrifflichkeiten etwas aus dem Weg zu gehen, steht hinter meinem Namen – Web-Beobachter. Dies ist in einer Weise schon treffend, da ich das aktuelle Geschehen aufmerksam verfolge und mir zum ein oder anderen Thema meine Gedanken machen. Diese werden dann demnächst im Blog nachzulesen sein.