all the screens: cross platform design strategies
DESCRIPTION
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.TRANSCRIPT
![Page 1: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/1.jpg)
All The Screens:Cross Platform Design Strategies
![Page 2: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/2.jpg)
I work as a Consultant, helping companies with their UX Strategy.
Theresa Neil
![Page 3: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/3.jpg)
TEXAS
SWEDEN
![Page 4: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/4.jpg)
Lufthansa Across Platforms
Classic Web Site
Native Tablet App
Mobile Optimized Site
Kiosk
In Flight Entertainment
Native Mobile Apps
![Page 5: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/5.jpg)
TV (Boxee) Game Console (XBox) Game Device (Playstation)
Classic Web Site Hybrid Tablet Apps Hybrid Mobile Apps
Netflix Across Platforms
![Page 6: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/6.jpg)
?
What are the options for a cross platform strategy...
![Page 7: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/7.jpg)
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
![Page 8: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/8.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 Site
![Page 9: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/9.jpg)
Responsive Web Site
UIWindow 768 x 1024
Cisco London 2012
![Page 10: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/10.jpg)
Responsive Web Site
Ideal For Informational Web SitesPortfoliosContent Consumption Sites
• Newspapers• Magazines• Blogs
Boston Globe
![Page 11: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/11.jpg)
If you want to learn more about designing for...
![Page 12: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/12.jpg)
Optimized Web Sites
Defined Multiple web sites, each optimized for a different form factor, and different usage needs.
0 25 50 75 100
At Home
On The Go
While Shopping
At Work
On Public Transport
Mobile Usage Patterns
0
20
40
60
80
At Home AM To/From School/Work At School/Work Out and About At Home PM
SmartphoneTabletLaptop
Connect
Search
Entertain
Manage
Inform
Shop
Navigate
0 10 20 30 40Mobile PC
![Page 13: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/13.jpg)
Optimized Web Sites
Classic Web Site Tablet Web Site
Mobile Web Site
Some companies have three distinct sites...
![Page 14: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/14.jpg)
Optimized Web Sites
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
More often there are only two distinct sites.
![Page 15: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/15.jpg)
Optimized Web Sites
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
The mobile version is streamlined for core activities.
![Page 16: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/16.jpg)
Ideal For RetailSearchSaaS productsOther web apps
Optimized Web Sites
Basecamp
![Page 17: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/17.jpg)
If you want to learn more about designing for...
![Page 18: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/18.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 19: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/19.jpg)
Native Apps
Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
![Page 20: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/20.jpg)
Native Apps
Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
![Page 21: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/21.jpg)
Ideal For RetailFinancialSoftware (productivity tools)GamesEnterprise Apps
Benefits over HybridBetter Performance
Native Apps
Keynote (like PPT for Apple)
![Page 22: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/22.jpg)
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
![Page 23: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/23.jpg)
Hybrid Apps
LinkedInhttp://venturebeat.com/2011/08/16/linkedin-node/
![Page 24: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/24.jpg)
Hybrid Apps
Netflix
http://functionsource.com/post/netflix-feature
![Page 25: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/25.jpg)
Ideal For Software (productivity tools)Enterprise Apps Video PlayersRetail
Benefits over NativeWeb analyticsA/B testingPossibly lower costs
Hybrid Apps
![Page 26: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/26.jpg)
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
![Page 27: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/27.jpg)
Boston Globeʼs Cross Platform Strategy
Responsive Site Native Apps
And
![Page 28: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/28.jpg)
Optimized Sites
eBayʼs Cross Platform Strategy
Native Apps
And
![Page 29: All The Screens: Cross Platform Design Strategies](https://reader034.vdocument.in/reader034/viewer/2022051512/540e1ef18d7f728d7e8b4bcc/html5/thumbnails/29.jpg)
Thank YouFollow me on Twitter @theresaneil
Read my book and blog: “Mobile Design Pattern Gallery” OʼReilly 2012