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.
7. The Progression
Classic Web Site Kiosk Early Mobile Web
Native Tablet App Native Mobile Apps Mobile Optimized Site
8. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Enterprise Mobility
9. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Enterprise Mobility
10. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Securing loyalty by providing
Enterprise Mobility value added services
11. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition Attract and convert new
customers
Enterprise Mobility
Use mobile as a conversion
funnel for other products and
services
12. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Aligning the brand with
innovation and forward thinking
Enterprise Mobility
13. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
At this point, every airline, even
Enterprise Mobility regional carriers, have
integrated mobile solutions in
their customer experience
14. Whatʼs Driving Their Mobile Strategy?
Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
According to Forrester
Enterprise Mobility Research, 75% of companies
report “increased worker
productivity” from deploying
mobile applications.
15. What Are Your Mobile Options?
Responsive Web
Optimized Sites
Native Apps
16. What Are Your Mobile Options?
Responsive Web
Optimized Sites
Native Apps
Responsive Web defined...
17. Responsive Web
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.
20. Responsive Web
Ideal For
Informational Web Sites
Promotional Sites
Content Consumption Sites
• Newspapers
• Magazines
• Blogs
• Galleries
• Portfolios
Boston Globe
21. If you want to learn more about designing
responsively...
22. What Are Your Mobile Options?
Responsive Web
Optimized Sites
Native Apps
A closer look at Optimized Sites...
23. Optimized Sites aka mobile apps and dot m sites
Optimizing for different sizes and different usage needs
Check Weather Playing Games
Watch Video Checking Email
Local News
Social Networking
National News
Research
Sports Info
Listening to Music
Entertainment
Watching TV
Financial Info
Reference Materials Shopping
Lifestyle Content Reading Books
Magazine Content Lightweight Creation
0 12.5 25 37.5 50 0 12.5 25 37.5 50
Smartphone Usage Tablet Usage
24. 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
26. Optimized Sites
More often there are only two distinct sites
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
27. Optimized Sites
The mobile version is streamlined for core activities
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
28. 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.
29. Optimized Site: Backbase Project Tool
Basecamp userʼs core activities
fall into two categories:
1.Checkin/status
2.Edit/create
Their mobile optimized site
provides a solution for these
needs.
30. Optimized Site: Harvest Time Tracking
Concepts
V1
Harvest also optimizes for:
1.Checkin/status
2.Edit/create
BETA
http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
31. Responsive vs Optimized Sites
Web Sites Web Apps
Search
Informational
Travel
Content Heavy
Retail
• Newspapers SaaS
• Magazines Productivity Tools
• Blogs (light-weight)
• Galleries
Responsive Optimized Sites
32. Mobile Web Doʼs and Dontʼs
Doʼs
Make content most important (reduce navigation)
Focus on performance
Use Image Sprites
Bundle & minify CSS and Javascipt files
Limit or remove dependencies on heavy JS
libraries
Use CSS3 for styling, rounded corners, text
shadows...
33. Mobile Web Doʼs and Dontʼs
Dontʼs
Port a web app 1-for-1
Add back buttons
Use large images and
size down
Go crazy with special
effects/transitions
Try to make it look just
like a Native App
34. What Are Your Mobile Options?
Responsive Web
Optimized Sites
Native Apps
The Native Solution...
35. 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 Apple
Java for Android and BlackBerry
C# or Visual Basic for Windows 7.5
But there are also other options:
Ruby Motion
MonoTouch and MonoDroid
Adobe AIR
Adobe Flex 4.5 Showcase Apps
36. Native Apps
Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
39. Native Doʼs and Dontʼs
Doʼs
Know & understand your target devices
Follow design conventions for those platform
Navigation paradigms
UI controls
Gestures
Prototype and test often
42. Native Doʼs and Dontʼs
Dontʼs
Design 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, Filter
Forms
Invitations, etc..
45. Native Apps vs Optimized Sites
Games Search
Tools requiring: point in time, nativeTravel target
At this apps can
the specific limitations and abilities of each
• Complex Calculationsmuch better than a website
individual device Retail
• Reporting/Charting inside a Productivity Tools
can while running browser.
• Native Functionality (light weight)
http://www.useit.com/alertbox/mobile-sites-apps.html
• Offline Access
Native Apps Optimized Sites
46. Breaking the Rules...
Non Tech Considerations--> Financial
Financial Times, Playboy and Walmart are using sites instead of
apps to avoid sharing revenues with app store owners.
48. These are your options
Responsive Web
Optimized Sites
Native Apps
Questions?
49. 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 Web Optimized Sites Native Apps
HTML5 + a responsive HTML5 + a mobile HTML5 + a framework
front end framework like framework like JQuery like PhoneGap or
Bootstrap Mobile Titanium
50. 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...)
LinkedIn-
NBC-Built with Titanium Custom Wrapper
51. 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.
52. 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.