Mobile DesignStrategic Solutions         Theresa Neil6AM    9AM     12PM   6PM   9PM     12AM
I work as a consultant,               helping companies with               their UX Strategy.Theresa Neil
UX strategy is about designing for....        CONVERGENCE                     CONTEXT             PEOPLE’S NEEDS     MULTI...
My recent travel experience to Europe
Lufthansaʼs User ExperienceClassic Web Site    Mobile Optimized Site   In Flight EntertainmentNative Tablet App   Kiosk   ...
Netflix in my house                game room     office               living room   kitchen
Netflix in my house and outside                game room     office               living room   kitchen
Netflixʼs User ExperienceClassic Web Site   Hybrid Tablet Apps    Hybrid Mobile AppsTV (Boxee)         Game Console (XBox) ...
UX strategy is about aligning the purpose of aproduct with the userʼs requirements at any giventime or in any given situat...
How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service....
How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service....
How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service....
Starbuckʼs found that technology canaddress some of these pain points, Locating    Ordering/Waiting    Paying
And recently added even moreimprovements...              Reload card
What does your customerʼs journey look like?
Pain point    Pain point                    Pain point              Pain point                              Pain point poi...
Responsive Site       Native App       What mobile solutions        are available to help       with these pain points?   ...
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...
Weʼre going to deep dive into responsivedesign a bit later...
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs.       ...
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs.       ...
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 SitesBut this may change in moving forward:In January, Adobe reported that tablet users spendmore than 50 pe...
Optimized Web Siteshttp://monetate.com/2011/12/the-10-best-tablet-friendly-website-experiences-of-2011/
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
After we look as responsive design, weʼll diginto mobile optimized site design
Native AppsDefined An application that has been developed for use on aparticular platform or device.Typically native apps a...
Native Apps Xamarian MWC 2012 App   C#, MonoTouch, MonoDroid
Native Apps Angry Birds
Native Apps Skype
Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesMany Enterprise AppsBenefits over HybridBetter Perform...
After lunch weʼll look at design patterns andanti-patterns for native applications
Hybrid AppsDefined A ʻnative wrappedʼ web application. Products like Titanium andPhoneGap create a native wrapper that lets...
Hybrid AppsDevelopment FrameworksMost support HTML5 and CSS3 so you can create custom UIs fordifferent platforms.But Bewar...
Hybrid AppsNetflixhttp://functionsource.com/post/netflix-feature
Hybrid Apps NBC-Built with TitaniumIPad & iPhone apps are nice, but notshoehorned onto an Android phone.*This is not a lim...
Hybrid AppsDifferences Across DevicesGesturesInteraction ParadigmsNavigationFunctionalityhttp://www.lukew.com/ff/entry.asp...
Hybrid AppsLinkedIn does a great job of designing and developing for multiplemobile platforms
Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailDrawbacksPerformance                   ...
Before weʼre done, weʼll weigh in on the nativevs hybrid debate
Responsive Site       Native App          Letʼs deep dive into         each of these options         Web      And /Or    I...
Responsive Site       Native App         Web      And /Or    InstalledOptimized Sites       Hybrid App
Responsive Deep DiveWhat is Responsive?Layout PatternsMobile First SegueNavigation PatternsSketching/ Wireframing/Prototyp...
Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simpli...
Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simpli...
People are frequently consuming web content froma device other than a laptop/desktop. A responsivedesign will work across ...
Responsive Grid SystemsThe design adapts itself to the to the user’s behavior based onscreen size, platform and orientatio...
Media QueriesWith responsive web design, you can set a baseline(mobile) experience first, then progressively enhanceor ada...
Responsive Design: Layout Patterns Mostly Fluid                           Column Drop   Layout ShifterTiny Tweaks         ...
Layout Patterns: Mostly Fluid                         I dubbed this pattern "mostly fluid" because the                    ...
Layout Patterns: Column Drop            This pattern starts with a multi-column layout and            ends up with a singl...
Layout Patterns: Layout Shifter                This pattern does the most to adapt across                different screen ...
http://mediaqueri.es/awa/
Layout Patterns: Tiny Tweaks             Simple sites with a single column layout, multi-device adaptation             can...
Layout Patterns: Off Canvas             This pattern advantage of space off the screen to keep             content or navi...
Responsive Design: More Layouts  Mondrain          Basic Gallery
Responsive Design: More Layouts  Mondrain          Basic Gallery
Responsive Design: More Layouts  Featured Items    Column Flip
Responsive Design: More Layouts  Featured Items    Column Flip
Responsive Design: More Layouts                     Last five patterns courtesy of                     Joshua Johnson      ...
Responsive Design: More Layouts                     Last five patterns courtesy of                     Joshua Johnson      ...
Whatʼs the pattern?
Whatʼs the pattern?
Break
Mobile First is...A different way of thinking
Mobile First is...A different way of thinking                         Agreement on what matters most
Mobile First is...Knowing your users
Mobile First is...Knowing your users                     What they do and why they do it
Four critical (mobile) behaviorsLookup/Find (urgent info, local): I need an answer tosomething now—frequently related to m...
Mobile First is... About reductionWhen I say “simple”, what I mean is: A product reduced toits purest form of purpose or v...
Mobile First results in...A user experience focused on key tasks
Mobile First results in...A user experience focused on key tasks                              For the BBC thatʼs top      ...
Mobile First thinking works for...   Responsive Site     Native Apps   Optimized Sites     Hybrid Apps
Mobile First thinking works for...   Responsive Site     Native Apps   Optimized Sites     Hybrid Apps
Responsive Navigation PatternsTop Nav or “Do Nothing” ApproachOne of the easiest-to-implement solutions for navigation is ...
DrawbacksWhere’s the content? Stacked tabs make the whole page about navigation.
Responsive Navigation PatternsThe footer anchorThis clever solution keeps the nav list at the footer of the site, while th...
Responsive Navigation PatternsThe select menu One way of taming nav links gone wild is to transform a list of links into a...
Drawbacks Select menus are for choosing your state or security question, not navigating a site. In my mind there’s only on...
Responsive Navigation PatternsThe toggle The menu slides open right in the header. It’s a good-looking approach and is rel...
How to implementhttp://filamentgroup.com/lab/responsive_design_approach_for_navigation/
Responsive Navigation PatternsThe left nav flyoutThe nav is accessed by a menu icon, which reveals a tray that slides in fr...
DrawbacksSophisticated, lots of moving parts. Allow plenty of time for testingacross many devices.Possible SolutionsFounda...
Responsive Navigation PatternsFooter onlyThe footer-only navigation is similar to the footer anchor approach, onlywithout ...
Responsive Navigation Anti- PatternsHide ʻn CryRemoves a bunch of options. A big no,no. Don’t penalize people for visiting...
Responsive Navigation PatternPull Downhttp://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
Responsive FrameworksResponsive means:fluid gridflexible mediamedia queriesA responsive framework will therefore provide:flui...
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive ToolkitsThese toolkits provide basic styles to use as yourfoundation (hence the term boilerplate)
Now can we start designing?http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
Responsive Design: SketchingSketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Responsive Design: WireframesStencil/ Template: Less Stencil for OmniGrafflehttp://graffletopia.com/stencils/745
Responsive Design: Wireframes Photoshop PSD http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-des...
Responsive Design Exercise
Less              MoreStatic wireframes. This is something I feel we need to get awayfrom. There’s nothing from stopping t...
Responsive Design: PrototypingResponsive Wireframes- just an examplehttp://www.thismanslife.co.uk/projects/lab/responsivew...
Responsive Design: PrototypingFluid Gridshttp://fluidgrids.com/
Responsive Design: PrototypingGridpak Grid Generatorhttp://gridpak.com/
Validate the prototypes on the target devices with actual usershttp://bradfrostweb.com/blog/mobile/support-vs-optimization...
Responsive Visual DesignLook and FeelGo simple with your mobile site. You don’t need a lotof images, or CSS3 effects, they...
Responsive ImagesGoalHave a clear image on any device, but notdownload multiple images.There are dozens of approaches for ...
QA Testing Responsive SitesAllocate more time and budget for QA and testingresponsive sites.Emulators are helpful, but you...
Mobile Optimized Deep DiveResponsive vs Mobile Optimized SitesOptimized Sites for Retail, Search, SaaS,and EntertainmentDo...
Responsive vs Optimized SitesWeb Sites              Web AppsInformational          SearchContent Heavy          SaaS  • Ne...
Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS
Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS          Is responsive design a good solution?
Responsive vs Optimized SitesNo, but a mobile optimized site could be.                                                    ...
Responsive vs Optimized SitesAnd, it turns out it is a great solution!
Optimized Sites for SaaSBasecamp File Sharing & Proj Mgmt                         We could apply a responsive             ...
Optimized Sites for SaaSBut Mobile First says to know your users                  Basecamp userʼs needs fall into         ...
Optimized Sites for ProductivityGoogleʼs suite of productivity tools areoptimized for the mobile web
Optimized Sites for SearchBing offers a mobile web experience that isdistinct from their classic web site.                ...
Optimized Sites for RetailGap
Optimized Sites for EntertainmentWalmartʼs Vudu Optimized for tablets
Mobile Web Doʼs and DontʼsDoʼsMake content most importantFocus on performance   Use Image Sprites   http://www.w3schools.c...
Mobile Web Doʼs and DontʼsDontʼsPort a web app 1-for-1Add back buttonsUse large images andsize downGo crazy special effect...
Mobile Optimized Site Redesign
Mobile Optimized Site Redesign                                 More than 30 billion page views per month                  ...
Mobile Optimized Site Redesign
http://saforian.com/blog/2011/04/sketching/   Share your mobile first design** based on assumptions since we donʼt have rea...
Responsive Site       Native App         Web      And /Or    InstalledOptimized Sites       Hybrid App
Native App Deep DiveNative App vs Mobile SiteNative App vs HybridApplication Design PatternsDesign Anti-Patterns
Native App vs Mobile Site Native Apps                                           Mobile Sites Games                        ...
Evernoteʼs StrategyNative Apps
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
When to go NativeNon Tech Considerations: MarketingA presence in the mobile markets might make sense from amarketing, comp...
When to go NativeNon Tech Considerations: FinancialFinancial Times, Playboy and Walmart are using sites instead ofapps to ...
Native App vs HybridThis isn’t black & whiteWith big players like LinkedIn and Facebook successfullylaunching hybrids, it ...
Hybrid HopesAnother recent NYT article explainsCompanies want the best of both worlds via hybrid apps, but so far the idea...
Hybrids: Code Once & ReuseDoesnʼt mean design once & reuse                             The New York Times                 ...
Boston Globeʼs Multiscreen ExperienceResponsive Site                 Native Apps                   And                    ...
eBayʼs Cross Multiscreen ExperienceOptimized Sites               Native Apps                   And
Recent ProjectLeukemia & Lymphoma SocietyThe user journey got us thinking about many possible options
Responsive Site       Native App         Web      And /Or    InstalledOptimized Sites       Hybrid App
Responsive Fundraising SiteTeam in TrainingFundraising Page
Responsive Web Site
Responsive Donation Form
Hybrid Apps     eCheckin App   Participant Tools
Mobile App Design PatternsNavigationFormsTablesSearch, Sort & FilterToolsChartsInvitationsFeedback & AffordanceHelp
App Patterns: NavigationSpringboard   List  Menu   Tab  Menu    GalleryDashboard     Metaphor     Mega  Menu
App Patterns: NavigationSpringboard   List  Menu   Tab  Menu    Gallery     http://www.slideshare.net/theresaneil/     nav...
App Patterns: Forms
App Patterns: Tables
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Sort
App Patterns: Sort
App Patterns: Sort
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
Redesign Craigslist Search
App Patterns: Tools
App Patterns: Charts
App Patterns: Invitations
App Patterns: Feedback
App Patterns: Affordance
App Patterns: Help
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Metaphor Mismatch
Design Anti-Patterns: Metaphor MismatchNavigation disguised as filters
Design Anti-Patterns: Metaphor MismatchFilter controls done right
Design Anti-Patterns: Metaphor Mismatch
Design Anti-Patterns: Idiot Boxes
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Oceans of Buttons
Design Anti-Patterns: Oceans of Buttons
Design Anti-Patterns: Oceans of Buttons
Prototyping Mobile Apps  Mobile Prototyping is essential The field is new, even experienced designers donʼt have the backgr...
Why Prototype?Improve your design decision makingCommunicate an ideaGather user feedbackExplore the “unknowns”Fine-tune an...
Two Types of PrototypingExperientialBroader mobile project     PROVIDES CONTEXTTarget mobile hardware is unknownDesign spa...
Prototyping Expert : Rachel Hinmanhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Prototyping Expert : Rachel Hinmanhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Prototyping exercise
Thank you             Follow me on Twitter @theresaneilCheck out my site & bookMobile Design Pattern Gallery, OʼReilly 2012
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
Upcoming SlideShare
Loading in...5
×

