Responsive Website Design (RWD)

Homepage to go

Natürlich gibt es keine mobilen Webseiten. Diese kommen immer von einem stationären Server. Aber es gibt Webseiten, die man auf mobilen Geräten betrachten kann. Erst einmal funktioniert das mit den meisten Homepages auf aktuellen Smartphones problemlos.

Aber wie wäre es, wenn man für Nutzer mit mobilen Geräten ein paar Anpassungen vornimmt, damit diese eine Seite komfortabler bedienen können?

Eine Frage sollte man sich vorher stellen. Lohnt sich das überhaupt? Kann ich mir damit neue Nutzergruppen erschließen? Aktuelle Studien zum Thema „Mobiles Internet“ gibt es bei mobilbranche.de – darunter erfreulich viel relevantes aus dem deutschsprachigen Raum.

Es gibt natürlich zahlreiche Listen im Web, welche Geräte wie oft im Web unterwegs sind, welche Displaygrößen die haben usw. Wer will kann versuchen, für jedes Gerät eigene Stilangaben vorzugeben oder mit der Arroganz mancher Großfirmen nur diejenigen Nutzer beliefern, die als unterstützenswert angesehen werden. Solch eine Liste zu Displaygrößen gibt es zum Beispiel auf der hier öfters verlinkten Site quirksmode: www.quirksmode.org/mobile/viewports2.html

Allerdings kommt man mit diesem Ansatz schnell an Grenzen. Es ist schlicht unmöglich, alle Geräte individuell zu bedienen. Daher ist mein Ansatz ein anderer: ein Liquid (auch Fluid) Layout, das dank responsivem Ansatz sowohl die volle Breite von Bildschirmen jenseits der HD-Auflösung ausnutzt, aber dennoch auf Mobilgeräten ausreichend große Schriften zur Verfügung stellt.

Falls überhaupt eine angepasste Version für Smartphones als nötig erachtet wird (siehe meine Kritik zum bedenkenlosen Einsatz „mobiler“ Versionen).

Wenn man sich dann entschlossen hat, die eigene Website so zu gestalten, dass sie auf verschiedenen Displays unterschiedlich daherkommt, empfehle ich keine festen Breakpoints in Form von Pixeln anzugeben. Es geht ja im Grunde genommen darum, ob Inhalte genügend Raum haben, um vernünftig dargestellt zu werden. Der verfügbare Platz kann aber auch auf großen Bildschirmen knapp werden, wenn eine sehr hohe Zoomstufe genutzt wird. In diesem Fall wäre es doch schön, wenn die Seite sich auch auf einem Laptop oder Desktop anders präsentieren würde.

Daher verwende ich Formatierungsanweisungen immer in Kombination mit Breiten-Angaben in em:

@media screen and (min-width: 40em) {
#container {
padding: 0;
}
}

Unabhängig davon, wie man nun kleinere Bildschirme bedient, ist es immer hilfreich zu wissen, was geht wo. Für Desktop-Browser gibt es tolle Referenzen, die das berücksichtigen, zu denen ich unter HTML5, CSS3 und auf der Seite zur Browserkompatibilität kommentierte Links sammel. Für mobile Browser gibt es so etwas auf der Seite mobilehtml5.org.

Die Listen kann man nun alle auswendig lernen oder man probiert selber, was geht. Dazu dienen Emulatoren und Simulatoren, die es für alle üblichen mobilen Browser gibt, zum Beispiel auf www.mobilexweb.com/emulators.

Für eine schnelle Vorschau eignet sich die Seite responsivepx.com.Zu guter letzt hilft nur die Kontrolle mit dem eigenen Tablet und Smartphone. Trotz aller Emulatoren, Kompatibilitätstabellen und anderer Hilfen, muss man mal ausprobieren, wie sich das eigene Werk anfühlt. Meiner Meinung nach reicht es, dafür ein oder zwei Smartphones und/oder Tablets zu haben – am besten mit unterschiedlichen Systemen.

Für den Rest bedarf es – wie beim Entwickeln für große Bildschirme – einer gehörigen Portion Selbstkritik. Ist das wirklich praktisch, was ich da gebaut habe? Oder lässt sich doch noch etwas verbessern?

Besonders hilfreich ist es, wenn man unbedarfte Bekannte an das eigene Werk setzt und diese bittet, Ihre Meinung zu sagen. Aber bitte nicht solche, die davon begeistert sind, dass überhaupt jemand die magischen Fähigkeiten besitzt irgendetwas auf einem Smartphone erscheinen zu lassen, egal was.

