Responsive Webdesign & Googles Mobile First – Unsere Erfahrungen

web design word cloud on blackboard

© Marek – Fotolia.com

Ein Leben ohne Tablets und Smartphone – heutzutage nicht mehr denkbar. Für Website- und Webshopbetreiber sind sie allerdings auch eine Herausforderung. Denn wie garantiert man am besten, dass das Webdesign der eigenen Seite auf allen Endgeräten optimal dargestellt wird?

Noch bis vor Kurzem war für das optimale Online Marketing die Antwort meist eine separate, mobile Website. Eine Alternative dazu bildet aber das Responsive Design: Statt nun neben der eigentlichen Website noch weitere Lösungen zu entwickeln, passen sich Websites mit Responsive Design einfach dem jeweiligen Endgerät an. Dabei ist es egal, ob die Seite auf dem iPad oder einem Smartphone geöffnet wird – das Layout und die Inhalte werden an das Endgerät angepasst und optimal dargestellt.

Das Mobile-First Update von Google

Das Mobile-First Update von Google aus dem April 2015 ist nun schon ein Weilchen her, doch noch immer gibt es unzählige Websites, die nicht für die mobilen Endgeräte gerüstet sind. Google setzt aber immer mehr daran, dass in den mobilen SERPs nur noch die Websites und -shops auf der ersten Seite stehen, die auch ‚für Mobilegeräte‘ optimiert sind. Mittlerweile erkennen aber auch immer mehr Kunden die Wichtigkeit eines Responsive Webdesigns und lassen nun nach und nach Ihre Seiten umrüsten. An dieser Stelle möchten wir als Internetagentur aus Dresden einmal unsere realen Erfahrungen mit responsive Templates vorstellen.

Was ist responsive Webdesign?

Responsive design and web devices

© Rido – Fotolia.com

Responsive bedeutet so viel wie reagierend oder auch reaktionsfähig. Bei einem responsive Webdesign handelt es sich also um ein flexibles, dynamisches Design, das sich an die Gegebenheiten des jeweiligen Endgerätes anpasst. Die Darstellung der eigenen Seite wird durch Verschieben und Umstrukturieren verschiedener Elemente für das jeweils verwendete Gerät optimiert. So sieht eine Website oder Webshop auf einem PC mit unter völlig anders aus, als auf einem Tablet oder Handy, trotz dass es sich um die gleiche Website handelt.

Bei der Designentwicklung wird mit dem Layout-Entwurf für den kleinsten Bildschirm, also dem Smartphone, begonnen, da hier bei Form und Inhalt die Konzentration auf dem Wesentlichen liegt. Danach arbeitet man sich Schritt für Schritt an die große Desktop-Version durch Hinzufügen weiterer Elemente heran.

Adaptive vs. Responsive Design

Nun gibt es verschiedene Ansätze, seine Website oder seinen Webshop mobil zu optimieren. Neben den Elastic und Fluid Design, welche aufgrund seiner aufwendigen Umsetzung nicht im herkömmlichen Webdesign zu finden ist, gibt es die 2 Ansätze des Adaptive und des Responsive Designs.

Der Hauptunterschied zwischen beiden ist, dass beim Adaptive mittels Breakpoints das Webdesign an ein spezielles Endgerät ausgeliefert wird. Das Gerät wird hier auf Seiten des CSS durch die Auflösung erkannt. Außerdem gibt es auch  noch weitere Möglichkeiten, das Ausgabegerät zu erkennen (z.B. per Browser-Agent).

Während für das Adaptive Design fixe Breakpoints für die jeweilige Device-Größe entscheidend sind, steuert das Responsive Design über relative Größen (% oder em) die Darstellung des Webdesigns.

Eine Entscheidung für einen der beiden Ansätze ist insofern schwierig, als dass es bei beiden Varianten Vor- und Nachteile gibt. Wo das Adaptive Design zwar eine optimale User Experience (UX) auf einem speziellen Ausgabegerät sein kann, wird es bei der Vielzahl an verschiedenen Geräten schnell zu aufwendig. Hier hat das Responsive Design den Vorteil, dass es schnell für mehrere Geräte und Auflösungen bedient werden kann, aber manchmal nicht optimal. Das beste Ergebnis hat man oftmals mit einer Mischung aus beiden Varianten.

Mindestens genauso wichtig wie die Frage, welcher Ansatz für die mobile Optimierung gewählt wird, ist, die geänderte User Experience aufgrund schrumpfender oder wachsender Display-Größe durch passende Content-Strategie zu ergänzen.

Vorteile von Responsive Design

Fortan muss nur noch eine einzige Website umgesetzt werden. Eine separate Entwicklung einer mobilen Website ist nun nicht mehr von Nöten. Für den laufenden Betrieb bedeutet das, dass Sie nur noch eine Webseite mit neuen Inhalten befüllen und pflegen müssen.

Wenn Sie eine reguläre und eine mobile Website betreiben, haben Sie außerdem zwei URLs für den gleichen Inhalt. Mit dem Responsive Design fallen die doppelten URLs weg und Sie haben für jeden Seiteninhalt nur noch eine Adresse.

Für die Suchmaschinenoptimierung entstehen folgende Vorteile: Eine Erhöhung der Verweildauer, sowie eine Verringerung der Absprung-Rate (Bounce Rate) durch die optimale Usability sind Nutzersignale, die Google positiv in die Bewertung der eigenen Seite einfließen lässt.

Typische Fehlerquellen bei der Umsetzung

Die meisten Fehler bei der Erstellung des Responsive Designs resultieren durch eine Einschränkung der maximal möglichen Flexibilität, den dieses System innehat. Diese können besonders beim Programmierprozess entstehen, wenn man beispielsweise Schriften feste pt.-Größen zuweist, wodurch sich diese dann nicht an die unterschiedliche Bildschirmauflösung anpasst oder aber festgelegte Kantenlängen für Bilder implementiert, wodurch diese Elemente starr bleiben und teilweise unschöne Umbrüche bei der Darstellung auf mobilen Endgeräten entstehen.

Generell sollten im Responsive Design nicht oder nur sehr sparsam eingesetzt werden. Da die große Anzahl an Endgeräten jeweils ganz unterschiedliche Maße haben,  kann es bei nicht-flexibel umbrechenden Texten und Überschriften eines Onlineauftritts die komplette Struktur zerstören. Es ist daher ganz wichtig, dass man sich dieser typischen Fehlerquellen bei der Erstellung eines Responsive Designs bewusst ist.

Mittlerweile gibt es aber auch schon eine große Anzahl an fertigen Responsive Templates, die einem die Arbeit erleichtern können. t3n stellte dazu eine Liste der besten 30 kostenlosen Responsive Designs für WordPress vor.

Aktuelle Referenzen

Zu unseren Referenzen auf der Grundlage von WordPress, sowie Shop-Projekten auf Grundlage des Responsive Designs der aktuellen Shopware 5-Version zählen unter anderem:

(Screens erstellt mit: responsive-design-test.de)

Responsive Webdesign Referenzen

Über den Autor: 

Patrick Franke ist Online-Marketing Spezialist bei der Internetagentur WEBneo in Dresden. Seit seiner Masterarbeit in Germanistik an der TU Dresden beschäftigt er sich mit Online-Marketing, vor allem in den Bereichen SEO, SEA und E-Commerce.

Kommentare