noPC commerce: Responsive Web Design – ein Einblick

Wie im Überblick zum Trend 2013: Online-Shopping abseits des PCs erwähnt ist Responsive Web Design wichtig für Websites und Online-Shops, die sich dynamisch den Gegebenheiten unterschiedlicher Endgeräte (Smartphones, Tablets, Desktop-PCs, Fernseher, …) anpassen möchten.

Einführungen

Was Responsive Web Design ist und wie es technisch funktioniert, haben andere bereits ausführlich erklärt, z.B.

• Ethan Marcotte mit „Responsive Web Design“ (es handelt sich hierbei angeblich um den „Geburtsartikel“ für Responsive Web Design),
• das Treehouse-Team mit „Beginner’s Guide to Responsive Web Design“,
• das Smashing Magazine mit „Responsive Web Design: What It Is and How To Use It“ oder auch
• Mashable mit „Why 2013 Is the Year of Responsive Web Design“.

Im Folgenden finden Sie eine kleine Auswahl von Links und Beispielen, die mir in den letzten Monaten zu diesem Thema untergekommen sind. Sie erheben natürlich keinen Anspruch auf Vollständigkeit. Ich denke aber, dass man so ein wenig Gefühl entwickelt, was alles für Responsive Web Design zu beachten ist.

Beiträge

• Google legt Website-Betreibern nahe, ihre Seiten responsive zu gestalten. Das ist ein wichtiges Signal, denn was Google empfiehlt, hat Auswirkungen auf die Suchergebnisse. Nicht zuletzt tut sich Google mit diesem Ratschlag selbst einen Gefallen. Schließlich müssen Seiten so nicht mehrfach geparst werden.
• Der Händler Browns Shoes hat seine Seite mittels Responsive Web Design für große Bildschirme, Desktop-PCs, Tablets und Smartphones optimiert. 20% Mobil-Anteil bei den Besuchern rechtfertigte die Investition, die den Shop-Betreiber billiger kommt als die Erstellung separater Mobile- und Tablet-Versionen bzw. spezieller Apps.
  Brown Shoes ist nur ein Beispiel für viele ähnlich lautende Händlerberichte, die zwischen 10 und 25 Prozent Mobil-Anteil feststellen. Das gilt für den englischsprachigen genauso wie für den deutschsprachigen Bereich.
• Bei der Erstellung von Responsive Websites müssen die Besonderheiten des jeweiligen Angebots berücksichtigt
  werden. Handelt es sich z.B. um bildlastige Websites, bei denen die Qualität der Bilder eine herausragende Rolle spielt, reicht das normale Verkleinern der Bilder über Browser-Bordmittel bzw. der Ansatz „Flexible Images“ nicht. Stattdessen sollten die Bilder vorab in verschiedenen Größen angefertigt oder weniger Bilder pro Seite präsentiert werden.
• Auf der anderen Seite werden mobile Geräte mit extrem hoher Auflösung immer häufiger (z.B. die neueren Apple-Generationen mit Retina-Display). Probleme und Lösungsansätze rund um Responsive Images sind ein Thema für sich.
• Ein gern eingesetztes Element auf Website sind Lightboxes. Inzwischen gibt es ein paar Plugins, die responsive Lightboxen anbieten, z.B. Fresco.
  Nicht nur Lightboxen, auch andere Navigationselemente wie ausklappbare Menüs und Slider müssen auf ihre Tauglichkeit für unterschiedliche Devices überprüft werden.
• Ein Aspekt, der dabei nicht vernachlässigt werden darf, ist die Performance auf mobilen Geräten. Das betrifft vor allem die Dateigröße und somit die Ladezeiten der Dateien, der Umfang der verwendeten JavaScript-Dateien und die Komplexität des generierten HTML-Codes.
• Responsive Design macht zudem vor E-Mails nicht halt. Campaign Monitor gibt einen Hinweis, dass man die vorhandenen Befehle auch hier anwenden kann.

Was bedeutet das für Seiten-Betreiber?

Händler und Website-Betreiber müssen verschiedene Faktoren abwägen um entscheiden zu können, ob sich Optimierungen für mobile Geräte rentieren.

Dazu zählt die Klärung von Fragen wie:

• Wie groß ist der Anteil der mobilen Besucher am Gesamt-Traffic?
• Welche Art von Anpassungen ist notwendig?
• Wie groß ist der Aufwand, die Seite anzupassen?
• Stimmt die Kosten-/Nutzenrechnung?
• Was ist die Zukunftsperspektive?

Eine Website, welche die Kriterien des Responsive Web Design berücksichtigt, bedeutet mehr Aufwand als eine Website, die sich einzig auf eine Art von Endgerät konzentriert. Schließlich ist die Planung einer Lösung für verschiedene Anspräche wesentlich komplexer.

In diesem Zusammenhang empfehle ich, das gelungene Interview mit Jens Dochtgreis zu lesen. Es ist nämlich ein Umdenken erforderlich, was gerade bei großen und etablierten Unternehmen häufig noch nicht angekommen ist:

Für Designer und ihre Auftraggeber ist also die größte Herausforderung „loszulassen“. Sie müssen akzeptieren, dass sie „nur“ Hinweise geben können, wie etwas aussehen soll. Abweichungen  – auch mittelgroße – müssen sie als Ergebnis eines nicht enden wollenden technischen Diversifizierungsprozesses akzeptieren.

Mehrkosten sind also da. Allerdings bekommt man dafür auch mehr, nämlich eine Website, die ihre Kunden auf den Endgeräten besser abholt. Das bedeutet mehr Benutzerfreundlichkeit, somit mehr Zufriedenheit bei den Usern und bei Online-Shops letztendlich höheren Umsatz.

Ein paar Anhaltspunkte zum Status Quo liefert der noPC commerce: Fakten und Visionen. Letztendlich bleibt es aber niemandem erspart, den Kosten-Nutzen-Faktor für das eigene Unternehmen abzuwägen. Viele Agenturen sagen: man kann es heutzutage nicht mehr leisten, die Website nicht responsive zu bauen. Das ist meiner Meinung nach zu radikal. Aber: man sollte sich mit keinem Neudesign mehr die Chance auf ein Responsive Design verbauen. Hier kann man mit etwas Mehraufwand einiges an späteren Folgekosten einsparen.

Beispiele

Zum Abschluss noch einige Links, die Responsive-Web-Design-Beispiele liefern:

• Media Queries listet diverse adaptive Websites mit Screenshots bei verschiedenen Bildschirmgrößen, z.B. von TIME und Barack Obama.
• Auch der Magento-Webshop Skinny Ties verwendet ein Responsive Design. Neben den üblichen Anpassungen wird das Hauptelement auf kleineren Bildschirmen mit einer Slider-Navigation  versehen.
• Die Awwwards präsentieren 50 + 1 Beispiele für Responsive Web Design.
• Viel Liebe zum Detail findet man bei den 25 Beautiful Responsive Web Design Examples for Inspiration.
• Und Zuletzt hat auch das Tripwire Magazine eine Liste mit Examples of Great Responsive Website Design aufgestellt.