Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Wohldosiert

Sonnenseiten: Wohldosiert

Eine Webseite in HTML5 und CSS3 muss nicht immer eine Demo sein, die möglichst viele der neuen Techniken nutzt. Matthias Mees zeigt anhand der Webseite eines Tattoo-Studios: weniger ist manchmal mehr. Die Seite nutzt »nur« die wichtigsten neuen semantischen Elemente und Webfonts.

HTML5 und CSS3 verführen zur Übertreibung. Man will die neuen Elemente, Techniken und Effekte natürlich möglichst einsetzen – und läuft dabei Gefahr, es zu übertreiben und eine überladene Seite zu gestalten. Die Webseite des Karlsruher Tattoostudios Hell Yeah! zeigt, dass man mit dosiertem Einsatz neuer Techniken ebenfalls zum Ziel kommt.

Screenshot der Webseite von Hell Yeah! Tattoos

Das ist zunächst mal »nur« eine wirklich schön gemachte Webseite in einer gut zum Unternehmen passenden »Grunge«-Optik. Sie verwendet nicht nur den HTML5-Doctype, sondern auch einige der neuen semantischen Elemente wie <header>, <article> und <aside>.

Der Einsatz von CSS3 ist sogar recht sparsam, sieht man einmal von den verwendeten Webfonts ab. Die allerdings sind geschickt gewählt: Eine zum Design stimmige »Grunge«-Schrift für große Überschriften und Navigation kombiniert mit der für Fließtext sehr viel angenehmeren Graublau Web. Genau deshalb ist diese Seite für mich eine Sonnenseite: Sie setzt HTML5 und CSS3 dosiert ein.

Gerade mit einigen neuen Eigenschaften in CSS3 — etwa Transformationen oder Transitions — kann man eine Seite schnell in etwas sich hektisch bewegendes, blinkendes verwandeln. Ebenso wird bei aller Freude über neue semantische Elemente auch gerne einmal vergessen, dass auch ein <div> durchaus noch sinnvoll eingesetzt werden kann.

Nicht so hier: Hier wird ein Unternehmen mit einer schönen Webseite ansprechend im Netz präsentiert, die (quasi »nebenbei«) bereits einen modernen, zukunftsträchtigen Unterbau hat.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Marc
am 10.08.2011 - 09:07

Danke fürs Vorstellen :-)

Permanenter Link

Philipp Menzel
am 11.08.2011 - 13:57

Treibt sie voran, die sinnvollen Entwicklungen! *peitsch :-)

Permanenter Link

Nic Haase
am 22.08.2011 - 17:37

Netterweise sind die hektisch strahlenden Blinklichter unter den Webseiten ja wunderbar rar geworden. Doch herrlich ein paar besonders positive Beispiele hervor zu heben!

Permanenter Link

Mark
am 27.08.2011 - 07:59

Es wird langsam Zeit sich intensiv mit HTML5 und CSS3 auseinander zu setzen. Das Seitenbeispiel finde ich auch sehr gut gelungen.

Permanenter Link

Hausverwalter
am 28.08.2011 - 10:23

Ich find dieses Grunge Layout extrem scharf, wenn ich das mal eben bemerken darf...!

Permanenter Link

Die Kommentare sind geschlossen.