3. “We look at the charts internally and it’s
happening faster than all of our predictions”
Eric Schmidt (der mit der Krone),
(Ex-) Google CEO über das Wachstum im
Mobile-Bereich, März 2011
http://mashable.com/2011/02/28/schmidt-mobile-growth/
3 Daniel Haller, 2011
4. Mobile- vs. Desktop-Internet: Benutzerzahl
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
4 Daniel Haller, 2011
5. Mobile- vs. Desktop-Internet: Social Media
http://www.flowtown.com/blog/how-are-mobile-phones-changing-social-media
5 Daniel Haller, 2011
6. Integration von Mobile in die Unternehmenskommunikation
http://www.mobile-zeitgeist.com/2010/08/16/umfrage-80-prozent-der-unternehmen-bevorzugen-mobile-webseiten/
6 Daniel Haller, 2011
7. Integration von Mobile in die Unternehmenskommunikation
http://www.mobile-zeitgeist.com/2010/08/16/umfrage-80-prozent-der-unternehmen-bevorzugen-mobile-webseiten/
7 Daniel Haller, 2011
8. WebApp, HybridApp, Native App:
Quo Vadis?
8 Daniel Haller, 2011
http://www.flickr.com/photos/scissorhands33/
21. Mobile Websites/WebApps
!"#$%%&'$"#$()*+,&%-+.#&*&$/#$)012%&$3$/1"')4+")!"56%#$"
7$#,&281)+.#&*&$/# *+,&%$)9$,2&#$2)4+%%61#+*6#&285 3:/ ;$<$2 ="<'$/># 1"<)%&$3$/#
2&$ &")<$/ '$3+/<$/#$" ?6/@1.-A./685$ 612 ! $'6% +,)BC?D()EBC?D +<$/ 9?DF
• Herausforderungen: Gerätevielfalt und
damit verbunden die Content Adaption
und das Testing
• Spielfeld spezialisierter Anbieter wie
YOC oder netbiscuits
21 Daniel Haller, 2011
22. Mobile Websites/WebApps
!"#$%%&'$"#$()*+,&%-+.#&*&$/#$)012%&$3$/1"')4+")!"56%#$"
7$#,&281)+.#&*&$/# *+,&%$)9$,2&#$2)4+%%61#+*6#&285 3:/ ;$<$2 ="<'$/># 1"<)%&$3$/#
2&$ &")<$/ '$3+/<$/#$" ?6/@1.-A./685$ 612 ! $'6% +,)BC?D()EBC?D +<$/ 9?DF
• Vergleichsweise einfach aufgebaut
• Kein Zugriff auf Gerätefunktionen
• Heterogene Browserwelt, HTML5
kann nicht vorausgesetzt werden
22 Daniel Haller, 2011
24. Mobile Websites/WebApps
• Hochmoderne, auf WebKit-
basierende Browser (Safari und
Chrome)
• Unterstützung von HTML5 und
CSS3. Leistungsfähige JS-Engine.
24 Daniel Haller, 2011
25. Mobile Websites/WebApps
• Möglichkeiten prinzipiell auf Browser
limitiert, aber dank HTML5 geht da
einiges, insb.:
• GeoLocation
• Video- und Audio-Support
• LocalStorage / Offline-Support
• Canvas-Elemente
25 Daniel Haller, 2011
26. Mobile Websites/WebApps
• Lesezeichen können in iOS als Icon auf dem Springboard
gespeichert werden
• Browserbedienelemente werden ausgeblendet
• „App-Feeling“ light, fühlt sich nur noch begrenzt nach
„(mobiler) Website“ an
26 Daniel Haller, 2011
27. Mobile Websites/WebApps
Für die Umsetzung von WebApps auf WebKit-
Browsern entstehen gerade viele Frameworks:
mobile02.dev.bluemars.de
mobile01.dev.bluemars.de
27 Daniel Haller, 2011
28. Mobile Websites/WebApps
Häufiges Ausgangs-Szenario (Zielgruppenunabhängig):
Kunde will bestehende Website „mobilisieren“.
Mit welcher Strategie holt man den Content ins Frontend?
28 Daniel Haller, 2011
29. Mobile Websites/WebApps
2 mögliche Ansätze:
Dedizierte Mobile-Site Responsive Layout
- Zwei getrennte Sites f. Mobil und
Desktop - Eine Website für alle
- Spezifischer Content (z.B. in Form - Gleicher oder Reduzierter Content
eines Seitenbaums im CMS) - Aufbereitung durch Frontend-
- (überwiegend) serverseitige Technologie (Media Queries,
Adaption Stylesheets, etc.)
- oft eigene URLs (m.abc.de)
vgl. auch http://blog.namics.com/2011/03/mobile-web---vo.html
29 Daniel Haller, 2011
32. Mobile Websites/WebApps
„Mischform“ („WP Touch“-Theme für Wordpress)
http://www.stonebreaker.eu
32 Daniel Haller, 2011
33. Mobile Websites/WebApps
• Laufen im Browser, dadurch hohe Reichweite
• Technolgiestack: HTML, CSS, JS
• Zielgruppe ausschlaggebend für
Umsetzungsstrategie
• Kein Zugriff auf Gerätefunktionen
• Kommerzielle Anbieter wie netbiscuits oder
Frameworks wie jQuery mobile verfügbar
33 Daniel Haller, 2011
37. Hybride Apps
• Distribution über Stores,
„feels just native“
• Technologiestack:
Webtechnologien und
Scriptsprachen
(HTML, CSS, JS, Ruby, PHP, Phyton, ...)
• Eine Codebase, verschiedene
Plattformen http://rhomobile.com/
• Entwicklung mit Hilfe von
Frameworks
(z.B. Rhomobile, Titanium oder PhoneGap)
37 Daniel Haller, 2011
38. Hybride Apps
Mittels API Zugriff auf Hardware teilw. möglich (am Beispiel von PhoneGap)
http://www.phonegap.com/features
38 Daniel Haller, 2011
39. Hybride Apps
Prinzipielle Funktionsweise (am Beispiel von Titanium):
Eine Codebase, verschiedene Plattformen
http://www.appcelerator.com/products/titanium-cross-platform-application-development/
39 Daniel Haller, 2011
40. Ma rkt
Kle ine
rsic ht“
“ Übe
http://en.wikipedia.org/wiki/Multiple_phone_web-based_application_framework#Current_Frameworks
40 Daniel Haller, 2011
41. Hybride Apps
Ein paar bekanntere Beispiele aus der Frameworkwelt:
41 Daniel Haller, 2011
42. Idee, Konzept, ... Aufwertung ("Enhancement") z.B. durch:
- Hardware-Spezifische Funktionalitäten
- App-Feeling
(Beinahe) Einheitlicher Technologiestack aus HTML, CSS, JS
Hy
Se br
(z. Co nc F idf
B. nte ha ram ra
mi nt m
t n Ad
, jQ ew z.B ew
etb ap ue ork . P ork
isc tio
ry s ho s,
mo wi ne wie
uit n bil e Ga
s) e p
Web AppStore
„Mobile Progressive Enhancement“ mit Hybridframeworks
42 Daniel Haller, 2011
46. Hybride Apps
Wunderlist (Titanium)
http://itunes.apple.com/de/app/wunderlist/id406644151?mt=8
46 Daniel Haller, 2011
47. Hybride Apps
Wikipedia (Offiziell, Rhomobile)
http://itunes.apple.com/us/app/wikipedia-mobile/id324715238?mt=8
47 Daniel Haller, 2011
48. Hybride Apps
• Nutzen Webtechnologien und Frameworks
• Sind nicht auf Browser limitiert, sondern können auf
viele Gerätefunktionen (z.B. Kamera) zugreifen
• Werden über Stores vertrieben
• Nah dran an Nativer Applikation
• Endergebnis kann für verschiedene Zielplattformen
kompiliert werden.
• Aber Vorsicht: Theorie != Praxis?
48 Daniel Haller, 2011
50. Native Apps
• Sind immer gerätespezifisch, Codebase ist nicht
kompartibel zu anderen Systemen
• Voller Zugriff auf Hardware (Kamera, GPS,
Sensoren, Grafik, etc.)
• Keine Einschränkungen, „Alles geht“
• Hohe Performance
• Können nur über die Stores vertrieben werden
50 Daniel Haller, 2011
57. Native Apps
Verfügbare Apps in den Stores
• Apple führt das Feld (noch) an
• Android holt stark auf (03/11
noch ohne Honeycomb-Apps!)
• Seit März höhere Nachfrage
nach Android- als nach iOS-
Entwicklern
• RIM öffnet sich für Android:
Apps fürs Playbook angekündigt http://www.businessinsider.com/
(http://www.heise.de/newsticker/meldung/Android-Apps-fuer-
BlackBerry-Tablet-Playbook-1215863.html)
57 Daniel Haller, 2011
58. Native Apps
„App“ != iPhone-App
„App“ = 7 verschiedene Plattformen!
58 Daniel Haller, 2011
60. WebApp, HybridApp, Native App?
K.O.-Kriterien für WebApps:
• Offline-Nutzungsszenarien
• Geplante Monetarisierung (möglich, aber vglw. schwierig)
• Zugriff auf Gerätefunktionen notwendig
• App-Store Distribution erwünscht
• (Zu) Komplexe UIs
Was bleibt? Hybrid- und native Apps!
60 Daniel Haller, 2011
61. WebApp, HybridApp, Native App?
K.O.-Kriterien für Hybride Apps:
• Zugriff auf nicht unterstützte Gerätefunktionen notwendig
• Performance/UX als KPI, hohe Ansprüche an Hardware und
Prozessorleistung (z.B. Spiele)
Was bleibt? Native Apps!
61 Daniel Haller, 2011
62. 9$!"*(!(*,! .$(/)! $'2! !(()!+(*,/)! 7::#! 8$)! B/3/*"#!/*'/!/*./'/!I"!((<-)?!<=)!7::#G!#-!2!##!
;/)<=.$'.4! >?! @*'2#%&!((/'! 2*/#/#! A)<-"./#! 2*/!7::"J!'2#%&!<(!?*(("/)3/*"/!/0/'#-!!
WebApp, HybridApp, Native App?
'!&?!B/2-%&!!$%&!2*/!C$(8$'.!,-'!@/0#/*(/'!
!$<!2/?!D!'2E!2/$("*%&!8$4!A'(#%&/*2/'2!3!)!
$?<!'.)/*%&!3*/!+-?:"/K!*#(4!!
Heike Scholz, BVDW Mobile Kompass 2010/2011, „Mobile Apps vs. Mobile Web“, S. 37, Hervorhebungen von mir
!
! L!0/""/M!D/*+/!1%&-"8G!A)#(,/)N<</'("*%&$'.!H;5@!O-0*"/!P-?:!##!QRSRTQRSSG!UO-0*"/!7::#!,#4!O-0*"/!
! @/0G!1/*(/!VW!<<4! 62 ! Daniel Haller, 2011
63. WebApp, HybridApp, Native App?
Was wollen eigentlich die User?
Apps für...:
- Social Media
- Music
- Games
Browser (mobile Sites) für...:
- Reviews
- Blogs
- Sport
- News
- Video
http://www.emarketer.com/Article.aspx?R=1008010
63 Daniel Haller, 2011
64. WebApp, HybridApp, Native App?
Und was müssen Kunden bedenken?
Unterschiedliche Umsetzungsvarianten bedingen
unterschiedliche Aufwände - Zielgerichtetes
Arbeiten ist notwendig!
http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/
64 Daniel Haller, 2011
66. Leseempfehlungen
• t3n-Magazin Nr. 22, „Plattformübergreifende Apps mit Web-
Technologien entwickeln: Eine für alle“
http://t3n.de/magazin/plattformubergreifende-apps-web-technologien-entwickeln-226225/
• Namics Weblog: Mobile Web - Vom Potenzial zum Daily
Business: Zukunftsfähige Umsetzungs-Varianten
http://blog.namics.com/2011/03/mobile-web---vo.html
• netbiscuits, Mobile Web Metrics Report 2011
http://www.netbiscuits.com/mobile-metrics-report-2011
• Jason Grigsby, „Native vs Web vs Hybrid - Mobile Development
Choices“
http://www.slideshare.net/grigs/native-vs-web-vs-hybrid-mobile-development-choices
• mobile ZeitgeistSPECIAL, 1/11
„Apps vs. Mobile Browser - Ist das Wettrennen entschieden?“
http://www.mobile-zeitgeist.com/2011/01/26/neu-mobile-zeitgeist-special-apps-vs-mobile-browser/
66 Daniel Haller, 2011