Mobiles Web als Marketingtool

Mobiles Web: Mehr als ein Nice to Have
Der PC-Markt bricht ein, der Absatz von Tablets und Smartphones hingegen boomt. Da ist es nur
logisch, dass auch der Anteil von mobilen Zugriffen auf Websites stetig steigt. Im Oktober 2012
wurde hier die 10-Prozent-Marke erstmals überschritten. 1 Betreiber einer Website kommen nicht
umhin, ihre Präsenz auch den Usern von Pads, Pods und Phones zugänglich zu machen oder den
Nutzern solcher Geräte entsprechende Angebote zur Verfügung zu stellen. Im folgenden Artikel
möchte ich zuerst die Möglichkeiten aufzeigen und dann anhand eines realen Beispiels eine
Umsetzung aus der Praxis präsentieren.

Mobile Betriebssysteme
Auf dem Markt der mobilen Endgeräte konkurrieren heute mehrere Betriebssysteme:
Marktführer ist aktuell das von Google mitentwickelte Betriebssystem Android – es basiert auf
einem Linuxkernel - mit einem Anteil von fast drei Vierteln 2, mit stark steigender Tendenz. Diese
Software ist standardmäßig z. B. auf Smartphones von Samsung, HTC und Sony Ericsson
installiert. Trotz rückläufiger Verkaufszahlen hat das von Apple entwickelte iOS immer noch eine
sehr hohe Marktdurchdringung. Nur noch eine Randerscheinung stellt das auf Blackberries
installierte eigene Betriebssystem Research in Motion da, die mobile Version des auf PCs
populären Windows schafft die 5-Prozent-Hürde nicht.

Alle mobilen Betriebssysteme machen aus dem tragbaren Telefon einen vollwertig einsetzbaren
mobilen Arbeitsplatz: Neben einer E-Mail- und Organizerfunktion bieten sie selbstverständlich
Internetbrowser und eine voll funktionsfähige Office-Software mit Textverarbeitung,
Bildbearbeitung etc. Der Nutzer kann die Funktion seines Smartphones beinahe nach Belieben
ergänzen: Jedes mobile Betriebssystem kann um zahlreiche Zusatzfunktionen erweitert werden:
Dies geschieht durch die Installation von Apps (< engl. application) auf dem Endgerät. Diese sind
auf speziellen Downloadportalen (Clouds) verfügbar: Das bekannteste ist der AppStore von Apple
mit derzeit fast einer Viertelmillion 3 Apps. Ähnlich groß ist das Angebot für Android-Geräte auf
der Plattform Google Play. 4 Viele dieser Apps sind kostenfrei, andere müssen vom Nutzer bezahlt
werden, in der Regel erfolgt die Bezahlung über die Handyrechnung. Da die im Apple Appstore
oder auf Google Play verfügbaren Anwendungen für das jeweilige Betriebssystem geschrieben
wurden, bezeichnet man sie auch als native Apps: Sie können auf die eingebaute Hardware des
Endgeräts zugreifen, etwa auf die Kamera oder das Accelerometer, mit dem die Neigung des
Geräts gemessen wird. Eine App für Apples iOS wird sich auf einem Android-Gerät im Regelfall
nicht installieren lassen.

Apps als Marketing- und CRM-Instrument
Große Konzerne haben die Popularität von Apps längst für sich entdeckt und bieten Kunden und
Nutzern eigene Apps, mit denen die Unternehmen ihre Produkte und Dienstleistungen
vertreiben, aber auch mit den Kunden interagieren: So kann man mit der App der Lufthansa
nicht nur Flüge buchen, sondern auch einchecken, die Bordkarte darstellen und feststellen, ob
der gebuchte Flug pünktlich ist. Auch zur Kundenbindung lässt sich diese App nutzen: Erflogene
Bonusmeilen kann der Pasagier ebenfalls mithilfe der App am Smartphone administrieren. 5

