All The Screens: Cross Platform Design Strategies

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 Native Mobile Apps

Netﬂix Across PlatformsClassic Web Site Hybrid Tablet Apps Hybrid Mobile AppsTV (Boxee) Game Console (XBox) Game Device (Playstation)

?What are the options for a cross platformstrategy...

Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App

Responsive Web SiteDeﬁned Web site responds to the environment using css mediaqueries. Typically achieved by using ﬂuid grid layouts, like ResponsiveGrid System, Bootstrap, from Twitter, or Foundation by Zurb.

Responsive Web Site UIWindow 768 x 1024 Cisco London 2012

Responsive Web SiteIdeal ForInformational Web SitesPortfoliosContent Consumption Sites • Newspapers • Magazines • Blogs Boston Globe

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

Optimized Web SitesDeﬁned 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

Optimized Web SitesSome companies have three distinct sites... Mobile Web Site Tablet Web SiteClassic Web Site

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 Mobile Web Site

Optimized Web SitesIdeal ForRetailSearchSaaS productsOther web apps Basecamp

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

Native AppsDeﬁned 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

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 AppsBeneﬁts over HybridBetter Performance Keynote (like PPT for Apple)

Hybrid AppsDeﬁned 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

Hybrid AppsLinkedInhttp://venturebeat.com/2011/08/16/linkedin-node/

Hybrid AppsNetﬂixhttp://functionsource.com/post/netﬂix-feature

Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailBeneﬁts over NativeWeb analyticsA/B testingPossibly lower costs Facebook

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

http://theresaneil.wordpress.com	7029
http://designingwebinterfaces.com	4993
http://www.jvetrau.com	1089
http://simulp.wordpress.com	439
http://www.cmsmagazine.ru	281
http://thesocialmoon.dev	190
http://tsm.mediacitizens.com	168
http://jeffcroft.com	70
http://tsm.ardweb.co.uk	69
http://feeds.feedburner.com	54
http://us-w1.rockmelt.com	28
https://twitter.com	26
http://www.twylah.com	13
http://translate.googleusercontent.com	7
http://tweetedtimes.com	7
http://abhinav12.bo.lt	6
http://flexeando.com	5
http://bo.lt	4
http://zootool.com	3
http://newsblur.com	2
http://designingwebinterfaces.co	2
http://abtasty.com	2
http://gridread.com	1
http://designingwebinterfaces.com.	1
http://designingwebinterfaces.	1
http://designinginterestingmoments.com	1
http://designingrichinterfaces.com	1
http://clipboard.com	1
http://xmind.brian	1
http://www.onlydoo.com	1
http://www.linkedin.com	1

All The Screens: Cross Platform Design Strategies

by Theresa Neil on May 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

31 Embeds 14,496

Statistics

All The Screens: Cross Platform Design Strategies Presentation Transcript