Mobile Website: So erstellen Sie für Tablet und Smartphone eine mobile Internetseite

Aktuelle Studien zur Nutzung von mobilen Geräten sind deutlich: Die Anzahl der Haushalte mit einem Tablet stieg 2013 von 8% auf 19%. Statt wie vorher 23% surfen seit diesem Jahr 41% der Internetnutzer auch unterwegs im Netz, davon über 20% täglich. 169 Minuten am Tag ist jeder deutsche Nutzer durchschnittlich online. Dies belegt die aktuelle ARD/ZDF Onlinestudie 2013, und verdeutlicht damit den Einfluss von Smartphone und Tablets auf das Nutzungsverhalten der mobile Surfer.

Websites für kleine Touch-Display benötigen besondere Features

Wer eine Website betreibt, der möchte, dass diese Seite überall gut aussieht. Sie muss auch nicht nur auf dem PC-Bildschirm perfekt wirken, sondern auch auf allen tragbaren Geräten zu öffnen und bequem zu bedienen sein. Das bedeutet zum Beispiel, dass sich die Größe des Layouts so an einen kleineren Bildschirm anpasst, dass die Nutzer ohne viel Wischen alle Informationen sehen können. Bilder werden dabei kleiner skaliert und ein mehrspaltiges Menü auf eine Spalte verkleinert – Responsive Design nennt sich das.

Außerdem müssen Button und Navigation statt per Mausklick auch mit einem Fingerdruck funktionieren. Nicht auszudenken, wenn ein Mouseover sich auf dem Tablet einfach nicht schließen lässt, oder der Warenkorb nicht geöffnet werden kann. Damit das surfen auf dem Smartphone oder Tablet genauso angenehm und übersichtlich funktioniert wie am Computer, erstellen Betreiber extra eine mobile Variante ihrer Internetseite. Mit sogenannten Tab-to-Call Buttons können Besucher zum Beispiel von der mobilen Seite direkt eine Telefonnummer mit dem Smartphone anrufen, oder eine E-Mail verfassen. Auch die Koordination von Google Maps lassen sich direkt mit einem Navigation-Programm verbinden. Wie Ihre Website bisher auf dem Smartphone aussieht, testen Sie schnell und kostenlos auf www.testiphone.com.

Mobile Website als Funktion im Baukasten

Am einfachsten ist die Einrichtung der mobilen Ansicht natürlich, wenn diese Funktion direkt im Baukasten hinterlegt ist. Viele Baukasten-Anbieter haben diese Option, allerdings sind die mobilen Ansichten je nach Tarif manchmal erst in einem höheren Paket enthalten. Auf unseren Anbieter-Seiten erkennen Sie in der Tarifübersicht sehr schnell, oder der Anbieter in den jeweiligen Tarifen die mobile Ansicht mit anbietet. Meistens handelt es sich bei der Mobile-Funktion in einem Homepage-Baukasten nicht um eine eigene, mobile Website, sondern nur um eine optimierte Ausrichtung der Seite auf kleineren Displays.

mobile_ansicht

Mit diesen Beispielen erläutern die Anbieter Hostpoint, 1&1 und Alfahosting die Funktion der mobilen Darstellung, links ist das Jimdo-Menü dafür zu sehen.

Allerdings muss festgehalten werden, dass längst nicht alle als mobile Darstellung bezeichneten Funktionen die gleichen Möglichkeiten und Vorteile bieten. Jimdo beispielsweise erlaubt dem Nutzer, das Layout seiner mobilen Ansicht selbst aus 13 Vorlagen auszuwählen. Diese Ansicht zeigt sich danach aber nur auf dem Smartphone, ein Tablet lädt die klassische Website. Andere Anbieter wandeln die Informationen der Website automatisch in eine mobile Ansicht um, ermöglichen aber keine weiteren Abänderungen des Inhalts, so zum Beispiel bei one.com. Einen Vorteil zur Ansicht der klassischen Browser-Website auf einem verkleinerten Display bieten die unterschiedlichen Funktionen jedoch allemal.

Übrigens, wer Systeme wie Joomla oder WordPress für seine Website verwendet, findet dort auch praktische Plugins für die mobile Darstellung, zum Beispiel „WPTouch“.

Was tun, wenn die mobile Ansicht keine Funktion im Baukasten ist?

Falls ihr Baukasten nicht die Möglichkeit bietet, quasi mit einem Klick auch eine mobile Darstellung zu gestalten, können Sie eine der folgenden Alternativen in Erwägung ziehen.

