Da ich hier auf dem Blog schon eine Weile nicht mehr über die Entwicklung von responsive Webdesigns und responsive WordPress-Themes berichtet habe, möchte ich in diesem Artikel ein paar hilfreiche Erkenntnisse und Tipps teilen, die meiner Ansicht nach bei der Entwicklung von responsive Webdesigns besonders wichtig sind.

1. Browser- und Geräte-Kompatibilität

Natürlich will und sollte man Usern auch auf mobilen Geräten ein möglichst modernes und fortschrittliches Erlebnis beim Besuch der eigenen Webseite bieten. Die nativen Apps setzen deutliche Trends und zeigen, was alles möglich ist. Da wollen natürlich auch Web-Apps und mobil-optimierte Webseiten mithalten und ähnlich optimierte Erlebnisse bieten. Beim Einsatz von Effekten oder CSS-Animationen ist es allerdings immer wichtig darauf zu achten, wie verbreitet die Features in den gängigen mobilen Browsern wirklich schon sind. Eine praktische Auflistung bietet hierzu die Webseite Mobile HTML5.

Mobile HTML5 Feature Vergleich
Auf Mobile HTML5 gibt es einen übersichtlichen Feature-Vergleich für mobile Geräte.

Die Browser- und Geräte-Unterstützung von Features wie der Verwendung von SVG Vektor-Grafiken oder CSS Transitions werden in einer übersichtlichen Tabelle angezeigt.

2. Live testen

Die Funktion von Effekten und dem responsive Verhalten des eigenen Designs sollte man auf jeden Fall so früh wie möglich und auf so vielen Geräten wie möglich live testen. Ein guter Tipp ist es, sich eine Test-Installation anzulegen und gleich das erste grobe Layout live im Browser und auf mobilen Geräten zu testen. Am besten funktioniert dies natürlich, wenn Designer und Entwickler so eng wie möglich zusammen arbeiten können. Effekte die auf mobilen Browsern einfach nicht kompatibel funktionieren, können so viel leichter vermieden werden.

3. Gestaltung für Touch-Screens

Auch bei responsive Webdesigns sieht man meiner Ansicht nach noch sehr oft, dass Links, Buttons oder Formulare nicht wirklich für Touch-Screens optimiert wurden. Abstände, besonders bei Text-Links oder Listen sind viel zu eng, so dass man mit dem Finger (vor allem, wenn man nicht die zartesten Finger hat) nur schwer den richtigen Link treffen kann.

4. Schriftgrößen auf mobilen Geräten

Das Leseverhalten auf mobilen Geräten ist in den meisten Fällen ein anderes, als beim konzentrierten Arbeiten am Desktop-Computer. Vielleicht sitzt man gerade im Café, steht in der Schlange beim Fahrkartenverkauf am Bahnhof an oder liegt entspannt auf der Couch. Auf jeden Fall werden mobile Geräte eher zwischendurch genutzt und oft, wenn der Nutzer nicht hundertprozentig konzentriert bei der Sache ist. Auch die Distanz zwischen Augen und Gerät ist nicht so genau festgelegt. Daher sollte bei der Webseiten-Optimierung für mobile Geräte ganz besonders auf eine angenehm lesbare Schriftgröße geachtet werden.

Lesbarkeit auf dem iPad
Der Vergleich zwischen sehr großzügiger und sehr kleiner Schriftgröße auf dem iPad.

Allgemein kann die Schrift auf mobilen Geräten, vor allem auf Tablets (auf denen mehr Platz zur Verfügung steht, als auf Smartphones) ruhig etwas größer sein. So können auch längere Texte noch gut gelesen werden, ohne das die Augen zu sehr angestrengt werden. Auch eine angenehme, gut lesbare Schriftfarbe in Abstimmung mit dem Hintergrund ist dabei wichtig.

5. Optimierung für Retina-Displays

