Responsive Design & the Business Analyst


Published on

What does a Business Analyst need to know about Responsive Web Design? How does RD impact the 6 KAs of a BA? How does RD impact other parts of a development team with whom the BA regularly interacts? What advice can a BA use in their first RD project?

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design & the Business Analyst

  1. 1. Responsive Web DesignThursday, June 6, 13
  2. 2. Who is this Ted guy?• 12 years doing BA work• High Tech, Financial,Manufacturing, FoodServices• 3.5 years writing about BAwork & technology•• BetterProjects.netThursday, June 6, 13
  3. 3. Remember this?Thursday, June 6, 13
  4. 4. It became theseThursday, June 6, 13
  5. 5. Seeing is BelievingThursday, June 6, 13
  6. 6. What’s The Problem?• More devices & more browsers, all withdifferent capabilities, being released morefrequently.• Supporting different content anddevelopment across desktop, tablet & phonechannels.• Supporting future channels (TV, gameconsoles, etc) in formats that fit thosechannels without a major developmenteffort.Thursday, June 6, 13
  7. 7. Responsive Goals• Don’t rely on physical dimensions; rely oncontext and device capabilities.• Develop based on how your consumers willexperience and interact with yourcompany.• Provide rich media in an experiencetailored to the consumer’s goals.• Never limit a consumer’s capabilities basedon their device.Thursday, June 6, 13
  8. 8. But Its Not...• Scaling down your desktop site.• Using images that are so large theytake forever to download.• Use small buttons to fit on allfunctionality on a mobile screen.• Adding too much text to a tiny screen.Thursday, June 6, 13
  9. 9. With Great Power...• Use it if your customers are using many differentdevices, especially in a BYOD environment.• May have some gains in a corporate environment,but if you control the devices, it may be overkill.• If your site is extremely data intensive...• Consider reengineering it to show what data isreally needed.• If that won’t work, Responsive probably isn’tthe answer.Thursday, June 6, 13
  10. 10. This sounds familiar...Thursday, June 6, 13
  11. 11. Graceful Degradation• Starting with your full website and removingenough elements that it fits on a less capabledevice• Limited by what you can do on your full website• Doesn’t always provide all needed functions forless capable devices• Can produce an overly complex design that isdifficult to ‘trim down’• Isn’t always ‘graceful’Thursday, June 6, 13
  12. 12. ProgressiveEnhancement• Start with the most basic device andadd to it for more capable devices• Keeps your site working for alldevices and those with older or lesscapable just don’t get all the ‘bells andwhistles’• Can result in larger than necessarysites if it pre-loads the wrong assetsThursday, June 6, 13
  13. 13. Isn’t this just HTML5?(with CSS 3 & Javascript)Thursday, June 6, 13
  14. 14. HTML 5StructureAPIsThursday, June 6, 13
  15. 15. CSS 3LayoutColorsFontsImagesThursday, June 6, 13
  16. 16. JavaScriptInteractivityLogicValidationThursday, June 6, 13
  17. 17. What about mobile apps?Thursday, June 6, 13
  18. 18. What Responsive Is• Three Components• Fluid Grids• Flexible Images• Media QueriesThursday, June 6, 13
  19. 19. Fluid Grids• Most sites use a fixedgrid. Content width is720px and the side-baris 180px.• Responsive says theContent is 70% of thescreen with a minimumof 200px width.• Allows content toshrink and expand tofill the screen.Thursday, June 6, 13
  20. 20. Flexible Images• Images automatically resize and/orswap-out as the screen size changes.• Lower-quality placeholder images loadfirst to allow the consumer to use thesite prior to the best image loading.• Supports high-res images (retina) in1x, 1.5x, 2x and any future pixeldepths needed.Thursday, June 6, 13
  21. 21. Media Queries• Used to determine device/browsercapabilities.• Many queries, but width, height &device-pixel-ratio are the most importantones.• Not all browsers/devices support mediaqueries, but there are fallback methods(polyfill solutions) for older devices &browsers.Thursday, June 6, 13
  22. 22. Is Anyone Doing ThisYet?Thursday, June 6, 13
  23. 23. Responsive eCommerceSites• Starbucks• United PixelWorkers• King of Nothing• Mogotix• Tattly• Attika• Puplife• Lot 18••• Sugru• Thomson SportThursday, June 6, 13
  24. 24. Responsive & the BAThursday, June 6, 13
  25. 25. Enterprise Analysis• What parts of your business are most likely impactedby users with many different devices? What do younot control?• Consumer facing sites = YES!!• ERP Systems = Probably not• What systems have realized their capitalinvestment?• What teams are mature enough to handle thetransition?• What customer bases require modern experiences?Thursday, June 6, 13
  26. 26. Requirements Planning• Engage the design team immediately• Think about what content you willneed• Where and how will you store the siteassets?• Who will create all those site assets?How will you report on asset creationstatus?Thursday, June 6, 13
  27. 27. Requirements Elicitation• Define your profiles, with characteristics• Operating Systems• Screen Sizes• Capabilities• “Just like the old site, but responsive!”• Wifi v/s Cellular• Traffic, page size, load times, loading order,fonts, etcThursday, June 6, 13
  28. 28. Requirements Analysis• Wireframes• Prototypes• Content needs• Links• Text• Layouts• ImagesThursday, June 6, 13
  29. 29. Solution Validation• Validating the design• Validating on actual hardware• Iterative reviews• Information Architecture HierarchyThursday, June 6, 13
  30. 30. RequirementsCommunicationThursday, June 6, 13
  31. 31. Other ConsiderationsThursday, June 6, 13
  32. 32. Impacts to Agile• Iterate. Iterate. Iterate.• Mobile stories first.• Information architecture is importantto get right in the first sprint.• Prototype in HTML, not Photoshop.Thursday, June 6, 13
  33. 33. Impacts to Designers• Can decrease their work if they arecurrently creating assets for differentexperiences.• Will require changes to their workflowand possibly to their tools (if youautomate final image processing).• Consider getting help if they come from aprint background or have never doneresponsive before.Thursday, June 6, 13
  34. 34. Impacts to Development• Can shorten development time ifyou’re coding separate desktop &mobile sites today.• Requires a retraining for UIdevelopers.• Requires a different workflow forintegrating assets from the designers.Thursday, June 6, 13
  35. 35. Impacts to QA• Test ideas on real devices; avoid simulators.• Expands testing time if you only test ondesktop today.• Shrinks testing (maybe) if you test multiplechannels today.• Expands testing budget if you only test ondesktop today.• Visual defects are more difficult to catch whenscreens scale.Thursday, June 6, 13
  36. 36. Analyze Your Data• Multi-site versus Single-site• Event tracking• Screen tracking• Page load times• Device/OS/Browser tracking• Site flow analysisThursday, June 6, 13
  37. 37. Roadblocks to BeingResponsive• The investment required to rewritethe front-end.• Rearchitecting content managementto support many pixel densities,image sizes and text.• Requires a C-level champion.Thursday, June 6, 13
  38. 38. How Do We Get Started?• Start with setting goals for user interaction.• Mobile First!• Study our customers to better understandthe context in which they use their devices.• Target specific device classes. Use analyticsto discover which classes matter most.• Find best practices, both within yourindustry and the market at large.Thursday, June 6, 13
  39. 39. Some (obvious) advice• Always consider your users• Make it future proof• Keep improving your processes• Iterate!Thursday, June 6, 13
  40. 40. Don’t forget...Thursday, June 6, 13
  41. 41. Remember...• Simplify tasks, don’t limit features.• Remove barriers & distractions.• Move the smaller screen experience tothe big screen.• Engage designers and engineers up front.• Define flexible workflows & methodologiesto be flexible for the future.Thursday, June 6, 13
  42. 42. Selected Resources• There are lots of toolkits that exist to help usmove more quickly in the development process.• Mobify, FitTextJs, FitVidsJs, RetinaJs,•,,•,,•,,• Many more options as well...Thursday, June 6, 13
  43. 43. Additional Information•••••••, June 6, 13
  44. 44. Questions?Thursday, June 6, 13
  45. 45. Thank You!Thursday, June 6, 13