Mobile friendly - Wie erstelle ich eine für mobile Endgeräte optimierte Website?

Es reicht heute längst nicht mehr aus, dass sich eine Webseite auf dem Desktop eines mobilen Endgerätes irgendwie darstellt. Besucher, die eine Webseite von ihrem Tablet oder Smartphone aus besuchen, erwarten ein ebenso brillantes Erlebnis, wie beim Surfen vom heimischen PC aus.

Hinzu kommt, dass Google seit Anfang des Jahres die Optimierung von Webseiten für mobile Geräte in sein Ranking einbezieht. Das bedeutet: Webseiten, die auf den unterschiedlichsten Endgeräten korrekt angezeigt und folglich auch häufiger von dort aus aufgerufen werden, lässt Google mehr Bedeutung zukommen. Der Lohn ist eine bessere Platzierung in den Suchergebnissen.

Webseiten hingegen, die nicht “mobile friendly” sind, müssen mit einem schlechteren Ranking vorliebnehmen. Im Extremfall verschwinden sie sogar ganz aus den Suchergebnissen .

Wichtige Eigenschaften von optimierten Webseiten für mobile Endgeräte

In Hinblick auf das Optimierungskonzept und die Programmierung von Webseiten, die perfekt auf Tablets und Smartphones laufen sollen, sind folgende Besonderheiten zu beachten:

• Die Displays der mobilen Endgeräte sind vergleichsweise klein.
• Die Navigation erfolgt nicht mit der Maus, sondern per Touchscreen.
• In aller Regel ist die Internetverbindung unterwegs langsamer als am heimischen Computer.
• Je nach Endgerät können Plug-ins, wie Java oder Flash entweder abgeschaltet oder von vornherein nicht vorhanden sein.

Deshalb ist es nicht nur im Interesse einer guten Google-Akzeptanz, sondern auch in Hinblick auf die Bedienfreundlichkeit wichtig, dass die Webseitenversionen für mobile Endgeräte auf das Wesentliche reduziert, schlank und übersichtlich sind.

Wesentliche Punkte zur Optimierung mobiler Webseiten

Layout:

Die Gestaltung des Head (Kopfbereich) inklusive Logo ist so zu umzusetzen, dass er auf einem kleinen Display optisch gut wirkt. Damit der Anspruch an einen gut lesbaren Text erhalten bleibt, darf die Schrift von Textbeiträgen nicht zu groß, aber auch nicht zu klein sein. Es empfiehlt sich grundsätzlich ein einspaltiges, lineares Layout von oben nach unten.

Fotos, Bilder, Grafiken: Die Maße bzw. Dateigrößen sind den längeren Ladezeiten anzupassen. Das bedeutet: Kleine, dennoch gut erkennbare Darstellungen sind bevorzugen.

Webseiteninhalt:

Der Schwerpunkt liegt auf Inhalt, übersichtliche Präsentation und Mehrwert für den Besucher. Alles, was ausschließlich dem Seitenbetreiber nützt, wie Tracking-Skripte oder Werbung sollte bis auf ein Mindestmaß reduziert sein. Am besten ist es, diese Funktionen ganz abzuschalten. Auch unwichtiges Beiwerk, wie Hintergrundsound oder Animationen rauben Speicherplatz, verlängern die Ladezeiten und sollten deshalb weggelassen werden.

Navigation:

Menüleisten sind aus Platzgründen über dem Inhalt zu platzieren und auf die wichtigsten Punkte zu reduzieren. Weil die Bedienung des Endgerätes über Touchscreen und nicht mit der Maus erfolgt, funktionieren Verschachtelungen und aufklappbare Menüs nicht. Deshalb sollte im Sinne von “mobile friendly” auf Hover-Effekte besser ganz verzichtet werden.

Quelltext:

Um Ladezeiten zu optimieren, ist der HTML-Code möglichst schlank zu schreiben. Sofern die mobile Webseite ohne CSS und Javascript partout nicht auskommen sollte, ist es unbedingt ratsam, diese Features auf eine externe Datei auszulagern.

Mobile friendly – automatische Optimierung für jedermann

Wer nun der Meinung ist, zur Optimierung von Webseiten für Handy, Tablet & Co. wäre eine spezielle Ausbildung und viel Fachwissen erforderlich, irrt. Es gibt inzwischen geniale Baukästen im Internet, mit deren Hilfe sich private und gewerbliche Homepages, teilweise kostenlos, komplett neu erstellen und sofort auf die verschiedenen Displaygrößen mobiler Endgeräteanzeige optimieren lassen.

Auch die mobile friendly Optimierung bereits bestehender Webseiten ist ohne spezielle Programmierkenntnisse problemlos möglich. Nach Fertigstellung sind alle Versionen garantiert Google optimiert, sodass einem guten Ranking nichts im Wege steht.

Das Vorgehen ist denkbar einfach:

1. Webseite des Baukastens, wie “homepage-baukasten.de” aufrufen.
2. Eigene E-Mail-Adresse angeben.
3. Passwort festlegen und eingeben.
4. Namen der Homepage wählen.
5. Einloggen
6. Designvorlage auswählen.
7. Individuelle Inhalte, wie Logo, Fotos, Videos hochladen.
8. Schriftarten festlegen.
9. Fertig.

Die Optimierung für Smartphone, Tablet & Co. läuft im Hintergrund automatisch ab, SEO inbegriffen. Experten sprechen in diesem Zusammenhang auch vom “Responsive Design”.