You are on page 1of 7

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 Prsenz auch den Usern von Pads, Pods und Phones zugnglich zu machen oder den Nutzern solcher Gerte entsprechende Angebote zur Verfgung zu stellen. Im folgenden Artikel mchte ich zuerst die Mglichkeiten aufzeigen und dann anhand eines realen Beispiels eine Umsetzung aus der Praxis prsentieren.

Mobile Betriebssysteme
Auf dem Markt der mobilen Endgerte konkurrieren heute mehrere Betriebssysteme: Marktfhrer 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 standardmig z. B. auf Smartphones von Samsung, HTC und Sony Ericsson installiert. Trotz rcklufiger 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 populren Windows schafft die 5-Prozent-Hrde nicht. Alle mobilen Betriebssysteme machen aus dem tragbaren Telefon einen vollwertig einsetzbaren mobilen Arbeitsplatz: Neben einer E-Mail- und Organizerfunktion bieten sie selbstverstndlich Internetbrowser und eine voll funktionsfhige Office-Software mit Textverarbeitung, Bildbearbeitung etc. Der Nutzer kann die Funktion seines Smartphones beinahe nach Belieben ergnzen: Jedes mobile Betriebssystem kann um zahlreiche Zusatzfunktionen erweitert werden: Dies geschieht durch die Installation von Apps (< engl. application) auf dem Endgert. Diese sind auf speziellen Downloadportalen (Clouds) verfgbar: Das bekannteste ist der AppStore von Apple mit derzeit fast einer Viertelmillion 3 Apps. hnlich gro ist das Angebot fr Android-Gerte auf der Plattform Google Play. 4 Viele dieser Apps sind kostenfrei, andere mssen vom Nutzer bezahlt werden, in der Regel erfolgt die Bezahlung ber die Handyrechnung. Da die im Apple Appstore oder auf Google Play verfgbaren Anwendungen fr das jeweilige Betriebssystem geschrieben wurden, bezeichnet man sie auch als native Apps: Sie knnen auf die eingebaute Hardware des Endgerts zugreifen, etwa auf die Kamera oder das Accelerometer, mit dem die Neigung des Gerts gemessen wird. Eine App fr Apples iOS wird sich auf einem Android-Gert im Regelfall nicht installieren lassen.

Apps als Marketing- und CRM-Instrument


Groe Konzerne haben die Popularitt von Apps lngst fr 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 Flge buchen, sondern auch einchecken, die Bordkarte darstellen und feststellen, ob der gebuchte Flug pnktlich ist. Auch zur Kundenbindung lsst sich diese App nutzen: Erflogene Bonusmeilen kann der Pasagier ebenfalls mithilfe der App am Smartphone administrieren. 5
1 2 3 4 5 http://www.heise.de/newsticker/meldung/Mobiles-Websurfen-legt-zu-1742074.html http://www.maclife.de/panorama/netzwelt/aktuelle-smartphone-marktanteile-ios-verliert-android-gewinnt http ://de.wikipedia.org/wiki/App_Store_%28iOS%29 http://de.wikipedia.org/wiki/Google_Play http://www.lufthansa.com/online/portal/lh/de/info_and_services/flightinfo?nodeid=2099895&l=de

Fr ein groes und finanzkrftiges Unternehmen gehrt das Bereitstellen einer App fr 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 fr IOS bzw. in Java fr andere Betriebssysteme. 6 Neben dem relativ hohen Entwicklungsaufwand stellt die grte Hrde die mgliche Ablehnung der App durch den Betreiber der Downloadplattform dar. 7 Einmal dort erfolgreich platziert, ist die App fr das Unternehmen dann jedoch ein effektives Marketingtool, das den Medienmix hervorragend bereichern kann.

Die Situation in KMU


Kleine und mittelstndische Unternehmen scheuen oft den hohen Aufwand fr 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 fhren.

Die eigene Website auf dem Smartphone