Mobile Design. Strategic Solutions.

69,568

Published on

User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.

Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.

Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.

Published in: Technology, Business
1 Comment
189 Likes
Statistics
Notes
  • Enterprise mobility is what Internet was a couple of decades back for enterprises. It's about making sure that all the investments that an enterprise has made in IT over the years are accessible to employees wherever they are. And they are away from their desk most of the time in the modern work environment. Enterprise mobility needs to be looked as a base foundation of the enterprise's digital agenda. Both inwards looking, targeted at employees and external, targeted at enterprise's digital consumers. http://www.inkattech.com/portfolio/enterprise-mobility/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
69,568
On Slideshare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
1,880
Comments
1
Likes
189
Embeds 0
No embeds

No notes for slide

Mobile Design. Strategic Solutions.

  1. 1. Mobile DesignStrategic Solutions Theresa Neil6AM 9AM 12PM 6PM 9PM 12AM
  2. 2. I work as a consultant, helping companies with their UX Strategy.Theresa Neil
  3. 3. UX strategy is about designing for.... CONVERGENCE CONTEXT PEOPLE’S NEEDS MULTISCREEN ECOSYSTEMS CONTINUITY DISTRIBUTED EXPERIENCES
  4. 4. My recent travel experience to Europe
  5. 5. Lufthansaʼs User ExperienceClassic Web Site Mobile Optimized Site In Flight EntertainmentNative Tablet App Kiosk Native Mobile Apps
  6. 6. Netflix in my house game room office living room kitchen
  7. 7. Netflix in my house and outside game room office living room kitchen
  8. 8. Netflixʼs User ExperienceClassic Web Site Hybrid Tablet Apps Hybrid Mobile AppsTV (Boxee) Game Console (XBox) Game Device (Playstation)
  9. 9. UX strategy is about aligning the purpose of aproduct with the userʼs requirements at any giventime or in any given situation.http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystemhttp://www.slideshare.net/Rachel_Hinman/the-mobile-frontier-11393284
  10. 10. How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.2.Identify key areas where we can improve their experience. http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
  11. 11. How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.2.Identify key areas where we can improve their experience. http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
  12. 12. How do we do that?1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.2.Identify key areas where we can improve their experience. Pain pointPain point Pain point Pain point Pain point Pain point Pain point http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
  13. 13. Starbuckʼs found that technology canaddress some of these pain points, Locating Ordering/Waiting Paying
  14. 14. And recently added even moreimprovements... Reload card
  15. 15. What does your customerʼs journey look like?
  16. 16. Pain point Pain point Pain point Pain point Pain point point Pain Pain pointWhere are your customerʼsWhat does their pain points?journey look like?
  17. 17. Responsive Site Native App What mobile solutions are available to help with these pain points? Web And /Or InstalledOptimized Sites Hybrid App
  18. 18. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  19. 19. 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.
  20. 20. Responsive Web Site UIWindow 768 x 1024 Cisco London 2012
  21. 21. Responsive Web SiteIdeal ForInformational Web SitesPortfoliosContent Consumption Sites • Newspapers • Magazines • Blogs Boston Globe
  22. 22. Weʼre going to deep dive into responsivedesign a bit later...
  23. 23. Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs. At Home On The Go While Shopping At Work On Public Transport 0 25 50 75 100
  24. 24. Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs. Smartphone 80 Tablet Laptop 60 40 20 0 At Home AM To/From School/Work At School/Work Out and About At Home PM
  25. 25. Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs.
  26. 26. Optimized Web SitesSome companies have three distinct sites... Mobile Web Site Tablet Web SiteClassic Web Site
  27. 27. Optimized Web SitesMore often there are only two distinct sites.Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
  28. 28. Optimized Web SitesBut this may change in moving forward:In January, Adobe reported that tablet users spendmore than 50 percent more for each transaction atan online retailer site compared to smartphone usersand 20 percent more than traditional computer users.http://success.adobe.com/assets/en/downloads/whitepaper/13926_digital_marketing_insights.pdf
  29. 29. Optimized Web Siteshttp://monetate.com/2011/12/the-10-best-tablet-friendly-website-experiences-of-2011/
  30. 30. Optimized Web SitesThe mobile version is streamlined for core activities. jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
  31. 31. Optimized Web SitesIdeal ForRetailSearchSaaS productsOther web apps Basecamp
  32. 32. After we look as responsive design, weʼll diginto mobile optimized site design
  33. 33. 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
  34. 34. Native Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
  35. 35. Native Apps Angry Birds
  36. 36. Native Apps Skype
  37. 37. Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesMany Enterprise AppsBenefits over HybridBetter Performance Keynote (like PPT for Apple)
  38. 38. After lunch weʼll look at design patterns andanti-patterns for native applications
  39. 39. Hybrid AppsDefined A ʻnative wrappedʼ web application. Products like Titanium andPhoneGap create a native wrapper that lets the Javascript (or Ruby orPython) access OS dependent operations.
  40. 40. Hybrid AppsDevelopment FrameworksMost support HTML5 and CSS3 so you can create custom UIs fordifferent platforms.But BewareSome frameworks offer a ʻdrag and dropʼ IDE that force all of your appsto look like identical, regardless of the target OS/device.
  41. 41. Hybrid AppsNetflixhttp://functionsource.com/post/netflix-feature
  42. 42. Hybrid Apps NBC-Built with TitaniumIPad & iPhone apps are nice, but notshoehorned onto an Android phone.*This is not a limitation of Titanium, just a poor designdecision by NBC.
  43. 43. Hybrid AppsDifferences Across DevicesGesturesInteraction ParadigmsNavigationFunctionalityhttp://www.lukew.com/ff/entry.asp?1370http://www.lukew.com/ff/entry.asp?1073
  44. 44. Hybrid AppsLinkedIn does a great job of designing and developing for multiplemobile platforms
  45. 45. Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailDrawbacksPerformance FacebookBenefits over NativePossibly lower costshttp://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php
  46. 46. Before weʼre done, weʼll weigh in on the nativevs hybrid debate
  47. 47. Responsive Site Native App Letʼs deep dive into each of these options Web And /Or InstalledOptimized Sites Hybrid App
  48. 48. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  49. 49. Responsive Deep DiveWhat is Responsive?Layout PatternsMobile First SegueNavigation PatternsSketching/ Wireframing/PrototypingVisual Design
  50. 50. Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simplifying maintenanceIt is not a fad, it is the new bestpractice for web sites
  51. 51. Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simplifying maintenanceIt is not a fad, it is the new bestpractice for web sites Notice I didʼt say “best practice for web apps”
  52. 52. People are frequently consuming web content froma device other than a laptop/desktop. A responsivedesign will work across devices, providing peoplewith the content they seek.http://www.abookapart.com/products/mobile-first/
  53. 53. Responsive Grid SystemsThe design adapts itself to the to the user’s behavior based onscreen size, platform and orientation, by using a series of grids. The most common are grids are: 12 column 10 column But you can also find: 24 column 18 column 8 column, etc.. Or make your own.http://www.alistapart.com/articles/fluidgrids/
  54. 54. Media QueriesWith responsive web design, you can set a baseline(mobile) experience first, then progressively enhanceor adapt your layout as device capabilities change.This is accomplished by setting resolution “break points”and applying a different set of layout rules and mediaassets to each. A break point can be thought of as aconditional statement that determines if a device meetsspecific criteria like a minimum width of 600 pixels. If thatcondition is true, then the browser applies a different setof layout rules.
  55. 55. Responsive Design: Layout Patterns Mostly Fluid Column Drop Layout ShifterTiny Tweaks Off Canvashttp://www.abookapart.com/products/mobile-first/
  56. 56. Layout Patterns: Mostly Fluid I dubbed this pattern "mostly fluid" because the core structure of the layout really doesnt change until the smallest screen width. Instead, the design mostly relies on fluid grids to adapt to a variety of screen sizes. -- Luke Whttps://sifterapp.com/
  57. 57. Layout Patterns: Column Drop This pattern starts with a multi-column layout and ends up with a single column layout, dropping columns along the way as screen sizes get narrower. The overall size of elements in this layout tend to stay consistent. -- Luke W
  58. 58. Layout Patterns: Layout Shifter This pattern does the most to adapt across different screen sizes. That is, different layouts are used on large, medium, and small screens. Because this inherently requires more work, it seems to be less popular. -- Luke W
  59. 59. http://mediaqueri.es/awa/
  60. 60. Layout Patterns: Tiny Tweaks Simple sites with a single column layout, multi-device adaptation can just be a few tiny tweaks to font sizes and image layout -- Luke W
  61. 61. Layout Patterns: Off Canvas This pattern advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it. This pattern is showing up in a sites and apps. -- Luke W
  62. 62. Responsive Design: More Layouts Mondrain Basic Gallery
  63. 63. Responsive Design: More Layouts Mondrain Basic Gallery
  64. 64. Responsive Design: More Layouts Featured Items Column Flip
  65. 65. Responsive Design: More Layouts Featured Items Column Flip
  66. 66. Responsive Design: More Layouts Last five patterns courtesy of Joshua Johnson http://designshack.net/articles/css/5- really-useful-responsive-web-design- patterns/ Feature Shuffle
  67. 67. Responsive Design: More Layouts Last five patterns courtesy of Joshua Johnson http://designshack.net/articles/css/5- really-useful-responsive-web-design- patterns/ Feature Shuffle
  68. 68. Whatʼs the pattern?
  69. 69. Whatʼs the pattern?
  70. 70. Break
  71. 71. Mobile First is...A different way of thinking
  72. 72. Mobile First is...A different way of thinking Agreement on what matters most
  73. 73. Mobile First is...Knowing your users
  74. 74. Mobile First is...Knowing your users What they do and why they do it
  75. 75. Four critical (mobile) behaviorsLookup/Find (urgent info, local): I need an answer tosomething now—frequently related to my current location inthe world.Explore/Play (bored, local): I have some time to kill andjust want a few idle time distractions.Check In/Status (repeat/micro-tasking): Somethingimportant to me keeps changing or updating and I want tostay on top of it.Edit/Create (urgent change/micro-tasking): I need to getsome- thing done now that can’t wait.
  76. 76. Mobile First is... About reductionWhen I say “simple”, what I mean is: A product reduced toits purest form of purpose or value. --Francisco Inchaustehttp://www.simpleandusable.com/
  77. 77. Mobile First results in...A user experience focused on key tasks
  78. 78. Mobile First results in...A user experience focused on key tasks For the BBC thatʼs top stories and most read
  79. 79. Mobile First thinking works for... Responsive Site Native Apps Optimized Sites Hybrid Apps
  80. 80. Mobile First thinking works for... Responsive Site Native Apps Optimized Sites Hybrid Apps
  81. 81. Responsive Navigation PatternsTop Nav or “Do Nothing” ApproachOne of the easiest-to-implement solutions for navigation is to simplykeep it at the top. Because of its ease of implementation, it’s found onmany (maybe even most) responsive sites right now. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  82. 82. DrawbacksWhere’s the content? Stacked tabs make the whole page about navigation.
  83. 83. Responsive Navigation PatternsThe footer anchorThis clever solution keeps the nav list at the footer of the site, while the header contains asimple anchor link pointing to the footer nav. This approach clears up a lot of room for thecore content while still providing quick access to the navigation. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  84. 84. Responsive Navigation PatternsThe select menu One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This avoids the problems the top nav approach presents and is a clever way to save real estate. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  85. 85. Drawbacks Select menus are for choosing your state or security question, not navigating a site. In my mind there’s only one form element that should ever be used for navigation and that’s search. -- Andy Clarkehttp://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern
  86. 86. Responsive Navigation PatternsThe toggle The menu slides open right in the header. It’s a good-looking approach and is relatively easy to implement. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  87. 87. How to implementhttp://filamentgroup.com/lab/responsive_design_approach_for_navigation/
  88. 88. Responsive Navigation PatternsThe left nav flyoutThe nav is accessed by a menu icon, which reveals a tray that slides in from theleft and moves the main content over to the right. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  89. 89. DrawbacksSophisticated, lots of moving parts. Allow plenty of time for testingacross many devices.Possible SolutionsFoundations framework offers 4 options for off canvas navigationhttp://foundation.zurb.com/http://jasonweaver.name/lab/offcanvas/technical/
  90. 90. Responsive Navigation PatternsFooter onlyThe footer-only navigation is similar to the footer anchor approach, onlywithout the anchor in the header. It follows the content-first, nav-secondmodel, however it requires mobile users to scroll all the way to the bottom inorder to navigate the site. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  91. 91. Responsive Navigation Anti- PatternsHide ʻn CryRemoves a bunch of options. A big no,no. Don’t penalize people for visitingyour site on a mobile device.http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  92. 92. Responsive Navigation PatternPull Downhttp://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
  93. 93. Responsive FrameworksResponsive means:fluid gridflexible mediamedia queriesA responsive framework will therefore provide:fluid gridflexible mediamedia queries at common breakpoints
  94. 94. Responsive Frameworks
  95. 95. Responsive Frameworks
  96. 96. Responsive Frameworks
  97. 97. Responsive Frameworks
  98. 98. Responsive Frameworks
  99. 99. Responsive Frameworks
  100. 100. Responsive Frameworks
  101. 101. Responsive Frameworks
  102. 102. Responsive ToolkitsThese toolkits provide basic styles to use as yourfoundation (hence the term boilerplate)
  103. 103. Now can we start designing?http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
  104. 104. Responsive Design: SketchingSketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
  105. 105. Responsive Design: WireframesStencil/ Template: Less Stencil for OmniGrafflehttp://graffletopia.com/stencils/745
  106. 106. Responsive Design: Wireframes Photoshop PSD http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
  107. 107. Responsive Design Exercise
  108. 108. Less MoreStatic wireframes. This is something I feel we need to get awayfrom. There’s nothing from stopping talented UX designers fromdesigning these flexible systems in the browser itself.Establishing the grid system on paper to get the concept andflow down is great, but I’m a strong proponent of moving into thereal environment as soon as humanly possible. ---Brad Frost
  109. 109. Responsive Design: PrototypingResponsive Wireframes- just an examplehttp://www.thismanslife.co.uk/projects/lab/responsivewireframes
  110. 110. Responsive Design: PrototypingFluid Gridshttp://fluidgrids.com/
  111. 111. Responsive Design: PrototypingGridpak Grid Generatorhttp://gridpak.com/
  112. 112. Validate the prototypes on the target devices with actual usershttp://bradfrostweb.com/blog/mobile/support-vs-optimization/http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
  113. 113. Responsive Visual DesignLook and FeelGo simple with your mobile site. You don’t need a lotof images, or CSS3 effects, they take time to loadFontUse standard mobile font sizes for easy readingAdvanced CSS StylesLet the site gracefully degrade in older browsersResponsive Images Next page...
  114. 114. Responsive ImagesGoalHave a clear image on any device, but notdownload multiple images.There are dozens of approaches for this,Javascript, Server Side, combined approaches,Image resizing services. None are perfect yet, butthey are evolving rapidly.http://blog.cloudfour.com/responsive-imgs-part-2/
  115. 115. QA Testing Responsive SitesAllocate more time and budget for QA and testingresponsive sites.Emulators are helpful, but youʼll need to test on realdevices.Md v e, J ly2 1y eic s u 0 2
  116. 116. Mobile Optimized Deep DiveResponsive vs Mobile Optimized SitesOptimized Sites for Retail, Search, SaaS,and EntertainmentDos and Dontʼs for Mobile Sites
  117. 117. Responsive vs Optimized SitesWeb Sites Web AppsInformational SearchContent Heavy SaaS • Newspapers Productivity Tools • Magazines Retail • Blogs • PortfoliosResponsive Optimized Site
  118. 118. Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS
  119. 119. Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS Is responsive design a good solution?
  120. 120. Responsive vs Optimized SitesNo, but a mobile optimized site could be. BETAhttp://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
  121. 121. Responsive vs Optimized SitesAnd, it turns out it is a great solution!
  122. 122. Optimized Sites for SaaSBasecamp File Sharing & Proj Mgmt We could apply a responsive layout pattern to Basecamp Column Drop
  123. 123. Optimized Sites for SaaSBut Mobile First says to know your users Basecamp userʼs needs fall into these two categories: 1.Checkin/status 2.Edit/create A milepmditeprovides a solution for o oti iz s b e these needs.
  124. 124. Optimized Sites for ProductivityGoogleʼs suite of productivity tools areoptimized for the mobile web
  125. 125. Optimized Sites for SearchBing offers a mobile web experience that isdistinct from their classic web site. The mobile site offers results relative to my location
  126. 126. Optimized Sites for RetailGap
  127. 127. Optimized Sites for EntertainmentWalmartʼs Vudu Optimized for tablets
  128. 128. Mobile Web Doʼs and DontʼsDoʼsMake content most importantFocus on performance Use Image Sprites http://www.w3schools.com/css/css_image_sprites.asp Bundle & minify CSS and Javascipt files Limit or remove dependencies on heavy JS libraries Use CSS3 for styling, rounded corners, text shadows...
  129. 129. Mobile Web Doʼs and DontʼsDontʼsPort a web app 1-for-1Add back buttonsUse large images andsize downGo crazy special effects/transitions
  130. 130. Mobile Optimized Site Redesign
  131. 131. Mobile Optimized Site Redesign More than 30 billion page views per month Craigslist users post more than 50 million new classified ads each month More than 200 million user postings in 100 topical forums
  132. 132. Mobile Optimized Site Redesign
  133. 133. http://saforian.com/blog/2011/04/sketching/ Share your mobile first design** based on assumptions since we donʼt have real user data
  134. 134. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  135. 135. Native App Deep DiveNative App vs Mobile SiteNative App vs HybridApplication Design PatternsDesign Anti-Patterns
  136. 136. Native App vs Mobile Site Native Apps Mobile Sites Games Search Tools requiring: SaaS • Complex Calculations Productivity Tools • Reporting/Charting Retail • Native Functionality • Offline AccessAt this point in time, native apps can target the specificlimitations and abilities of each individual device muchbetter than a website can while running inside a browser.http://www.useit.com/alertbox/mobile-sites-apps.html
  137. 137. Evernoteʼs StrategyNative Apps
  138. 138. Evernoteʼs StrategyBecause they provide the best UX
  139. 139. Evernoteʼs StrategyBecause they provide the best UX
  140. 140. Evernoteʼs StrategyBecause they provide the best UX
  141. 141. Evernoteʼs StrategyBecause they provide the best UX
  142. 142. Evernoteʼs StrategyBecause they provide the best UX
  143. 143. Evernoteʼs StrategyBecause they provide the best UX
  144. 144. When to go NativeNon Tech Considerations: MarketingA presence in the mobile markets might make sense from amarketing, competitive, or sales channel perspective.
  145. 145. When to go NativeNon Tech Considerations: FinancialFinancial Times, Playboy and Walmart are using sites instead ofapps to avoid sharing revenues with app store owners.
  146. 146. Native App vs HybridThis isn’t black & whiteWith big players like LinkedIn and Facebook successfullylaunching hybrids, it looked like a shift might be imminent.But Facebook has recentlyrebuilt the iOS app withObjective C, primarily toimprove the performance.http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/?smid=tw-share
  147. 147. Hybrid HopesAnother recent NYT article explainsCompanies want the best of both worlds via hybrid apps, but so far the idealtechnology remains elusive. “You are aiming for this mythical single platform on which your developers can write code in one language and—as much as possible— is usable across multiple platforms.” --Mike Summers, head of Vigglehttp://www.xconomy.com/new-york/2012/07/06/hybrid-vs-native-viggle-new-york-times-talk-mobile-app-strategy/2/
  148. 148. Hybrids: Code Once & ReuseDoesnʼt mean design once & reuse The New York Times should know better!iPhone Android
  149. 149. Boston Globeʼs Multiscreen ExperienceResponsive Site Native Apps And ePaper apps
  150. 150. eBayʼs Cross Multiscreen ExperienceOptimized Sites Native Apps And
  151. 151. Recent ProjectLeukemia & Lymphoma SocietyThe user journey got us thinking about many possible options
  152. 152. Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
  153. 153. Responsive Fundraising SiteTeam in TrainingFundraising Page
  154. 154. Responsive Web Site
  155. 155. Responsive Donation Form
  156. 156. Hybrid Apps eCheckin App Participant Tools
  157. 157. Mobile App Design PatternsNavigationFormsTablesSearch, Sort & FilterToolsChartsInvitationsFeedback & AffordanceHelp
  158. 158. App Patterns: NavigationSpringboard List  Menu Tab  Menu GalleryDashboard Metaphor Mega  Menu
  159. 159. App Patterns: NavigationSpringboard List  Menu Tab  Menu Gallery http://www.slideshare.net/theresaneil/ navigation-patterns-for-mobile-appsDashboard Metaphor Mega  Menu
  160. 160. App Patterns: Forms
  161. 161. App Patterns: Tables
  162. 162. App Patterns: Search
  163. 163. App Patterns: Search
  164. 164. App Patterns: Search
  165. 165. App Patterns: Search
  166. 166. App Patterns: Search
  167. 167. App Patterns: Search
  168. 168. App Patterns: Search
  169. 169. App Patterns: Search
  170. 170. App Patterns: Search
  171. 171. App Patterns: Search
  172. 172. App Patterns: Search
  173. 173. App Patterns: Search
  174. 174. App Patterns: Sort
  175. 175. App Patterns: Sort
  176. 176. App Patterns: Sort
  177. 177. App Patterns: Filter
  178. 178. App Patterns: Filter
  179. 179. App Patterns: Filter
  180. 180. App Patterns: Filter
  181. 181. App Patterns: Filter
  182. 182. App Patterns: Filter
  183. 183. App Patterns: Filter
  184. 184. App Patterns: Filter
  185. 185. Redesign Craigslist Search
  186. 186. App Patterns: Tools
  187. 187. App Patterns: Charts
  188. 188. App Patterns: Invitations
  189. 189. App Patterns: Feedback
  190. 190. App Patterns: Affordance
  191. 191. App Patterns: Help
  192. 192. Design Anti-Patterns: Novel Notions
  193. 193. Design Anti-Patterns: Novel Notions
  194. 194. Design Anti-Patterns: Novel Notions
  195. 195. Design Anti-Patterns: Metaphor Mismatch
  196. 196. Design Anti-Patterns: Metaphor MismatchNavigation disguised as filters
  197. 197. Design Anti-Patterns: Metaphor MismatchFilter controls done right
  198. 198. Design Anti-Patterns: Metaphor Mismatch
  199. 199. Design Anti-Patterns: Idiot Boxes
  200. 200. Design Anti-Patterns: Chart Junk
  201. 201. Design Anti-Patterns: Chart Junk
  202. 202. Design Anti-Patterns: Chart Junk
  203. 203. Design Anti-Patterns: Chart Junk
  204. 204. Design Anti-Patterns: Oceans of Buttons
  205. 205. Design Anti-Patterns: Oceans of Buttons
  206. 206. Design Anti-Patterns: Oceans of Buttons
  207. 207. Prototyping Mobile Apps Mobile Prototyping is essential The field is new, even experienced designers donʼt have the background and heuristics to lean on while making decisions.Prototype Prototype Prototype Prototyp
  208. 208. Why Prototype?Improve your design decision makingCommunicate an ideaGather user feedbackExplore the “unknowns”Fine-tune an ideahttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
  209. 209. Two Types of PrototypingExperientialBroader mobile project PROVIDES CONTEXTTarget mobile hardware is unknownDesign space is relatively unchartedTacticalFocused mobile project VALIDATIONTarget mobile hardware is decidedDesign space is relatively knownhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
  210. 210. Prototyping Expert : Rachel Hinmanhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
  211. 211. Prototyping Expert : Rachel Hinmanhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
  212. 212. Prototyping exercise
  213. 213. Thank you Follow me on Twitter @theresaneilCheck out my site & bookMobile Design Pattern Gallery, OʼReilly 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×