All The Screens:Cross Platform Design Strategies
I work as a Consultant,               helping companies with               their UX Strategy.Theresa Neil
SWEDENTEXAS
Lufthansa Across PlatformsClassic Web Site    Mobile Optimized Site   In Flight EntertainmentNative Tablet App   Kiosk    ...
Netflix Across PlatformsClassic Web Site   Hybrid Tablet Apps    Hybrid Mobile AppsTV (Boxee)         Game Console (XBox)  ...
?What are the options for a cross platformstrategy...
Responsive Site       Native App         Web      And /Or    InstalledOptimized Sites       Hybrid App
Responsive Web SiteDefined Web site responds to the environment using css mediaqueries. Typically achieved by using fluid gr...
Responsive Web Site                       UIWindow                       768 x 1024   Cisco London 2012
Responsive Web SiteIdeal ForInformational Web SitesPortfoliosContent Consumption Sites  • Newspapers  • Magazines  • Blogs...
If you want to learn more about designing for...
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs.       ...
Optimized Web SitesSome companies have three distinct sites...                                              Mobile Web Sit...
Optimized Web SitesMore often there are only two distinct sites.Amazonʼs Classic Web Site & Tablet Site   Mobile Web Site
Optimized Web SitesThe mobile version is streamlined for core activities. jetBlueʼs Classic Web Site & Tablet Site   Mobil...
Optimized Web SitesIdeal ForRetailSearchSaaS productsOther web apps                      Basecamp
If you want to learn more about designing for...
Native AppsDefined An application that has been developed for use on aparticular platform or device.Typically native apps a...
Native AppsEvernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
Native Apps Xamarian MWC 2012 App   C#, MonoTouch, MonoDroid
Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesEnterprise AppsBenefits over HybridBetter Performance ...
Hybrid AppsDefined A ʻnative wrappedʼ web application. Products likeTitanium and PhoneGap create a native wrapper that let ...
Hybrid AppsLinkedInhttp://venturebeat.com/2011/08/16/linkedin-node/
Hybrid AppsNetflixhttp://functionsource.com/post/netflix-feature
Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailBenefits over NativeWeb analyticsA/B tes...
Responsive Site       Native App         Web      And /Or    InstalledOptimized Sites       Hybrid App
Boston Globeʼs Cross Platform StrategyResponsive Site                Native Apps                   And
eBayʼs Cross Platform StrategyOptimized Sites                  Native Apps                   And
Thank YouFollow me on Twitter @theresaneilRead my book and blog:“Mobile Design Pattern Gallery” OʼReilly 2012
Upcoming SlideShare
Loading in...5
×

All The Screens: Cross Platform Design Strategies

47,227

Published on

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.

Published in: Technology, Design
1 Comment
107 Likes
Statistics
Notes
  • Nice slide deck Theresa! One question... how do the stages of product development influence the selection of a platform strategy? For example, when a website prototype is first being built, you may not know what types of devices and usage patterns your users will have. In that case, it seems like starting with a responsive web or HTML5 site gives you access to the most users with the least amount of effort compared to developing multiple native apps.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
47,227
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
1,132
Comments
1
Likes
107
Embeds 0
No embeds

No notes for slide

All The Screens: Cross Platform Design Strategies

  1. 1. All The Screens:Cross Platform Design Strategies
  2. 2. I work as a Consultant, helping companies with their UX Strategy.Theresa Neil
  3. 3. SWEDENTEXAS
  4. 4. Lufthansa Across PlatformsClassic Web Site Mobile Optimized Site In Flight EntertainmentNative Tablet App Kiosk Native Mobile Apps
  5. 5. Netflix Across PlatformsClassic Web Site Hybrid Tablet Apps Hybrid Mobile AppsTV (Boxee) Game Console (XBox) Game Device (Playstation)
  6. 6. ?What are the options for a cross platformstrategy...
  7. 7. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  8. 8. Responsive Web SiteDefined Web site responds to the environment using css mediaqueries. Typically achieved by using fluid grid layouts, like ResponsiveGrid System, Bootstrap, from Twitter, or Foundation by Zurb.
  9. 9. Responsive Web Site UIWindow 768 x 1024 Cisco London 2012
  10. 10. Responsive Web SiteIdeal ForInformational Web SitesPortfoliosContent Consumption Sites • Newspapers • Magazines • Blogs Boston Globe
  11. 11. If you want to learn more about designing for...
  12. 12. Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, 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. 13. Optimized Web SitesSome companies have three distinct sites... Mobile Web Site Tablet Web SiteClassic Web Site
  14. 14. Optimized Web SitesMore often there are only two distinct sites.Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
  15. 15. Optimized Web SitesThe mobile version is streamlined for core activities. jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
  16. 16. Optimized Web SitesIdeal ForRetailSearchSaaS productsOther web apps Basecamp
  17. 17. If you want to learn more about designing for...
  18. 18. Native AppsDefined An application that has been developed for use on aparticular platform or device.Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR Adobe Flex 4.5 Showcase Apps
  19. 19. Native AppsEvernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
  20. 20. Native Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
  21. 21. Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesEnterprise AppsBenefits over HybridBetter Performance Keynote (like PPT for Apple)
  22. 22. Hybrid AppsDefined A ʻnative wrappedʼ web application. Products likeTitanium and PhoneGap create a native wrapper that let theHTML and JS access OS dependent operations they couldaccess on their own. NBC-Built with Titanium
  23. 23. Hybrid AppsLinkedInhttp://venturebeat.com/2011/08/16/linkedin-node/
  24. 24. Hybrid AppsNetflixhttp://functionsource.com/post/netflix-feature
  25. 25. Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailBenefits over NativeWeb analyticsA/B testingPossibly lower costs Facebook
  26. 26. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  27. 27. Boston Globeʼs Cross Platform StrategyResponsive Site Native Apps And
  28. 28. eBayʼs Cross Platform StrategyOptimized Sites Native Apps And
  29. 29. Thank YouFollow me on Twitter @theresaneilRead my book and blog:“Mobile Design Pattern Gallery” OʼReilly 2012
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×