Zuerst die gute Nachricht: Eine zeitgeme Website, die auf die beiden 90er-Jahre-Technologien Frames und Flashanimationen verzichtet, lsst sich mit jedem Smartphone problemlos darstellen, vorausgesetzt, es besteht eine Internetverbindung. Diese hat natrlich Einfluss auf die Ladezeit, so dass bergroe Bilder und multimediale Inhalte mglicherweise 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 fr den User mhsam, lngere Texte zu lesen: Es kann erforderlich sein, dass die Zoomfunktion des mobilen Gerts verwendet werden muss, mglicherweise mssen Bereiche der Website horizontal oder vertikal gescrollt werden. Wenn Navigationsmens sehr klein dargestellt werden, besteht darber hinaus das Risiko, dass beim Antippen eines Menpunkts nicht der gewnschte 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 mhsam gestalten, gerade fr weniger erfahrene User. Mchte 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 mchte 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, mchte sich mit hoher Wahrscheinlichkeit nicht ber die Urlaubsangebote informieren, sondern eben wissen, ob der erwartete Zug pnktlich ist oder nicht. Eventuell mchte der mobile Nutzer eine Fahrkarte buchen oder schnell eine Auskunft abrufen. Die mobile Website m.bahn.de trgt 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 groen Schaltflchen. Wem diese
6 7 http://www.heise.de/ct/artikel/Die-eigene-App-1037372.html http://www.bokowsky.net/de/knowledge-base/mobile-internet/artikel_appstore.php http://www.kernpunkt.de/.../030811-mobiles-internet-momentaufnahme.pdf

reduzierte Ausgabe nicht gengt, der kann im Fubereich 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 Spezialittenrestaurants in Gttingen auch ein mobiles Surferlebnis zu bieten. Ziel war, zu zeigen, dass das Restaurant auf der Hhe der Zeit ist und natrlich 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 Grounternehmen handelt, sollte der Aufwand in einem berschaubaren Rahmen bleiben. Der Kunde, der Betreiber des Restaurants wnschte sich ferner eine mit Tablet-PCs abrufbare Menkarte

Ausgangssituation die vorhandene Website und das Corporate-Design:


Das Corporate-Design des Gttinger India-Haus' haben mein Team und ich schon im Jahr 2011 entwickelt und umgesetzt. Passend zur Branche ist das Design eher aufwndig und wenig schlicht gehalten. Kernstck ist neben dem Logo eine dekorativ gehaltene Bordre, 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 aufwndige Gestaltung fhrt natrlich zu etwas lngeren Ladezeiten, dies wird jedoch in Kauf genommen, da die meisten Zugriffe aus der Region kommen und das Publikum eher jnger ist, so dass der Zugriff mit einer schnellen DSL-Verbindung die Regel sein drfte. 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 ausschlielich in externen Stylesheets erfolgen. Um der Website ein zeitgemes Look-andFeel zu verleihen kommt das JQueryFramework mit einigen Erweiterungen zum Einsatz: Auf der Startseite findet sich eine Bildergalerie mit Lightbox-Effekten, fr Tischreservierungen steht ein HTML-Formular bereit. Bei diesem kommt JQuery zur Anwendung, um die Vollstndigkeit der Angaben zu validieren, ebenso steht beim Eingabefeld fr den Besuchstag ein Datepicker aus dem JQuery-UIFramework bereit, um die Auswahl des Datums zu erleichtern und um die Eingabe eines zurckliegenden Datums zu unterbinden. Eine Unterseite stellt Google Maps zur Verfgung, um das Restaurant zgig auffindbar zu machen. Selbstverstndlich enthlt 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 groen Anbieter, allen voran Apple, durchlaufen muss. Der Nachteil, dass diese Variante einer App zunchst im Browser des Mobiltelefons aufgerufen werden muss, wurde bewusst hingenommen. Fr die Erweiterung der bestehenden Website zu einer Webapp sprach auch, dass es bei einem Backend zur Administration bleiben konnte und Aktualisierungen nur einmal zu ttigen waren. Wir entschieden uns, die Struktur des Quellcodes geringfgig anzupassen und wo mglich Elemente aus der HTML 5-Spezifikaation einzusetzen, v.a. das role-Attribut. Fr die Darstellung auf mobilen Endgerten setzten wir die in CSS 3 verfgbaren Media-Queries ein: Dabei werden vom Browser in Abhngigkeit vom Medium, der Gre 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-devicepixel-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-devicepixel-ratio: 2)" /> <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-devicepixel-ratio: 1.5) " /> <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: lansdcape) and (-webkit-min-devicepixel-ratio: 1.5)" /> <link rel="stylesheet" href="http://fineindiandining.de/css.php?n=mobile_portrait" type="text/css" media="only screen and (min-width: 280px) and (max-width: 765px) and (orientation: portrait)" /> <link rel="stylesheet" href="http://fineindiandining.de/css.php?n=mobile_landscape" type="text/css" media="only 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 fr die unterschiedliche Ausrichtung des Smartphones auch abweichende Stylesheets notwendig sind: Die Anweisung portrait steht fr ein senkrecht gehaltenes, die Anweisung landscape fr ein waagrecht gehaltenes Gert. Ausschlaggebend ist ferner die Breite des sichtbaren Browserfensters (viewport) in Pixeln. Smartphones der neuesten Generation verwenden eine hhere Bildschirmauflsung, so dass sie im Prinzip die Website ohne Scrollen darstellen knnten. Dies ist jedoch wenig nutzerfreundlich, so dass fr diese Gerte ebenso Stylesheets angelegt werden mssen. 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 Platzgrnden die zum Corporate-Design des Restaurants gehrige Bordre nicht als Hintergrundbild des entsprechenden Div-Containers geladen. Um dem Look-and-Feel einer Smartphone-App mglichst nahe zu kommen, wurde die Startseite als bergeordnete Auswahlseite gestaltet, von der aus groe, nutzerfreundliche Buttons zu den einzelnen Unterseiten fhren. 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 Endgerts aufruft. Da dieser Button im Quellcode vorhanden ist, muss er in der Desktopversion der Website mit der CSSAnweisung display: none versehen werden. Um die Optik zu perfektionieren, wurde jeder Menbutton mit einem passenden grafischen Icon versehen. Dies wird ermglicht, weil jedem Menpunkt eine eigene CSS-ID zugewiesen wurde. Der Link zum Impressum wurde in den Fubereich gesetzt. Dies machte es ntig, die HTML-Struktur dahingehend zu modifizieren, dass der Link zum Impressum an zwei Stellen im Markup erscheint: In der Hauptnavigationsleiste und im Fubereich 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.


Fr die Unterseiten whlten 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 Getrnkekarte eine besondere Herausforderung dar: Bis dato gab es die Speisekarte zum Download als PDF. Auch wenn mobile Gerte ohne Probleme PDF-Dateien ffnen knnen, erschien uns diese Darreichnungsform wenig geeignet fr das Medium. Eine fast vierzigseitige Menkarte durchzublttern oder gar zu scrollen wre jedoch wenig userfreundlich gewesen.

Wir entschieden uns daher fr eine komplette Darstellung des Mens als verschachtelte Liste und setzten einen aus Navigationsleisten bekannten Akkordeon-Effekt ein: So sieht der mobile Surfer nach dem Aufruf des Menpunkts 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 ausfhrliche Beschreibung in Textform, dies ist zum Teil auch bei den Getrnken, 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 Menpunkt 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 zeitgemes Notebook. Auch die Bildschirmauflsung marktblicher Tablets reicht an die von Desktop-PCs ran, bertrifft diese teilweise sogar. Es schien uns daher nicht ntig, eine gesonderte Version fr Tablets zu entwickeln. Erste Tests zeigten jedoch, dass die Darstellung auf einem hochkant gehaltenen Tablet unbefriedigend war. So entwickelten wir zumindest ein Stylesheet fr 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 gehrige Bordre angezeigt. Auch sind auf allen Unterseiten smtliche Menicons 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 Menpunkte 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 zugnglicher fr mobile Gerte und schaffen Zusatznutzen fr mobile Surfer. Man bezeichnet ein Webdesign, welches auf das aufrufende Endgert 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 verknpft 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 Verknpfung 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 lnger dauert, verkrzt 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 Mhe bereiten, die Stylesheets fr kleine Displays aufzubereiten, wollen wir nicht, dass der User mit den Fingern zoomt. Das machen wir ihm hier unmglich:
<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 Endgert gespeichert werden knnen. Hierbei hilft uns eine Manifest-Datei, die gewissermaen eine Sitemap mit statischen HTMLFiles enthlt, 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 Attraktivitt des Restaurants fr den Kunden wird gesteigert. Als besonderen Bonus bekommen alle Gste, welche die Webapp auf dem Startscreen ihres Smartphones verlinken, vom Team des Restaurants ein Freigetrnk oder eine Ermigung auf ihre Bestellung. So ist die Anwendung nicht nur ein neues Gadget, sondern Teil einer integrierten Marketingmanahme.
Benjamin Khn www.goetext.de kuehn@goetext.de