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.

1. Mobile Design. Strategic Solutions.
Theresa Neil

2. I work as a Consultant,
helping companies with
their UX Strategy.
Theresa Neil

3. GERMANY
TEXAS

4. GERMANY
TEXAS

5. GERMANY
TEXAS

6. GERMANY
TEXAS

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.

18. Responsive Web
UIWindow
768 x 1024
Cisco London 2012

19. Responsive Web

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

25. Optimized Sites
Some companies have three distinct sites...
Classic Web Site Tablet Web Site Mobile Web Site

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

37. Native Apps
Xamarian MWC 2012 App C#, MonoTouch, MonoDroid

38. Native Apps
Ideal For
Games
Financial Tools
Productivity Tools (heavy-weight)
Enterprise Apps
Bloomberg Anywhere
Keynote Presentation Tool

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

40. Validate the prototypes on the target devices with actual users

41. Prototyping Essentials

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..

43. Mobile Patterns

44. Native Apps vs Optimized Sites
Games Search
Tools requiring: Travel
• Complex Calculations Retail
• Reporting/Charting Productivity Tools
• Native Functionality (light weight)
• Offline Access
Native Apps Optimized Sites

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.

47. Breaking the Rules...
Walmartʼs Vudu Optimized for tablets,
avoids sharing the revenue from movie sales

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.

53. Hybrid or (truly) Native?
Hybrid Fail

54. Hybrid or (truly) Native?
Hybrid Fail Hybrid Success

55. Common Hybrid Pitfalls
Code once and reuse doesnʼt mean design
once and reuse
x
iPhone Android iPhone Android

56. Good Hybrids in the Market
Follow the design conventions of each platform
Netflix
http://functionsource.com/post/netflix-feature

57. What is Mobile First?
A different way of thinking
Agreement on what matters most

58. Mobile First is...
Knowing your users
What they do and why they do it

59. Know Your Users
The Guardianʼs Data
2010 2012

60. Donʼt rely on data alone; observe your users in the wild

61. Mobile First Has Many Faces
DEVELOPMENT
DESIGN
http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/

62. Mobile First Has Many Faces
Strategy
DEVELOPMENT
DESIGN
http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/

63. Mobile First Has Many Faces
Strategy
Design DEVELOPMENT
DESIGN
http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/

64. Mobile First Has Many Faces
Strategy
Design DEVELOPMENT
Development DESIGN
http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/

65. Mobile First In Action
Austin Start-Up Silvercar starts with Mobile First

66. If you want to learn more about designing for...

67. Thank You
Follow me on Twitter @theresaneil
Read my book and blog:
“Mobile Design Pattern Gallery” OʼReilly 2012