Noch vor zehn Jahren war die Welt als Web-Konzepter einfach: Zu den größten Problemen gehörte, wie man eine Sitemap mit mehr als 30 Seiten anlegt oder wie man möglichst viel auf der Startseite unterbringt, so dass es auf dem Standardmonitor mit 800 x 600 Pixeln gut aussieht.
Heute sind unsere Aufgaben bedeutend spannender, aber auch herausfordernder. Nach wie vor ist der technologische Wandel der Hauptgrund dafür. Für Website-Konzepter ganz wichtig: Die Monitore sind seitdem viel größer geworden – und paradoxerweise gleichzeitig auch viel kleiner: Mittlerweile haben 90 Prozent aller Deutschen über 14 Jahre ein Handy, fast zwei Drittel davon sind Smartphones – mit vergleichsweise kleinen Bildschirmen.
Aber damit nicht genug. 32 Prozent der Deutschen sehen regelmäßig auf einen weiteren Bildschirm – sie nutzen einen Tablet-PC. Und Fernseher haben 70 Prozent aller Haushalte.
Und auf allen diesen Bildschirmen wird Ihre Website angesehen. Die meisten Website-Anbieter haben das einfach lange ignoriert – der Erfolg des 2007 eingeführten iPhones beruhte auch darauf, dass es als erstes Smartphone Standard-Websites ordentlich anzeigen konnte. Erstmals konnte man also unterwegs das Internet vernünftig nutzen.
Anzahl der Smartphone-Nutzer in Deutschland. Mehr Statistiken finden Sie bei Statista
Doch heute gibt sich niemand mehr damit zufrieden, eine Website nur irgendwie auf seinem Smartphone aufrufen zu können. Sie soll dort gut aussehen, die wichtigsten Informationen leicht zugänglich darstellen und im Idealfall spezielle Funktionen bieten, die man unterwegs braucht.
Eine Antwort auf dieses Problem ist das Responsive Design (siehe Optimale Webseiten für alle Geräte – Responsive Design). Wichtig dabei: Unter „Design“ fällt hier keinesfalls nur die grafische Gestaltung – im Deutschen wird dieses Wort oft so genutzt. Vielmehr ist damit die gesamte Konzeption der Website gemeint. Eigentlich müsste man im Deutschen besser von Responsiver Konzeption sprechen.
Für eine gute Responsive Konzeption sollten Sie immer auch im Blick haben, dass die Nutzer nicht nur ein Gerät nutzen, sondern mehrere. Ein typisches Beispiel:
Ich sitze im Bus und vertreibe mir die Zeit mit der Recherche nach einem neuen Kopfhörer auf meinem Smartphone. Während ich dann später im Konferenzraum auf den Anfang der Besprechung warte, lese ich auf meinem Laptop die Beschreibung eines Kopfhörermodells, das in die engere Wahl kommt, auf der Herstellerseite weiter.
Abends auf der Couch suche ich mit meinem Tablet-PC Rezensionen und sehe mir ein paar Vergleichsmodelle an.
Am nächsten Tag schließlich sitze ich vor meinem Desktop-PC und bestelle schließlich den Kopfhörer in einem Online-Shop.
Das heißt: Die Nutzer verwenden die verschiedenen Geräte nicht entweder-oder, sondern sie verwenden mehrere davon – man spricht von der Multiscreen Experience. Manchmal verwendet man sogar mehrere Geräte gleichzeitig – dann spricht man vom Second Screen (dazu gleich mehr).
Ein Beispiel dafür, wie man die Nutzer gut unterstützt beim Verwenden mehrerer Geräte sind die Continuity-Funktionen von Apples neuestem Betriebssystem. Mit der Handoff-Funktion lässt sich Device Shifting erreichen. Das heißt, ich kann ein E-Mail am Desktop-PC beginnen und dies auf dem iPhone fertig schreiben – sobald ich die Mailanwendung öffne, erscheint das Mail, an dem ich gerade gearbeitet habe.
Oder ich kann im Adressbuch auf dem Laptop auf eine Telefonnummer klicken, die das iPhone dann selbstständig wählt.
https://youtu.be/f5ziMF73ABM
In diesem Video sieht man, wie Handoff unter OSX und iOS funktioniert – außerdem demonstriert es, wie das Telefonieren am Computer via iPhone geht.
Synchronisation von Lesezeichen und Passwörtern, wie sie Safari, Chrome oder Firefox bieten, gehen in dieselbe Richtung: Man arbeitet an dem Gerät, was gerade verfügbar ist, und hat alle Informationen automatisch auf allen seinen Geräten.
Entwicklung der Bildschirme
Die ersten Heimcomputer in den 1970er und 80er Jahren nutzten Fernsehbildschirme zur Ausgabe – mehr als 640 x 200 Pixel konnten diese nicht vernünftig anzeigen.
1987 kam das VGA-Display von IBM auf den Markt – 640 x 480 war dessen Auflösung. Es setzte den Standard bis in die Mitte der 1990er – also zu Beginn des Web.
Bis etwa vor zehn Jahren waren dann 800 x 600 Pixel am weitesten verbreitet, und 1024 x 768 bis circa 2008.
2007 kam das erste iPhone auf den Markt, und damit brach das Zeitalter der Smartphones an. Mit 480 × 320 Pixeln war es ein Schritt zurück in die Vergangenheit – allerdings passte mit seiner deutlich höheren Auflösung deutlich mehr auf den Bildschirm, der nur knapp 9 Zentimeter in der Diagonale maß. Mehr als doppelt so viel kann man auf dem 163-ppi (Pixel pro Inch)-Bildschirm des ersten iPhone unterbringen wie auf den 2007 noch verbreiteten 72 ppi-Monitoren.
Bis zum Erfolg der Smartphones gab es für Website-Konzepter bei der Gestaltung nur eine Richtung: vorwärts. Die Bildschirme wurden immer größer. Auf einmal musste man Seiten auch für Bildschirme anlegen, die kleiner waren als alles, auf dem jemals Websites geöffnet worden waren.
Technik beeinflusst Verhalten beeinflusst Inhalte
Vorhandene Möglichkeiten verändern das Verhalten der Benutzer. So hat zum Beispiel die Fernbedienung (die sich erst in den 1980er Jahren verbreitete) das Nutzerverhalten stark verändert: Zuschauer wechselten viel häufiger den Sender. Sie mussten jetzt nicht mehr aufstehen, um zu einem anderen Kanal zu schalten, sondern konnten das bequem vom Sofa aus tun. Also machten sie es viel häufiger.
Diese Verhaltensänderung hat das Programm, die Erzählstruktur insbesondere von Serien und den Umgang mit Werbung generell verändert. Das heißt, mittelbar hat die neue Technik auch die Inhalte und das Erstellen dieser Inhalte beeinflusst.
Deshalb ist es als Konzepter wichtig, auch mit der Technik Schritt zu halten und die Verhaltensänderung der Nutzer zu beobachten.
Der moderne Gerätezoo
In fast jedem Haushalt finden sich heute mindestens diese Bildschirme:
- Fernseher (mit Satelliten-/Kabel-Receiver, HD-Recorder, DVD-Player, Spielekonsole…)
- Smartphone
- Tablet
- MP3-Player/iPod
Mit fast allen davon kann man auch ins Web gehen.
Laut ARD/ZDF-Onlinestudie 2014 stehen pro Haushalt, in dem das Internet überhaupt genutzt wird, im Schnitt 5,4 internetfähige Geräte zur Verfügung.
Und die Geräte werden immer mehr. Schon sind 4K-TVs in der Entwicklung, also Fernseher, die die vierfache Auflösung der derzeitigen HD-Fernseher haben. Manchmal liest man auch die Abkürzung 4K2K (wegen der ca. 4.000 x 2.000 Pixel in Höhe und Breite) oder auch Ultra HD.
Auch die Bildschirme von Smartphones werden immer größer – eine Auflösung wie bei HD-Fernsehern (1.920 x 1.080 Pixel) sind heute auch schon nicht mehr ganz neu.
In die gegenteilige Richtung geht die Entwicklung von alternativen Displays, etwa bei Smart Watches. Diese gibt es schon seit ein paar Jahren, und richtig durchgesetzt haben sie sich noch nicht auf dem Markt.
Es bleibt abzuwarten, ob Apple hier wieder einer neuen Geräteklasse zum Durchbruch verhilft, wenn 2015 seine iWatch zu kaufen ist. 386 x 480 oder 480 x 640 Pixel sind die bisher überzeugendsten Vermutungen zur Auflösung dieser Uhren.
Second Screen
Dass Benutzer nicht nur fernsehen, wenn sie vor dem Fernseher sitzen, ist nichts Neues – Bügeln, Basteln, Essen, Reden gehören für viele seit Jahrzehnten zum Fernsehabend.
Seitdem wir das Internet stets in Griffweite haben, nutzen wir beim Fernsehen auch das Web mit Smartphone oder Tablet. 57 Prozent der Internetnutzer gehen zumindest gelegentlich online, während sie vorm TV sitzen. 15 Prozent machen das sogar täglich (lt. ARD/ZDF-Onlinestudie 2014).
Und 34 Prozent der Onliner gaben an, dass sie zumindest gelegentlich nicht nur ihre Mails beantworten oder online Shoppen, sondern sendungsbezogen im Web unterwegs sind. Das kann die Hintergrundrecherche zu einem Schauspieler oder einem Sachthema sein, das in der laufenden Sendung angesprochen wird.
An den Zugriffszahlen der Wikipedia kann man zum Beispiel erkennen, welche Themen in der laufenden Sendung von „Wer wird Millionär“ gerade gefragt sind.
Eine weitere beliebte Tätigkeit ist der Austausch über die laufende Sendung via Facebook oder Twitter – das wurde Social TV getauft.
Und schließlich gibt es noch spezielle Bereiche der Sender-Websites oder gar eigene Apps, die ausdrücklich dazu anregen, während der Fernsehsendung den Second Screen zu nutzen.
Second Screen für Games
Computerspiele nutzen ebenfalls den Second Screen. Es gibt sowohl Apps für einzelne Spiele also auch Apps für ganze Konsolen wie für die Xbox One oder die PlayStation. Allerdings scheinen diese nicht gut angenommen zu werden, meint zumindest Mike Wehner vom TUAW-Blog.
Die Nintendo-Spielkonsole Wii U hat einen Controller mit Touch-Bildschirm. Damit kann man in Spielen Zusatzinfos abrufen oder das Geschehen steuern. Bisher verkauft sich die Konsole allerdings schleppend.
Ob es an den Konzepten liegt und diese einfach noch nicht gut genug sind? Oder brauchen die Nutzer einfach noch eine Weile, bis sie sich an die neuen Nutzungsszenerien gewöhnt haben?
Weitere Infos
Wer mehr darüber wissen will, was die Deutschen online so tun, der kann sich die gute und umfangreiche ARD/ZDF-Onlinestudie 2014 durchlesen:
ard-zdf-onlinestudie.de
Konkretere Tipps dazu, wie man sich bei der Konzeption der eigenen Website auf die Vielzahl genutzter Bildschirme einstellt, gibt es bei Google:
Building Websites for the Multi-Screen Consumer
Und schließlich haben Wolfram Nagel und Kollegen eine schöne Site erstellt, auf der sie viele Inhalte ihres Buchs zum Thema kurz vorstellen:
Multiscreen Experience Design
Guten Tag Herr Jacobsen,
vielen Dank für dieses interessante Thema.
Seit einiger Zeit befasse ich mich mit responsive Design (oder wie Sie richtig sagen: responsiver Konzeption) und sehe mir an, wie webshop-Baukästen und bootstrap das umsetzen – nämlich -soweit ich verstanden habe- über die Pixelanzahl.
Hier habe ich eine Wissenslücke bei mir festgestellt: Wie kann ich sicherstellen, dass (m)eine WebSite auf zB einem Smartphone immer (?) gleich aussieht, wenn die Auflösung -bei gleicher Displaygröße- sehr unterschiedlich ist ? Oder umgekehrt: Wenn die Bildschirmauflösung sowohl auf einem 17″ Monitor und als auch auf einem Smartphone-Display mit 5″ gleich ist, wie stelle ich dann die gute Lesbarkeit auf beiden Geräten sicher ?
Mit freundlichen Grüßen
Michael Ziem
Hallo Herr Ziem,
danke für die Frage, sie sprechen da etwas ganz Wichtiges an.
Wer möchte, dass eine Seite auf mehreren Geräten gleich aussieht, der hat ganz, ganz viel Arbeit vor sich. Aber diese Arbeit kann man sich aus meiner Sicht sparen. Die Seite muss nur gleich gut funktionieren auf allen Geräten und jede Site sollte auf allen Geräten eine ähnliche Anmutung haben.
Es gibt vielleicht tatsächlich einen 17″ Monitor und ein Smartphone-Display mit 5″, die die gleiche Auflösung haben. Häufig wird das aber nicht der Fall sein. Und: Wir haben das Smartphone viel näher am Gesicht und können daher auch kleinere Elemente besser lesen. Außerdem sorgen die Smartphone-Hersteller dafür, dass bei ihren Geräten Auflösung und Pixeldichte so aufeinander abgestimmt sind, dass die meisten Websites darauf einigermaßen gut lesbar sind. Das heißt, wenn Sie sich bei der Gestaltung an guten, häufig besuchten Sites orientieren, sind Sie schon mal auf einem guten Weg.
Sie können über den
User Agent
herausbekommen, mit welchem Browser und damit mit welchem Gerät ein Nutzer Ihre Seiten aufruft. Dann kann man eine so genannte Browser-Weiche erstellen. Das heißt, Sie liefern für unterschiedliche Browser unterschiedliche Seiten (meist nur unterschiedliche CSS-Dateien) aus. Diese Technik macht aber viel Arbeit und Sie müssen die Darstellung auf allen Geräten testen. Manchmal nennt man dieses Vorgehen mit der Browserweiche Adaptives Design im Gegensatz zum Responsiven Design.Letztlich gibt es leider keine kurze Antwort: Sie sollten am besten viel Zeit für viele Tests mit vielen unterschiedlichen Geräten vorsehen. Ich persönlich würde eher ein resonsives Design empfehlen, da es weniger Arbeit ist und in den meisten Fällen ähnlich gute Ergebnisse liefert.
Ich hoffe, damit haben Sie zumindest einen Ansatzpunkt für weitere Recherchen…
Frohes Konzipieren, Jens Jacobsen