1 http://www.heise.de/newsticker/meldung/Mobiles-Websurfen-legt-zu-1742074.html
2 http://www.maclife.de/panorama/netzwelt/aktuelle-smartphone-marktanteile-ios-verliert-android-gewinnt
3 http ://de.wikipedia.org/wiki/App_Store_%28iOS%29
4 http://de.wikipedia.org/wiki/Google_Play
5 http://www.lufthansa.com/online/portal/lh/de/info_and_services/flightinfo?nodeid=2099895&l=de

Für ein großes und finanzkräftiges Unternehmen gehört das Bereitstellen einer App für die
wichtigsten Betriebssysteme heute schon beinahe zum guten Ton.

Das Erstellen einer nativen App ist mit einem gewissen Aufwand verbunden: Diese muss in einer
Sprache erstellt werden, in ObjectiveC für IOS bzw. in Java für andere Betriebssysteme. 6 Neben
dem relativ hohen Entwicklungsaufwand stellt die größte Hürde die mögliche Ablehnung der
App durch den Betreiber der Downloadplattform dar. 7 Einmal dort erfolgreich platziert, ist die
App für das Unternehmen dann jedoch ein effektives Marketingtool, das den Medienmix
hervorragend bereichern kann.

Die Situation in KMU
Kleine und mittelständische Unternehmen scheuen oft den hohen Aufwand für die Erstellung
einer nativen App, nicht zuletzt, weil das Risiko einer Ablehnung sehr hoch ist (s.o.). Um dennoch
den Besitzern von Smartphones einen Nutzen zu bieten, gibt es Alternativen, die mit geringerem
Einsatz ebenfalls zu einem sinnvollen Ergebnis führen.

Die eigene Website auf dem Smartphone
Zuerst die gute Nachricht: Eine zeitgemäße Website, die auf die beiden 90er-Jahre-Technologien
Frames und Flashanimationen verzichtet, lässt sich mit jedem Smartphone problemlos darstellen,
vorausgesetzt, es besteht eine Internetverbindung. Diese hat natürlich Einfluss auf die Ladezeit,
so dass übergroße Bilder und multimediale Inhalte möglicherweise langsamer auf dem Display
erscheinen als am PC mit DSL-Anschluss. Auch wenn die Displays der Handys heute schon sehr
groß sind, so ist es für den User mühsam, längere Texte zu lesen: Es kann erforderlich sein, dass
die Zoomfunktion des mobilen Geräts verwendet werden muss, möglicherweise müssen Bereiche
der Website horizontal oder vertikal gescrollt werden. Wenn Navigationsmenüs sehr klein
dargestellt werden, besteht darüber hinaus das Risiko, dass beim Antippen eines Menüpunkts
nicht der gewünschte „erwischt“ wird. Alles in allem kann sich gerade das mobile Surfen auf
klassischen Websites mit mehreren Spalten und einer hohen Contentdichte auf den Unterseiten
recht mühsam gestalten, gerade für weniger erfahrene User. Möchte man als Websitebetreiber
die mobilen Nutzer nicht vergraulen, sollte man zumindest über eine mobile Version der Website
nachdenken.

Mobile Surfer surfen anders
Wer eine Website mobil aufsucht, verfolgt mist andere Ziele als ein Nutzer am Desktop-PC oder
Notebook: 8 Oft möchte man schnell und gezielt eine bestimme Information finden oder eine
bestimmte interaktive Handlung vornehmen. Wer eine Website wie die der Deutschen Bahn von
unterwegs aus aufruft, möchte sich mit hoher Wahrscheinlichkeit nicht über die
Urlaubsangebote informieren, sondern eben wissen, ob der erwartete Zug pünktlich ist oder
nicht. Eventuell möchte der mobile Nutzer eine Fahrkarte buchen oder schnell eine Auskunft
abrufen. Die mobile Website m.bahn.de trägt einem solchen Surfverhalten Rechnung: Auf Bilder
wurde komplett verzichtet, es findet sich auf der Startseite eine im Corporate-Design des
Unternehmens gehaltene Navigation mit ausreichend großen Schaltflächen. Wem diese

