Wie groß ist ein Screen? Responsive Konzeption

Jede Website wird heute auf Smartphones, Tablets, Netbooks, Laptops, Desktop-Computern und sogar auf Smart TVs angesehen. Doch die wenigsten machen auf allen diesen sehr unterschiedlichen Geräten eine gute Figur. Eine große Chance für jeden, mit seiner eigenen Site zu punkten, wenn man dieses Thema angeht.

Responsiv heißt: Geht gut auf allen Geräten

Die saloppe Definition: Responsiv nennt man eine Site, die auf jedem Gerät gleichermaßen gut aussieht und zu bedienen ist.

Wie viele Sites sind responsiv?

Seit mehreren Jahren gilt das responsive Design als Top-Thema und doch sind erst 12 Prozent aller Top-Sites responsiv.

Das hat eine Untersuchung der 100.000 Sites ergeben, die am häufigsten besucht werden. Der Web-Optimierer Guy Podjarny hat ein Script geschrieben, das automatisch eine riesige Menge von Sites getestet hat – Details unter: RWD Ratio in Top 100,000 websites – refined

Natürlich hat sich Podjarny nicht alle Websites selbst angesehen. Sein Trick: Erscheint bei schmalem Browserfenster ein horizontaler Scrollbalken, dann ist die Site nicht responsiv. Das ist eine starke Vereinfachung, die aber in fast allen Fällen korrekt ist.

Und ob der Balken erscheint oder nicht, das konnte Podjarny mit einem simplen Script feststellen, das er nacheinander bei allen hunderttausend Sites vorbeigeschickt hat.

Überraschend ist das Ergebnis: Nur jede achte Site ist responsiv. Dafür, dass das Thema seit Jahren so präsent ist, finde ich das höchst erstaunlich. Aber es deckt sich auch weitgehend mit meiner persönlichen Erfahrung als Nutzer – noch immer stößt man ständig auf Sites, die auf dem Smartphone nur leidlich funktionieren.

Gerade komplexere Anwendungen wie Beitragsrechner oder aufwendigere Buchungsstrecken sind bisher noch selten am Smartphone benutzbar. Und selbst solche, die es auf den ersten Blick sind, sind dann unsauber umgesetzt und nicht (oder nur unzureichend) getestet. Neulich wollte ich einen Versicherungsbeitrag online ausrechnen – das ging mit dem Tablet ganz gut – bis ich auf der letzten (!) Seite einer vielseitigen Eingabe-Orgie die Meldung “value ter_undefined is not defined()” bekam und alle Eingaben umsonst waren.

Wann ist eine Site responsiv?

Dass so etwas nicht passieren darf, ist klar. Doch welche Voraussetzungen sollte eine Website heute erfüllen?

Damit eine Site als responsiv gelten kann, muss Sie mindestens diese drei Eigenschaften haben:

1. Adaptiv
2. Zugänglich
3. Angepasst

Adaptiv heißt, die Site passt sich an die Größe des jeweiligen Bildschirms an.

Zugänglich bedeutet, die Inhalte und Funktionen sind unabhängig vom Gerät nutzbar.

Angepasst meint, die Site verändert die Elemente nicht einfach nur, sondern sie nutzt die Stärken des jeweiligen Ausgabemediums und umgeht deren Schwächen.

Das heißt zum Beispiel, dass auf dem Desktop vorhandene Radiobuttons auf dem Smartphone nicht einfach nur vergrößert dargestellt werden, sondern dass die auf Mobilgeräten üblichen Schaltelemente zum Einsatz kommen.

Oder dass man die auf Smartphones üblichen Datumswähler (“Date Picker”) nutzt, wenn ein Datum einzugeben ist.

 

Responsive ist nicht unbedingt mobile, Tablet ist nicht unbedingt unterwegs