Retina (HiDPI) Displays werden immer verbreiteter. Entsprechend setzt sich immer mehr durch, Bilder in der benötigten doppelten Größe vorzubereiten. Besonders bei kleinen, detaillierten Icons wie Social Media Icons fällt die unscharfe Darstellung auf Retina-Displays besonders auf. Um Retina-Displays anzusprechen, kann man im Stylesheet die folgenden Media Queries einsetzen:

[code]
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

}
[/code]

Alle im Design genutzten Bilder sollten dann in doppelter Größe z.B. in einem extra Bilder-Ordner “x2” vorbereitet werden. Wenn möglich sollte man aber auf jeden Fall auf Bilder im Design verzichten und stattdessen CSS-Effekte oder Fonts einsetzen, die sich entsprechend skalieren können ohne dabei verpixelt angezeigt zu werden.

6. Überlegungen zum iPad Mini

In den letzten Tagen bin ich auch endlich dazu gekommen, mir das neue iPad Mini live anzuschauen. Wow, das Gerät ist wirklich sehr schön leicht. Allerdings ist mir auch gleich aufgefallen, dass alle Elemente und Schriftgrößen sehr klein dargestellt werden. Genau gesagt ist die Bildschirmauflösung exakt die des iPads 1 und 2 nur wird alles um 19% verkleinert angezeigt. Das 14 oder 12px Schriftgrößen dann (ohne Zoomen) nur noch sehr schwer bis gar nicht mehr lesbar sind, ist auf jeden Fall ein neuer Aspekt, den man bei der Optimierung von responsive Designs für die Tablet-Bildschirmformat 768x1024px beachten sollte. Auch bei den Button-Größen und Text-Links (z.B. in Listen) sollte man also genug Platz einräumen und die Tablet-Ansicht großzügig umsetzen. Speziell über Media Queries im CSS ansprechen kann man das iPad Mini übrigens nicht, da es ja genau das gleiche Maß wie iPads 1 und 2 hat.

7. Keine abgespeckte Version der Inhalte

Insgesamt denke ich ist es wichtig, bei der Gestaltung von responsive Webdesigns die Webseiten-Inhalte immer vorrangig zu behandeln. Denn natürlich wird man auf keinen Bildschirmen immer im Platz eingeschränkt sein. Dennoch sollten Nutzer auf mobilen Geräten keine abgespeckte oder reduzierte Version der Inhalte angeboten bekommen. Alle wichtigen und relevanten Informationen und Funktionen der Webseite sollten auch auf mobilen Geräten zugreifbar sein.

Vielleicht kann man ja Webdesign für mobile Geräte ein wenig mit Innenarchitektur vergleichen, um diesen Aspekt noch etwas deutlicher zu machen. Der 27 Zoll Desktop-Bildschirm wäre dabei dann wohl das große Haus mit vielen Zimmern und jeder Menge Platz. Ein Smartphone im Vergleich ein Studio-Apartment mit der kompletten Wohnfläche in einem kleinen Raum. Doch wenn ein Studio-Apartment geschickt und clever eingerichtet ist, muss man auch auf kleinem Raum auf nichts verzichten. Die Herausforderung liegt also beim Designer (bzw. Architekten), auch für kleine Bildschirme (bzw. kleine Räume) praktische und effiziente Lösungen zu finden.

8. Neues ausprobieren und Erfahrungen teilen

Da für die Entwicklung von responsive Webdesigns ständig neue Techniken, Scripts und Plugins entwickelt werden ist es meiner Ansicht nach besonders wichtig, das eigene Wissen zu teilen und sich miteinander auszutauschen. So können wir insgesamt bessere Lösungen finden und die Entwicklung von responsive Webdesigns und responsive WordPress-Themes weiter optimieren.

Dein Feedback und weitere Tipps

Welche Erfahrungen hast du bei der Nutzung oder der Entwicklung von responsive Webdesigns und responsive WordPress-Themes gemacht? Wo siehst du noch Probleme und Optimierungsbedarf und welche hilfreichen Tipps kannst du weitergeben? Über deinen Kommentar freue ich mich sehr!