Responsive Webdesign & Googles Mobile First
Webneo Blogbeitrag
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.
WAS UNSERE WEBNEO-EXPERTEN ZU RESPONSIVE TEMPLATES DENKEN
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.
DYNAMIK UND FLEXIBILITÄT
WAS IST RESPONSIVE WEBDESIGN?
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.
DER DIREKTE VERGLEICH
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.
AB JETZT WENIGER ARBEIT FÜR SIE
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.
GRENZEN DES RESPONSIVE DESIGNS
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.
Wobei dürfen unsere Experten Sie unterstützen?