Eine Vereinfachung, mit der wir Konzepter oft arbeiten ist, dass wir bei “responsiv” nur an bestimmte Bildschirmgrößen denken. Aber eigentlich geht es um mehr. Es geht um die Nutzungssituation. Das heißt, wenn ich im Auto sitze und mir Mails vorlesen lasse, kann ich nichts Überfliegen. Dann geht es mir wie einem Sehbehinderten, der mit einem Screenreader arbeitet, um sich eine Website vorlesen zu lassen.

Und selbst wenn ich einen Screen vor der Nase habe: Stehe ich im ruckelnden Vorortzug auf dem Weg zur Arbeit, kann ich eine Website mit zu kleinen Touchelementen nur mit Mühe bedienen. Sie ist für mich in dieser Situation kaum zugänglich (“accessible”).

Und hetzte ich durch eine deutsche Bahnhofshalle, um einen Anschlusszug zu bekommen, dann will ich bei der Fahrplanauskunft nur die Treffer in unmittelbarer Nähe sehen – wie ich vom New Yorker Time Square zum Central Park komme, das will ich erst am Abend wissen, wenn ich mit dem Tablet auf dem Sofa sitze und meinen nächsten Urlaub plane.

Das Tablet auf dem Sofa ist das Paradebeispiel dafür, dass mobile Geräte durchaus auch häufig zu Hause genutzt werden. Und das Smartphone ist für viele ein Gerät, das während dem Fernsehen genutzt wird – also auch hier sind die Nutzer dann sozusagen das Gegenteil von mobil.

All das müssen wir im Hinterkopf behalten beim Konzipieren. Und es macht unser Leben nicht einfacher.

Die Fenstergröße sagt nichts über die Plattform

Schließlich dürfen wir nicht vergessen, dass die Größe eines Browserfensters nichts darüber aussagt, auf welcher Plattform der Nutzer gerade ist. In den meisten Fällen ist es in Ordnung, einfach in jedem Fenster, das um die 320 Pixel breit ist, eine Smartphone-Ansicht zu zeigen.

Aber, nicht vergessen: Auch Benutzer, die ihr Browserfenster auf dem Desktop ganz schmal ziehen, bekommen dann diese Ansicht.

Und ein Nutzer, dessen Fenster 1920 Pixel breit ist, kann entweder an einem großen Desktopmonitor sitzen und so eine Schrift mit 12 Punkt gut lesen oder er sieht von seinem Sofa aus auf seinen Fernseher – und kann bei 12 Punkt überhaupt nichts erkennen. Versucht er dann noch, Ihre 20 x 20 Pixel großen Buttons mit der Fernbedienung anzusteuern, ist er vermutlich ziemlich schnell ziemlich frustriert.

Und doch ist es derzeit immer noch die beste Lösung, die Darstellung danach anzupassen, wie breit das Browserfenster des Nutzers ist.

Browserweichen (“browser sniffing”), die nach verwendetem Browser unterschiedliche Versionen ausliefern, haben nie richtig funktioniert. Zu häufig gab es Probleme, Browser zuverlässig zu erkennen und den Code dann für die jeweilige Version so auszugeben, dass dieser immer so dargestellt wird, wie gewünscht.

Problem: Wie groß ist ein Screen?

Für die Konzeption sollten wir also wissen, wie groß ein Screen ist. Wenn wir vereinfachen, dann ist es nicht so schwierig:

Bildschirmgrößen&Auflösungen Apple-GeräteMaße einiger Apple-Geräte, die oft als Referenzgrößen herangezogen werden (vor allem weil es von diesem Hersteller nur eine Handvoll Geräte gibt).

Wenn wir dagegen auch nur die meist verkauften Smartphones mit einbeziehen, dann kommen wir schnell auf drei Dutzend verschiedene Auflösungen nur für Smartphones und Tablet-PCs.

Das Prinzip der Breakpoints

Bleiben wir weiter bei der Vereinfachung: Man setzt in der Praxis bestimmte Pixelwerte an, ab dem eine andere Ansicht angezeigt wird. Diese Werte sind die so genannten Breakpoints, also die Punkte, an denen der Umbruch erfolgt.

 

Typische Breiten sind:

• iPhone hochkant: 320 Pixel
• iPhone 4 und älter quer: 480 Pixel
• iPad hochkant: 768 Pixel
• iPad quer: 1024 Pixel
• Desktop: 1280 Pixel
• Monster-Monitore: 1824 Pixel

Das ist eigentlich das Minimum. Das heißt, selbst für das Minimalprogramm müssen Sie eigentlich nicht nur eine Gestaltung, sondern sechs entwerfen.

Hinzu kommt, dass sich die Pixeldichte der Geräte sehr unterscheidet. Das iPad 2 hat die gleiche Auflösung von 768 x 1024 Pixeln wie das iPad mini. Es ist mit einer Bildschirmdiagonale von 24,6 Zentimetern aber deutlich größer als das iPad mini mit 20 Zentimetern. Bei Fernsehern sind die Unterschiede noch größer – gleich ob 17 Zoll oder 56 – die Auflösung ist bei fast allen 1920 x 1080 Pixel.

Und ständig kommen neue Geräte auf den Markt, die wieder andere Bildschirmgrößen haben.

Sind wir auf dem richtigen Weg?

Es stellt sich die Frage:

Machen wir die gleichen Fehler wie beim Konzipieren von eigenen mobilen Sites vor ein paar Jahren,wenn wir heute feste Breakpoints für bestimmte Geräte annehmen?

Kennt noch jemand die Domain .mobi? Unter der waren einige Jahre lang eigene mobile Sites erreichbar, die speziell für die Darstellung auf den sehr kleinen Bildschirmen von Mobilgeräten optimiert waren. Der Haken: Dafür musste man dann zwei Versionen seiner Site pflegen – eine mobile Version und eine Standardversion. Diesen hohen Aufwand hat kaum jemand betrieben, und daher ist diese Domain nie bei der breiten Masse angekommen.

Wir müssen also aufpassen, dass wir uns nicht wieder etwas ans Bein binden, was dann in ein paar Jahren (oder schon Monaten) hinfällig ist. Was uns nur Mühe macht, aber nicht langfristig angelegt ist und nur mit der aktuellen Technologie funktioniert.

Die Amerikaner sprechen bei der Lösung dieses Problems vom Ideal des “device agnostic designs”. Also der Umsetzung, der es egal ist, auf welchem Gerät sie läuft.

Überlegen Sie einmal: Was passiert, wenn Smartwatches mit 2 Zoll-Bildschirmen sich durchsetzen? Oder projizierte Interfaces? Oder Brillen wie Google Glass?

Wie sehen Ihre Sites auf solchen Geräten aus? Wie kann der Nutzer hier mit ihnen umgehen?

Lösung: Nicht an Geräten orientieren, sondern am Design

Ein Ansatz, wie man heute schon einen Schritt weit weg kommt von der Fixierung auf die Pixelgröße einzelner Geräte ist Folgender:

1. Erstellen Sie ein Design, das auf einem durchschnittlichen Laptop-Screen von z.B. 1024 Pixeln Breite gut aussieht und funktioniert.
2. Verkleinern Sie das Fenster so lange, bis das Design nicht mehr ordentlich benutzbar ist oder scheußlich aussieht.Das ist Ihr erster Breakpoint, also der Pixelwert, ab dem Sie in eine andere Darstellung umschalten.
3. Gestalten Sie diese Darstellung wieder so, dass sie funktioniert und Sie ästhetisch zufriedenstellt.
4. Dann verkleinern Sie das Fenster weiter. Das Spiel geht hier von vorne los: Sie verkleinern so lange, bis das Design auseinanderfliegt. Das ist Ihr nächster Beakpoint. Wenn Sie Glück haben, sind Sie jetzt fertig. Vielleicht müssen Sie aber noch kleiner werden (denken Sie an die Uhren!).
5. Oder noch größer. Auf einem Smart TV soll Ihre Site ja auch nach was aussehen…

Sie sehen: Die Zukunft bleibt weiter spannend. Was glauben Sie, welchen Herausforderungen müssen wir uns als nächsten stellen in der Konzeption von Websites?