Halbtages-Seminar vom 6. Juni 2012

1. Mobile Websites
Seminar vom 6. Juni 2012 / Frank Lang
Moderation Stefan Halter

2. #gbs12
wifi: GØldb@cH
© 2012, Goldbach Mobile 2

3. © 2012, Goldbach Mobile 3

4. / 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
© 2012, Goldbach Mobile 4

5. Mobile von A - Z
Mobile Applikationen Mobile Messaging Unterstützende
Webseiten Advertising Services
Dedizierte Mobile Portale, Tools, Social Kreation von Display SMS- und MMS- Mobile Device
Webseiten und Media, Games, Ads und Platzierung Promotionen für Management,
Landingpages für CRM, Augmented auf Dritt-Portalen und Information und Couponing,
alle gängigen Reality. Plattformen: Applikationen Kundendienst. QR-Codes, Mobile
Endgeräte (Tablets, iOS, Android, inklusive Rich-Media E-Mail, CRM,
Smartphones, Basis- Windows Phone 7, mit Video-Content. Backend-
Mobiltelefone). Symbian und Infrastrukturen,
Blackberry. Hosting
Mobile Strategie-Entwicklung und Beratung
© 2012, Goldbach Mobile 5

6. © 2012, Goldbach Mobile 6

7. Heutige Ziele:
/ Warum eine Mobile Website
/ Der Weg dort hin
© 2012, Goldbach Mobile 7

8. © 2012, Goldbach Mobile 8

9. 2011
/ Weltweit / Schweiz
- 1.774 Mrd Mobiles - 4.6 Mio Mobiles
- 487 Mio Smartphones - 2.4 Mio Smartphones
- 63 Mio Tablets • 50% iPhone
• 39% Android
- 450’000 Tablets
• 80% iPads
Quelle: Canalys, Clickz, Gartner, Weissbuch © 2012, Goldbach Mobile 9

10. Q1 2012
/ Weltweit
- 491 Mio Mobiles
- Rückgang um 2% (vs. Q1 2011)
- Smartphones +45%
- 20% Samsung
- 56% Android
Quelle: Garnter © 2012, Goldbach Mobile 10

11. 50% Smartphones
10% Tablets
Quelle: eigene Schätzung © 2012, Goldbach Mobile 11

12. / 36% der Gesamtbevölkerung nützen Mobile Web
/ 66% der Jungen
Quelle: KommTech © 2012, Goldbach Mobile 12

13. Anzahl täglicher Online-Sessions auf Smartphones in %
Quelle: Google, ourmobileplanet.com © 2012, Goldbach Mobile 13

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

15. Quelle: Morgan Stanley 2010 © 2012, Goldbach Mobile 15

16. Schweizer Mobile Internet Traffic nach OS
iOS
Android
BlackBerry
Windows Phone
Java ME
Symbian
Bada
Quelle: netmarketshare.com © 2012, Goldbach Mobile 16

17. 2/3 1/3
40%
local
Quelle: Google, WuV © 2012, Goldbach Mobile 17

18. 38% researchen In-Store
44% suchen mobil während TV
Quelle: IAB/GfK © 2012, Goldbach Mobile 18

19. Schweizer Smartphone-Suchabfragen als Folge von…
In-Store
TVC
OOH-Anzeige
Print-Anzeige
0% 20% 40% 60% 80% 100%
Täglich Wöchentlich Monatlich Weniger als monatlich Nie
Quelle: ourmobileplanet.com, © 2012, Goldbach Mobile 19

20. 71% erwarten Desktop Loading Speed
60% kommen bei negativer Erfahrung nicht zurück
Quelle: Equation Research, Compuware © 2012, Goldbach Mobile 20

21. Nur
10%
Quelle: Google © 2012, Goldbach Mobile 21

22. / 1/3 aller E-Mails werden
auf dem Mobile gelesen
Quelle: Google © 2012, Goldbach Mobile 22

23. © 2012, Goldbach Mobile 23

24. Mobile Apps Mobile Websites
+ Brand-Effekt auf Homescreen + Reichweite über alle Plattformen
+ Startup mit einem Tap + Verlinkung möglich
+ User Experience / Performance + Keine Installation
+ Offline nutzbar + Herkömmliche Programmiersprachen
+ Monetarisierung via AppStores + Tendenziell günstiger
+ Nutzung aller Gerätefunktionen + Mobile Search & Advertising
+ Push Notifications + Änderungen jederzeit möglich
- Bewerbung und Download notwendig - Grösstenteils nur online verfügbar
- Releases und OS-Updates - Beschränkter Zugriff auf Funktionen
- Umsatzbeteiligung/Review AppStores - Mehr Nutzer-Input notwendig
- Verschiedene OS-Plattformen
- Kein Deeplinking möglich
© 2012, Goldbach Mobile 24

25. / Der Browser wird
für einige Tasks
klar bevorzugt
© 2012, Goldbach Mobile 25

26. Kein entweder/oder.
Pflicht und Kür.
© 2012, Goldbach Mobile 26

27. Mobile User Journey Beispiel
Opportunitätskosten?
Google-Suche Google-Suche Google-Suche
Stationäre Website AdWord für App Mobile Website
Retour AppStore Transaktion
Konkurrenz Installation
Transaktion
© 2012, Goldbach Mobile 27

28. Prioritäten
Innovation
z.B. Augmented Reality
Service
Mobile Apps / Messaging
Reichweite
Mobile Advertising & Search
Präsenz
Mobile Website
© 2012, Goldbach Mobile 28

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

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

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

32. 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
© 2012, Goldbach Mobile 32

33. © 2012, Goldbach Mobile 33

34. © 2012, Goldbach Mobile 34

35. 1. Use Cases
Herkunft des Besuchers
Ziel des Besuchs
- Produktinformation
- Standort
- Transaktion
- Berechnung
- Unterhaltung
Copyright: Coop, Google © 2012, Goldbach Mobile 35

36. 2. Informationsarchitektur
Sitemap migros.ch
© 2012, Goldbach Mobile 36

37. 2. Informationsarchitektur
mobile.migros.ch
© 2012, Goldbach Mobile 37

38. 2. Informationsarchitektur
Fazit
/ 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
IA = Web-Analytics + Search-Analyse + Common Sense
© 2012, Goldbach Mobile 38

39. 3. Funktionen
Interaktivität und Calls-to-Action
© 2012, Goldbach Mobile 39

40. 3. Features
Benutzerfreundliche Formulare
© 2012, Goldbach Mobile 40

41. 3. Features
Lokalbasierte Informationen
© 2012, Goldbach Mobile 41

42. 3. Funktionen
Lokalbasierte Informationen
© 2012, Goldbach Mobile 42

43. 3. Funktionen
Conversion
© 2012, Goldbach Mobile 43

44. 3. Funktionen
Mobile Commerce
© 2012, Goldbach Mobile 44

45. 3. Funktionen
Navigations-Basics
© 2012, Goldbach Mobile 45

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 Samsung Galaxy S2
480x800px Nexus S/Galaxy, HTC Diamond/Desire/HD2/HD7, LG Arena,
480x640px Samsung Omnia 2
7 480x320px Blackberry Bold
6 360x640px Nokia 5800, N97
360x480px Blackberry Storm
5 320x480px iPhone 2G/3G/3GS, HTC Hero/Magic/Wildfire, Samsung Galaxy Ace
4 240x400px LG KC910, Samsung Omnia
240x320px Meiste Nokia-Telefone (N95, N96), HTC Touch 2
240x300px Samsung Galaxy Mini
3 176x220px Motorola RAZR, Sony-Ericsson K700
176x208px Nokia 6600
2 128x160 Sony-Ericsson T630
1 101x80 Sony-Ericcson T68
© 2012, Goldbach Mobile 46

47. © 2012, Goldbach Mobile 47

48. © 2012, Goldbach Mobile 48

49. Design
Cross-Channel-Integration
© 2012, Goldbach Mobile 49

50. Design
Navigation i.d.R vertikal
© 2012, Goldbach Mobile 50

51. Design
Footer / Meta
© 2012, Goldbach Mobile 51

52. Design
Zusammenfassung
/ 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
© 2012, Goldbach Mobile 52

53. © 2012, Goldbach Mobile 53

54. Anbindungsvarianten
/ 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
© 2012, Goldbach Mobile 54

55. Beispiel Responsive Design
Siehe auch www.bostonglobe.com
© 2012, Goldbach Mobile 55

56. Beispiel Adaptive Design
Google Search
© 2012, Goldbach Mobile 56

57. Für Mobile relevante Technologien
/ 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
© 2012, Goldbach Mobile 57

58. Möglichkeiten für Device-Detection
/ 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
© 2012, Goldbach Mobile 58

59. Linklogik / Social Bookmarking
© 2012, Goldbach Mobile 59

60. Datenmenge
© 2012, Goldbach Mobile 60

61. Flash
© 2012, Goldbach Mobile 61

62. Integration Device-Funktionalitäten
© 2012, Goldbach Mobile 62

63. Homescreen-Button
© 2012, Goldbach Mobile 63

64. Analytics
Setup abhängig von techn. Integration
Eventuell 2 Zonen oder Profile notwendig
© 2012, Goldbach Mobile 64

65. Testing, Analytics, Updates… Testing, Analytics, Updates…
© 2012, Goldbach Mobile 65

66. Testing, Analytics, Updates… Testing, Analytics, Updates…
© 2012, Goldbach Mobile 66

67. © 2012, Goldbach Mobile 67

68. Smartphone-Websites gehören nicht auf Tablets > 7’’
© 2012, Goldbach Mobile 68

69. Optimierung stationäre Website für Touch-Bedienung…
© 2012, Goldbach Mobile 69

70. … oder Umsetzung einer HTML5-WebApp
© 2012, Goldbach Mobile 70

71. © 2012, Goldbach Mobile 71

72. Vorgehen
Strategie Konzept Umsetzung Betrieb
 Briefing  IA  Software-  Nutzungs-
 Workshops  Funktions- Entwicklung analysen
 Research beschrieb  Beta-Testing  Testing neue
 Use Cases  Wireframes  Webservices Devices
definieren  Design  Inhalte  Laufende
 Technische  IT-Konzept einpflegen Updates
Abklärungen  Detailplanung  Server-Setup
 Grob-IA  Schulung
 Planung  Testing
 Go-Live
/ Zeitaufwand: Tage bis viele Monate
/ Investition: CHF 5’000 - 100’000.–
© 2012, Goldbach Mobile 72

73. © 2012, Goldbach Mobile 73

74. © 2012, Goldbach Mobile 74

75. © 2012, Goldbach Mobile 75

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 76

77. Frank Lang
Managing Director
Telefon +41 44 454 10 80
Mobile +41 78 885 44 75
frank.lang@goldbachmobile.com
Goldbach Mobile AG
Merci
Eichstrasse 25, 8045 Zürich
www.goldbachmobile.com
twitter.com/GBMobile_ch
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.