Auch wenn 2011 noch lange nicht zu Ende ist, gehört dieses Google Doodle für mich schon jetzt klar auf die Sonnenseite: Zum Geburtstag des Gitarristen und Erfinders Les Paul hat Google sein Logo in eine spielbare Gitarre verwandelt.

Auf 474*75 Pixeln lassen unterschiedlichste Techniken das Entwicklerherz höher schlagen: Flash, CSS-Sprites, AJAX, <canvas> und Javascript. Aber auch normale User lieben die Gitarre offensichtlich und haben in den ersten 48 Stunden 40 Millionen Songs aufgenommen, u.a. Perle wie “Here Comes the Sun“.

Google-typisch ist die Gitarre grafisch sehr reduziert, so sehr, dass ich auf den ersten, flüchtigen Blick nicht sofort erkannt habe, was ich da vor mir habe. Aber sobald ich mit der Maus drüber war, wusste ich durch den Sound und die Schwingung der Saiten intuitiv, was es ist und wie ich es benutzen kann.

Ich liebe Dinge, die sich durch das bloße Benutzen sofort selber erklären!

Unter der Haube

Nachdem ich mir angesehen habe, wie die Gitarre funktioniert, war ich selber erstaunt, mit wie wenig man das umsetzen kann. Die beweglichen Teile der Gitarre bestehen aus einem <canvas> Element. Das ist Bestandteil von HTML5 und quasi eine Leinwand, auf die wir mit Javascript zeichnen können. Wir bekommen auch direkt einige fertige Werkzeuge zum Zeichnen mit u.a. Bezierkurven. Jede Saite ist nichts weiter als eine solche Kurve mit festem Anfang und Ende; lediglich die Mitte wird für die Schwingung der Seite nach oben oder unten verschoben.

Diese Kurve ist der eine Trick bei der Gitarre, der andere ist die Technik der Animation. Diese kommt aus der Spieleentwicklung und heißt dort Gameloop. Der Gameloop wird nun 30 mal pro Sekunde durchlaufen: Zunächst wird für jede einzelne Saite festgestellt, um wieviel die Mitte verschoben werden muss. Dann werden alle Saiten gezeichnet.

Für die Berechnung sind prinzipiell nur zwei Fragen entscheidend: Hat der Benutzer die Saite mit der Maus berührt oder die entsprechende Taste gedrückt? Dann soll die Saite anfangen zu schwingen. Oder schwingt die Saite bereits? Dann soll sie weiter schwingen, aber pro Durchlauf etwas weniger, bis sie wieder in der Ruheposition ist.

<canvas>, Bezierkurven und Gameloop: Vom Grundgedanken ist die Gitarre damit fertig.
Schönes kann so einfach sein, nur darauf kommen muss man.

Zum Autor

Bastian Sackermann arbeitet als Webentwickler bei Portunity in Wuppertal. Neben PHP, HTML und CSS ist Javascript seine Lieblingsspielwiese.
Bastian twittert als @Samisdat.

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.

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.

Zum Autor

Matthias Mees lebt und arbeitet in Eutin in Schleswig-Holstein. Er fühlt sich im Texteditor deutlich wohler als im Grafikprogramm und ist auch, aber nicht nur deswegen Linux-Enthusiast.

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.

Per JavaScript wird hier der Scrollbalken gekapert und statt rauf und runter, geht es hier in die Seite hinein. Ebene für Ebene werden die verschiedenen Bereiche herangezoomt und enden mit einem kleinen Gimmick für Kino-Freunde. Möglich ist das vor allem durch @font-face, denn die hier verwendeten Schriften sind tatsächlich als Fonts eingebunden und skalieren deshalb ideal beim Zoomen.

Als Schriften kommen hier MOD und Hero zum Einsatz. Verwendung finden auch das HTML5 Boilerplate und Modernizr. Die Webseite ist in sieben Bereiche eingeteilt, und das JavaScript sorgt dafür, dass der Text des naheliegenden Bereiches sauber dargestellt wird. Ohne JavaScript werden alle Bereiche schlicht untereinander angezeigt. Und selbst der altertümliche IE6 zeigt zumindest die Informationen lesbar an.

