Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren

Kategorien: Retrospektive

Dies ist ein älterer Beitrag, der nicht unbedingt die aktuelle Haltung des Autors darstellt. Insbesondere zu den Themen Datenschutz, Google und Social Media ist der Autor aufgrund mittlerweile gewonnener Erkenntnisse anderer Meinung als früher! Was Web Hosting angeht, empfehle ich Strato, 1&1 und andere große nicht mehr.

Mobilegeddon: Google straft Dich ab!

Ende April 2015 hat das sogenante Mobilegeddon (Google Abstrafung für Webseiten, die nicht fit für Smartphones & Tablets sind) für Aufsehen gesorgt. Wir erklären, wie man seine Website responsiv gestaltet und somit fit für mobile Endgeräte macht.

Das Problem herkömmlicher Webseiten auf mobilen Endgeräten

Grundsätzlich ist es möglich, eine bestehende Homepage auf einem Smartphone mit kleinerer Auflösung anzusehen. Jedoch zeigt das mobile Gerät eben nur einen Teil der gesamten Seite auf einmal an. Der Anwender muss also scrollen bzw. über den Screen wischen, um alle Inhalte sehen zu können.
Dies ist natürlich nicht optimal für die Bedienbarkeit (Usability) einer Webseite. Das hat auch Google gemerkt und sich gesagt: Jede Webseite, die nicht ordentlich auf mobile Geräten dargestellt wird, wird möglicherweise mit einer Strafe im Ranking belegt.
Da normale Computerbildschirme entweder eine wesentlich höhere Auflösung oder eine wesentlich höhere physische Größe haben als Tablets und erst recht als Smartphones, zeigen letztere eben nur einen Teil einer Webseite an, die für PC-Monitore erstellt wurde.
Selbst wenn die Auflösung eines mobilen Geräts in Pixeln genauso hoch ist wie die eines, sagen wir, 21 Zoll Monitors, kann es doch die Seite nicht vollständig darstellen: Aufgrund der kleineren Abmessungen des Displayes (eben nur beispielsweise 7 Zoll statt 21) werden Texte und Bilder herunterskaliert und kleiner dargestellt als am PC.

Die Hintergründe zum Mobilegeddon haben wir in einem eigenen Artikel zusammengestellt.

Wie macht man eine Webseite fit für die mobile Nutzung mit Smartphones und Tablets?

Vorab: Unsere Empfehlung findet ihr in einem eigenen Artikel: Professionelle Webseiten mit WordPress: Schritt für Schritt erklärt.

Es gibt grundsätzlich zwei sinnvolle Möglichkeiten:

1. Möglichkeit: Eigene mobile Webseite erstellen

Die bisherige Homepage bleibt in Ihrer Form bestehen. Zusätzlich dazu wird ein neues Layout für den bestehenden Inhalt (Content) bereitgestellt, das ist natürlich einiges an zusätzlicher Arbeit.
Dieses mobile Layout berücksichtigt von vornherein kleinere Displays und verwendet größere Schriften. Weiterhin wird weniger Inhalt auf derselben Pixelfläche platziert als auf einer herkömmlichen Webseite.
Dann muss noch gesteuert werden, wann die Desktop-Version und wann die mobile Webseite anzuzeigen ist.
Das geht folgendermaßen – vorab: Möglichkeit 2 ist die empfohlenene: Das responsive Design – wer ungeduldig ist, kann den nächsten Abschnitt überspringen!
1. Verweis auf Originalseite anbringen
Das ist technisch nicht unbedingt nötig, aber gut für das Suchmaschinenranking.
Im-Bereich des HTML-Dokuments gibt man etwa folgendes auf der mobilen Variante der Webseite an: Dieses Beispiel gilt für die mobile URL http://m.meineseite.de/startseite.

2. Verweis auf mobile Webseite von der Desktop-Version
Damit der Browser auf dem Handy nun weiß, dass es eine mobile Variante gibt, teilt man ihm dies mit Hilfe des rel-Tags mit:
Der rel-Tag steht dabei wieder im Kopfbereich des HTML-Dokuments (-Tag). Die Zahl 640px gibt die maximale Breite des Displays in Pixeln an, für die diese mobile Website vorgesehen ist. Lässt sich die Seite mobil auch auf 800 Pixeln Breite noch gut darstellen, gibt man statt dessen an:

2. Möglichkeit: Responsive Webseite erstellen

Das eben dargestellt Verfahren hat einige Nachteile. Unter anderem existieren mehrere Layouts für denselben Content parallel. Will man eine Webseite mobil machen, empfehlen wir die zukunftsträchtige Technik des responsiven Designs. Hierfür gibt es eine Reihe von Frameworks für Entwickler, die dabei unterstützen. Man muss das Rad also nicht neu erfinden.

