Mobile Websites
-
Upload
goldbach-group-ag -
Category
Documents
-
view
820 -
download
0
description
Transcript of Mobile Websites
Mobile Websites Seminar vom 6. Juni 2012 / Frank Lang
Moderation Stefan Halter
2 © 2012, Goldbach Mobile
#gbs12 wifi: GØldb@cH
3 © 2012, Goldbach Mobile
4 © 2012, Goldbach Mobile
/ 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
5 © 2012, Goldbach Mobile
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
6 © 2012, Goldbach Mobile
7
Heutige Ziele:
/ Warum eine Mobile Website
/ Der Weg dort hin
© 2012, Goldbach Mobile
8 © 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
11 © 2012, Goldbach Mobile
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
17 © 2012, Goldbach Mobile
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…
© 2012, Goldbach Mobile
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,
20 © 2012, Goldbach Mobile
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
23 © 2012, Goldbach Mobile
24 © 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
26 © 2012, Goldbach Mobile
Kein entweder/oder.
Pflicht und Kür.
27
Mobile User Journey Beispiel
© 2012, Goldbach Mobile
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
28 © 2012, Goldbach Mobile
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/
30 © 2012, Goldbach Mobile Copyright: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
31 © 2012, Goldbach Mobile Copyright: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
32 © 2012, Goldbach Mobile
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
33 © 2012, Goldbach Mobile
34 © 2012, Goldbach Mobile
35
1. Use Cases
© 2012, Goldbach Mobile
Herkunft des Besuchers
Ziel des Besuchs - Produktinformation
- Standort
- Transaktion
- Berechnung
- Unterhaltung
Copyright: Coop, Google
36
2. Informationsarchitektur Sitemap migros.ch
© 2012, Goldbach Mobile
37
2. Informationsarchitektur mobile.migros.ch
© 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
Fazit
IA = Web-Analytics + Search-Analyse + Common Sense
39
3. Funktionen
© 2012, Goldbach Mobile
Interaktivität und Calls-to-Action
40
3. Features
© 2012, Goldbach Mobile
Benutzerfreundliche Formulare
41
3. Features Lokalbasierte Informationen
© 2012, Goldbach Mobile
42
3. Funktionen Lokalbasierte Informationen
© 2012, Goldbach Mobile
43
3. Funktionen Conversion
© 2012, Goldbach Mobile
44
3. Funktionen Mobile Commerce
© 2012, Goldbach Mobile
45
3. Funktionen Navigations-Basics
© 2012, Goldbach Mobile
46
4. Verschiedene Versionen sind waren gefragt
© 2012, Goldbach Mobile
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
47 © 2012, Goldbach Mobile
48 © 2012, Goldbach Mobile
49
Design Cross-Channel-Integration
© 2012, Goldbach Mobile
50
Design Navigation i.d.R vertikal
© 2012, Goldbach Mobile
51
Design Footer / Meta
© 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
53 © 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
55
Beispiel Responsive Design Siehe auch www.bostonglobe.com
© 2012, Goldbach Mobile
56
Beispiel Adaptive Design Google Search
© 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
59
Linklogik / Social Bookmarking
© 2012, Goldbach Mobile
60
Datenmenge
© 2012, Goldbach Mobile
61
Flash
© 2012, Goldbach Mobile
62
Integration Device-Funktionalitäten
© 2012, Goldbach Mobile
63
Homescreen-Button
© 2012, Goldbach Mobile
64 © 2012, Goldbach Mobile
Analytics Setup abhängig von techn. Integration
Eventuell 2 Zonen oder Profile notwendig
65
Testing, Analytics, Updates… Testing, Analytics, Updates…
© 2012, Goldbach Mobile
66
Testing, Analytics, Updates… Testing, Analytics, Updates…
© 2012, Goldbach Mobile
67 © 2012, Goldbach Mobile
Smartphone-Websites gehören nicht auf Tablets > 7’’
68 © 2012, Goldbach Mobile
Optimierung stationäre Website für Touch-Bedienung…
69 © 2012, Goldbach Mobile
… oder Umsetzung einer HTML5-WebApp
70 © 2012, Goldbach Mobile
71 © 2012, Goldbach Mobile
72
/ Zeitaufwand: Tage bis viele Monate
/ Investition: CHF 5’000 - 100’000.–
Vorgehen
© 2012, Goldbach Mobile
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
73 © 2012, Goldbach Mobile
74 © 2012, Goldbach Mobile
75 © 2012, Goldbach Mobile
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
© 2012, Goldbach Mobile
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
Goldbach Mobile AG
Eichstrasse 25, 8045 Zürich
www.goldbachmobile.com
twitter.com/GBMobile_ch