Mobile Websites

Mobile Websites Seminar vom 6. Juni 2012 / Frank Lang

Moderation Stefan Halter

2 © 2012, Goldbach Mobile

#gbs12 wifi: GØldb@cH



/ Ihr Kompetenzzentrum für mobile

Kommunikationslösungen

/ Gegründet 2006 als OnEmotion

/ Rebranding als Goldbach Mobile im

Jahr 2010

/ 18 leidenschaftliche Mitarbeiter

/ Mehr als 30 aktive Kunden, darunter - McDonald’s

- AZ Medien

- Tamedia

- Fiat

- BAT

- Hyundai

- Migros

- Roche

Mobile von A - Z


Mobile

Webseiten

Dedizierte Mobile

Webseiten und

Landingpages für

alle gängigen

Endgeräte (Tablets,

Smartphones, Basis-

Mobiltelefone).

Applikationen

Portale, Tools, Social

Media, Games,

CRM, Augmented

Reality. Plattformen:

iOS, Android,

Windows Phone 7,

Symbian und

Blackberry.

Mobile

Advertising

Kreation von Display

Ads und Platzierung

auf Dritt-Portalen und

Applikationen

inklusive Rich-Media

mit Video-Content.

Messaging

SMS- und MMS-

Promotionen für

Information und

Kundendienst.

Unterstützende

Services

Mobile Device

Management,

Couponing,

QR-Codes, Mobile

E-Mail, CRM,

Backend-

Infrastrukturen,

Hosting

Mobile Strategie-Entwicklung und Beratung


7

Heutige Ziele:

/ Warum eine Mobile Website

/ Der Weg dort hin

© 2012, Goldbach Mobile


9

/ Weltweit - 1.774 Mrd Mobiles

- 487 Mio Smartphones

- 63 Mio Tablets

/ Schweiz - 4.6 Mio Mobiles

- 2.4 Mio Smartphones • 50% iPhone

• 39% Android

- 450’000 Tablets • 80% iPads

© 2012, Goldbach Mobile Quelle: Canalys, Clickz, Gartner, Weissbuch

2011

2012

10

/ Weltweit - 491 Mio Mobiles

- Rückgang um 2% (vs. Q1 2011)

- Smartphones +45%

- 20% Samsung

- 56% Android

© 2012, Goldbach Mobile Quelle: Garnter

Q1


50% Smartphones

10% Tablets

Quelle: eigene Schätzung

12

/ 36% der Gesamtbevölkerung nützen Mobile Web

/ 66% der Jungen

© 2012, Goldbach Mobile Quelle: KommTech

13

Anzahl täglicher Online-Sessions auf Smartphones in %

© 2012, Goldbach Mobile Quelle: Google, ourmobileplanet.com

14 © 2012, Goldbach Mobile Quelle: Net-Metrix, Go4Media

Visits

April

2012

15 © 2012, Goldbach Mobile Quelle: Morgan Stanley 2010

16 © 2012, Goldbach Mobile Quelle: netmarketshare.com

iOS

Android

BlackBerry

Windows Phone

Java ME

Symbian

Bada

Schweizer Mobile Internet Traffic nach OS


2/3 1/3

40%

local

Quelle: Google, WuV

18 © 2012, Goldbach Mobile Quelle: IAB/GfK

38% researchen In-Store

44% suchen mobil während TV

19

Schweizer Smartphone-Suchabfragen als Folge von…


0% 20% 40% 60% 80% 100%

Print-Anzeige

OOH-Anzeige

TVC

In-Store

Täglich Wöchentlich Monatlich Weniger als monatlich Nie

Quelle: ourmobileplanet.com,


71% erwarten Desktop Loading Speed

60% kommen bei negativer Erfahrung nicht zurück

Quelle: Equation Research, Compuware

21 © 2012, Goldbach Mobile Quelle: Google

Nur

10%

22

/ 1/3 aller E-Mails werden

auf dem Mobile gelesen

© 2012, Goldbach Mobile Quelle: Google



Mobile Websites

+ Reichweite über alle Plattformen

+ Verlinkung möglich

+ Keine Installation

+ Herkömmliche Programmiersprachen

+ Tendenziell günstiger

+ Mobile Search & Advertising

+ Änderungen jederzeit möglich

- Grösstenteils nur online verfügbar

- Beschränkter Zugriff auf Funktionen

- Mehr Nutzer-Input notwendig

Mobile Apps

+ Brand-Effekt auf Homescreen

+ Startup mit einem Tap

+ User Experience / Performance

