Best-Practices bei der Erstellung eines Responsive Webdesign

Posted by in Allgemein, Pattern, Technologien, Webdesign

Was responsive Design ist und warum es immer wichtiger wird, darauf möchte ich in diesem Artikel gar nicht weiter eingehen. Dazu gibt es im Netz bereits viele gute Artikel. Zum Beispiel der Artikel von Juergen Liechtenecker aus dem Jahr 2011.

Was ich vielmehr zeigen möchte, sind ein paar Fallstricke die man vermeiden sollte und wie man recht einfach und zielstrebig zu einem guten „responsive webdesign“ kommt.

Grid Design

Da sich das Design je nach Ausgabegerät anpassen soll, ist es wichtig, dass das Layout flexibel ist. Man benötigt Layoutblöcke, die sich schön an die jeweilige Auflösung anpassen. Damit man in der ganzen Flexibilität noch irgend etwas greifbares hat, haben sich Grid Layouts durchgesetzt. Man kann sich das wie das Spaltenlayout einer Zeitung vorstellen. Ein gutes und gängiges Framework ist das 960 Grid System. Auf der Seite sind auch viele Beispiele, die zeigen, dass ein Grid Layout nicht unbedingt hässlich oder unspektakulär sein muss. Damit kann man Layout im 12 oder 16 Spaltendesign umsetzen. Der Vorteil von 960 Pixeln ist, dass sie durch 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 und 480 teilbar sind. Damit lässt sich das Design sehr flexibel verändern.

Wer mag, kann jedoch auch ein eigenes Grid-Design verwenden. Nachdem man erst einmal die Grundlagen verstanden hat, kann man es problemlos auf eigene Grids anwenden. Hier zum Beispiel ein paar Designentwürfe von einem festen 10×6 Grid, welches ich in einem aktuellen Projekt verwendet habe. Der Clou besteht dabei darin, dass das Layout auf dem Desktop eine fixe Höhe hat, für die mobilen Varianten jedoch flüssig wird.

Grid_Webseite_1

Mobile First oder doch nicht?

Wenn man normalerweise eine Webseite entwirft, beginnt man mit der Desktop Variante und versucht diese dann geschickt so umzubauen, dass sie auch auf mobilen Geräten gut aussieht. In der Regel fängt man dann an, bestimmte Elemente auszublenden oder zu ersetzen. Da jedoch immer mehr Menschen mobile Geräte wie Smartphones und Tablets nutzen entsteht auch vermehrt das Bedürfnis alle Inhalte der Originalseite zu bekommen. Das Weglassen von Inhalten wird von den Nutzern also immer weniger toleriert.

Hier greift nun der Ansatz „mobile first“. Anstatt mit der Desktopvariante zu beginnen, entwickelt man zuerst die Mobile Seite und erweitert sie später für die Desktop Variante. So bekommt man eine optimierte Mobile Seite und muss auch keinen Content weglassen oder verstecken.

Auch wenn der Hype „mobile first“ interessant ist, so sollte man ihn auch nicht überbewerten. Denn erstens ist nicht jedes Projekt gleich. Entscheidend ist vor allem die Zielgruppe. Aktuell machen auf einer durchschnittlichen Webseite mobile Benutzer nur zirka 6% der Webseitenbesucher aus. Und zweitens ist der Ansatz „mobile first“ aus meiner Sicht nur eine Vorgehensweise um fehlende Erfahrungen in der Erstellung mobiler Webseiten zu kompensieren. Da der Hauptanteil der Besucher nach wie vor einen Computer benutzt, sollte man die Webseite auch vorrangig für diese Zielgruppe optimieren. Insbesondere, wenn man eine Enterprise Webseite mit conversionkritischen Inhalten betreibt. Und im nächsten Schritt sollte man dann schauen, wie man diese Inhalte auf mobilen Endgeräten optimal darstellen kann, ohne die gewohnte Usability des Desktops zu sehr zu verlieren. Hier kann man jedoch mit fortschreitender Erfahrung auf standardisierte Pattern zurück greifen.

