• Tel.: 0511-9239990

Responsive Webdesign – One Size Fits All?

06.September 2012 - Gastbeiträge -

Kaum ein Thema lässt aktuell die Herzen von Entwicklern und Auftraggebern von Webseiten höher schlagen als das Buzzword „Responsive Webdesign“. Zeit für einen kritischen Blick hinter die Fassade des Begriffs.

Was genau verbirgt sich dahinter?
Seit der Einführung von CSS3 ist es möglich, durch die Bildschirm- oder Browserfensterbreite die Stile zu beeinflussen, die die Darstellung und Größe der einzelnen Website-Elemente bestimmen. Zusammen mit dem Ansatz des Fluid Layouts, bei dem Elementen eine prozentuale Breite des Bildschirms zugewiesen wird, passt sich das Design an den verfügbaren Platz an. Wirklich neu ist beim „Responsive Design“, dass Elemente auch ihre Position wechseln, ein- und ausgeblendet und in ihrer Darstellung verändert werden können.

Responsive Design

Schematische Darstellung von verschiedenen Ansätzen der technischen Umsetzung von Internetprojekten. Oben: Eigenständiges Projekt für jede Gerätegruppe. Mitte: Fluid Layout ohne Anpassungen für einzelne Gerätegruppen. Unten: Responsive Design mit Anpassungen für einzelne Gerätegruppen. Diese Herangehensweise ist beim Responsive Design dringend zu empfehlen!

Heißt das, wir brauchen keine spezielle mobile Website mehr?
Jein. Viele Faktoren bestimmen, ob eine Website geeignet ist, auf ein responsives Design umgestellt zu werden. Da wäre zunächst der Umfang. Ist eine Website sehr komplex oder sehr kleinteilig aufgebaut, wie z.B. News-Portale oder große Brand-Webseiten mit sehr tiefer Verzweigung auf mehrere Navigationsebenen, so wird es kaum möglich sein, daß ein einziges Konzept sowohl im mobilen als auch im stationären Web optimal und in unterschiedlichen Nutzungsszenarien funktioniert.

Aktuell wird nur der kleinste gemeinsame Nenner der verschiedenen Plattformen unterstützt. Schon für die Einbindung eines Links in verschiedene App Stores muss mit einem Script evaluiert werden, ob der Link auf einem bestimmten Gerät ein- oder ausgeblendet werden soll. Sobald Flash verwendet wird, funktioniert das Prinzipt „Responsive Website“ ebenfalls nicht. Beschränkung auf HTML und CSS ist Pflicht. Bestehende Seiten müssen meist komplett umstrukturiert und neu gecoded werden, um responsive zu funktionieren.

Worauf muss beim Test auf Smartphones geachtet werden?

Die Qualität einer Seite wird davon bestimmt, ob auf Mobiltelefone besonders Rücksicht genommen wurde, was man an den folgenden Punkten erkennen kann.

Zunächst schauen wir, ob auf dem iPhone und dem nativen Android-Browser nach dem Laden die Adresszeile aus dem sichtbaren Bildbereich geschoben wird. Um den Text zu lesen oder mit dem Finger den gewünschten Link zu erwischen, darf es nicht nötig sein, die Seite zu vergrößern. Auf Apple-Geräten mit Retina-Display müssen die Bilder gestochen scharf dargestellt werden.

Die Ladezeit ist ein weiterer Faktor. Sie hängt im responsive Web vor allem von der Art ab, wie Bilder technisch integriert wurden. Es gilt weiterhin, dass mit Bildern sparsam umgegangen werden sollte – ein totaler Verzicht ist jedoch nicht nötig. Unbedingt wichtig ist eine sinnvolle Darstellung von Inhalten „Above the fold“ (vor dem ersten Scrollen).

Bei vielen responsiven Websites beginnt die Seite mit untereinander geschobenen Menüpunkten. Das ist auf Smartphones ebenso suboptimal wie die Verwendung eines Pulldown-Menüs. Besser wäre es, mit einem gut gestalteten Einblick in die verschiedenen Bereiche zu starten und den User entscheiden zu lassen, welche Rubrik ihn interessiert. Wichtige Kerninhalte werden dabei natürlich oben platziert.

