Das Seminar von Goldbach Mobile am 6. Juni 2012 konzentrierte sich auf die Entwicklung und den Nutzen von mobilen Websites und Applikationen, einschließlich der aktuellen Trends und Statistiken im mobilen Internet. Es wurden verschiedene Strategien zur Erstellung benutzerfreundlicher mobile Websites und die Wichtigkeit von Responsivität und Anpassungsfähigkeit an unterschiedliche Geräte hervorgehoben. Wesentliche Punkte waren die Definition von Zielgruppen, Nutzererwartungen sowie technologische Anforderungen zur Optimierung der Nutzererfahrung.

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.