+ Offline nutzbar

+ Monetarisierung via AppStores

+ Nutzung aller Gerätefunktionen

+ Push Notifications

- Bewerbung und Download notwendig

- Releases und OS-Updates

- Umsatzbeteiligung/Review AppStores

- Verschiedene OS-Plattformen

- Kein Deeplinking möglich

25

/ Der Browser wird

für einige Tasks

klar bevorzugt



Kein entweder/oder.

Pflicht und Kür.

27

Mobile User Journey Beispiel


Google-Suche

Stationäre Website

Retour

Konkurrenz

Google-Suche

AdWord für App

AppStore

Installation

Transaktion

Google-Suche

Mobile Website

Transaktion

Opportunitätskosten?

Prioritäten


Präsenz Mobile Website

Reichweite Mobile Advertising & Search

Service Mobile Apps / Messaging

Innovation z.B. Augmented Reality

29 © 2012, Goldbach Mobile Copyright: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/




Das Mobile Web ist anders

/ Kleine Displays

/ Langsame Prozessoren

/ Tiefe Bandbreiten

/ Touch-Bedienung

/ Mühsame Keyboards

/ Limitiertes Multitasking

/ inApp Browser

/ Portrait-/Landscape-Views

/ Situative Nutzung (Gehen, Sitzen…)

/ Tageslicht

/ Kaum Flash-Support

/ Ungeduldige Nutzer



35

1. Use Cases


Herkunft des Besuchers

Ziel des Besuchs - Produktinformation

- Standort

- Transaktion

- Berechnung

- Unterhaltung

Copyright: Coop, Google

36

2. Informationsarchitektur Sitemap migros.ch


37

2. Informationsarchitektur mobile.migros.ch


38

/ Eine Teilmenge der Standard-Website

/ Priorisierung von Inhalten

/ Überschaubare und einfache Navigation

/ Klare Struktur

/ Kurze, prägnante Inhalte

/ Kurze Wege schaffen

/ User Experience nicht komplett brechen

2. Informationsarchitektur


Fazit

IA = Web-Analytics + Search-Analyse + Common Sense

39

3. Funktionen


Interaktivität und Calls-to-Action

40

3. Features


Benutzerfreundliche Formulare

41

3. Features Lokalbasierte Informationen


42

3. Funktionen Lokalbasierte Informationen


43

3. Funktionen Conversion


44

3. Funktionen Mobile Commerce


45

3. Funktionen Navigations-Basics


46

4. Verschiedene Versionen sind waren gefragt


Gruppe Auflösung Modell-Beispiele

12 800x1280px Samsung Galaxy Note

11 720x1280px Samsung Galaxy Nexus, Galaxy S3

10 640x960px iPhone 4 (S)

9 540x960px HTC Sensation

8 480x840px

480x800px

480x640px

Samsung Galaxy S2

Nexus S/Galaxy, HTC Diamond/Desire/HD2/HD7, LG Arena,

Samsung Omnia 2

7 480x320px Blackberry Bold

6 360x640px

360x480px

Nokia 5800, N97

Blackberry Storm

5 320x480px iPhone 2G/3G/3GS, HTC Hero/Magic/Wildfire, Samsung Galaxy Ace

4 240x400px

240x320px

240x300px

LG KC910, Samsung Omnia

Meiste Nokia-Telefone (N95, N96), HTC Touch 2

Samsung Galaxy Mini

3 176x220px

176x208px

Motorola RAZR, Sony-Ericsson K700

Nokia 6600

2 128x160 Sony-Ericsson T630

1 101x80 Sony-Ericcson T68



49

Design Cross-Channel-Integration


50

Design Navigation i.d.R vertikal


51

Design Footer / Meta


52

/ CI/CD der stationären Website sofern möglich übernehmen

/ Wenig Grafiken

/ Mehr Kontrast

/ White Space

/ Vertikale Navigation

/ Reduzierte Footer

/ Touch-Optimierung durch Buttons statt Textlinks

/ Button- und Font-Grösse an Device-Standards anpassen

Design Zusammenfassung



54

/ Statische HTML-Pages - Kein CMS

/ Dediziertes CMS - Setup eines Parallel-CMS zum stationären Web

/ Plugin zu Web-CMS - Mobile-Plugins bei modernen CMS (z.B. Drupal) schon fast Standard

/ Responsive Design - Flexibler Grid, welcher sich der Browser-Auflösung anpasst ohne fixe Pixel-

Dimensionen; basiert stark auf CSS Media-Queries

