Is it responsive?

Responsives Webdesign mit Drupal
Grafik

Angeregt vom Besuch des diesjährigen Drupal-Design-Camps in London, habe ich mich entschlossen, den letzten Schliff an die Responsivität von olafski.de anzulegen. Was dazu noch fehlte, war ein Konzept zur Bedienung des Hauptmenüs auf Smartphones.

Worum geht es? Responsives oder adaptives Design ist ein noch vergleichsweise junger Ansatz, Webseiten so zu gestalten, dass sie sich dem Gerät, auf dem sie abgerufen werden, anpassen. Neben grundlegenden Techniken wie den 'Media Queries' zur Abfrage von Geräte-Eigenschaften umfasst ein responsiver Ansatz weitere Bereiche bei Planung und Realisierung einer Website. So stellt responsives Webdesign neue Anforderungen an die Art des Designprozesses oder an die bewusste Gewichtung von Inhalten.

Wie sieht das aus?

Wie responsive Websites auf unterschiedlichen Geräten aussehen und sich verhalten, kann und sollte man unbedingt selbst erproben, doch für eine erste Vorstellung lassen sich zahlreiche Beispiele in der Sammlung http://mediaqueri.es betrachten. Wenn es darum geht, sich ein Bild von bestimmten Websites zu machen, empfiehlt sich ein Simulationsdienst wie http://ami.responsivedesign.is oder www.responsimulator.com. Vom erstgenannten Dienst stammt z.B. der folgende Screenshot:

Responsives Design

Beispiel Hauptnavigation

Wie bereits angedeutet, habe ich olafski.de beim letzten Relaunch bereits nach responsiven Kriterien gestaltet. Dazu gehört auch die zumeist horizontal ausgerichtete Hauptnavigation, die sich je nach Bildschirmbreite unterschiedlich verhält. Solange genügend Platz zur Verfügung steht, sind die Menüpunkte in großer Schrift und mit voranstehenden Icons gestaltet. Wenn der Raum enger wird, verschwinden die Icons, und die Schrift wird kleiner. Wird es noch knapper, gehe ich zu gekürzten Begriffen über: Lit(eratur) / Pop / Web(design), um die Menüpunkte schließlich bei Smartphone-Größe unter- statt nebeneinander anzuordnen.

Die nun vertikale Ausrichtung würde im Prinzip schon ausreichen, etwas störend ist jedoch der Platzbedarf im oberen Bereich, der auf Kosten der eigentlichen Inhalte geht. Wie auf den folgenden Screenshots zu sehen ist, schafft ein zugeklapptes Menü etwas mehr Raum für den Inhaltsbereich.

Menü geschlossen vs. offen

Auf sehr umfangreichen Websites oder auf solchen, die auf eine hierarchische Navigation setzen, reicht ein einfaches Ausklapp-Menü nicht aus. Wer sich für weitere Navigationskonzepte interessiert, kann sich darüber beispielsweise in einem Artikel von Brad Frost informieren. Ebenso interessant ist das Kapitel "Mobile Navigation" in Christoph Zillgens Buch Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen.

Erfahrungen mit Drupal

Das Content-Management-System Drupal ist, wie ich finde, gut für die Realisierung responsiver Websites geeignet. Das liegt nicht nur an den technischen Voraussetzungen und Tools, die das System bietet, sondern auch daran, dass Drupal als Entwicklungs-Framework eine für das responsive Design geeignete Arbeitsweise fördert.

Die Arbeitsweise

