Mobiles Web als Marketingtool

  • Published on
    02-Dec-2014

  • View
    545

  • Download
    1

DESCRIPTION

Die Kunden im mobilen Web abzuholen und zu erreichen wird fr Unternehmen immer wichtiger. Wie das gehen kann, zeige ich in diesem Whitepaper.

Transcript

  • 1. Mobiles Web: Mehr als ein Nice to HaveDer PC-Markt bricht ein, der Absatz von Tablets und Smartphones hingegen boomt. Da ist es nurlogisch, dass auch der Anteil von mobilen Zugriffen auf Websites stetig steigt. Im Oktober 2012wurde hier die 10-Prozent-Marke erstmals berschritten. 1 Betreiber einer Website kommen nichtumhin, ihre Prsenz auch den Usern von Pads, Pods und Phones zugnglich zu machen oder denNutzern solcher Gerte entsprechende Angebote zur Verfgung zu stellen. Im folgenden Artikelmchte ich zuerst die Mglichkeiten aufzeigen und dann anhand eines realen Beispiels eineUmsetzung aus der Praxis prsentieren.Mobile BetriebssystemeAuf dem Markt der mobilen Endgerte konkurrieren heute mehrere Betriebssysteme:Marktfhrer ist aktuell das von Google mitentwickelte Betriebssystem Android es basiert aufeinem Linuxkernel - mit einem Anteil von fast drei Vierteln 2, mit stark steigender Tendenz. DieseSoftware ist standardmig z. B. auf Smartphones von Samsung, HTC und Sony Ericssoninstalliert. Trotz rcklufiger Verkaufszahlen hat das von Apple entwickelte iOS immer noch einesehr hohe Marktdurchdringung. Nur noch eine Randerscheinung stellt das auf Blackberriesinstallierte eigene Betriebssystem Research in Motion da, die mobile Version des auf PCspopulren Windows schafft die 5-Prozent-Hrde nicht.Alle mobilen Betriebssysteme machen aus dem tragbaren Telefon einen vollwertig einsetzbarenmobilen Arbeitsplatz: Neben einer E-Mail- und Organizerfunktion bieten sie selbstverstndlichInternetbrowser und eine voll funktionsfhige Office-Software mit Textverarbeitung,Bildbearbeitung etc. Der Nutzer kann die Funktion seines Smartphones beinahe nach Beliebenergnzen: Jedes mobile Betriebssystem kann um zahlreiche Zusatzfunktionen erweitert werden:Dies geschieht durch die Installation von Apps (< engl. application) auf dem Endgert. Diese sindauf speziellen Downloadportalen (Clouds) verfgbar: Das bekannteste ist der AppStore von Applemit derzeit fast einer Viertelmillion 3 Apps. hnlich gro ist das Angebot fr Android-Gerte aufder Plattform Google Play. 4 Viele dieser Apps sind kostenfrei, andere mssen vom Nutzer bezahltwerden, in der Regel erfolgt die Bezahlung ber die Handyrechnung. Da die im Apple Appstoreoder auf Google Play verfgbaren Anwendungen fr das jeweilige Betriebssystem geschriebenwurden, bezeichnet man sie auch als native Apps: Sie knnen auf die eingebaute Hardware desEndgerts zugreifen, etwa auf die Kamera oder das Accelerometer, mit dem die Neigung desGerts gemessen wird. Eine App fr Apples iOS wird sich auf einem Android-Gert im Regelfallnicht installieren lassen.Apps als Marketing- und CRM-InstrumentGroe Konzerne haben die Popularitt von Apps lngst fr sich entdeckt und bieten Kunden undNutzern eigene Apps, mit denen die Unternehmen ihre Produkte und Dienstleistungenvertreiben, aber auch mit den Kunden interagieren: So kann man mit der App der Lufthansanicht nur Flge buchen, sondern auch einchecken, die Bordkarte darstellen und feststellen, obder gebuchte Flug pnktlich ist. Auch zur Kundenbindung lsst sich diese App nutzen: ErflogeneBonusmeilen kann der Pasagier ebenfalls mithilfe der App am Smartphone administrieren. 51 http://www.heise.de/newsticker/meldung/Mobiles-Websurfen-legt-zu-1742074.html2 http://www.maclife.de/panorama/netzwelt/aktuelle-smartphone-marktanteile-ios-verliert-android-gewinnt3 http ://de.wikipedia.org/wiki/App_Store_%28iOS%294 http://de.wikipedia.org/wiki/Google_Play5 http://www.lufthansa.com/online/portal/lh/de/info_and_services/flightinfo?nodeid=2099895&l=de
  • 2. Fr ein groes und finanzkrftiges Unternehmen gehrt das Bereitstellen einer App fr diewichtigsten Betriebssysteme heute schon beinahe zum guten Ton.Das Erstellen einer nativen App ist mit einem gewissen Aufwand verbunden: Diese muss in einerSprache erstellt werden, in ObjectiveC fr IOS bzw. in Java fr andere Betriebssysteme. 6 Nebendem relativ hohen Entwicklungsaufwand stellt die grte Hrde die mgliche Ablehnung derApp durch den Betreiber der Downloadplattform dar. 7 Einmal dort erfolgreich platziert, ist dieApp fr das Unternehmen dann jedoch ein effektives Marketingtool, das den Medienmixhervorragend bereichern kann.Die Situation in KMUKleine und mittelstndische Unternehmen scheuen oft den hohen Aufwand fr die Erstellungeiner nativen App, nicht zuletzt, weil das Risiko einer Ablehnung sehr hoch ist (s.o.). Um dennochden Besitzern von Smartphones einen Nutzen zu bieten, gibt es Alternativen, die mit geringeremEinsatz ebenfalls zu einem sinnvollen Ergebnis fhren.Die eigene Website auf dem SmartphoneZuerst die gute Nachricht: Eine zeitgeme Website, die auf die beiden 90er-Jahre-TechnologienFrames 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 Displayerscheinen als am PC mit DSL-Anschluss. Auch wenn die Displays der Handys heute schon sehrgro sind, so ist es fr den User mhsam, lngere Texte zu lesen: Es kann erforderlich sein, dassdie Zoomfunktion des mobilen Gerts verwendet werden muss, mglicherweise mssen Bereicheder Website horizontal oder vertikal gescrollt werden. Wenn Navigationsmens sehr kleindargestellt werden, besteht darber hinaus das Risiko, dass beim Antippen eines Menpunktsnicht der gewnschte erwischt wird. Alles in allem kann sich gerade das mobile Surfen aufklassischen Websites mit mehreren Spalten und einer hohen Contentdichte auf den Unterseitenrecht mhsam gestalten, gerade fr weniger erfahrene User. Mchte man als Websitebetreiberdie mobilen Nutzer nicht vergraulen, sollte man zumindest ber eine mobile Version der Websitenachdenken.Mobile Surfer surfen andersWer eine Website mobil aufsucht, verfolgt mist andere Ziele als ein Nutzer am Desktop-PC oderNotebook: 8 Oft mchte man schnell und gezielt eine bestimme Information finden oder einebestimmte interaktive Handlung vornehmen. Wer eine Website wie die der Deutschen Bahn vonunterwegs aus aufruft, mchte sich mit hoher Wahrscheinlichkeit nicht ber dieUrlaubsangebote informieren, sondern eben wissen, ob der erwartete Zug pnktlich ist odernicht. Eventuell mchte der mobile Nutzer eine Fahrkarte buchen oder schnell eine Auskunftabrufen. Die mobile Website m.bahn.de trgt einem solchen Surfverhalten Rechnung: Auf Bilderwurde komplett verzichtet, es findet sich auf der Startseite eine im Corporate-Design desUnternehmens gehaltene Navigation mit ausreichend groen Schaltflchen. Wem diese6 http://www.heise.de/ct/artikel/Die-eigene-App-1037372.html7 http://www.bokowsky.net/de/knowledge-base/mobile-internet/artikel_appstore.php8 http://www.kernpunkt.de/.../030811-mobiles-internet-momentaufnahme.pdf
  • 3. reduzierte Ausgabe nicht gengt, der kann im Fubereich der Website die normale Versionwww.bahn.de aufrufen.Praxisbeispiel: mobil surfen - indisch essenUnsere Aufgabe im November 2012 bestand darin, den Kunden eines beliebten indischenSpezialittenrestaurants in Gttingen auch ein mobiles Surferlebnis zu bieten. Ziel war, zuzeigen, dass das Restaurant auf der Hhe der Zeit ist und natrlich auch, dem User einenMehrwert zu bieten. Nicht zuletzt sollten Anreize geschaffen werden, die Zahl derTischbuchungen zu steigern. Da es sich nicht um ein Grounternehmen handelt, sollte derAufwand in einem berschaubaren Rahmen bleiben. Der Kunde, der Betreiber des Restaurants wnschte sich ferner eine mit Tablet-PCs abrufbare MenkarteAusgangssituation die vorhandene Website und das Corporate-Design:Das Corporate-Design des Gttinger India-Haus haben mein Team und ich schon im Jahr 2011entwickelt und umgesetzt. Passend zur Branche ist das Design eher aufwndig und wenigschlicht gehalten. Kernstck ist neben dem Logo eine dekorativ gehaltene Bordre, die alleElemente umrahmt. Als Hintergrundbild kommen einzelne Elemente aus dem Gastraum desRestaurants zum Einsatz, im Regelfall ein Relief mit einer Elefantenfigur im Stile eines indischenTempels. 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 dasPublikum eher jnger ist, so dass der Zugriff mit einer schnellen DSL-Verbindung die Regel seindrfte. Auf Flash wird bewusst verzichtet, ebenso auf Animationen und Hintergrundmusik. DieWebsite ist aufrufbar unter: http://fineindiandining.de.Umgesetzt ist die zweisprachige Website (deutsch und englisch) mit dem Open-Source-CMSTextpattern 9. Sie verwendet HTML 5 als Standard und ist dahingehend strict, dassFormatierungen fast ausschlielich inexternen Stylesheets erfolgen. Um derWebsite ein zeitgemes Look-and-Feel zu verleihen kommt das JQuery-Framework mit einigenErweiterungen zum Einsatz: Auf derStartseite findet sich eineBildergalerie mit Lightbox-Effekten,fr Tischreservierungen steht einHTML-Formular bereit. Bei diesemkommt JQuery zur Anwendung, umdie Vollstndigkeit der Angaben zuvalidieren, ebenso steht beimEingabefeld fr den Besuchstag einDatepicker aus dem JQuery-UI-Framework bereit, um die Auswahldes Datums zu erleichtern und um dieEingabe eines zurckliegendenDatums zu unterbinden. EineUnterseite 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
  • 4. Fineindiandining.de goes mobile.Nach dem Briefing mit dem Auftraggeber entschieden wir uns, die bestehende Website zu einerWebapp zu erweitern: Eine solche hat den Vorteil, dass sie in HTML 5, CSS und JavaScriptgeschrieben ist und nicht das zum Teil intransparente Procedere der Aufnahme in die Clouds dergroen Anbieter, allen voran Apple, durchlaufen muss. Der Nachteil, dass diese Variante einerApp zunchst im Browser des Mobiltelefons aufgerufen werden muss, wurde bewussthingenommen.Fr die Erweiterung der bestehenden Website zu einer Webapp sprach auch, dass es bei einemBackend 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 Darstellungauf mobilen Endgerten setzten wir die in CSS 3 verfgbaren Media-Queries ein: Dabei werdenvom Browser in Abhngigkeit vom Medium, der Gre oder Ausrichtung des Browserfensters -unterschiedliche Stylesheets geladen. 10 Im HTML-Quelltext sieht dies so aus:Es wird deutlich, dass fr die unterschiedliche Ausrichtung des Smartphones auch abweichendeStylesheets notwendig sind: Die Anweisung portrait steht fr ein senkrecht gehaltenes, dieAnweisung landscape fr ein waagrecht gehaltenes Gert. Ausschlaggebend ist ferner die Breitedes sichtbaren Browserfensters (viewport) in Pixeln. Smartphones der neuesten Generationverwenden eine hhere Bildschirmauflsung, so dass sie im Prinzip die Website ohne Scrollendarstellen knnten. Dies ist jedoch wenig nutzerfreundlich, so dass fr diese Gerte ebensoStylesheets angelegt werden mssen.Mithilfe der neu erstellten mobilen Stylesheets gelang es uns, komplette Bereiche der Websitemittels der Anweisung display: none nicht darstellen zu lassen. So verzichteten wir auf dieAusgabe der Bildergalerie auf der Startseite komplett, ebenso wird aus Platzgrnden die zumCorporate-Design des Restaurants gehrige Bordre nicht als Hintergrundbild desentsprechenden Div-Containers geladen. Um dem Look-and-Feel einer Smartphone-Appmglichst nahe zu kommen, wurde die Startseite als bergeordnete Auswahlseite gestaltet, vonder aus groe, nutzerfreundliche Buttons zu den einzelnen Unterseiten fhren. Die Auswahl dererreichbaren Unterseiten wurde reduziert: Der Online-Erwerb von Geschenkgutscheinen ist nichtaufrufbar, ebenso die in eine Lightbox ladende Verlinkung zum Bewertungsportal Qype. Da einSmartphone immer auch als Telefon eingesetzt werden kann, wurde zudem ein Button integriert,10 http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
  • 5. welcher mit Hilfe des Attributs href=tel die Telefonfunktion des Endgerts aufruft. Da dieserButton 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 jederMenbutton mit einem passenden grafischen Icon versehen. Dies wird ermglicht, weil jedemMenpunkt eine eigene CSS-ID zugewiesenwurde.Der Link zum Impressum wurde in denFubereich gesetzt. Dies machte es ntig,die HTML-Struktur dahingehend zumodifizieren, dass der Link zum Impressuman zwei Stellen im Markup erscheint: In derHauptnavigationsleiste und im Fubereichder Seite. Wieder wurde mit der Anweisungdisplay: none erzielt, dass der Nutzer denLink nur einmal sieht. Um einenWiedererkennungswert zu schaffen, wurdedas Logo des Unternehmens prominnentoben in der Mitte platziertAller Start ist gut, Content ist King.Fr die Unterseiten whlten wir ein anderesScreendesign: Hier sollte nicht dieNavigation im Mittelpunkt stehen, sondernder Inhalt. Daher reduzierten wir die Navigationsleiste auf den Home-Button und brachten dasso minimierte Men am oberen Rand des Screens unter. Bei der Gestaltung der Inhalte stellte dieDarstellung der Speisen- und Getrnkekarte eine besondere Herausforderung dar: Bis dato gab esdie Speisekarte zum Download als PDF. Auch wenn mobile Gerte ohne Probleme PDF-Dateienffnen knnen, erschien uns diese Darreichnungsform wenig geeignet fr das Medium. Eine fastvierzigseitige Menkarte durchzublttern oder gar zu scrollen wre jedoch wenig userfreundlichgewesen.
  • 6. Wir entschieden uns daher fr eine komplette Darstellung des Mens als verschachtelte Listeund setzten einen aus Navigationsleisten bekannten Akkordeon-Effekt ein: So sieht der mobileSurfer nach dem Aufruf des Menpunkts Essen zuerst die Kategorien der Speisen. Aktiviert ereine von diesen, ffnen sich die einzelnen Gerichte mit einem vertikalen Slide-Effekt. Damit nichtgenug: 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 virtuelleSpeisekarte 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 mitSchlagschatten und einem Slide-Down-Effekt und bleiben solange sichtbar, bis der User denFinger wieder entfernt oder auf ein anderes Gericht bewegt. Bei der Anfahrtskizze unter demMenpunkt Anfahrt - wurde der Kartendienst Google Maps um ein interessantes Featureerweitert: Die in Smartphones eingebaute GPS-Einheit ermittelt den Standort des Nutzers undzeigt dann den Weg zum Restaurant auf, grafisch in einer Karte und in Textform alsBeschreibung. Auch hier wurden teilweise die CSS-Styles angepasst, um eine harmonischeEinheit 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 diegleiche Leistung wie ein zeitgemes Notebook. Auch die Bildschirmauflsung marktblicherTablets reicht an die von Desktop-PCs ran, bertrifft diese teilweise sogar. Es schien uns dahernicht ntig, eine gesonderte Version fr Tablets zu entwickeln. Erste Tests zeigten jedoch, dassdie Darstellung auf einem hochkant gehaltenen Tablet unbefriedigend war. So entwickelten wirzumindest ein Stylesheet fr diese Situation:Bei dieser Version der Website wird die zum CDgehrige Bordre angezeigt. Auch sind auf allenUnterseiten smtliche Menicons sichtbar. DieSpeisekarte ist ebenfalls so dargestellt wie aufdem Smartphone. Die Bildergalerie auf derStartseite ist sichtbar. Auch das Logo wird aufallen Unterseiten dargestellt. Da ein Tabletnicht mit der Maus, sondern in der Regel mitden Fingern bedient wird, haben wir dieMenpunkte als Icons dargestellt, so wie bei derSmartphoneversion. Die Bestellfunktion derGeschenkgutscheine ist hier erreichbar.Prominent platziert sind Anschrift undffnungszeiten des Restaurants.Von der mobilen Website zur WebappAlle bis hier beschriebenen Schritte machen dieWebsite zugnglicher fr mobile Gerte undschaffen Zusatznutzen fr mobile Surfer. Manbezeichnet ein Webdesign, welches auf dasaufrufende Endgert mit einer angepassten Darstellung antwortet auch als responsives Design.
  • 7. Wir wollen nun noch einen Schritt weitergehen: Einige wenige Eingriffe in die Metatags desHTML-Markups und zwei kleine Grafikdateien bringen uns nun ber die Grenze von der mobilenWebsite zur Webapp:Zuerst weisen wir den auf dem iOS installierten Browser Safari an, dass die Website auch als Appauf den Hauptscreen des iPhones verknpft werden kann. Der User kann die Website danndirekt von dort aus aufrufen:Dabei wird die sogenannte Status-Bar durchsichtig, so dass der User nicht bemerkt, dass ereigentlich mit dem mobilen Browser im Web surft:Auf dem Hauptscreen des Smartphones kann eine PNG-Datei als Verknpfung abgelegt werden.Dieses Metatag bezeichnet den absoluten Pfad zu dieser Bilddatei:Wenn das Laden der Seite einmal lnger dauert, verkrzt ein ansehnlicher Splashscreen dieWartezeit. Auch hier muss der absolute Pfad definiert werden:Wenn wir uns als Entwickler die Mhe bereiten, die Stylesheets fr kleine Displaysaufzubereiten, wollen wir nicht, dass der User mit den Fingern zoomt. Das machen wir ihm hierunmglich: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 HTML-Files enthlt, die im Speicher des Smartphones abgelegt werden kann. Auf diese Manifestdateiverweisen wir bereits im ffnenden html-Tag:Fazit:Mit berschaubarem Aufwand wurde aus einer Website eine Webapp. Die inhaltliche Pflegebleibt einfach, die Attraktivitt des Restaurants fr den Kunden wird gesteigert. Als besonderenBonus bekommen alle Gste, welche die Webapp auf dem Startscreen ihres Smartphonesverlinken, vom Team des Restaurants ein Freigetrnk oder eine Ermigung auf ihre Bestellung.So ist die Anwendung nicht nur ein neues Gadget, sondern Teil einer integriertenMarketingmanahme. Benjamin Khn www.goetext.de kuehn@goetext.de

Recommended

View more >