Ein Negativ-Beispiel für „mobile first“ ist sicherlich Windows 8. Design- und Bedienelemente, die auf einem Smartphone oder Tablet funktionieren sind auch einem Desktop-PC mit Maus nicht unbedingt die optimale Usability. Denn ein Desktop-PC kann durch die Maus feinere und kleinere Elemente auswählen. Durch den größeren Bildschirm kann ich kleinere Elemente darstellen und somit mehr Informationen auf einen Blick erfassen. Wieso sollte man den Benutzer hier also künstlich einschränken? Jedes Gerät hat durch seine Größe bestimmte Vor- und Nachteile. Dieser sollte man sich bewusst sein. Alle über einen Kamm zu scheren ist zwar sicher einfacher, verschenkt jedoch unnötiges Potential.

Wie viele verschiedene Layouts benötige ich?

Diese Frage kann man sicherlich nicht eindeutig beantworten. Hier entscheidet auch wieder der Einzelfall. Ich habe mich für drei grundsätzliche Layouts entschieden. Diese sind auch oben beim Thema Grid schematisch dargestellt. Ein Layout für den Desktop, eins für das Tablet und eins für Smartphones. Natürlich kann man auch noch gezielte Zwischenversionen entwickeln. Insgesamt muss man jedoch immer zwischen Aufwand und Nutzen abwägen. Mehr Layouts ermöglichen ein besseres Design auf verschiedenen Größen. Jedoch erfordert es auch mehr Aufwand, da diese Layouts gepflegt und bei Änderungen mit getestet werden müssen.

Pixel Density von Ausgabegeräten ignorieren

Nachdem ich nun meine Meinung und meine Erfahrungen mitgeteilt habe, geht es nun ans Eingemachte. Wie bekomme ich zielstrebig meine mobile Webseite umgesetzt? Nachdem ich bereits ein Grid entworfen und die Webseite für den Desktop umgesetzt habe, möchte ich beginnen die Mediaqueries für die verschiedenen Ausgabegeräte zu schreiben. Hier kommt es jedoch zu einem Problem: die verschiedenen Pixeldichten der Ausgabegeräte. Ein gutes Beispiel ist das iPhone 5 mit seinem Retina Display. Obwohl es eine Displayauflösung von 640×1136 Pixel hat, so rendert der Browser nur 320×568 Pixel. Es werden also 2×2 Pixel des Displays verwendet um 1 Pixel im Browser zu rendern. Text und Bilder werden jedoch mit der vollen nativen Auflösung gerendert. Dadurch wirkt das Ausgabebild deutlich schärfer. Auch andere moderne Smartphones wie das Samsung Galaxy S2 oder S3 verwenden eine erhöhte „pixel density“. Und weil es soviel Spaß macht, gibt es nicht nur den Faktor 2, sondern auch andere Faktoren wie 1,5. Damit man nicht für jedes Smartphone eine eigene Mediaquery schreiben muss und die Webseite auf dem Gerät auch so aussieht, wie man es auf dem Desktop durch Verkleinern seines Browsers ausprobiert hat, gibt es einen einfachen Trick:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Durch diesen einfachen Meta-Tag zwingt man das Ausgabegerät mit einer Pixeldichte von 1 zu rechnen und die Ausgabe auf dem Smartphone entspricht der Vorschau auf dem Desktop. Man muss sich nun keine Gedanken mehr um die verschiedenen Displaytypen machen. Mit den verschiedenen Auflösungen haben wir schon genug zu tun, wie wir gleich sehen werden.

Cheat Sheet für Media-Queries

Im Folgenden habe ich den Grundaufbau einer CSS-Datei aufgelistet, welche für responsive design verwendet werden kann. Ich verwende dabei, wie oben erwähnt, drei grundsätzliche Layouts. Eines für den Desktop mit einer Auflösung von mindestens 1024 Pixeln, eines für Smartphones und noch eine Zwischenversion, welche besonders für Tablets mit einer Auflösung kleiner als 1024 Pixel geeignet ist.

Im Abschnitt 1 wird das Layout für den Desktop definiert. Dies kann natürlich auch in einer extra CSS-Datei geschehen und in der unten aufgelisteten responsive.css werden nur die Anpassungen für die Layouts vorgenommen. Dann könnte sich im Abschnitt 1. zum Beispiel die Griddefinition befinden.

Im Abschnitt 2 kommen dann die Anpassungen für Tablets und im Abschnitt 3. dann die für Smartphones. In den Abschnitten 1.1, 2.1, 2.2, 2.3, 3.1 und 3.2 kann dann noch Feintuning für bestimmte Ausrichtungen der Ausgabegeräte vorgenommen werden. Zum Beispiel können Bilder gezielt für diese Layoutvarianten ausgegeben werden.