Die Idee dahinter lässt sich am besten erklären, wenn man das populäre CSS-Framework Bootstrap betrachtet:
Bootstrap sieht vier verschiedene Bildschirmgrößen vor: XS (extra small), S (small), M (medium) und L (large).

Hinter diesen vier Größenkategorien stecken folgende Pixelgrößen (bezogen auf die Breite des Bildschirms in Pixeln):

XS sind Schirme kleiner als 768 Pixel Breite.
S sind Schirme größer gleich 768 und kleiner 992 Pixel.
M sind Schirme größer gleich 992 und kleiner als 1200 Pixel.
L sind alle Auflösungen ab 1200 Pixel aufwärts.

Die Größe L ist die normalerweise relevante für PC-Systeme und große Tablets oder auch für Notebooks oder Laptops.

Insgesamt gibt es natürlich deutlich mehr mobile Auflösungen als diese, aber vier Modi über die maximale Breite zu unterstützen ist ein sehr guter und beherrschbarer Kompromiss, der auch dem Fakt Rechnung trägt, dass ein Smartphone oder Tablet auch gedreht werden kann und Breite und Höhe sich dann vertauschen.

Bootstrap ist das populärste CSS-Framework und bietet alles, was man braucht, um eine Webseite mobil zu machen! Wie genau, das erklären wir gleich.

Die dritte Möglichkeit, die wir für wenig sinnvoll und wenig zielführend halten, ist das dynamische Erzeugen der Seite (Dynamic Serving). Daher gehen wir hier auch nicht näher darauf ein.

Wie macht man eine Webseite mobil mit responsivem Design und Bootstrap?

Das schöne: Bootstrap nimmt einem viel Arbeit ab, siehe den Abschnitt vorher! Weiterhin arbeiten wir nur mit einer Content-Quelle, denn das Layout für die verschiedenen Bildschirmgrößen wird im HTML per CSS-Anweisungen gesteuert. Konkret geht das über CSS-Klassen von Bootstrap.

Jetzt folgt ein kleiner Ausflug in Bootstrap-Interna: Wenn Du kein Programmierer werden willst, überspringe diesen Abschnitt und gehe zum nächsten!

Ein Beispiel: Du erstellt eine Webseite und fängst mit einem Layout an, das für PC-Bildschirm geeignet ist, also für Breiten von 1200 Pixeln oder mehr.
Die HTML-Seiten enthalten beispielsweise einen Bereich, in dem links ein Menü steht (was ca. 200 Pixel breit ist), in der Mitte ein Contentbereich (ca. 800 Pixel breit) und rechts eine Sidebar (wieder 200 Pixel breit). Nur der Content-Bereich sei dynamisch hinsichtlich der Breite, Menü und Sidebar sind auf 200 Pixel festgelegt.

Verkleinert man das Browserfenster, wird der Content-Bereich also immer schmaler. Spätestens bei einer Breite von, sagen wir, 400 Pixeln ist der Content nicht mehr schön anzusehen, weil er einfach zu gedrungen wirkt und eingequetscht ist zwischen Menü und Sidebar. Bei Bootstrap arbeitet man idealerweise nicht mit festen Pixelbreiten, sondern man definiert die Breite eines Bereichs in Spalten. Bootstrap definiert, dass es genau 12 Spalten gibt. Menü und Sidebar hätten also je 2 Spalten und der Hauptbereich für den Content dann 8 Spalten, macht 2 + 2 + 8 = 12 Spalten.

Nun kommt das Spannende: Man kann über Bootstrap nicht nur die Anzahl der Spalten definieren, sondern auch, bei welcher Bildschirmgröße ein Bereich (Menü, Contentbereich usw.) wie viele Spalten haben soll. Die Bildschirmgrößen hatten wir oben schon genannt: L (oder LG), M (oder MD), S (oder SM) und XS (ganz groß bis ganz klein).
Wie sieht das ganze im HTML-Code aus? Wir gehen mal einen Beispielcode zur Veranschaulichung (grundlegende HTML-Kenntnisse sind hierzu erforderlich):
<div id="menu" class="col-lg-2"> Hier steht das Menü Menüpunkt 1 Menüpunkt 2 Menüpunkt 3</div> <div id="content" class="col-lg-8"> Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann. Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein </div> <div id="sidebar" class="col-lg-2"> Hier steht die Sidebar Text 1 Text 2 Bild 1</div>
Es wird schnell klar, dass die ganze Informationsmenge, die man auf einem großen Schirm (Bootstrap-Größe L) anzeigen kann, nicht auf einem kleinen Bild (Bootstrap Größe S) zur Anzeige bringen kann.
Daher müssen wir für Größe S (und für XS sowieso) eine neue Darstellungsart definieren. Größe M muss hier nicht speziell abgehandelt werden, weil für M der Contentbereich immer noch groß genug ist.

