Mobile Version für die eigene Webseite erstellen

Seit Kurzem gibt es WWW Coding auch als Mobilversion. Zum Testen der Mobilversion kannst du WWW Coding mit deinem mobilen Gerät aufrufen. Wie ihr für eure Internetseite ebenfalls eine sinnvolle Mobil-Version erstellt, das erfahrt ihr in diesem Artikel.

Der Aufbau

Zunächst solltest du dir Gedanken über den Aufbau machen. Hier sollte man wenig nebeneinander sondern eher übereinander platzieren.

Wir haben folgenden Aufbau verwendet (von oben nach unten): Logo – Navigation – (Werbung -) Inhalt – 2. Navigation.

Dieser Aufbau hat gleich mehrere Vorteile:

  • Man erkennt sofort auf welcher Website man sich befindet
  • Der Nutzer kann schnell zwischen den wichtigsten Menüpunkten wechseln
  • Die Werbung ist direkt nach dem Laden sichtbar
  • Das gleiche gilt für den Content.

Also, was will man mehr? Du kannst das Theme natürlich auch anders aufbauen. Je nachdem welche Möglichkeiten deiner Webseite dem Benutzer besonders prominent präsentiert werden sollen. Das kann von Internetseite zu Internetseite unterschiedlich sein.

Mobilversion mit WordPress

Für das bekannte Content Management- und Blogsystem
WordPress musst du nicht erst ein eigenes Theme entwickeln, denn hier gibt es bereits fertige Plugins, die mobile Geräte erkennen und automatisch auf die mobile Version umschalten.

Der Nachteil ist hierbei, dass die Themes im Prinzip alle ähnlich aussehen. Wenn also Hunderte von Blogs dieses Plugin einsetzen, unterschieden die Mobilversionen sich abgesehen von der Überschrift dem Inhalt nicht mehr. Hier kann es Sinn machen – wenn möglich – ein eigenes Logo zu platzieren.

Auf dieser Seite findest du eine gute Zusammenstellung von den 10 populärsten WordPress Plugins für Mobile Versionen. All diejenigen, die nicht auf WordPress setzen, sollten einfach weiter lesen.

Ein recht neuer Trend ist das Responsive Webdesign. So passt sich die Webseite dank CSS der Bildschirmgröße, ohne, dass großartig mit Plugins oder eigenen Codeschnipseln nachgeholfen werden muss.

Ein gutes Beispiel für ein solches Theme ist Twenty Fourteen. Es stammt von den WordPress-Entwicklern und ist somit über den WordPress-Admin recht leicht anzupassen.

Mobile Geräte erkennen

Für eine Mobilversion ist es besonders wichtig automatisch zu erkennen, welche Version angezeigt werden soll, also ob es sich um ein mobiles Gerät handelt oder nicht.

Dafür habe ich hier eine simple PHP Funktion gefunden. Diese kannst du inklusive eines Beispiels downloaden.

isMobile() wird kein Wert zugeteilt (=false) wenn kein mobiler Browser verwendet wird, sonst wird 1 zurückgegeben. Die Funktion ist in der Lage eine Vielzahl von mobilen Geräten und Betriebssystemen zu erkennen.

Zwischen Mobil- und Standardansicht wechseln

Nun weißt du, wie du mit PHP ermitteln kannst, welche Ansicht angezeigt werden soll.

Selbstverständlich können in einer mobilen Versionen nicht immer alle Informationen, Links und Inhalte dargestellt werden, die bei der Desktop Version angezeigt werden. Deshalb ist es wichtig dem Nutzer die Möglichkeit zu geben von der mobilen Ansicht auf die Standardansicht zu wechseln und umgekehrt. Dafür eigenen sich Cookies hervorragend.

Ob du ebenfalls Desktop Nutzern ermöglichen möchtest auf die Mobile Ansicht zu wechseln, bleibt deine Entscheidung. Viele Websites bieten dies nicht an.

Positionen und Größen von DIVs