Zur Förderung einer 'responsiven' Arbeitsweise gehört etwa die einfache Möglichkeit, das Layout sehr früh als Drupal-Theme zu entwickeln, anstatt zuerst alle denkbaren Varianten als Photoshop-Entwurf zu erstellen und diese Vorlagen im System nachzubauen. Zumindest mir verdeutlicht eine Drupal-interne Arbeitsweise in diesem Sinne sehr schnell, ob Gestaltungsideen sich auch in der Praxis, und das heißt unter anderem: auf verschiedenen Geräten bewähren. Natürlich funktioniert auch der Nachbau fertiger Designvorlagen in Drupal prima, doch der Aufwand zum Erstellen grafischer Vorlagen für Dutzende von Geräten wäre enorm hoch. Ich plädiere nicht dafür, auf grafische Entwürfe zu verzichten, möchte jedoch ihre Funktion in Frage stellen. Anstatt eine (Pixel-genaue und nachbaubare) Vorlage zu liefern, sind grafische Entwürfe möglicherweise besser als Ausgangspunkt oder Stilmuster zu verstehen, die im Laufe der Umsetzung diskutiert, überarbeitet und präzisiert werden. Ein von mir (allerdings noch nicht erprobter) Ausgangspunkt könnten Stil-Templates sein, vgl. etwa Style Tiles.

Das Omega-Theme

Zu den günstigen Voraussetzungen für eine responsive Drupal-Website gehören vor allem geeignete Themes. Ein Theme lässt sich von der Pieke auf selbst schreiben (vgl. etwa den lesenswerten Bericht von Laurence Mercer). Im Unterschied dazu nutze ich bisher sogenannte Basis-Themes wie Omega, die versuchen, eine sinnvolle, tendenziell neutrale Ausgangssituation für die eigentliche Theme-Entwicklung zu schaffen. Das ist bei dem adaptiv angelegten und Grid-basierten Omega durchaus gelungen, allerdings habe ich eine Weile gebraucht, bis ich den Aufbau und ein paar Eigenheiten des Themes verstanden habe.

Eine der wichtigsten Prämissen von Omega, die sich im Aufbau der CSS-Dateien widerspiegelt, ist der 'mobile first'-Ansatz. Dazu kommen sehr viele Konfigurationsoptionen, unter denen sich einige sehr wertvolle Schätze verbergen. Hinweise auf solche Perlen, aber auch auf Tücken des Omega-Themes finden sich in dem detaillierten Beitrag Omega Theme / Responsive Design Resources von Kendall Totten.

Von einigen als Nachteil betrachtet wird der Umstand, dass der Code des aktuellen Omega-Versionszweigs (7.x-3.x) mit CSS-Klassen wie "grid-11" nicht 'semantisch' ist. Pragmatisch betrachtet, hat eine solche Art von Grid-Klassen jedoch durchaus Vorteile – so lassen sich diese nicht nur im Theme, sondern z.B. auch für Blöcke oder für in der Display Suite definierte Layout-Regionen produktiv verwenden.

Adaptive Theme

Eine interessante Alternative zu Omega, die nicht nur behauptet, einen semantischen Ansatz zu bevorzugen, sondern sich auch in den Konfigurationsoptionen stark unterscheidet, ist das Adaptive Theme (AT). Mit Pixture Reloaded, Corolla und Sky stehen für AT einige Sub-Themes auf der Projektseite zur Verfügung, die quasi 'out of the box' einsatzfähig sind. Auch was die Konfiguration angeht, macht das Adaptive Theme einen zugänglichen Eindruck, während Omega auf den ersten Blick technischer wirkt. Da ich noch dabei bin, erste Erfahrungen mit dem Adaptive Theme zu machen, überlasse ich das Wort für eine fundierte Darstellung inkl. Vergleich zu Omega einmal mehr Kendall Totten: mediacurrent.com/blog/tapping-drupal-7-responsive-adaptivetheme

Fazit

Auf dem Smartphone betrachtete Websites, die nicht 'responsiv' sind, finde ich eigentlich ganz sympathisch, denn sie verweigern sich dem Zug der Zeit. Vermutlich handelt es sich jedoch selten um bewusste Verweigerung, sondern um Websites, die geplant wurden, als der Ansatz des responsiven Webdesigns noch unbekannt war. Ethan Marcottes prägender Vorschlag namens Responsive Webdesign wurde vor drei Jahren verfasst, und inzwischen gibt es nicht nur fundierte Literatur zum Thema, sondern auch eine Vielzahl von Tools, die die Entwicklung einer reaktionsfähigen Website erleichtern. Meiner Erfahrung nach gilt das auch für die Umsetzung mit Drupal.