So würde das obige Beispiel auch auf kleinen Bildschirm ordentlich dargestellt – das wäre die einfachste und schnellste Maßnahme:
<div id="menu" class="col-lg-2 col-sm-12"> Hier steht das Menü Menüpunkt 1 Menüpunkt 2 Menüpunkt 3</div> <div id="content" class="col-lg-8 col-sm-12"> Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann. Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein </div> <div id="sidebar" class="col-lg-2 col-sm-12"> Hier steht die Sidebar Text 1 Text 2 Bild 1</div>
Was haben wir gemacht: Das Menü bekommt jetzt 12 statt 2 Spalten, also die gesamte Breite. Der Content hat nun ebenfalls die volle Breite von 12 Spalten zur Verfügung. Und auch die Sidebar bekommt 12 Spalten. Das war’s, zumindest akzeptiert Google jetzt dieses Layout. Mna kann natürlich etwas feintuning betreiben, beispielsweise die Sidebar horizontal statt vertikal ausrichten, das ist aber wesentlich mehr Arbeit und soll in diesem Grundlagenartikel nicht weiter diskutiert werden (in einem anderen Artikel dann mehr dazu).

Wichtig noch: Bootstrap schaut für die aktuelle Bildgröße, etwa M, ob eine Deklaration wie col-md-6 vorhanden ist (MD steht für Größe M). Ist dies nicht der Fall, sucht Bootstrap nach der Größe S und dann nach XS. Es ist also wichtig, dass im obigen Beispiel die Deklarationen col-lg-* ersetzt werden durch col-md-*, denn dann gelten sie sowohl für L- als auch für M-Größen!

Spezialfall: Content Management Systeme wie WordPress oder Magento

Betreibst Du Deine Webseite oder Dein Blog über WordPress? Dann besteht die Möglichkeit, dass das Thema (engl.: Theme) von WordPress bereits eine responsive Variante anbietet. Das solltest Du unbedingt prüfen.Am einfachsten geht das, indem Du Deine WordPress-Webseite im Browser aufrufst und den Darstellungsbereich des Browsers einfach veränderst:

Einmal die Darstellung im Vollbildmodus auf einem PC-Bildschirm ausprobieren.

Als nächstes die Breite des Fenster reduzieren und zwar immer weiter, bis das Fenster nur noch sehr klein ist (vielleicht 600 Pixel breit). Das geht am einfachsten über die sogenannten „Handles“, die erscheinen, wenn man den Mauszeiger an den äußersten rechten Rand des Browserfensters bewegt. Aber Achtung: Das Browserfenster darf nicht im Vollbildmodus dargestellt werden, sonst funktioniert das nicht!

Ein gutes Einsteiger-Buch zum Thema WordPress ist (war?) übrigens WordPress für Dummies.

Passende Hosting Anbieter für Deine Webseite gibt es zuhauf. Ich empfehle ALL-INKL.

Ein Experte muss her

Du selbst bist kein Programmierer oder Techie und willst Deine Webseite mobil machen. Dann hast Du ein Problem, sofern Du weder auf ein responsives Blog-Theme o.ä, verfügst und auch niemanden kennst, der Dir hilft.
In dem Fall empfehlen wir Dir, einen Experten zu Rate zu ziehen bzw. diesen zu beauftragen. Sehr günstige und kompetente Programmierer findet man etwa auf oDesk. Für solche Aufgaben braucht man keinen teuren Deutschen Entwickler zu beauftragen, der um ein Vielfaches teurer ist als eine Offshore-Ressource aus dem Ausland. Und oDesk ist ohne Risiko: Erst wenn die Leistung erbracht wurde, bekommt der Programmierer sein Geld. Ist man zufrieden, schön, ansonsten bekommt man sein Geld zurück!

Möchtest Du Dich in das Thema Webseitenprogrammierung einarbeiten, such‘ Dir entsprechende Fachliteratur dazu, um schnell zu einem Ergebnis zu kommen. Hier sollte man nicht am falschen Ende sparen. Ein gutes Buch ist nicht teuer und zahlt sich immer aus.

Wenn Du ein etwas umfangreicheres Vorhaben hast und doch lieber einen deutschen IT-Dienstleister beauftragen möchtest, dann wirst Du sicher fündig.

PS: Dies ist ein älterer Beitrag.