DrupalCon - der dritte Tag

Der Donnerstag ist angebrochen, und damit schon der letzte Tag mit Sessions bei der diesjährigen nordamerikanischen Drupalcon in Denver.

Der Tag startete mit der Keynote von Luke Wroblewski über "Mobile First". Wie der Name schon sagt, stand auch sie im Zeichen desselben Hauptthemas, welches schon Dries in seiner Keynote angeschnitten hatte und welches wie ich denke mit zu den zentralen Themen auf dieser Con gehört: die mobile internet revolution.
Derzeit explodiert die Gerätebasis in Bezug auf mobiler Endgeräte geradezu. Ein origineller Vergleich: während derzeit weltweit pro Tag rund 371.000 Babies geboren werden, werden im selben Zeitraum etwa 374.000 iPhones neu in Betrieb genommen. Tag für Tag. Zusammen mit android-basierten Geräten und anderen mobilen Endgeräten sind ergibt sich sogar eine Zahl von über anderthalb Millionen mobiler Endgeräte, die an jedem einzelnen Tag neu in Betrieb genommen werden. Das sind atemberaubene Zahlen, und wenn sie zutreffen scheint offenkundig, dass das mobile Internet schon in wenigen Jahren beinahe zwangsläufig den Desktop als Standardmedium für den Zugang zum Web nicht einfach nur ablösen, sondern regelrecht marginalisieren wird.

Das bedeutet auch, dass man sich grundlegende Gedanken darüber machen muss, welche Informationen wie auf einer nach dem mobile first Standard gestalteten Website gezeigt werden. Typischerweise macht der Viewport eines Smartphones etwa 20% der Größe eines Desktop-Viewports aus. Mit anderen Worten: eine Website, die für den Desktop ausgelegt ist besitzt rund 80% an Inhalten, für die auf dem mobilen Endgerät gar kein Platz ist. Derzeit werden solche Webseiten auf mobilen Endgeräten herunterskaliert, man hat gewissermaßen einen Thumbnail der Desktop-Version… und dann geht das Suchen los. Wo sind die für mich relevanten Inhalte, zoomen und scrollen, ohne gleichzeitig einen ganzheitlichen Blick zu haben.

Wird der mobile first Ansatz bei der Umsetzung eines Webprojektes erfolgt, heißt das, dass man sich zunächst fundamental Gedanken darüber machen muss, welche Inhalte auf dem reduzierten Viewport direkt verfügbar sein sollen. Anstatt dies als Nachteil zu betrachten, sollte man vielmehr den Spieß umdrehen und dies als Vorteil ansehen: es ist eine Chance, die elementare Essenz eines Webangebotes zu destillieren und zu präsentieren, was die Benutzer am häufigsten nachfragen und suchen. Im Idealfall kann das sogar Rückkopplungseffekte auf die Desktop-Version des Webangebots haben und zu einer Entschlackung des Layouts und der Konzentration auf die wesentlichen Inhalte führen: "strip down to essentials".

Gleich anschließend folgte die Session "Creating Responsive and Mobile-First Drupal Themes" von Jake Strawn, dem Initiator des Omega Theme Projekts - da blieb mal also gleich im Thema.

Folgende grundlegende Thesen wurden vertreten:

• Device Detection is Bad
• Responsive Web Design is Good
• Responsive Web Design isn't easy, and it isn't for everyone (yet)

Die Session begann mit einem kurzen Überblick in Bezug auf was Media Queries sind und wie sie funktionieren.

Anschließend ging Jake kurz darauf ein, wie ein best practise Ansatz aussehen könnte, wenn man ein Repsonsive Theme "from scratch" aufbauen würde. Dabei schlägt er 2 Varianten vor. In der ersten Variante empfiehlt er, ein globales mobile/desktop Default CSS anzulegen, das für die Styles in allen Viewport-Ansichten gilt. Spezielle Styles für Tablet oder Desktop werden schließlich als eigene Sub-CSS-Dateien inkludiert. Es gilt zu beachten, dass das Mobile-Layout kein eigenes Sub-CSS erhält. Es ist in der Tat der "Default", ganz gemäß dem "mobile first" Grundsatz.
Ein anderer Ansatz wäre, neben dem global.css eine responsive.css zu definieren, welches über Media Queries die verschiedene Viewports beginnend mit dem kleinsten Device abhandelt.

Dann ging es weiter mit einigen Hintergrundinformationen wie:

• max-width Verwendung an allen Image-Elemente (oder Videos), um zu verhindern, dass diese bei kleinem Viewport den Container überlappen. Es gibt allerdings kein kleines Problem seit Drupal 7.9, welches über die theme_image() Funktion height und width Angaben an alle Bilder appliziert. Probleme macht hier (mal wieder) der IE kleiner 9
• über das "Viewport" Meta Tag kann man mobilen Browsern sagen, dass wir die Kontrolle über Dinge wie Skalieren oder Zoomen haben möchten.
• ältere Versionen von IE (7 und 8) verstehen keine Media Queries. Es muss also sichergestellt werden, dass bei einem Mobile First Ansatz diese Browser nicht die mobile Version der Website anzeigen.

Für Omega Cracks (Grüße an Pascal ;-) also nichts wirklich neues, aber doch grundsätzlich eine schöne Zusammenfassung wie der Stand der Dinge ist, die ich daher gerne an dieser Stelle auch nochmal wiedergebe.

Stichwort Omega: auf die Vorstellung dieses Frameworks, auf dessen Nutzung ja auch erdfisch inzwischen bei neuen Drupal-Projekten setzt, entfiel dann der restliche Teil der Session. Hier gab es aufgrund der Kürze der zur Verfügung stehenden Zeit naturgemäß nur eine flüchtige Einführung:

• responsive out of the box, damit das erste D7 Theming Framework mit diesen Fähigkeiten
• mobile first approach (damit ganz dem mobilen Zeitgeist entsprechend)
• inzwischen schon mehr als 20.000 Seiten, die Omega verwenden, damit inzwischen schon auf Rang 5 der populärsten Drupal Themes bzw. Theming Frameworks.

Die Version 3 ist derzeit im Bau, und sie wird unter anderem

• ein aufgeräumteres und flexibleres Starter CSS haben
• Das "nesting" von Regionen über das Omega Backend erlauben
• die generelle Performance soll noch weiter verbessert sein gegenüber der aktuellen Version
• verbesserter RTL Support, für die Araber und Hebräer unter uns

Die Entwicklung von 4 ist auch schon "geoutlined" und wird natürlich Drupal 8 ready sein

Mobile, mobile, mobile… ja, das ist wirklich ein absoluter Schwerpunkt hier, wie schon mehrfach betont. ;-)