Mobile und Web-Version in einer Website
Das Schlagwort Responsive Web Design geistert schon länger durch die Web-Entwicklerszene. Und mit der immer stärkeren Verbreitung von Mobilgeräten zum Surfen wird es immer wichtiger. Apple hat mit dem neuen iPad gerade wieder das Leben für die Nutzer besser und für die Entwickler mühsamer gemacht.
Was ist Responsive Design?
„Responsive“ ist das Design einer Website, wenn ihre Seiten auf allen Browsern und auf allen Geräten optimal dargestellt werden. Optimal heißt, sie sehen gut aus, alle Inhalte sind zugänglich und sie sind gut zu benutzen. Und das gleichermaßen auf dem kleinen Screen eines Smartphones, auf dem Laptop-Bildschirm und auf dem riesigen Desktop-Monitor.
A List Apart in Safari bei normal großem Fenster (links) und auf dem iPhone (rechts)
Ähnlich wie die Barrierefreiheit ist das immer nur ein Ziel, das praktisch nie ganz erreicht werden kann. Allein das Testen auf allen theoretisch möglichen Browser-Geräte-Kombinationen ist schon unmöglich. „responsive“ ist eine Seite übrigens, weil sie „antwortet“ (=respond), d.h. sie reagiert auf die aktuelle Umgebung des Besuchers.
Die Technik hinter Responsive Webdesign
Responsives Webdesign nutzt HTML5 und CSS, um die Darstellung einer Seite so anzupassen, dass sie in der aktuellen Umgebung gut aussieht. Dabei werden zumindest folgende Faktoren berücksichtigt:
- Größe des Fensters bzw. des Bildschirms
- Verwendeter Browser und seine Möglichkeiten zur Darstellung
- Orientierung (Hoch- oder Querformat)
Hinzu kommt immer häufiger noch der Faktor Auflösung. Denn wer auf hochauflösenden Displays, wie sie iPhone 4S und iPad 3 verwenden, brillante Grafiken anzeigen will, der muss auch Bilder in einer entsprechenden Qualität ausliefern.
Allein der vergleichsweise kleine Apple-Gerätepark hat eine Vielzahl unterschiedlicher Bildschirmgrößen und Auflösungen.
Die Kür: weiter denken
Ein gutes responsives Design ändert aber nicht nur die Größe von Bildern und die Breite von Spalten. Es zieht die ganze Nutzungssituation in Betracht. Das heißt zum Beispiel, dass Nutzer, die über ein Mobilgerät auf die Site zugreifen, die Informationen anders strukturiert bekommen. Die Site eines Ladengeschäfts etwa könnte in der Mobilversion die Anfahrt und die Öffnungszeiten prominenter platzieren. Dabei kann man aber auch daneben liegen – viele Nutzer surfen auch vom Sofa aus mit ihrem Smartphone. Daher sollte man auf jeden Fall dafür sorgen, dass alle Informationen zugänglich sind.
Hinweis auf die mobile Version bei zeit.de
Gutes responsives Design im eigentlichen Sinn nutzt nur eine einzige Version der Site – eigene mobil-Versionen oder Apps sind ein anderer Ansatz, um Nutzern eine gute User Experience zu bieten. Ob man solche Versionen oder eigene Apps erstellt, muss im Einzelfall entschieden werden. Sinnvoll ist es auch, den Nutzer nicht zu zwingen, eine bestimmte Version zu nutzen. Einerseits ist es bequem, wenn die Site sich merkt, welche Version er beim letzten Besuch genutzt hat. Andererseits sollte er aber auch immer die Möglichkeit haben, wieder zu wechseln. Vielleicht will er diesmal auf Inhalte oder Funktionen zugreifen, die er beim letzten Besuch nicht gebraucht hat?
Wo und was testen?
Wie erwähnt, kann man nicht alle Möglichkeiten testen, um zu sehen, ob die eigene Site gut dargestellt wird. Man sollte das aber möglichst zumindest tun unter:
- Mac
- PC
- iPhone
- iPad
- Android
- Windows 7 Phone
Und als Browser sollte man die großen Drei testen:
- Internet Explorer
- Firefox
- Safari/Chrome (basieren beide auf Webkit)
Bei den Versionen wird es schon schwieriger – will man hier alle testen, die noch in Gebrauch sind, hat man viel vor. Ein Blick in die Logfiles der Site hilft bei der Entscheidung, welche Versionen man weglassen kann.
Links
Responsive Web Design and Adapting for Mobile Designs
Eine gute Übersicht mit Tipps für Responsive Design
Adobe Shadow
Die Beta-Version des hilfreichen HTML-Test-Tools von Adobe
Responsive Web Design: 50 Examples and Best Practices
50 tolle Beispiele für Resonsive Webdesign
Responsive Web Design: What It Is and How To Use It
Ein hervorragender Workshop für alle, die Responsives Webdesign selbst umsetzen wollen
Bildquellen
- Responsive-Web: © georgejmclittle - Fotolia.com
Vielen Dank für diesen sehr ausführlichen Beitrag Jens!
Da entstand bei mir sofort ein Ahhh!-Effekt. Gerade die festgelegten Auflösungsgrößen waren für mich immer eher ein Ratespiel als eine objektive Information!
Was toll wäre, wenn du noch ein wenig mehr auf die Media Querys für CSS einen Artikel schreiben könntest. Da diese ja eben auch das responsive Webdesign ohne Java Script ein wenig nochmals vereinfachen.