Your SlideShare is downloading. ×
  • Like
Mobile Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Halbtages-Seminar vom 6. Juni 2012

Halbtages-Seminar vom 6. Juni 2012

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
774
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile WebsitesSeminar vom 6. Juni 2012 / Frank Lang Moderation Stefan Halter
  • 2. #gbs12wifi: 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 - ZMobile Applikationen Mobile Messaging UnterstützendeWebseiten Advertising ServicesDedizierte Mobile Portale, Tools, Social Kreation von Display SMS- und MMS- Mobile DeviceWebseiten 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, MobileEndgerä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% TabletsQuelle: 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. VisitsApril2012 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-Store44% suchen mobil während TV Quelle: IAB/GfK © 2012, Goldbach Mobile 18
  • 19. Schweizer Smartphone-Suchabfragen als Folge von… In-Store TVCOOH-AnzeigePrint-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 Speed60% 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 BeispielOpportunitä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. InformationsarchitekturSitemap migros.ch © 2012, Goldbach Mobile 36
  • 37. 2. Informationsarchitekturmobile.migros.ch © 2012, Goldbach Mobile 37
  • 38. 2. InformationsarchitekturFazit/ 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. FunktionenInteraktivität und Calls-to-Action © 2012, Goldbach Mobile 39
  • 40. 3. FeaturesBenutzerfreundliche Formulare © 2012, Goldbach Mobile 40
  • 41. 3. FeaturesLokalbasierte Informationen © 2012, Goldbach Mobile 41
  • 42. 3. FunktionenLokalbasierte Informationen © 2012, Goldbach Mobile 42
  • 43. 3. FunktionenConversion © 2012, Goldbach Mobile 43
  • 44. 3. FunktionenMobile Commerce © 2012, Goldbach Mobile 44
  • 45. 3. FunktionenNavigations-Basics © 2012, Goldbach Mobile 45
  • 46. 4. Verschiedene Versionen sind waren gefragtGruppe Auflösung Modell-Beispiele12 800x1280px Samsung Galaxy Note11 720x1280px Samsung Galaxy Nexus, Galaxy S310 640x960px iPhone 4 (S)9 540x960px HTC Sensation8 480x840px Samsung Galaxy S2 480x800px Nexus S/Galaxy, HTC Diamond/Desire/HD2/HD7, LG Arena, 480x640px Samsung Omnia 27 480x320px Blackberry Bold6 360x640px Nokia 5800, N97 360x480px Blackberry Storm5 320x480px iPhone 2G/3G/3GS, HTC Hero/Magic/Wildfire, Samsung Galaxy Ace4 240x400px LG KC910, Samsung Omnia 240x320px Meiste Nokia-Telefone (N95, N96), HTC Touch 2 240x300px Samsung Galaxy Mini3 176x220px Motorola RAZR, Sony-Ericsson K700 176x208px Nokia 66002 128x160 Sony-Ericsson T6301 101x80 Sony-Ericcson T68 © 2012, Goldbach Mobile 46
  • 47. © 2012, Goldbach Mobile 47
  • 48. © 2012, Goldbach Mobile 48
  • 49. DesignCross-Channel-Integration © 2012, Goldbach Mobile 49
  • 50. DesignNavigation i.d.R vertikal © 2012, Goldbach Mobile 50
  • 51. DesignFooter / Meta © 2012, Goldbach Mobile 51
  • 52. DesignZusammenfassung/ 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 DesignSiehe auch www.bostonglobe.com © 2012, Goldbach Mobile 55
  • 56. Beispiel Adaptive DesignGoogle 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. AnalyticsSetup abhängig von techn. IntegrationEventuell 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. VorgehenStrategie 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 LangManaging DirectorTelefon +41 44 454 10 80Mobile +41 78 885 44 75frank.lang@goldbachmobile.comGoldbach Mobile AG MerciEichstrasse 25, 8045 Zürichwww.goldbachmobile.comtwitter.com/GBMobile_chDieses Dokument und die einzelnen Inhalte sind unterstehen dem Copyright von Goldbach Mobile. Alle Mood-Bilder unterCC Flickr oder Privat-Eigentum. Copyright der Screenshots von Dritt-Websites bei den betreffenden Webseiten-Betreibern.