Da die mobilen Geräte ganz unterschiedlich groß sein können, solltest du meistens mit relativen Größenangaben arbeiten, d.h. statt width:320px; verwendest du dann z.B. width:99%;. Zudem solltest du auch bei den Grafiken berücksichtigen, dass es bei Grafiken die größer als ~ 320px (je nach Gerät unterschiedlich) sind, dazu kommt, dass unschöne Scrollbalken an den Seitenrändern angezeigt werden.

Am einfachsten ist es recht kleine Grafiken zu nutzen und den Rest innerhalb dieses Layout Abschnitts mit einer background-Grafik zu füllen.

Die meisten mobilen Geräte (u.a. Android) zoomen automatisch an den Inhalt der Webseite heran und verhindern so, dass weiße Balken an den Rändern angezeigt werden.

Mobile Version fürs iOS

Apple braucht hier natürlich eine gesonderte Aufforderung.

Um den automatischen Zoom für das iPhone und weitere iOS Geräte zu aktivieren, gibt es ein Meta Element:

<meta name="viewport" content="width=device-width" />

Diesen Code musst du nur in den head-Bereich deiner Website einbinden.

Stylesheet je nach Gerät auswählen

Vielleicht möchtest du auch nicht ein komplett verändertes Seitenlayout als Mobil Version verwenden, sondern nur ein anderes CSS Stylesheet verwenden.

Dafür gibt es media="screen" (Normal), media="all" (Normal) und media="handheld" (Mobil), was als Attribut in den Stylesheet Meta Tag integriert wird oder auch innerhalb einer CSS-Datei verwendet werden kann.

Dies stellt keine optimale Lösung dar, da das Attribut nicht von allen Browsern unterstützt wird. Es ist daher besser die oben beschriebene isMobile()-Funktion zu nutzen und mittels PHP das passende Stylesheet auszuwählen.

Mobile Werbung anzeigen

Auf der mobilen Version „normale“ Werbeflächen einbinden? Ein NoGo.

Image Anzeigen für eine Breite bis ~320px sind noch okay, aber normale Textanzeigen, wären sehr schwer anzuklicken.

Wenn du Google AdSense nutzt, gibt es dafür den „Mobile Banner“, der speziell auf mobile Nutzer abgestimmt ist, dort gibt es sowohl Textanzeigen als auch Image Anzeigen, die ein höheres Komfort für mobile Nutzer bieten.

Google experimentiert derzeit übrigens mit Responsive Werbemitteln, also solchen, die sich automatisch an den Bildschirm beziehungsweise dir zur Verfügung stehenden Fläche anpassen. Dieses Werbemittel kann bereits jetzt eingebunden werden und wird sich in Zukunft vermutlich steigender Beliebtheit erfreuen.
Genauso wie man es bei Desktop Geräten nicht mit der Werbung übertreiben sollte, solltest du auch in der mobilen Version die Site nicht Werbung „vollmüllen“. Mit einer guten Position der Anzeigen lässt sich dort deutlich mehr erreichen.
Der kleinere Bildschirm führt auch dazu, dass schon ein Werbebanner dafür sorgt, dass der Nutzer mehr scrollen muss. Das Verhältnis zwischen Werbung und Inhalte sollte insbesondere im mobilen Bereich eher zu Gunsten des Inhaltes ausfallen, denn sonst läufst du Gefahr, die Nutzer zu vergraulen.

Fazit: Eigene mobile Version

Wenn man ein paar kleine Dinge beachtet, ist es eigentlich gar nicht schwer eine solche mobile Version für die eigene Website zu entwickeln. Und da solche Seiten relativ einfach aufgebaut sind, musst du wohl nicht allzu viel Arbeit in die mobile Version investieren, bietest den Nutzern deiner mobilen Version aber höheren Komfort.

Google will anscheinend dafür sorgen, dass es mehr mobile Versionen gibt und hat eine Website entwickelt, die Hilfestellungen für Webmaster leistet. Um zu testen wie gut sich deine mobile Version zur Nutzung eignet klicke hier.

Ein Gedanke zu „Mobile Version für die eigene Webseite erstellen“