Typische Probleme kleiner Bildschirme

Auf einem kleinen Bildschirm kann man nicht alles gut lesbar unterbringen, was auf einen FullHD-Monitor passt. Logisch.

Doch wie ordne ich bestehende Elemente dann an? Oder blende ich bestimmte Texte oder ganze Bereiche der Seite für mobile Nutzer komplett aus?

Meiner Meinung nach gibt es zwei zielführende Ansätze.

Fall 1: ich betreibe ein Blog oder eine kleine Webseite mit flacher Menüstruktur (so wie dieses Blog hier).

Dann kann ich eine mobile Version recht einfach realisieren. Alle Inhalte werden untereinander gezeigt, einen bestimmten Artikel findet man in aller Regel über die Suche. Vor allem aber hat ein Smartphonenutzer den neuesten Beitrag immer gleich oben, zum letzten und vorletzten muss man auch nicht weit scrollen.

Menü und Suche verbergen sich hinter zwei Icons, das recht kleine Suchfeld kann alternativ auch direkt angezeigt werden.

Fertig. (Für haunschild.de ist so etwas noch in der Planung…)

Fall2: umfangreiches Webprotal mit hunderten oder tausenden von aufwändig strukturierten Seiten, Forum, News usw

Für solch eine Seite ein responsives Layout zu entwickeln macht kaum Sinn. Allein das Navigationskonzept wäre nicht nur eine Herausforderung für die Entwickler, in den meisten Fällen ist die Bedinung einer solchen Site für mobile Nutzer eine Zumutung. Hier habe ich zwei Vorschläge:

  • keine mobile Version anbieten. Ein gelegentlicher Nutzer kann mit den Browsern moderner Smartphones die Seite auch so sinnvoll bedienen, wenn auch etwas langsamer, als an einem Desktop-Rechner (auf dem Handy ist sowieso vieles langsamer)Ganz schnell fertig.
  • Die Nutzerstatistik zeigt, dass massenweise Leute mit Smartphones kommen. Dann muss eine eigenständige mobile Version entwickelt werden, auf der gerne auch Inhalte ausgeblendet werden dürfen, denn mobile Nutzer wollen von einer Webseite oft anderes, als Desktop-Nutzer. Den Tablet-Nutzern würde ich persönlich übrigens die (fluide) Desktop-Version anbieten.In jedem Fall sollte es einen Link zur Desktopversion geben.Das wird nicht schnell fertig, aber für Webseiten, die entsprechenden Traffic haben und daraus Einnahmen generieren, kann sich der Entwicklungsaufwand lohnen.

Debugging

The Current State Of Remote Debugging For Mobile

Remote debugging allows us to execute and capture code in remote devices, providing a way to inspect HTML, CSS and JavaScript and make live changes. In terms of mobile, this means a way for us to communicate with mobile devices so we can debug code on them directly rather than just relying on emulators.

The landscape for remote debugging your apps on mobile is quite strong at the moment.

Chrome for Android supports remote debugging via USB and allows you to debug using the Chrome Developer Tools. (See: https://developers.google.com/chrome/mobile/docs/debugging and Chrome for Android Remote Debugging for +Boris Smus’s video walkthrough)

Opera has had support for remote debugging since 2008 and Dragonfly can remotely connect to Opera Mobile. (Tut: http://www.codegeek.net/blog/2012/mobile-debugging-with-opera-dragonfly/ )

Firefox for Android has had support for remote debugging since July and introduced support for this in Firefox 15. (Tut: https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for- android/)

Safari on iOS6 includes an official Remote Web Inspector which will work with Macs. You’ll have to use Safari 6 for Desktop to get it working, but there’s a good tutorial available on this as well http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers.

There are also tons of great apps that can help with remote debugging, such as +Remy Sharp’s jsconsole.com or Weinre.

For a run-down on remote debugging and some more of your options, you might like to checkout Ryan Seddons excellent talk on the subject http://thecssninja.com/talks/ remote_debugging/

Addy Osmani

Links

Tools

Geräate und/oder Bildschirmauflösungen erkennen mittels @media-snippets

Diskussion, angestoßen vom geschätzten Kollegen Klaus Scharwächter

http://xhtmlforum.de/68120-f-r-smartfonausgabe-link-zum-normalen.html

Weiterführende Links zum Thema:

Buchempfehlung

Fertige Lösungen

WordPress Themes

Bessere Ideen, mehr Links zum Thema oder Fehler gefunden?

Ich freue mich über konstruktive Kommentare mit Lob und Tadel!

1 thought on “Responsive Website Design (RWD)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.