/ Adaptive Design - Kontrollierte Adaption des Designs nach Device-Kategorie

/ Schnittstelle - Template-Framework greift auf Daten via Webservice zu

/ Parsing - Ablesen und Darstellen von Content einer Referenz-Webpage

Anbindungsvarianten


55

Beispiel Responsive Design Siehe auch www.bostonglobe.com


http://www.bostonglobe.com/

56

Beispiel Adaptive Design Google Search


57

/ HTML5 - Neue Funktionalitäten wie Video, Audio, lokaler Speicher, dynamische

2D/3D-Grafiken

- Noch nicht standardisiert; in Entwicklung

- Funktioniert auf den meisten Smartphones, speziell iOS und Android

- Wird überall leicht anders interpretiert

/ Javascript - Mit Javascript können Inhalte animiert, generiert und nachgeladen werden

- Vorschlagen von Suchbegriffen, Validierung von Formulareingaben,

Animationen, Einblendungen etc. werden ermöglicht

- Wird hauptsächlich client-seitig eingesetzt; Last liegt auf Device

- Wird zusätzlich zu HTML und CSS benutzt

/ CSS3 - Trennung der inhaltlichen Gliederung (HTML oder XML) und deren

Darstellung (CSS für Farben, Layout, Schrifteigenschaften usw.)

- Weniger Aufwand in der Umsetzung von Design

- iOS und Android werden sehr gut abgedeckt

Für Mobile relevante Technologien


58

/ Stylesheet für Mobile Devices - Anpassung der Darstellung nach Bildschirmauflösung

- Wird von älteren Browsern nicht unterstützt

/ Javascript Client-seitig - Hohe Fehlerquote durch Device-Fragmentierung und z.T. fehlende

Javascript-Komptabilität

/ Skript auf Server - Einsatz z.B. eines PHP-Skripts, welches auf dem Server den Browser

erkennt und auf die Mobile Website umleitet

- Regelmässige Updates notwendig

/ Anbindung einer Device-Datenbank wie z.B. WURFL - Einsatz des Industrie-Standards WURFL via API

- Das XML beinhaltet ca. 500 Informationen über Fähigkeiten und Features

aufgeteilt in 30 Gruppen für jedes Endgerät

- Die Datenbank wird regemässig mit neuen Informationen aktualisiert

Möglichkeiten für Device-Detection


59

Linklogik / Social Bookmarking


60

Datenmenge


61

Flash


62

Integration Device-Funktionalitäten


63

Homescreen-Button



Analytics Setup abhängig von techn. Integration

Eventuell 2 Zonen oder Profile notwendig

65

Testing, Analytics, Updates… Testing, Analytics, Updates…


66

Testing, Analytics, Updates… Testing, Analytics, Updates…



Smartphone-Websites gehören nicht auf Tablets > 7’’


Optimierung stationäre Website für Touch-Bedienung…


… oder Umsetzung einer HTML5-WebApp



72

/ Zeitaufwand: Tage bis viele Monate

/ Investition: CHF 5’000 - 100’000.–

Vorgehen


Strategie Briefing

Workshops

Research

Use Cases

definieren

Technische

Abklärungen

Grob-IA

Planung

Konzept IA

Funktions-

beschrieb

Wireframes

Design

IT-Konzept

Detailplanung

Umsetzung Software-

Entwicklung

Beta-Testing

Webservices

Inhalte

einpflegen

Server-Setup

Schulung

Testing

Go-Live

Betrieb Nutzungs-

analysen

Testing neue

Devices

Laufende

Updates




76

Fazit

/ Mobile zukünftig primärer Internetzugang

/ Mobile ist nicht ein Device

/ Feature Phones sind irrelevant

/ App-Hype ist vorbei

/ Zunehmende Fragmentierung

/ Mobile ist nicht das Desktop-Web in klein

/ Teilmenge + Conversion + Design + Traffic

/ Pragmatisches & iteratives Vorgehen

/ Heute loslegen

/ Mobile first


Dieses Dokument und die einzelnen Inhalte sind unterstehen dem Copyright von Goldbach Mobile. Alle Mood-Bilder unter

CC Flickr oder Privat-Eigentum. Copyright der Screenshots von Dritt-Websites bei den betreffenden Webseiten-Betreibern.

Merci

Frank Lang

Managing Director

Telefon +41 44 454 10 80

Mobile +41 78 885 44 75

[email protected]

Goldbach Mobile AG

Eichstrasse 25, 8045 Zürich

www.goldbachmobile.com

twitter.com/GBMobile_ch

Documents

Mobile Websites