Mobile sites, responsive web, mobile apps, native, HTML5 or hybrid apps…Which of these solutions and combinations are right for your industry and product? We’ll take a look at examples of each and how companies are leveraging different solutions to meet their customer’s mobile needs. We’ll also explore the pitfalls of designing hybrid apps, and best practices for device neutral design. Finally, we’ll look at a case study from the world’s largest non-profit health organization and the cross platform strategy we are designing.

1. All The Screens:
Cross Platform Design Strategies

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

3. SWEDEN
TEXAS

4. Lufthansa Across Platforms
Classic Web Site Mobile Optimized Site In Flight Entertainment
Native Tablet App Kiosk Native Mobile Apps

5. Netflix Across Platforms
Classic Web Site Hybrid Tablet Apps Hybrid Mobile Apps
TV (Boxee) Game Console (XBox) Game Device (Playstation)

6. ?
What are the options for a cross platform
strategy...

7. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App

8. Responsive Web Site
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.

9. Responsive Web Site
UIWindow
768 x 1024
Cisco London 2012

10. Responsive Web Site
Ideal For
Informational Web Sites
Portfolios
Content Consumption Sites
• Newspapers
• Magazines
• Blogs
Boston Globe

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

12. Optimized Web Sites
Defined Multiple web sites, each optimized for a different form
factor, and different usage needs.
Connect
Smartphone Home
At 80
Tablet Search
Laptop
60
On The Go
Entertain
Manage
40
While Shopping
Inform
20
At Work
Shop
On Public Navigate0
Transport
At Home AM To/From School/Work At School/Work Out and About At Home PM
0
0 10
25 20
50 7530 10040
Mobile PC
Mobile Usage Patterns

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

14. Optimized Web Sites
More often there are only two distinct sites.
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site

15. Optimized Web Sites
The mobile version is streamlined for core activities.
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site

16. Optimized Web Sites
Ideal For
Retail
Search
SaaS products
Other web apps
Basecamp

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

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

19. Native Apps
Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone

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

21. Native Apps
Ideal For
Retail
Financial
Software (productivity tools)
Games
Enterprise Apps
Benefits over Hybrid
Better Performance
Keynote (like PPT for Apple)

22. Hybrid Apps
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 could
access on their own.
NBC-Built with Titanium

23. Hybrid Apps
LinkedIn
http://venturebeat.com/2011/08/16/linkedin-node/

24. Hybrid Apps
Netflix
http://functionsource.com/post/netflix-feature

25. Hybrid Apps
Ideal For
Software (productivity tools)
Enterprise Apps
Video Players
Retail
Benefits over Native
Web analytics
A/B testing
Possibly lower costs
Facebook

26. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App

27. Boston Globeʼs Cross Platform Strategy
Responsive Site Native Apps
And

28. eBayʼs Cross Platform Strategy
Optimized Sites Native Apps
And

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