Alle Welt spricht von responsive Design, aber die meisten Webseiten setzen immer noch auf ein statisches Layout mit nur einer Größe. Warum man Webseiten responsive und fluid gestalten sollte und wie das mit Drupal gehen kann, darauf möchte ich in diesem Artikel eingehen.
Warum überhaupt responsive?
Heutzutage gibt es nicht nur eine Vielzahl an verschiedenen internetfähigen Geräten, sondern auch diese unter sich haben verschiedene Größen. Smartphones, Tabletcomputer, Laptops und Deskopcomputer sind die vier Hauptkategorien. Alleine bei Desktopcomputern gibt es aktuell Bildschirme von 19'' bis 31''. Aber auch kein Smartphone ist so groß wie das andere. Dass Webseiten aber der Herausforderung gewachsen sein sollten, auf allen Geräten gut auszusehen und gut bedienbar zu sein wird erst so richtig klar, wenn man sich die Statistiken anschaut. Weltweit sind es 1.2 Milliarde Menschen die mobiles Internet verwenden. Schaut man sich http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/b%23m... an, sieht man, dass 36,5% aller Europäer eine Vertrag mit mobilem Internet haben. In Deutschland sind es etwa 53 Millionen Menschen. Damit man diesen Menschen einen angenehmen Aufenthalt auf einer Webseite bieten kann, sollte man responsive arbeiten.
Was ist also der Unterschied zwischen Responsive, Fluid und Adaptive?
Adaptive bedeutet, es gibt verschieden große Varianten für eine Webseite. Wir haben meistens drei: Destop, Tablet und Smartphone. Diese drei Größen haben jeweils eine feste Breite und beim unterschreiten einer bestimmten Browserbreite wird einfach die nächst kleinere Ansicht angezeigt.
Responsive bedeutet es gibt verschiedene fluide bzw. liquide Varianten für eine Webseite. Fluid oder liquid Layout bedeutet, dass eine Webseite sich immer der Breite des Browsers anpasst. Es wird mit prozentualen Breitenangaben gearbeitet, die sich auf die Browserbreite beziehen.
Oft ist es sinnvoll einen Mix aus Responsive und Adaptive zu wählen, also z.B. der Smartphoneansicht ein fluid Layout zu verpassen. Diese Ansicht hat es aufgrund von Platzmangel sowieso schon am schwersten, da ist es sinnvoll wenn es den Platz des Handys auch sinnvoll ausnutzt. Gerade bei Handys ist die Menge an möglichen Displays mittlerweile unüberschaubar groß geworden.
Hier noch eine sehr nette Seite, die alles gut zusammenfasst und auf den Punkt bringt: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
Wann sollte also die Planung für eine mobile Ansicht beginnen?
Im Idealfall sollte der Kunde von Anfang an über Responsive Möglichkeiten aufgeklärt werden und sich dann dafür entscheiden. Dann kann der Designer gleich die 2,3,4,5 verschiedenen Ansichten anlegen und eine Kontinuität im Design kann hergestellt werden. Das HTML Layout sollte dann so angelegt werden, dass es nur mit Hilfe von CSS Regeln auf verschiedene Ansichten der Webseite angepasst werden kann. Dieser Schritt sollte meiner Meinung nach immer gegangen werden, auch wenn der Kunde dies nicht explizit fordert. Sollte der Kunde nämlich irgendwann doch eine Responsive Anpassung fordern, kann man dies mit deutlich weniger Aufwand umsetzen.
Wie funktioniert das nun und wie geht das mit Drupal?
Responsive Design bedeutet im Groben eigentlich nur, dass per Mediaqueries verschiedene CSS-Definitionen geladen werden. Über das media Attribut beim einbinden einer CSS Datei kann man angeben für welche Größen der Webseite welche CSS Datei eingeladen werden soll. Hier ein kurzes Beispiel von Wikipedia:
<head> <link rel="stylesheet" type="text/css" href="css/all.css" /> <link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" /> </head>
In dem Beispiel wird eine all.css Datei immer geladen und für Geräte mit einer maximalen Breite von 480px wird dann die smartphones.css geladen.
Was es für Mediaqueries gibt und was damit alles möglich ist, kann man beim http://www.w3.org/TR/css3-mediaqueries/ nachlesen.
In Drupal binden wir unsere css Dateien in der theme.info ein. Das ganze ist von Haus aus kompatibel zu den Mediaqueries:
stylesheets[all][] = stylesheets/app.css stylesheets[(max-width: 960px)][] = stylesheets/app_medium.css stylesheets[(max-width: 640px)][] = stylesheets/app_small.css
Wie man sieht binde ich je kleiner das Gerät wird eine weitere CSS Datei ein, um die Webseite immer mehr zu „verkleinern“. Dieser Ansatz wird auch „Destop First“ genannt, viele Menschen sind aber der Meinung „Mobile First“ wäre die einzig wahre Vorgehensweise. Ich kann noch nicht sagen, was ich tatsächlich besser finde, ich denke aber dass da jeder seinen eigenen Weg finden muss. Momentan gehe ich allerdings den „Desktop First“ weg, da das mit den Deskopseiten einerseits schon öfter geübt ist und andererseits mache ich momentan viele Webseiten nachträglich mobile tauglich, bei denen es die Desktop Variante schon gibt. Nicht immer ist das einfach umzusetzen, manchmal ist es sogar einfacher die Seite komplett neu aufzusetzen, da das HTML nicht kompatibel ist. Mehr zum Thema „Mobile First“ gibt es bei http://designshack.net/articles/css/mobilefirst/
Hat Drupal Einschränkungen oder Vorteile beim Responsive Design?
Bisher habe ich noch keine Einschränkungen feststellen müssen. Wir arbeiten nur noch mit Panels und Panels Everywhere. Die Panels kann man super per CSS positionieren und auch mit weiteren responsive CSS Regeln wieder überschreiben.
Es gibt aber mittlerweile auch einige Themes, die von vornherein Responsive Design unterstützen. Ein sehr verbreitetes und sehr mächtiges ist das Adaptive Theme http://drupal.org/project/adaptivetheme. Bei diesem kann man sogar den Inhalt einer Webseite responsive gestalten. Das Adaptive Theme arbeitet sehr gut mit Panels zusammen und macht diese auch responsive. Ein Blick darein macht auf jeden Fall sinn.
Mehr dazu gibt es bei http://drupal.org/node/1388492
Gibt es Sinnvolle Frameworks?
Frameworks gibt es wie Sand am Meer, hier mal ein Paar die ich bisher ausprobiert und als hilfreich empfunden habe, wenn auch manchmal nur zur Inspiration. In der Auflistung sind sie ohne Wertung sortiert. Es muss je nach Projekt geschaut werden, was gerade am besten passt.
http://twitter.github.com/bootstrap/
http://html5boilerplate.com/html5boilerplate.com/dist/mobile/
http://foundation.zurb.com/
http://susy.oddbird.net/
http://lessframework.com/
http://stuffandnonsense.co.uk/projects/320andup/
http://framelessgrid.com/
Kommentar hinzufügen