Online-Styleguides oder Living Styleguides bezeichnen Websites, zur Dokumentation von Layoutelementen und Formatierungen für eine bestimmte Website/Marke/Applikation. Schon lange bevor es zur Dokumentation eines fertigen Projektes kommt, kann so ein Styleguide aber auch schon im Designprozess eingesetzt werden, um
einen Überblick über alle zu gestaltenden Elemente zu haben,
die Elemente während des Entwurfs im Zusammenspiel zu sehen oder
die Elemente in ihrer natürlichen Umgebung bewerten zu können (z.B. hinsichtlich responsive Webdesign, Barrierefreiheit, Performance etc.).
Beim Test von geeigneten Werkzeugen stand daher vor allem der Nutzen im Entwicklungsprozess im Vordergrund, da die Dokumentationsaufgabe in der Regel bei allen Produkten erfüllt wird. Eine weitere Fragestellung war die Möglichkeit den Styleguide in Versionen auf einem anderen Server (z.B. beim Auftraggeber) zu lagern, um die Dokumentation zugänglich zu machen. Und nicht zuletzt spielte die Arbeitsumgebung (Installation, Editor, Einbindung eigener CSS-Systeme, eigener Skripte etc.) eine Rolle bei der Untersuchung.
„Sieger“ im Vergleich der drei ausgewählten Werkzeuge war „das Original“ Pattern Lab. Hier die Links aus dem Vortrag:
Bildschirmfoto Seite 179 aus den Beiträgen zur bildnerischen Formlehre von Paul Klee • http://www.kleegestaltungslehre.zpk.org/ee/ZPK/BF/2012/01/01/182/
Auf der Website des Zentrum Paul Klee Bern gibt die Manuskripte des Künstlers aus seiner Lehrtätigkeit zur „Bildnerischen Gestaltungslehre“ am Bauhaus in Weimar zwischen 1921 und 1931 in einer vorbildhaften digitalen Aufbereitung. Die einzelnen Heftseiten sind jeweils als Abbildung zu sehen, der eine Transkiption gegenübergestellt wurde, die den Aufbau der Seite nachahmt. Beim Überfahren der Heftseiten werden die entsprechend übertragenen Texte hervorgehoben. PDFs mit Kommentaren und Zusatzinformationen ergänzen das Originalmaterial.
Ein Archiv anderer Art hat die U.S.-Regierung zusammengestellt. Zur Vereinheitlichung der digitalen Regierungsangebote wurde ein Styleguide erarbeitet. Wer CSS-Frameworks benutzt, wird hier auf bekannte Strukturen treffen. Offenbar wurde aber kräftig ausgemistet und nur das Nötigste definiert. Auf jeden Fall sehenswert. Einleitung zum Styleguide, U.S. Web design standards
Nach fast einem Jahr der Beta-Phase ist die neue Websites der britischen Zeitung „The Guardian“ am 28. Januar 2015 offiziell zur einzigen Website geworden
Im letzten Jahr bin ich mehrfach auf dieses Projekt gestoßen worden – nicht zuletzt durch Oliver Reichensteins Vortrag bei der beyondtellerrand in Berlin.
Aus Entwicklersicht birgt dieses Projekt viele spannende Aspekte, schon wegen der Bekanntheit der Site, wegen ihres Umfangs, weil der Relaunch mit einem internen Team durchgezogen wurde usw.
Interessant auch, dass sie einen anderen Ansatz zum Aufbau von Websites wählt. Weg vom Denken in „Bäumen“ und Hierarchien, hin zu einer flexiblen, flachen Struktur – näher an die Realität des Surfverhaltens. Geteilter Content, z.B. über Twitter, ist ja immer ein Direktlink auf Einzelseiten. Jede Seite wird damit zur Startseite: „Every article should be a homepage“.
Dieses Ziel wird durch den Seitenaufbau mit Hilfe von Containern umgesetzt. Ich will versuchen, das zu erklären: Eine Website wird linear aus Seitenabschnitten zusammengesetzt, die von links nach rechts die gesamte Seitenbreite füllen. Diese Seitenabschnitte sind aber nicht einfach „Textabschnitt“, „Bild“, „Werbeblock“, „Video“, sondern können in sich komplexe Inhalte oder Funktionen enthalten. Wichtig dabei ist – so wie ich das verstanden habe, dass Inhalt und Funktionalität eines Containers zusammengehören. Der Hintergedanke wird sofort deutlich, wenn man an responsive Websites denkt. Bei einer Spaltenstruktur (die genau aus diesem Grund seltener wird) hat man ja das Problem, dass in der linearen Umsetzung beispielsweise erst der Inhalt (ein Artikel) und dann später, ganz weit unten, zusätzliche „Rand“-informationen kommen, die auf einem breiten Display nebeneinander stehen würden. Im Containermodell wird versucht, diese räumliche Nähe der Inhalte beizubehalten.
Wie so viele Sachen hört sich das erstmal nicht sehr spektakulär an, in der Konsequenz der Umsetzung macht es dann aber doch einen Unterschied. Ich stelle mir vor, dass dieser Grundgedanke die Redakteure vom festen Gerüst des Template-Denkens befreit und dazu zwingt, sich jeweils passende Zusammenstellungen von Inhalten und Teaser und anderen Elementen zu überlegen.
Das führt mich dann auch zum nächsten interessanten Punkt an diesem Projekt: Spezielle Aufgaben bedürfen spezieller Werkzeuge. Für die Guardian-Website wurde eigens ein CMS entwickelt, welches dann sicherlich diesen Workflow und das Layoutmodell nahtlos unterstützt. Zum Back-End habe ich bis auf einen Mini-Screenshot in [3] keine Bilder gefunden. Im Entwickler-Blog [1] findet man dagegen Infos zum verwendeten Editor scribe, der ebenfalls für dieses Projekt entwickelt wurde.
Die neue Website wurde von einem hausinternen Team entwickelt, welches sich für Workshops externe Kollegen dazuholte. „As part of our product discovery process the team ran several ideation workshops with colleagues in editorial and commercial, as well as involving Information Architects, a design agency with experience in digital news. It was during these workshops with Oliver Reichenstein and Konstantin Weiss of iA where the concept of containers and the container model really came to life.“ [2]
Montage von vier zufällig gewählten Artikelseiten des Guardian
Ich bin gespannt, wie sich die Website im Laufe der Zeit weiterentwickelt. Wenn ich mal vier zufällig aus verschiedenen Ressorts herausgepickte Artikelseiten vergleiche, dann sehe ich schon, dass es natürlich ein Repertoire an mehr oder weniger festen Blöcken gibt, die immer wieder – auch in ähnlicher Anordnung – benutzt werden. Ich nehme an, die Leser sollen auch nicht durch zu viel Vielfalt verunsichert werden.
HTML5 ist super und bringt viele Vorteile für Web-Anbieter und -Nutzer. Scheinbar gibt es aber auch Schattenseiten, wie Chris Lake für econsultancy.com ausgemacht hat.
Via digg.com und twitter macht gerade ein Artikel mit dem Titel „14 lousy web design trends that are making a comeback“ die Runde. Der Autor machte im Rahmen der Recherche für einen HTML5-Artikel Bekanntschaft mit einigen Phänomenen im zeitgenössischen Webdesign, die er längst überwunden glaubte.
Vorschaltseiten mit Ladebalken (das ist so Flash-Like)
versteckte Navigationselemente (finde das Menü)
Aufforderungen (zum Bookmarken, zum Laden von passenden Apps, zur Nutzung bestimmter Features etc.)
Bilder zur Darstellung von Text (ein echt alter Hut, der in die Mottenkiste gehört)
minimaler Kontrast (bin ich hier beim Sehtest?)
fragwürdige Animationen
mysteriöse Icons (nicht erkennbar, zu viel Detail)
fehlende Seiten (hat das wirklich was mit HTML5 zu tun?)
Die Website/der Browser bestimmt über den Nutzer (Elemente erscheinen, verschwinden ohne Nutzeraktivität)
Winz-Schriften
hirnlose Pop-Ups (bringen keien Mehrwert, stören, gehen nicht wieder weg)
Autoplay (bezieht sich auf Video, ich würde gerne Hintergrundmusik ergänzen, die einfach losgeht und Herzinfarktalarm auslöst)
Sammelsurium der Irritation (da haben wir den Autosound und Splash-Pages und so weiter)
Verzögerungen (Warten auf Inhalte, weil vorher noch schick eingeblendet werden muss)
Die Liste verdeutlicht: Nicht alles, was geht muss auch gemacht werden. Es ist gut zu wissen was in den letzten 20 Jahren Webdesign alles so passiert ist, welche Entwicklungen wirklich nützlich sind und was als Spielerei gut auf eine Portfolioseite passt. Die Frage nach dem „Warum“ und „Brauchen wir das“ sollte häufiger gestellt werden. (Viele durchs Browserfenster tanzende Kängurus konnten so schon vermieden werden :)