6 http://www.heise.de/ct/artikel/Die-eigene-App-1037372.html
7 http://www.bokowsky.net/de/knowledge-base/mobile-internet/artikel_appstore.php
8 http://www.kernpunkt.de/.../030811-mobiles-internet-momentaufnahme.pdf

reduzierte Ausgabe nicht genügt, der kann im Fußbereich der Website die „normale“ Version
www.bahn.de aufrufen.

Praxisbeispiel: mobil surfen - indisch essen
Unsere Aufgabe im November 2012 bestand darin, den Kunden eines beliebten indischen
Spezialitätenrestaurants in Göttingen auch ein mobiles Surferlebnis zu bieten. Ziel war, zu
zeigen, dass das Restaurant auf der Höhe der Zeit ist und natürlich auch, dem User einen
Mehrwert zu bieten. Nicht zuletzt sollten Anreize geschaffen werden, die Zahl der
Tischbuchungen zu steigern. Da es sich nicht um ein Großunternehmen handelt, sollte der
Aufwand in einem überschaubaren Rahmen bleiben. Der Kunde, der Betreiber des Restaurants –
wünschte sich ferner eine mit Tablet-PCs abrufbare Menükarte

Ausgangssituation – die vorhandene Website und das Corporate-Design:
Das Corporate-Design des Göttinger India-Haus' haben mein Team und ich schon im Jahr 2011
entwickelt und umgesetzt. Passend zur Branche ist das Design eher aufwändig und wenig
schlicht gehalten. Kernstück ist neben dem Logo eine dekorativ gehaltene Bordüre, die alle
Elemente umrahmt. Als Hintergrundbild kommen einzelne Elemente aus dem Gastraum des
Restaurants zum Einsatz, im Regelfall ein Relief mit einer Elefantenfigur im Stile eines indischen
Tempels. Diese grafisch aufwändige Gestaltung führt natürlich zu etwas längeren Ladezeiten,
dies wird jedoch in Kauf genommen, da die meisten Zugriffe aus der Region kommen und das
Publikum eher jünger ist, so dass der Zugriff mit einer schnellen DSL-Verbindung die Regel sein
dürfte. Auf Flash wird bewusst verzichtet, ebenso auf Animationen und Hintergrundmusik. Die
Website ist aufrufbar unter: http://fineindiandining.de.

Umgesetzt ist die zweisprachige Website (deutsch und englisch) mit dem Open-Source-CMS
Textpattern 9. Sie verwendet HTML 5 als Standard und ist dahingehend „strict“, dass
Formatierungen fast ausschließlich in
externen Stylesheets erfolgen. Um der
Website ein zeitgemäßes Look-and-
Feel zu verleihen kommt das JQuery-
Framework mit einigen
Erweiterungen zum Einsatz: Auf der
Startseite findet sich eine
Bildergalerie mit Lightbox-Effekten,
für Tischreservierungen steht ein
HTML-Formular bereit. Bei diesem
kommt JQuery zur Anwendung, um
die Vollständigkeit der Angaben zu
validieren, ebenso steht beim
Eingabefeld für den Besuchstag ein
Datepicker aus dem JQuery-UI-
Framework bereit, um die Auswahl
des Datums zu erleichtern und um die
Eingabe eines zurückliegenden
Datums zu unterbinden. Eine
Unterseite stellt Google Maps zur Verfügung, um das Restaurant zügig auffindbar zu machen.
Selbstverständlich enthält die Website auch ein Impressum mit den Pflichtangaben.

9 http://www.textpattern.com

Fineindiandining.de goes mobile.
Nach dem Briefing mit dem Auftraggeber entschieden wir uns, die bestehende Website zu einer
Webapp zu erweitern: Eine solche hat den Vorteil, dass sie in HTML 5, CSS und JavaScript
geschrieben ist und nicht das zum Teil intransparente Procedere der Aufnahme in die Clouds der
großen Anbieter, allen voran Apple, durchlaufen muss. Der Nachteil, dass diese Variante einer
App zunächst im Browser des Mobiltelefons aufgerufen werden muss, wurde bewusst
hingenommen.

