Mobile Optimierung von Webseiten – Intro

DieProduktMacher |

02. Sep 2015 |

- min Lesezeit

Mobile Optimierung von Webseiten – Intro

Das Thema "Responsive Website" gewinnt immer mehr an Bedeutung: die mobile Nutzung von Webseiten steigt, im 1. Quartal 2014 um satte 25% gegenüber dem Vorjahr. Seit Googles "Mobile-Friendly-Update" bekommen mobil optimierte Seiten einen besseren Pagerank. Wer mehr Kunden im Web ansprechen will kommt nicht umhin sich mit dem Thema intensiver auseinanderzusetzen: er muss die mobile Optimierung vorantreiben.

Der Begriff “Responsive Web Design” wie er von Ethan Marcotte 2010 in seinem gleichnamigen Artikel definiert wurde umfasste ursprünglich nur die Anpassung der Darstellung an kleinere Displays. Zur mobilen Optimierung einer Webseite gehört jedoch sehr viel mehr als mit Hilfe von CSS das Layout flexibel anzupassen. Mit dieser Artikelserie zum Thema “Responsive Web Design” wollen wir Euch 6 Themen vorstellen mit denen Ihr Euch bei der Erstellung bzw. Umstellung Eurer Seite auseinandersetzen solltet:

1. Technische Umsetzung

Technisch gibt es für die mobile Optimierung zwei Möglichkeiten:

eine responsive Website, bei der das HTML unverändert bleibt und Ihr das Layout über CSS media queries an die Größe des Endgeräts flexibel anpasst
eine eigenständige mobile Website, bei der gerätespezifisches HTML und CSS an den Browser ausgeliefert wird.

Welche Methode für Eure Situation die richtige ist, und wie Ihr die Methoden sinnvoll kombinieren könnt, erfahrt Ihr in diesem Artikel.

2. Content Strategie

Wenn man sich den Größenunterschied von Desktop und Smartphone vor Augen hält, wird einem schnell klar dass es eine Herausforderung ist auf beiden Geräten die gleichen Inhalte darzustellen. Dennoch ist es keine gute Idee für Smartphones und Tablets reduzierte Inhalte und Funktionen anzubieten. Wie Ihr der Lage trotzdem Herr werdet erfahrt Ihr hier.

3. SEO für mobile

Neben der Optimierung der Darstellung ist auch die Codestruktur von entscheidender Bedeutung für die Darstellung in Suchmaschinen. Je besser ein Searchbot Euren Content verstehen kann, desto besser kann die Suchmaschine die Relevanz Eurer Inhalte für bestimmte Suchanfragen einschätzen und entsprechend ausliefern. Wie Ihr mit HTML5 Euer Markup für Suchmaschinen optimieren und gleichzeitig die Wartungskosten für Eure Seite senken könnt erklären wir Euch in diesem Artikel.

4. Responsive Layout

Ein zwölfspaltiges Layout das für Bildschirmbreiten von 1024px und mehr konzipiert wurde, lässt sich natürlich nicht in ein Smartphone von 320px Breite hineinzwängen. Mit diesem Problem hat ursprünglich alles angefangen: Ethan Marcotte beschrieb 2010 in seinem Artikel “Responsive Web Design” erstmalig verschiedene Lösungen wie man für große Bildschirme ausgelegte Layouts mit CSS Techniken für kleinere Bildschirm anpassen kann. Wir sagen Euch außerdem welche gestalterischen Möglichkeiten Ihr habt Eure Inhalte mit der gewünschten Priorität zu kommunizieren.

5. Responsive Media

Die Einbindung von Bild- und Videodateien für mobile Geräte ist ein komplexes Thema: das Banner mit einem Seitenverhältnis von 16:9 sah auf der Desktopseite super aus, auf dem Handy kann man nichts mehr erkennen. Das tolle 360° Video führt im Edge Netzwerk zu ständigen Timeouts und man hat Ruck-Zuck sein Datenvolumen aufgebraucht, ohne auch nur eine Sekunde des Videos gesehen zu haben. Zum richtigen Umgang mit Bild- und Videoinhalten gibt es viele verschiedene Denkansätze. In unserem “Responsive Media” Artikel werden wir uns die Möglichkeiten einmal im Detail ansehen.

6. Performance

Wer hat es noch nicht erlebt: Man sitzt im Zug, hätte Zeit und Lust zum surfen oder online shoppen, aber die Seite lädt und lädt nicht. Geringe Ladezeiten sind ein weiterer Faktor der von Suchmaschinen hoch bewertet wird. Was Ihr tun könnt um die Performance Eurer Seite zu verbessern verraten wir Euch in diesem Artikel.

Alle Artikel in der Responsive Design Serie: