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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Websites

824

Published on

Halbtages-Seminar vom 6. Juni 2012

Halbtages-Seminar vom 6. Juni 2012

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
824
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
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.

×