Für die Erweiterung der bestehenden Website zu einer Webapp sprach auch, dass es bei einem
Backend zur Administration bleiben konnte und Aktualisierungen nur einmal zu tätigen waren.
Wir entschieden uns, die Struktur des Quellcodes geringfügig anzupassen und – wo möglich –
Elemente aus der HTML 5-Spezifikaation einzusetzen, v.a. das role-Attribut. Für die Darstellung
auf mobilen Endgeräten setzten wir die in CSS 3 verfügbaren Media-Queries ein: Dabei werden
vom Browser – in Abhängigkeit vom Medium, der Größe oder Ausrichtung des Browserfensters -
unterschiedliche Stylesheets geladen. 10 Im HTML-Quelltext sieht dies so aus:

<link rel="stylesheet" href="http://fineindiandining.de/css.php?n=mobile_portrait" type="text/css" media="only
screen and (min-device-width: 280px) and (max-width: 765px) and (orientation: portrait) and (-webkit-min-device-
pixel-ratio: 2) " />
<link rel="stylesheet" href="http://fineindiandining.de/css.php?n=mobile_landscape" type="text/css" media="only
screen and (min-device-width: 320px) and (max-width: 765px) and (orientation: landscape) and (-webkit-min-device-
pixel-ratio: 2)" />
screen and (min-device-width: 280px) and (max-width: 765px) and (orientation: portrait) and (-webkit-min-device-
pixel-ratio: 1.5) " />
screen and (min-device-width: 320px) and (max-width: 765px) and (orientation: lansdcape) and (-webkit-min-device-
pixel-ratio: 1.5)" />
screen and (min-width: 280px) and (max-width: 765px) and (orientation: portrait)" />
screen and (min-width: 320px) and (max-width: 765px) and (orientation: landscape)" />
<link rel="stylesheet" href="http://fineindiandining.de/css.php?n=default" type="text/css" media="only screen and
(min-width: 1001px)" />

Es wird deutlich, dass für die unterschiedliche Ausrichtung des Smartphones auch abweichende
Stylesheets notwendig sind: Die Anweisung portrait steht für ein senkrecht gehaltenes, die
Anweisung landscape für ein waagrecht gehaltenes Gerät. Ausschlaggebend ist ferner die Breite
des sichtbaren Browserfensters (viewport) in Pixeln. Smartphones der neuesten Generation
verwenden eine höhere Bildschirmauflösung, so dass sie im Prinzip die Website ohne Scrollen
darstellen könnten. Dies ist jedoch wenig nutzerfreundlich, so dass für diese Geräte ebenso
Stylesheets angelegt werden müssen.

Mithilfe der neu erstellten mobilen Stylesheets gelang es uns, komplette Bereiche der Website
mittels der Anweisung display: none nicht darstellen zu lassen. So verzichteten wir auf die
Ausgabe der Bildergalerie auf der Startseite komplett, ebenso wird aus Platzgründen die zum
Corporate-Design des Restaurants gehörige Bordüre nicht als Hintergrundbild des
entsprechenden Div-Containers geladen. Um dem Look-and-Feel einer Smartphone-App
möglichst nahe zu kommen, wurde die Startseite als übergeordnete Auswahlseite gestaltet, von
der aus große, nutzerfreundliche Buttons zu den einzelnen Unterseiten führen. Die Auswahl der
erreichbaren Unterseiten wurde reduziert: Der Online-Erwerb von Geschenkgutscheinen ist nicht
aufrufbar, ebenso die in eine Lightbox ladende Verlinkung zum Bewertungsportal Qype. Da ein
Smartphone immer auch als Telefon eingesetzt werden kann, wurde zudem ein Button integriert,

10 http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

