Was ist das überhaupt: "Responsive Design"? Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und TV-Geräten kann erheblich variieren. Aus diesem Grund gibt es seit 2010 den Ansatz mit einer reaktionsfähigen Website unter Verwendung der neuen Web-Standards HTML5 und CSS3 sowie JavaScript, eine Darstellung zu erreichen, die sich automatisch an das eingesetzte Gerät anpasst.
Hierbei gibt es zwei Fertigungstiefen: Responsive Design und Adaptive Design. Das Erstgenannte basiert auf einem Fluid Grid (flüssigen Raster). Letzteres auf einer Kombination von verschiedenen festen Layouts für verschiedene Auflösungen.
Richtig ist: Wir wissen nicht genau, ob Mobilnutzer nur kurz mal eine Telefonnummer nachschlagen wollen oder vor einem Termin die genaue Adresse suchen. Klar, die Nutzer mobiler Geräte sind möglicherweise unterwegs, in Eile oder verfügen nur über geringe Bandbreite. Aber sie könnten auch zu Hause sein und somit viel Zeit zum Surfen haben. Oder sie haben den Wunsch Zugriff auf alle Funktionen und Inhalte zu haben.
Eine Website in Responsive Design zu entwickeln ist die richtige Entscheidung für viele Zielsetzungen. Hat ein Angebot weniger als 5% Mobilnutzer mag der Entwicklungsaufwand zu hoch sein. Auch sind Einschränkungen in puncto SEO hinzunehmen – es ist z.B nicht möglich SEO-seitig ausschließlich auf Mobil-User zu zielen. Ist ein Web-Angebot stark auf Standard-Werbeformen und Kompatibilität zu Vermarktern angewiesen, sollte die Einführung eines Responsive Designs intensiv abgewogen werden.
Ist das wirklich so oder könnte es an der Programmierung und mangelnder Optimierung liegen? Wahr ist, dass man Responsive Websites finden kann, die erst mal auf einem mobilen Gerät die komplette Datenmenge des Desktop-Layouts laden, um dann eventuell bestimmte Inhalte zu verstecken. Dies führt natürlich den kompletten Ansatz ad absurdum. Wenn Entwickler nach der Devise "Mobile First" vorgehen und von der mobilen User Experience ausgehend in Stufen komplexer werden, muss eine Anwendung nicht langsamer sein als eine eigens angepasste Mobilversion. Bandbreite, Bildgrößen und Ladezeiten sind auch in Zeiten von Flatrates grundlegende Parameter bei jeder Softwareentwicklung für das Web.
Natürlich führt eine einzige Website für verschiedene Geräte anstelle einer klassischen in fester Größe zu mehr Code. Aber dies trifft auf verschiedene Versionen für unterschiedliche Geräte ebenso zu. Das Ziel, ein breiteres, vielfältigeres Publikum anzusprechen rechtfertigt ein Stück weit diese zusätzliche Code-Menge. Auch das Testen des Ergebnisses in einer Vielzahl von Web-Browsern und Plattformen, ist bei jedem anderen Technologieansatz ähnlich wichtig und nicht unbedingt weniger aufwändig.
Unserer Erfahrung nach erfordert die Umstellung auf Responsive Design tiefgreifende Änderungen in der Denkweise und Methodik des Design- und Entwicklungsteams, welche anfänglich natürlich zu Mehrkosten führt. Ist die Umstellung jedoch erst mal geschafft, zahlt sich diese Investition aus, da Websites der "neuen Art" zu einer besseren Nutzererfahrung führen und so viel zukunftssicherer sind. Mit steigender Expertise schon bei der Konzeption, lässt sich der anfänglich etwas höhere Entwicklungsaufwand auf ein gesundes Maß reduzieren.
Längerfristig sinken sogar die Kosten für den Betrieb eines responsiven Angebotes, da z.B. SEO nur für ein Angebot betrieben werden muss und beispielsweise bei URLs in sozialen Medien nur ein Angebot kommuniziert werden braucht. Wie dem auch sei, RWD ist auf dem Vormarsch, auch Google empfiehlt Entwicklern diesen Weg zu gehen und bekannte Namen wie die BBC und Microsoft haben ihre Angebote längst umgestellt.
Multi-Device-Angebote sind kein optionales Extra, sondern das Fundament der Web-Landschaft von morgen.
“Jeden Tag steigt die Anzahl der Geräte, Plattformen und Browser, die mit einer Website funktionieren sollen. Responsive Webdesign markiert eine grundsätzliche Änderung in der Art, wie wir unsere Websites im nächsten Jahrzehnt bauen werden."
Jeffrey Veen (Vice President, Products , Adobe)