Insbesondere in Verbindung mit dem nächsten Tipp, der Schnellübersicht im Firefox erweist sich dieses CSS Cheat-Sheet als sehr nützlich.

/* @section 1. Desktop Auflösung */
 
 
/* @section 1.1 Large screens (HD) */
/* ================================================== */
/* Note: Design for a width of 1440+px */
@media only screen and (min-width: 1440px) {
}
 
/* @section 2. Small Tablet */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (max-width: 1023px) {
}
 
/* @section 2.1 Small tablet landscape (800x600) */
/* ================================================== */
/* Note: Design for a width of 800px - 1023px */
@media only screen and (min-width: 800px) and (max-width: 1023px) and (orientation: landscape) {
}
 
/* @section 2.2 Tablet portrait (768x1024) */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
}
 
/* @section 2.3 Tablet landscape (1024x768) */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (min-width: 1023px) and (max-width: 1439px) and (orientation: landscape) {
}
 
/* @section 3. Mobile, Small Tablet (Portrait) */
/* ================================================== */
/* Note: Design for a width of 320px - 768px */
@media only screen and (max-width: 767px) {
}
 
/* @section 3.1 Mobile landscape (480x320) */
/* ================================================== */
/* Note: Design for a width of 480px - 599px */
@media only screen and (min-width: 479px) and (max-width: 599px) {
}
 
/* @section 3.2 Small tablet portrait (600x800) */
/* ================================================== */
/* Note: Design for a width of 600px - 799px */
@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
}

Was man vermeiden sollte, sind durch Komma getrennte Media-Queries wie im folgenden Beispiel. Im Internet Explorer 8 hatte ich damit irgendwie ziemliche Probleme, da am Ende auch im Vollbild auf dem Desktop die mobilen Regeln gegriffen haben.

@media screen and (max-device-width: 800px), only screen and (max-width: 800px) {}

Schnelle Vorschau mit der Webdeveloper Toolbar im Firefox

Die meisten Webentwickler haben sie sicher sowieso schon installiert: Die Webdeveloper Toolbar für Firefox. Ein sehr nützliches Feature, welches mit einer der letzten Versionen Einzug gehalten hat, ist die Schnellvorschau für Responsive Designs. Einfach unter Resize auf „Responsive Layouts“ klicken und es öffnet sich eine Übersichtsseite, in der die die aktuelle Seite mit den gängigen Bildschirmgrößen von mobilen Geräten ausgegeben wird. Ideal um schnell die Auswirkungen der Mediaqueries in den verschiedenen Ausgabegrößen zu testen.

Screenshot_Webdeveloper_Toolbar

Responsive Layouts from http_www.wissenstausch.com_2013_03_einfache-seo-urls-mit-zend-routen_20130324_212106

Um CSS-Anpassungen im normalen Fenster schnell auszuprobieren empfiehlt sich neben Firebug auch noch der CSS Reloader.

Test von Fingergesten im Chrome

Auf Smartphones und Tablets lassen sich Seiten auch mit Fingergesten steuern. So kann man zum Beispiel Bildergalerien mit einem Fingerwisch durchblättern, so wie man es mit einem echten Buch machen würde. Bestimmte jQuery Plugins wie zum Beispiel der FlexSlider 2 unterstützen diese Art der Navigation von sich aus. Leider funktionieren diese Gestern in einem normalen Desktopbrowser nicht. Ausnahme ist hier jedoch der Google Chrome Browser. Einfach F12 drücken, rechts unten die Eigenschaften öffnen und Emulate Touch Events aktivieren. Und schon kann man mit der Maus genauso wie mit dem Finger wischen und das Interface der mobilen Seite testen. Ebenso kann man in den Eigenschaften auch verschiedene Auflösungen und Pixeldichten einstellen.

Screenshot_Chrome_Device_Overrides

Schlusswort

Ich hoffe damit ein paar Ansätze gezeigt zu haben, wie man die Fragmente zum Thema „responsive webdesign“ in einem eigenen Workflow zusammen fassen kann, so dass eine responsive Webseite mit überschaubarem Aufwand zielgerichtet entwickelt werden kann. Für Feedback und Kritik bin ich immer dankbar. =)