welcher mit Hilfe des Attributs href=tel die Telefonfunktion des Endgeräts aufruft. Da dieser
Button im Quellcode vorhanden ist, muss er in der Desktopversion der Website mit der CSS-
Anweisung display: none versehen werden. Um die Optik zu perfektionieren, wurde jeder
Menübutton mit einem passenden grafischen Icon versehen. Dies wird ermöglicht, weil jedem
Menüpunkt eine eigene CSS-ID zugewiesen
wurde.

Der Link zum Impressum wurde in den
Fußbereich gesetzt. Dies machte es nötig,
die HTML-Struktur dahingehend zu
modifizieren, dass der Link zum Impressum
an zwei Stellen im Markup erscheint: In der
Hauptnavigationsleiste und im Fußbereich
der Seite. Wieder wurde mit der Anweisung
display: none erzielt, dass der Nutzer den
Link nur einmal sieht. Um einen
Wiedererkennungswert zu schaffen, wurde
das Logo des Unternehmens prominnent
oben in der Mitte platziert

Aller Start ist gut, Content ist King.
Für die Unterseiten wählten wir ein anderes
Screendesign: Hier sollte nicht die
Navigation im Mittelpunkt stehen, sondern
der Inhalt. Daher reduzierten wir die Navigationsleiste auf den Home-Button und brachten das
so minimierte Menü am oberen Rand des Screens unter. Bei der Gestaltung der Inhalte stellte die
Darstellung der Speisen- und Getränkekarte eine besondere Herausforderung dar: Bis dato gab es
die Speisekarte zum Download als PDF. Auch wenn mobile Geräte ohne Probleme PDF-Dateien
öffnen können, erschien uns diese Darreichnungsform wenig geeignet für das Medium. Eine fast
vierzigseitige Menükarte durchzublättern oder gar zu scrollen wäre jedoch wenig userfreundlich
gewesen.

Wir entschieden uns daher für eine komplette Darstellung des Menüs als verschachtelte Liste
und setzten einen aus Navigationsleisten bekannten Akkordeon-Effekt ein: So sieht der mobile
Surfer nach dem Aufruf des Menüpunkts „Essen“ zuerst die Kategorien der Speisen. Aktiviert er
eine von diesen, öffnen sich die einzelnen Gerichte mit einem vertikalen Slide-Effekt. Damit nicht
genug: Zu jedem Gericht gibt es eine mehr oder weniger ausführliche Beschreibung in Textform,
dies ist zum Teil auch bei den Getränken, insbesondere bei den Weinen der Fall. Um die virtuelle
Speisekarte maximal übersichtlich zu halten, sind diese Detailbeschreibungen nur dann zu sehen,
wenn man mit dem Finger auf das jeweilige Gericht tippt: Sie öffnen sich in einer Box mit
Schlagschatten und einem Slide-Down-Effekt und bleiben solange sichtbar, bis der User den
Finger wieder entfernt oder auf ein anderes Gericht bewegt. Bei der Anfahrtskizze – unter dem
Menüpunkt „Anfahrt“ - wurde der Kartendienst Google Maps um ein interessantes Feature
erweitert: Die in Smartphones eingebaute GPS-Einheit ermittelt den Standort des Nutzers und
zeigt dann den Weg zum Restaurant auf, grafisch in einer Karte und in Textform als
Beschreibung. Auch hier wurden teilweise die CSS-Styles angepasst, um eine harmonische
Einheit mit dem Corporate-Design des Restaurants zu schaffen.

Zwichenfrage: Ist ein Tablet-PC ein PC?
Moderne Tablet-PCs wie das iPad von Apple oder das Galaxy-Tab von Samsung bieten die
gleiche Leistung wie ein zeitgemäßes Notebook. Auch die Bildschirmauflösung marktüblicher
Tablets reicht an die von Desktop-PCs ran, übertrifft diese teilweise sogar. Es schien uns daher
nicht nötig, eine gesonderte Version für Tablets zu entwickeln. Erste Tests zeigten jedoch, dass
die Darstellung auf einem hochkant gehaltenen Tablet unbefriedigend war. So entwickelten wir
zumindest ein Stylesheet für diese Situation:

