your mobile strategy can't be html5
DESCRIPTION
Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.TRANSCRIPT
![Page 1: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/1.jpg)
Mobile Design. Strategic Solutions.Theresa Neil
![Page 2: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/2.jpg)
I work as a Consultant, helping companies with their UX Strategy.
Theresa Neil
![Page 3: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/3.jpg)
TEXAS
GERMANY
![Page 4: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/4.jpg)
TEXAS
GERMANY
![Page 5: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/5.jpg)
TEXAS
GERMANY
![Page 6: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/6.jpg)
TEXAS
GERMANY
![Page 7: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/7.jpg)
The Progression
Classic Web Site Kiosk
Native Tablet App Mobile Optimized SiteNative Mobile Apps
Early Mobile Web
![Page 8: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/8.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise Mobility
![Page 9: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/9.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise Mobility
Mobile Usage
![Page 10: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/10.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise Mobility
Customer Retention
Securing loyalty by providing value added services
![Page 11: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/11.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise Mobility
Customer Acquisition
Attract and convert new customers
Use mobile as a conversion funnel for other products and
services
![Page 12: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/12.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise Mobility
Brand Alignment
Aligning the brand with innovation and forward thinking
![Page 13: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/13.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise MobilityCompetition
At this point, every airline, even regional carriers, have
integrated mobile solutions in their customer experience
![Page 14: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/14.jpg)
Whatʼs Driving Their Mobile Strategy?
Customer AcquisitionCustomer Retention
Brand Alignment
Competition
Mobile Usage
Enterprise MobilityEnterprise Mobility According to Forrester Research, 75% of companies report “increased worker productivity” from deploying mobile applications.
![Page 15: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/15.jpg)
What Are Your Mobile Options?
Responsive WebOptimized Sites
Native Apps
![Page 16: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/16.jpg)
What Are Your Mobile Options?
Responsive WebOptimized Sites
Native Apps
Responsive Web defined...
![Page 17: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/17.jpg)
Defined Web site responds to the environment using css media queries. Typically achieved by using fluid grid layouts, like Responsive Grid System, Bootstrap, from Twitter, or Foundation by Zurb.
Responsive Web
![Page 18: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/18.jpg)
Responsive Web
UIWindow 768 x 1024
Cisco London 2012
![Page 19: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/19.jpg)
Responsive Web
![Page 20: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/20.jpg)
Responsive Web
Ideal For Informational Web SitesPromotional SitesContent Consumption Sites
• Newspapers• Magazines• Blogs• Galleries• Portfolios
Boston Globe
![Page 21: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/21.jpg)
If you want to learn more about designing responsively...
![Page 22: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/22.jpg)
What Are Your Mobile Options?
Responsive WebOptimized Sites
Native Apps
A closer look at Optimized Sites...
![Page 23: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/23.jpg)
Optimized Sites aka mobile apps and dot m sites
Optimizing for different sizes and different usage needs
Check Weather
Watch Video
Local News
National News
Sports Info
Entertainment
Financial Info
Reference Materials
Lifestyle Content
Magazine Content
0 12.5 25 37.5 50
Smartphone Usage
Playing Games
Checking Email
Social Networking
Research
Listening to Music
Watching TV
Shopping
Reading Books
Lightweight Creation
0 12.5 25 37.5 50
Tablet Usage
![Page 24: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/24.jpg)
Optimized Sites aka mobile apps and dot m sites
Mobile usage throughout the day:
http://www.inmobi.com/inmobiblog/files/2012/02/Global_MediaConsumption_Info_Feb22.png
![Page 25: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/25.jpg)
Optimized Sites
Classic Web Site Tablet Web Site Mobile Web Site
Some companies have three distinct sites...
![Page 26: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/26.jpg)
Optimized Sites
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
More often there are only two distinct sites
![Page 27: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/27.jpg)
Optimized Sites
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
The mobile version is streamlined for core activities
![Page 28: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/28.jpg)
The Four Core Activities of Mobile Users
Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get some- thing done now that can’t wait.
![Page 29: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/29.jpg)
Optimized Site: Backbase Project Tool
Basecamp userʼs core activities fall into two categories:1.Checkin/status2.Edit/create
Their mobile optimized site provides a solution for these needs.
![Page 30: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/30.jpg)
Optimized Site: Harvest Time Tracking
http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
BETA
V1
Harvest also optimizes for:1.Checkin/status2.Edit/create
Concepts
![Page 31: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/31.jpg)
Responsive vs Optimized Sites
InformationalContent Heavy
• Newspapers• Magazines• Blogs• Galleries
Web Sites Web AppsSearchTravelRetailSaaSProductivity Tools(light-weight)
Responsive Optimized Sites
![Page 32: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/32.jpg)
Mobile Web Doʼs and Dontʼs
Doʼs
Use Image SpritesBundle & minify CSS and Javascipt filesLimit or remove dependencies on heavy JS librariesUse CSS3 for styling, rounded corners, text shadows...
Make content most important (reduce navigation)Focus on performance
![Page 33: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/33.jpg)
Mobile Web Doʼs and Dontʼs
Dontʼs
Add back buttonsUse large images and size downGo crazy with special effects/transitions
Port a web app 1-for-1
Try to make it look just like a Native App
![Page 34: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/34.jpg)
What Are Your Mobile Options?
Responsive WebOptimized Sites
Native Apps
The Native Solution...
![Page 35: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/35.jpg)
Native Apps
Defined An application that has been developed for use on a particular platform or device.
Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5
But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR
Adobe Flex 4.5 Showcase Apps
![Page 36: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/36.jpg)
Native Apps
Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
![Page 37: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/37.jpg)
Native Apps
Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
![Page 38: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/38.jpg)
Ideal For GamesFinancial ToolsProductivity Tools (heavy-weight)Enterprise Apps
Native Apps
Keynote Presentation ToolBloomberg Anywhere
![Page 39: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/39.jpg)
Native Doʼs and Dontʼs
Doʼs
Navigation paradigmsUI controls
Gestures
Prototype and test often
Follow design conventions for those platformKnow & understand your target devices
![Page 40: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/40.jpg)
Validate the prototypes on the target devices with actual users
![Page 41: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/41.jpg)
Prototyping Essentials
![Page 42: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/42.jpg)
Native Doʼs and Dontʼs
DontʼsDesign for the iPhone and reuse the design for Android or Windows (or vise versa)
Recreate the wheel. There are standard mobile patterns you can leverage for:
Search, Sort, FilterForms
Invitations, etc..
![Page 43: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/43.jpg)
Mobile Patterns
![Page 44: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/44.jpg)
GamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access
SearchTravelRetailProductivity Tools (light weight)
Native Apps vs Optimized Sites
Native Apps Optimized Sites
![Page 45: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/45.jpg)
GamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access
SearchTravelRetailProductivity Tools (light weight)
Native Apps vs Optimized Sites
Native Apps Optimized Sites
At this point in time, native apps can target the specific limitations and abilities of each individual device much better than a website can while running inside a browser.http://www.useit.com/alertbox/mobile-sites-apps.html
![Page 46: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/46.jpg)
Breaking the Rules...
Non Tech Considerations--> FinancialFinancial Times, Playboy and Walmart are using sites instead of apps to avoid sharing revenues with app store owners.
![Page 47: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/47.jpg)
Breaking the Rules...
Walmartʼs Vudu Optimized for tablets, avoids sharing the revenue from movie sales
![Page 48: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/48.jpg)
These are your options
Responsive WebOptimized Sites
Native Apps
Questions?
![Page 49: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/49.jpg)
What About HTML5 ?
HTML5 is simply a technology that you can use to implement any of these solutions. There are many options, here are few:
Responsive WebHTML5 + a responsive front end framework like Bootstrap
Optimized SitesHTML5 + a mobile framework like JQuery Mobile
Native AppsHTML5 + a framework like PhoneGap or Titanium
![Page 50: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/50.jpg)
What About Hybrids?
Defined A ʻnative wrappedʼ web application. Products like Titanium and PhoneGap create a native wrapper that let the HTML and JS access OS dependent operations they couldnʼt access on their own (contacts, calendar, camera, geo-location...)
NBC-Built with TitaniumLinkedIn- Custom Wrapper
![Page 51: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/51.jpg)
Are Hybrids as good as Native Apps?
This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent.
![Page 52: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/52.jpg)
Are Hybrids as good as Native Apps?
This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent.
But Facebook has rebuilt their iOS apps with Objective C, primarily to improve the performance.
![Page 53: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/53.jpg)
Hybrid or (truly) Native?
Hybrid Fail
![Page 54: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/54.jpg)
Hybrid or (truly) Native?
Hybrid Fail Hybrid Success
![Page 55: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/55.jpg)
Common Hybrid Pitfalls
Code once and reuse doesnʼt mean design once and reuse
iPhone Android AndroidiPhone
x
![Page 56: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/56.jpg)
Good Hybrids in the Market
Follow the design conventions of each platform
Netflix
http://functionsource.com/post/netflix-feature
![Page 57: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/57.jpg)
What is Mobile First?
A different way of thinking
Agreement on what matters most
![Page 58: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/58.jpg)
Mobile First is...
Knowing your users
What they do and why they do it
![Page 59: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/59.jpg)
Know Your Users
2010 2012
The Guardianʼs Data
![Page 60: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/60.jpg)
Donʼt rely on data alone; observe your users in the wild
![Page 61: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/61.jpg)
Mobile First Has Many Faces
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
DESIGN
DEVELOPMENT
![Page 62: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/62.jpg)
Mobile First Has Many Faces
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
DESIGN
DEVELOPMENT
Strategy
![Page 63: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/63.jpg)
Mobile First Has Many Faces
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
DESIGN
DEVELOPMENT
Strategy
Design
![Page 64: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/64.jpg)
Mobile First Has Many Faces
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
DESIGN
DEVELOPMENT
Strategy
Design
Development
![Page 65: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/65.jpg)
Mobile First In Action
Austin Start-Up Silvercar starts with Mobile First
![Page 66: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/66.jpg)
If you want to learn more about designing for...
![Page 67: Your Mobile Strategy Can't Be HTML5](https://reader034.vdocuments.site/reader034/viewer/2022051613/54c775954a7959cc418b45dc/html5/thumbnails/67.jpg)
Thank YouFollow me on Twitter @theresaneil
Read my book and blog: “Mobile Design Pattern Gallery” OʼReilly 2012