Webseiten für mobile Endgeräte optimieren

02. Jul 2010

Was sinnvoll ist und was Sie auch lassen können, wenn es darum geht, dass Ihre Webseite auch auf mobilen Endgeräten gut dargestellt wird.

Der Anteil mobiler Zugriffe ist insgesamt noch gering, wächst aber rasant. Je nach Webseite ist es inzwischen ein Muss, für eine akzeptable Nutzung über mobile Endgeräte zu sorgen. 

Zur geschichtlichen Entwicklung

Wenn wir mal 10 Jahre zurückschauen, als Handhelds mit Windows CE 3 und einem abgespeckten Internet Explorer auf den Markt kamen, glaubten damals schon einige Freaks, dass jetzt das mobile Internet nicht mehr aufzuhalten sei. Ein Jahr später konnten die Schweizer schon ein Simpad in der Hand halten, allerdings noch ohne Apfel drauf und nicht viel später kamen dann auch immer mehr Palms und BlackBerrys mit denen man eigentlich schon surfen konnte. Auch immer mehr klassische Handys boten nun WAP Unterstützung.

Die Technik war da, genutzt hat es allerdings niemand, da es einfach noch unbezahlbar war, mobil im Internet zu surfen. WAP als günstige Alternative war letztlich nichts als eine Luftblase, da niemand diese textbasierten Dienste nutzen wollte. Erste Agenturen bereiteten sich schon auf alternative Darstellungen für mobile Endgeräte vor.

Im Jahr 2005 dann boten T-Mobile und E-Plus mobile Flatrates zu sensationellen 10 EUR an, die allerdings nur in Verbindung mit einem Sidekick bzw. einem Hiptop nutzbar waren. Diese Geräte konnten, genau wie kurz darauf das Ogo von 1und1, beliebige Seiten über einen Proxy serialisiert anzeigen, d.h. die übertragene Datenmenge war immer sehr gering. Die Darstellung entsprach zwar in keinster Weise dem Orginal, interessant dabei war allerdings, dass durch die Serialisierung und die automatische Skalierung der Bilder über den Proxy trotzdem praktisch alle Inhalte nutzbar waren, wenn die Seite nicht gerade über Frames aufgebaut war.

Nun war nicht nur die Technik da, sondern auch bezahlbare Tarife verfügbar. Es schien also so, als müsste man unbedingt dafür sorgen, dass man die Darstellung für mobile Endgeräte in Zukunft optimieren müsste. Über das media-Attribut konnte man für mobile Geräte spezielle Stylesheets liefern. Die zukunftssicher Lösung schien da und das mobile Web nicht mehr aufzuhalten.

Dann 2007 kam Apple mit dem iPhone und läutete eine neue Ära ein, nur als Handheld wollte sich das iPhone nicht verstehen und so wirkte auch das CSS media-Attribut schon nicht mehr. Jetzt ging es Schlag auf Schlag und die Smartphones verschiedenster Hersteller wie z.B. HTC wurden immer besser. 2008 mit der Veröffentlichung von Android war dann endgültig klar, wo die Entwicklung hingeht. 

Gerätehersteller und Mobilfunkanbieter steigerten sich gegenseitig hoch und inzwischen haben wir bezahlbare und schnelle Tarife, so dass dem mobilen Vergnügen nichts mehr im Wege steht. Dabei vergessen wurde nur, dass man Webseiten ja eigentlich für mobile Endgeräte optimieren wollte. 

Die Optimierungsmöglichkeiten für mobile Endgeräte

Sie sehen, es geht auch ohne Optimierung. Die Netze sind schnell und die Endgeräte leistungsfähig. Dennoch will ich hier ein paar Möglichkeiten zeigen, wie Sie ohne großen Aufwand die Seiten für iPhone Android und Co optimieren.

  1. Passen Sie die Darstellung über CSS an.
    Durch optimierte Breiten können Sie sehr einfach für iPhone oder iPad optimierte Seiten ausliefern.
  2. Liefern Sie unterschiedliches HTML
    Da durch angepasstes CSS die gleiche Datenmenge übertragen wird, können Sie durch optimiertes HTML z.B. den rechten oder linken Seitenbereich einfach weglassen, falls dort keine notwendigen Inhalte stehen.
  3. Liefern sie bei mobilen Endgeräten kleinere Bilder aus, um die Menge der Datenübertragung zu minimieren.
    Sie können das einfach dadurch erreichen, dass Sie im Bildelement die Bildqualität z.B. von 80% auf 60% heruntersetzen.
  4. Vermeiden Sie Flash zur Darstellung von Inhalten
    Falls Sie dennoch nicht auf Flash verzichten wollen, bieten Sie auch eine alternative Darstellung an.
  5. Machen Sie die Nutzung wichtiger Funktionen und Inhalte nicht von Javascript abhängig.
    Prüfen Sie Formulare Menüs und Inhalte, die über Effekte nachträglich eingeblendet werden (accordion, slides, fades) auch ohne JavaScript.

Da Weblication CMS die Seiten über XSLT generiert, fällt es sehr einfach, unterschiedliche Ausgabeformate zu realisieren.

Aufwand und Nutzen der Optimierung

Die vorgeschlagenen Optimierungen sind alle sehr einfach und schnell durchzuführen. Sofern die Webseite viele mobilen Zugriffe hat, sollten diese auch durchgeführt werden. 

Während wohl kaum jemand eine Versicherung von unterwegs abschließt, ist es für Messen, Nachrichtenportale Online-Shops oder Freizeiteinrichtungen allerdings unerlässlich, sicherzustellen, dass die Seiten auch mobil abgerufen werden können. 

Vielfalt der mobilen Endgeräte

Mobile Endgeräte gibt es noch deutlich mehr als Suchmaschinen und da Sie Ihre Seiten sicher nicht für Sharelook oder Fireball optimieren, sollten Sie sich auch bei der mobilen Optimierung auf die wichtigsten Geräte konzentrieren.

Die bedeutenden Geräte sind Apples iPhone, iPod und iPad, Windows Mobile Geräte, Blackberrys und Android Smartphones. Während Apples Marktanteil derzeit relativ stabil auf hohem Niveau ist, verliert Microsoft sehr stark an Google.

Beispielhafte Browserweiche

Im Folgenden Siehen Sie, wie eine einfach Weiche, abhängig vom verwendeten Browser aufgebaut werden kann. Zuerst wird eine XSLT-Variable gesetzt, die bei einem mobilen Endgerät den Wert 1 und sonst den Wert 0 enthält. Anschließend können Sie über eine Bedingung an jeder beliebigen Stelle abfragen, ob die Darstellung für ein mobiles Endgerät stattfinden soll.

Setzt die Variable $isMobileUserAgent abhängig vom Browser

<xsl:variable name="isMobileUserAgent"><xsl:choose>
  <xsl:when 
test="php:functionString('wEnv::isMobileUserAgent')">1</xsl:when>
  <xsl:otherwise>0</xsl:otherwise>
</xsl:choose></xsl:variable>

Prüft, ob der Benutzer ein mobiles Endgerät hat

<xsl:if test="$isMobileUserAgent = '1'">Sie nutzen ein mobiles 
Endgerät</xsl:if>