Your SlideShare is downloading. ×

Mobile web or native app

400
views

Published on

With thousands of applications and millions of downloads, the App Store has been a resounding success that has prompted other phones manufacturers to develop their own App Stores. Developers and …

With thousands of applications and millions of downloads, the App Store has been a resounding success that has prompted other phones manufacturers to develop their own App Stores. Developers and businesses alike took notice of the early success and sales of iPhone apps and now the rush is on to build native mobile applications. Now businesses say they need an mobile application before they know what the business case for the application will be. But are native applications really the future of mobile? What happened to the promise of the Mobile Web? And what about hybrid applications? When does it make sense to build each type of application? What are the limitations of each? And where is each technology headed? Learn how to make and informative decision between these two approaches.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
400
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
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 web or native app?Mike TakahashiAssociate Director, DigitalUCLA Marketing & Special EventsTwitter: @takadesigns
  • 2. It depends
  • 3. What’s the difference?What is your product or service?Who is your audience?What are your resources and budget?
  • 4. Native AppsSpecifically designed to run on a device’s operating system. •  Device feature integration •  Tailor user experience •  Performance •  Monetization •  Push capabilities •  Multiple platform development •  Multiple skills needed
  • 5. Mobile WebUses HTML5, JavaScript, CSS and runs in a devices browser •  No download required •  Device agnostic •  Same base code can be used to support any device •  Lower cost •  Reach a higher audience
  • 6. Wait, there’s one more…
  • 7. HybridHTML5 + JavaScript with a wrapper that gives it nativecapabilities. •  Access native features •  Content is loaded via browser •  Better performance •  Multiple platform development •  Multiple skills needed
  • 8. PhoneGapAn open source framework that allows you to access nativeAPIs for iPhone, Android, BlackBerry, Windows Phone 7 + moreCapture photo: •  Accelerometerfunction capturePhoto() { •  Camera navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); •  Compass} •  Contacts... •  Geolocation<button onclick="capturePhoto();">Capture Photo</button> •  Notifications •  And much more…
  • 9. Appcelerator Recompiles HTML + JavaScript into native code for each device •  Completely native app HTML •  Faster development cycle + Native App •  Leverage existing skillsJavaScript (HTML, CSS, JavaScript) •  Cross platform efficiency •  Known to have optimization issues
  • 10. What is your product or service?Who is your target audience? •  Functionality and feature set? •  Device capability needs? •  Online or offline? •  Audience reach? •  What content will you be delivering?
  • 11. Resources and budget”When we update the Facebook product we have to updateabout seven different versions… Its becoming a realengineering challenge for us, as well as other technologycompanies.The end goal is that well be able to develop one version ofFacebook for mobile devices, that runs on all different kindsof mobile phones. Thats really where our focus is now.” -Bret Taylor, Facebook CTO
  • 12. UCLA mobileBased on the UCLA Mobile Web Framework.•  Single set of base code•  Progressive enhancement•  Works with any language: PHP, .NET, Java, Python•  Device agnostic•  Implemented across University of California system: Berkeley, San Diego, San Francisco
  • 13. UCLA mobile<head> … <link rel="stylesheet" href=http://ucla.edu/mobile/assets/css.php” type="text/css" media="screen" /> <script type="application/javascript" src="http://m.ucla.edu/assets/js.php"></script> …</head><body class="blue-on-white"> <h1 id="header"> <a href="http://m.ucla.edu/demo"> <img src="http:/ucla.edu/mobile/assets/img/ucla-logo.png" alt="UCLA" width="75" height="35" /></a> <img id="logo" src="images/m.happenings-logo.jpg" alt="Happenings" width="200" height="35" /> </h1> … <div class="menu-full menu-detailed menu-padded"> <ol> <h1 class="light menu-first">Thursday, June 17, 2010</h1> <li><a href="/all/30days/event/27871">Cancer Center Research Seminar <br /><span class="smallprint">12:00 pm, Health Sciences (CHS) - Room 73-105</span></a></li> … </ol> </div> …
  • 14. What’s next?
  • 15. Mobile FirstPrioritize mobile context first when creating user experienceand focus on core content and functionality Walgreens website •  5 links on the homepage account for 59% of traffic: Photos, Search, Prescriptions, Pharmacy link & Store locator •  These 5 links only take up 3.8% of the homepage.
  • 16. Responsive Design 1.0Serves same HTML content and assets for every device andthen scales via CSS using media queries.
  • 17. Responsive Design 2.0Dynamically loads HTML content and assets based on screensize and features. •  Targets device features and not actual device •  Responsive images are loaded dynamically and not scaled.
  • 18. Questions?ContactTwitter: @takadesignsEmail: mike@takadesigns.comhttp://takadesigns.com