Also: Eine ungewöhnliche Spielerei für moderne Browser plus die nötigen Informationen für alle anderen. So wie sich das gehört. Sicher nicht für jeden Kunden geeignet, aber eine sehr hübsche Idee für eine Mini-Site.

Zum Autor:

Nicolai Schwarz arbeitet unter dem Namen textformer mediendesign als Designer und Webentwickler in Dortmund. Hauptsächlich beschäftigt er sich mit Drupal-Projekten. Im September erscheint sein erstes Fachbuch – »Drupal 7 – Das Praxisbuch für Ein- und Umsteiger« – beim Galileo Verlag.

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.

Neuer Ansatz

Diese moderne Art der Webseiten-Architektur nennt sich »responsive«. Die flexible Anpassung an die Breite des Ausgabemediums erreichen Webworker mit einer in der Spezifikation für CSS3 enthaltenen Technik, genannt »Media Queries«. Mit ihnen lässt sich ohne Javascript die Breite des Browserfensters abfragen und ein dafür angepasstes Stylesheet laden.

Flexibles Design

Ein Beispiel, das mir gut gefällt, ist der Webauftritt von »Elmastudio«. Im großen Bildschirm sieht der Nutzer übersichtlich nebeneinander angeordnete Bereiche im Blog-Design. Das flexible Konzept erschließt sich erst, wenn man das Browserfenster verkleinert. Die Seitenbereiche ordnen sich je nach Fenstergröße neu an. Was auf großen Bildschirmen dreispaltig nebeneinander steht, erscheint in der verkleinerten Ansicht nur noch einspaltig untereinander. Für Netbooks und Tabletts gibt es Zwischenstufen mit zwei Spalten nebeneinander und der dritten darunter.

Neues Konzept

Die Seite ist dennoch benutzerfreundlich und weitgehend intuitiv zu bedienen. Die beiden Designer von »Elmastudio« haben sich dazu genau überlegt, welche Teile der Seite nach unten wandern oder gar weggelassen werden können. Das zeigt sich beispielsweise in der Navigation, die in der vollen Breite Haupt- und Unterpunkte enthält. Auf dem Smartphone sind nur noch die Hauptkategorien sichtbar. Was vorher einfache Links waren, sind in der schmalen Ansicht Buttons in brauchbarer Größe für einen Touchscreen. Die Schmuckbilder der Blogübersicht sind für das Smartphone ersatzlos gestrichen.

Alles, was ein Blog braucht

Den Nutzergewohnheiten entsprechend stehen die Beiträge oben, direkt hinter der Hauptnavigation. Aber auf Kategorienübersicht und Kommentare müssen Besucher nicht verzichten und die Formulare sind gut benutzbar. Trotzdem bleibt das Design in allen Breiten ansprechend.

Übrigens handelt es sich hier um ein WordPress Theme, das es unter dem Namen »Yoko« auch zum kostenfreien Download gibt. Wer mit responsive Design experimentieren will, findet hier eine gute Grundlage.

Zur Autorin

Renate Hermanns erstellt am liebsten standardkonforme und barrierearme Webseiten und Templates für WordPress und Typo3.

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.

Die Animationen wurden rein mit CSS erstellt, kein Javascript, kein Flash! Wie das geht? Es ist gar nicht so schwer, sehen wir uns die Erstellung der Seilbahn-Animation einmal genauer an: Das Männchen fährt leicht schräg abwärts, außerdem schaukelt es dabei leicht hin und her. Diese beiden Bewegungen müssen wir zunächst im CSS als Animation definieren. Anschließend wählen wir das gewünschte Element aus, auf das die Animation angewendet werden soll, in unserem Fall das Bild des Männchens (img-Element).

Die Animation definieren

So sieht das entsprechende Code-Schnipsel in der CSS-Datei aus:

@keyframes zipWire {
  0% {
    top: -74px;
    left: -42px;
    transform:rotate(-30deg);
  }
  40% {
    top: 113px;
    left: 1740px;
    transform:rotate(20deg);
  }
  100% {
    top: 113px;
    left: 1740px;
    transform:rotate(20deg);
  }
}

(Hinweis: Zur besseren Übersichtlichkeit wird in den Code-Beispielen auf Präfixe (-webkit-, -moz-) verzichtet. Damit die Animation in den Browsern funktioniert, müssen sie entsprechend für die transform- und animation-Eigenschaften ergänzt werden.)