Was ist mit dem „vierten Bildschirm“ – dem TV-Gerät?
Die Navigation mit die Fernbedienung auf dem TV-Gerät ist für Webseiten eine besondere Herausforderung. Hier gibt es noch große Probleme. Grundsätzlich handelt es sich hier um eine Fokus-Navigation, bei der Links in ihrer Reihenfolge fokussiert und dann selektiert werden. Bei einigen Geräten wird parallel oder stattdessen eine Cursor-Navigation verwendet, die ähnlich wie eine Maus funktioniert, nur dass auch hier das Steuerkreuz der Tastatur verwendet wird.

Dadurch ähneln diese Webseiten in der Bedienbarkeit viel mehr alten Handys ohne Touch-Screen als allen anderen Screens. Mit einer Fokusnavigation kann man gut arbeiten, wenn man das System für seine Zwecke entsprechend nutzt. Allerdings heißt die Nutzung einer Fokus-Navigation nicht, dass der Tab-Index, über den theoretisch die Reihenfolge der Links beeinflusst wird, auch von jedem Gerät unterstützt wird.

Weitere Beobachtungen rund ums Internet auf einem TV-Gerät habe ich im Juli bei Google+ veröffentlicht.

Welche Vorteile haben responsive Websites neben der Skalierbarkeit auf verschiedene Geräte noch?
in der Zeit der sozialen Netzwerke ist die Homogenität der URL sehr wichtig. Was nützt es, wenn z.B. eine stationäre Unterseite von vielen Usern geliked wird, aber deren Freunde den Link auf ihrem Smartphone öffnen und dann nichtes bedienen können? Der anfängliche Push wird jedenfalls verpuffen.

Was sind die Nachteile?
„Responsive Design“ bedeutet auch, auf medien-spezifische Möglichkeiten zu verzichten und nicht auf alle verschiedenen Nutzer-Szenarien einzugehen. Formulare sollten weiterhin in unterschiedlichen Versionen für unterschiedliche Geräte vorgehalten werden. Die eindeutige Zuordnung allein über Media-Queries funktioniert nicht überall, so daß für komplexere Abläufe und stark interaktive Seiten auch in Zukunft eine Anbindung an eine Devicedatenbank nötig sein wird. Aber auch in diesem Fall kann das Responsive Design den Rahmen bilden, in dem bestimmte Module serverseitig ladezeitoptimiert ausgelassen bzw. eingefügt werden.

Die Pflege von Responsive-Websites gilt derzeit noch als eher aufwändig. Noch ist nicht jedes CMS in der Lage, Webseiten responsive auszugeben. Das allerdings sollte sich mittelfristig ändern. Der Markt schreit danach!

Fazit
Responsive Websites bergen ein großes Potential für die Zukunft. Agenturen und Webdesigner werden ihren Kunden nicht mehr lange Seiten verkaufen können, bei denen nicht an die Nutzung auf Mobiltelefonen, Tablets und TV-Geräten gedacht wurde.

Die Autorin
Annika Brinkmann ist studierte Kommunikationsdesignerin und beschäftigt sich schon seit 2004 beruflich mit mobilen Webseiten und Applikationen. Seit 2007 ist sie unter der Firmierung www.absichtbar.de selbständig und bietet Konzept und Design für mobiles Internet und Applikationen an. Sie hat in verschiedenen Projekten umfangreiche Erfahrungen gesammelt und eingesetzt, z.B. bei dem umfangreichen Konzept für die mobile Webseite von Mercedes-Benz.de, das JvM/next für die Daimler AG umgesetzt hat.

Ihre Erfahrungen gibt sie seit April 2011 in Vorträgen und Fachartikeln, Webinaren, Workshops, offenen und Inhouse-Seminaren weiter. Zu finden sind diese Angebote unter www.mobile-knowledge.de

Beobachtungen rund um das mobile Internet veröffentlicht Annika Brinkmann auf der Facebookseite

Link: www.mobile-knowledge.de

Portrait: © Markus Kempken

Wenn Dir dieser Artikel gefallen hat, dann teile ihn bitte!

(No Ratings Yet)

Ein Beitrag von

Das könnte Sie auch interessieren

Wissenswertes

Branchen

  • Digitale Wirtschaft
  • Investitionsgüter
  • IT
  • Mode
  • Lebensmittel
  • Lifestyle
  • Startups

Leistungen

Rechtliches