1. Bestehende Website in mobile Website umwandeln

Im Internet existieren mehrere Online-Dienste, die bestehende Websites in eine mobile Darstellung umwandeln.Diese Tool nehmen die bestehenden Informationen und erstellen daraus den Code für die mobile Variante. Diese ist dann eine eigene und eigenständige Website. Ruft ein Nutzer Ihre Website vom Handy auf, wird das Gerät erkannt und der Besucher automatisch auf die Subdomain oder per .htaccess weitergeleitet.

Eine dieser Online-Dienste ist dudamobile.com. Die Software ist wirklich einfach. Sie stellen lediglich den Link zu Ihrer bestehenden Seite zur Verfügung, ganz egal, wie oder mit welchem Baukasten Sie diese erstellt habe. Dudamobile nimmt die Informationen und arrangiert sie neu, angelehnt an ein mobiles Design. Im Login-Bereich erlaubt ein Editor zusätzliche Veränderungen der Inhalte. Für das Angebot gibt es einen kostenlosen und eine kostenpflichtigen Tarif. Tipps zur Einrichtung gibt dieses Video.

Ähnlich wie dudamobile funktioniert www.bmobilized.com. Sie wandeln eine bestehende Seite in ein Responsive Design um und erlauben danach weitere Anpassungen. Mit der Eingabe Ihrer Domain können Sie das Potential der Software auf der Website testen. Die Preis liegt bei 9 US-Dollar pro Monat.

mobile-converter

 Mit nur einem Klick zeigt der Converter, wie die optimierte Darstellung aussehen könnte. (Quelle: bmobilized)

 Eine kostenlose Software, die ein wenig Geschick bei der Installation und Einrichtung für eine mobile Variante erfordert, finden Sie unter www.mobile-webseiten-erstellen.de. Auch bei www.easymobilehomepage.com laden Sie die Software einmal herunter und erstellen Ihre Website dann am PC. Es stehen eine kostenlose und ein kostenpflichtiger Download zur Auswahl.

2. Kleine mobile Website mit Online-Dienst erstellen

Mit dem Angebot von www.mobil-durchstarten.de erstellen Sie eine neue, mobile Website. Der Mobil-Baukasten kostet monatlich 5 Euro und hat in etwa die gleichen Funktionen wie ein normaler Homepage-Baukasten. Zum gleichen Preis erhalten sie auch den Premium-Tarif von Poccy (www.mobile-website-generator.com), einer Software mit ähnlichem Baustein-Charakter. Im kostenlosen Paket finanziert sich das Angebot stattdessen durch Werbung. Komplett neu einfügen müssen Sie die Inhalte auch bei www.mobilonso.com/de. Dabei können das Menü und Bilder extra für die Verwendung am Smartphone oder Tablet angepasst werden. Im kostenlosen Tarif erlaubt mobilonso das Anlegen von 5 Unterseiten, allerdings ohne die praktischen Tab-to-Call-Funktion. In der Regel erstellen Sie mit diesen Online-Diensten eine eigene Website, erreichbar beispielsweise unter mobil.ihredomain.de. Diese Seite muss dann getrennt von der Hauptseite bearbeitet werden.

 

 mobilonso

Mit diesen Beispielen zeigt mobilonso.com, wie Ihre neue Online-Website aussehen könnte.

3. CSS Profis und Website mit jQuery

Falls Sie selbst oder jemand aus Ihrem Bekanntenkreis mit CSS vertraut ist, können Sie für die mobile Ansicht in einer eigenen CSS-Datei anlegen. Die Bearbeitung der CSS-Datei wird Ihnen beispielweise beim Baukasten von Webvisitekarte.net gestattet. Je nach Medientyp verweisen Sie im HTML-Header der Website dann auf ein anderes Stylesheet:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”desktop.css” />
<link rel=”stylesheet” type=”text/css” media=”handheld” href=”mobile.css” />

Eine sehr gute Anleitung, wie Sie die PHP-Scripte bearbeiten und verschiedene Funktionen einbauen lesen Sie im Blog von Xcreative.

Professionelle Seitenbetreiber mit Programmierkenntnissen sollten für die mobile Website das Javascript-Framework JQuery Mobile (http://jquerymobile.com/) verwenden, das speziell für mobile Websites entwickelt wurde.

jQuery

Auch mit dem JQuery Framework lässt sich eine mobile Website erstellen.