Mit der »@keyframes«-Regel wird die Animation definiert, die einen willkürlichen Namen enthält, in dem Fall »zipWire«. Innerhalb der Regel kann man bestimmte Schlüsselbilder (keyframes) definieren, hier gibt es drei bei 0%, 40% und 100% des Animationsverlaufs. Im ersten Schlüsselbild wird also die Startposition angegeben, außerdem wird das Männchen mittels transform:rotate() etwas gedreht, in diesem Fall 30° gegen den Uhrzeigersinn, ausgehend von der Senkrechten. Nach 40% der Animationsdauer ist das nächste Schlüsselbild gesetzt, mit veränderten Werten für die Position und den Winkel. Das heißt also, dass das Männchen zwischen Schlüsselbild 1 bei 0% und Schlüsselbild 2 bei 40% die angegebene Strecke zwischen den Punkten zurücklegt und den Winkel verändert, wodurch das leichte Schwingen entsteht.
Zwischen Schlüsselbild 2 und Schlüsselbild 3 bei 100% ändern sich keine Werte, es passiert also nichts, das Männchen erhält hier eine kleine Verschnaufpause (versteckt hinterm Felsen), bevor die Animation von vorne startet.

Die Animation zuweisen

Im zweiten Schritt muss nun die Animation zugewiesen werden. Hier der dafür zuständige Code:

#wire #wireFigure {
  animation-name: zipWire;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Dem Bild des Männchens (#wireFigure) wird also die Animation »zipWire« zugewiesen mit animation-name. Die weiteren Eigenschaften sind die Dauer, hier 10 Sekunden, die Anzahl der Wiederholungen, hier unendlich. Mit der animation-timing-function lässt sich die Geschwindigkeit während des Verlaufs der Animation beeinflussen. Hier bleibt sie dank des Wertes linear stets konstant. Damit wäre es bereits geschafft und unser Männchen kann Seilbahn fahren.

Fazit

Ohne viel Arbeit ist eine nette Animation erstellt, die die Activate-Webseite treffend und humorvoll bereichert. Betrachtet werden kann das ganze Safari, Chrome und Firefox 5: preparetoactivate.com

Zum Autor

Christoph Zillgens ist Mediengestalter für Digital- und Printmedien und seit Anfang 2009 selbstständig (zillgensdesign.de). Hauptsächlich gestaltet er Websites und nutzt bei der Umsetzung gerne moderne Technologien wie CSS3 und HTML5. Er bloggt auf christophzillgens.com.

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.

Einerseits bieten ausführliche Artikel Einblicke in verschiedene Teilaspekte des kommenden Standards, wie der jüngste Beitrag zur Dokumentstruktur bzw. Überschriftenhierarchie unter Beweis stellt, andererseits liefert die Seite einen Glossar für alle Elemente, die im Standard enthalten sein werden. Jedes Element wird durch einen kurzen Absatz beschrieben und ein Code-Beispiel visualisiert. Es kann somit als Nachschlagewerk dienen, wenn ein Webworker bei der eigenen Arbeit einmal nicht weiter weiß.

Aber auch die Packungsbeilage stimmt. Ein Blick in den Quellcode der Seite verrät, dass auch hier schon konsequent HTML5 zum Einsatz kommt. Der Grundaufbau der Seite besteht nicht nur mehr aus einer Vielzahl von <div>-Containern, sondern wird durch die neuen semantisch wertvollen Tags wie z.B. <header>, <nav>, <section>, <article>, <aside> & <footer> ausgezeichnet. Diese neuen Elemente sollen Webautoren die Möglichkeit geben, Teilbereiche der Webseite klarer strukturieren zu können. Das Grundgerüst von HTML5Doctor beinhaltet die wichtigsten neuen »Bausteine« und kann als gute Inspirationsquelle für eigene Projekte dienen. Einen tieferen Einblick in die richtige Verwendung der neuen Elemente gibt Michael Jendryschik in seinem Artikel über das »Endoskelett einer Webseite«.

Zusätzlich wird das Markup durch WAI-ARIA angereichert. Auch beim Design der Seite wurde nicht vor neuen Standards halt gemacht. Zum Beispiel werden Elemente wie der »Suchen-Button« nicht mehr mit Hintergrundgrafiken erzeugt. In diesem Fall werden Hintergrundverläufe, Schatten und auch die altbekannten abgerundeten Ecken durch CSS3 erzeugt. Des Weiteren werden Webfonts mit Hilfe des »CSS3 Font Module« eingebunden. HTMl5Doctor nutzt hierfür den Dienst fontsquirrel.com um lizenzfreie Schriften einsetzen zu können.

HTML5Doctor ist also ein lebendiges Beispiel, dass HTML5 und die anderen neuen Techniken heute schon nutzbar sind. Sowohl inhaltlich als auch technisch hat diese Seite für seine Besucher Einiges zu bieten.

Zum Autor

Fabian Tempel arbeitet als Senior Frontend Developer bei Bild digital GmbH & Co. KG in Berlin.

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.

Und bevor sich irgendwer wundert: Das heißt im Zweifel auch, dass wir nur diese Details herausgreifen und beim Rest Fünfe gerade lassen sein werden. Auch wenn in einzelnen Fällen mal ein anderes Detail oder gar der Code schöner sein könnten. Siehe auch die Sonnenseiten der letzten Jahre.

Was macht die Seite so besonders? Es ist sicher nicht das Design, das bereits seit Jahren ein Update vertragen kann. Es sind keine Web 2.0-Elemente, keine schicken Formulare, kein besonders cleverer Code. Nein, es ist schlicht der Inhalt.

»Ain’t It Cool News« ist eine der bekannteren, amerikanischen Webseiten und liefert Nachrichten und Gerüchte rund um Kino- und TV. Dazu kommen die Unterabteilungen für DVDs, Comics, Animes – alles nach meinem Geschmack.

Nun gibt es mehrere Kino-Seiten, die ich mir Tag für Tag durchlesen könnte. Bei »Ain’t It Cool« gefällt mir außerdem die Art der Kritiken. Manch andere Webseiten sind bei kritischen Passagen oft zu vorsichtig. Bei »Ain’t It Cool« werden Filme auch schon mal genüsslich in der Luft zerrissen. Sprachlich sind die Texte immer gut zu lesen.
Im Moment nehmen etwa mehrere Kritiker »The Last Airbender« auseinander. The Enemy schreibt: »Unfortunately, The Last Airbender is a cinematic date rape. And boy do I feel violated.« Über den Teaser-Trailer zu »The Social Network« schrieb Quint »Here’s an early contender for Best Trailer of the Year. I’m not kidding, I’m so in love with this trailer I want to marry it.« So etwas will ich lesen. Locker geschrieben, mit Herz bei der Sache.

Kunden sehen mich oft genug fragend an, wenn ich ihnen erkläre, dass es in erster Linie auf die Inhalte ankommt, und das Design zweitrangig ist. Aber Nutzer kommen eben nicht wegen eines schicken Designs immer wieder, sondern wegen der nützlichen, witzigen, informativen, kurz: stimmigen Inhalte.

Und die machen »Ain’t It Cool News« zu meiner Sonnenseite.

Zum Autor

Nicolai Schwarz arbeitet unter dem Namen textformer mediendesign als selbstständiger Designer und Webentwickler in Dortmund. Gelegentlich schreibt er darüber, zum Beispiel für das Webstandards-Magazin, t3n, PHP User oder eben auf webkrauts.de

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.

Die ZEIT vor dem Relaunch…

…und nach dem Relaunch

Insgesamt erscheint mir DIE ZEIT lesefreundlicher. Viele andere Informationsangeboten überschütten uns mit Werbeflächen und kleinformatigen Informationsschnipseln. Die Designer der ZEIT sind einen anderen Weg gegangen. Auch hier werden wir mit vielen Informationsangeboten auf der Startseite konfrontiert, sie fallen aber nicht negativ und verdichtet auf. Einzig die hin und wieder eingeblendeten großen Werbeflächen unter dem Header der Startseite stören beim Lesegenuss.

Zusatzinfos bei den Artikeln

Es sind aber auch Details, die bei der Informationsaufnahme helfen. Neben jedem Artikel sind in einem Kasten die Anzahl der Seiten verzeichnet, auf die ein Artikel verteilt wurde. Der Leser kann sich jeden Artikel auch auf einer Seite anzeigen lassen. Zusätzlich kann er sich ein schön gestaltetes PDF herunterladen. Das PDF kann er archivieren oder ausdrucken und stromlos im Zug oder Bus lesen. Bei diesen Details haben die Designer und Entwickler an den Nutzer gedacht. Um den geht es eigentlich immer. Leider vergessen das sehr viele Profis.

Zum Autor

Jens Grochtdreis ist freier Webentwickler und Berater. Er liebt leidenschaftlich das Medium Internet. Jens gründete die Webkrauts, um für ein besseres Medium zu streiten. Wenn er nicht gerade bloggt, twittert, surft oder codet, dann entspannt er sich bei Comics, Krimis, hört Blues oder kocht.

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.

Wer folgt wem?

Die Aussagen »content is king« und »form follows function« werden gern als Argumente und Prämissen bei der Konzeption von Webseiten verwendet. Die Online-Versionen klassicher Tageszeitungen zeigen, dass diese Regeln gut funktionieren, auch wenn es berechtigte Diskussionen über die Grenzen und Probleme solcher Prämissen gibt.

Betrachten wir jedoch Webseiten mit den Schwerpunkten Design, Kunst oder visuelle Kommunikation, scheinen diese Grundsätze von einigen Webdesignern bewusst oder unbewusst unterwandert zu werden. Dieses Verhalten ist allzu verständlich: zu groß ist für uns doch die Versuchung, den bunten Bildern noch einen üppigen, coolen oder zumindest gestalterisch anspruchsvollen Rahmen mit auf dem Weg zum Endnutzer zu geben. Am Ende stellt sich aber oft die Frage, ob dann tatsächlich noch der Inhalt die erste Geige spielt, oder ob nicht eher die Präsentation den Ton angibt. Dass es anders und trotzdem anspruchsvoll geht, zeigt die Webseite jeriko.de.

Inhalte vs. Design

Jeriko ist das private Photographie- und Designweblog von Christoph Boecken. Einfach, klar und benutzerfreundlich präsentieren sich nicht nur Informationsarchitektur und Seitenelemente. Die Farbgebung und das Layout der Seite sind minimalistisch umgesetzt und fokussieren die Aufmerksamkeit des Nutzers auf die rein visuellen Inhalte. Nichts auf der Seite lenkt von den gezeigten Bildern ab. Das zweispaltige Layout kommt mit schlichter Typo, Schwarz, Weiß, wenigen Grautönen und einem gezielt eingesetzten Rot als Akzentfarbe aus. Langweilig oder benutzerunfreundlich wird sie dadurch nicht, im Gegenteil: Berauben wir die Webseite durch Abschalten der Bilder und Grafiken ihrer Inhalte, macht sich erst deren Relevanz für die Gesamtwahrnehmung und das Design bemerkbar:

jeriko.de mit Grafiken

jeriko.de ohne Grafiken

Wer hätte den Mut, so ein kastenartiges Grundlayout als Zielvorgabe der Gestaltung einer Webseite zum Thema Design und Fotografie zu wählen? Über Geschmack lässt sich aber eben nicht immer streiten, es ist der Kontext, der darüber entscheidet, ob die Präsentation von Inhalten gelingt oder nicht. Für mich ist die Jeriko-Webseite gerade auf Grund ihrer Klarheit ein Paradebeispiel, dass anspruchsvolles Webdesign ohne coole Hintergrundgrafiken, CSS-Effekte und gewagte Farbkombinationen perfekt funktionieren kann. Diese Reduzierung auf die Inhalte macht die Seite für mich nicht nur zu einem regelmäßigen Anlaufpunkt zum Thema Fotografie, Design und Inspiration – sie ist auch an trüben Tagen meine entspannende und anregende Sonnenseite.

Zum Autor

Nils Pooker arbeitete selbstständig im Kunstbereich und ist seit 2001 freier Webdesigner. Als Fachbuchautor hält er Vorträge und schreibt regelmäßig über Kommunikation, Wahrnehmung, Webstandards und Webdesign.

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.