<link rel="stylesheet" href="http://fineindiandining.de/css.php?n=tabletten" type="text/css" media="only screen and
(min-width: 766px) and (max-width: 1000px)" />

Bei dieser Version der Website wird die zum CD
gehörige Bordüre angezeigt. Auch sind auf allen
Unterseiten sämtliche Menüicons sichtbar. Die
Speisekarte ist ebenfalls so dargestellt wie auf
dem Smartphone. Die Bildergalerie auf der
Startseite ist sichtbar. Auch das Logo wird auf
allen Unterseiten dargestellt. Da ein Tablet
nicht mit der Maus, sondern in der Regel mit
den Fingern bedient wird, haben wir die
Menüpunkte als Icons dargestellt, so wie bei der
Smartphoneversion. Die Bestellfunktion der
Geschenkgutscheine ist hier erreichbar.
Prominent platziert sind Anschrift und
Öffnungszeiten des Restaurants.

Von der mobilen Website zur Webapp
Alle bis hier beschriebenen Schritte machen die
Website zugänglicher für mobile Geräte und
schaffen Zusatznutzen für mobile Surfer. Man
bezeichnet ein Webdesign, welches auf das
aufrufende Endgerät mit einer angepassten Darstellung antwortet auch als responsives Design.

Wir wollen nun noch einen Schritt weitergehen: Einige wenige Eingriffe in die Metatags des
HTML-Markups und zwei kleine Grafikdateien bringen uns nun über die Grenze von der mobilen
Website zur Webapp:

Zuerst weisen wir den auf dem iOS installierten Browser Safari an, dass die Website auch als App
auf den Hauptscreen des iPhones verknüpft werden kann. Der User kann die Website dann
direkt von dort aus aufrufen:

<meta name="apple-mobile-web-app-capable" content="yes" />

Dabei wird die sogenannte Status-Bar durchsichtig, so dass der User nicht bemerkt, dass er
eigentlich mit dem mobilen Browser im Web surft:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

Auf dem Hauptscreen des Smartphones kann eine PNG-Datei als Verknüpfung abgelegt werden.
Dieses Metatag bezeichnet den absoluten Pfad zu dieser Bilddatei:
<link rel="apple-touch-icon-precomposed" href="http://fineindiandining.de/assets/apple-touch-icon.png" />

Wenn das Laden der Seite einmal länger dauert, verkürzt ein ansehnlicher Splashscreen die
Wartezeit. Auch hier muss der absolute Pfad definiert werden:
<link rel="apple-touch-startup-image" href="http://fineindiandining.de/assets/splashscreen.png" />

Wenn wir uns als Entwickler die Mühe bereiten, die Stylesheets für kleine Displays
aufzubereiten, wollen wir nicht, dass der User mit den Fingern zoomt. Das machen wir ihm hier
unmöglich:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

Last but not least soll die Webapp auch lokal auf dem Endgerät gespeichert werden können.
Hierbei hilft uns eine Manifest-Datei, die gewissermaßen eine Sitemap mit statischen HTML-
Files enthält, die im Speicher des Smartphones abgelegt werden kann. Auf diese Manifestdatei
verweisen wir bereits im öffnenden html-Tag:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de"
manifest="http://fineindiandining.de/assets/indiahaus.appcache">
<head>

Fazit:

Mit überschaubarem Aufwand wurde aus einer Website eine Webapp. Die inhaltliche Pflege
bleibt einfach, die Attraktivität des Restaurants für den Kunden wird gesteigert. Als besonderen
Bonus bekommen alle Gäste, welche die Webapp auf dem Startscreen ihres Smartphones
verlinken, vom Team des Restaurants ein Freigetränk oder eine Ermäßigung auf ihre Bestellung.
So ist die Anwendung nicht nur ein neues Gadget, sondern Teil einer integrierten
Marketingmaßnahme.

Benjamin Kühn
www.goetext.de
kuehn@goetext.de

Mobiles Web als Marketingtool

Recomendados

Recomendados

Más contenido relacionado

Mobiles Web als Marketingtool