Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NoVA UX Responsive Design


Published on

Presentation for NoVA UX Meetup Group on October 24th, 2012. Thanks to everyone for coming out! Looking forward to seeing you at the next event!

Published in: Technology

NoVA UX Responsive Design

  1. 1. Responsive Design TechniquesOctober 24th, 2012Matt FiorePrincipal DesignerSiteworx
  2. 2. Responsive sites aredevice agnostic,responding to the devicethey are viewed inDelivering the richest userexperience to that device
  3. 3. OverviewAward-winning interactive agency7 offices, 200+ strong50% annual company growthStrong qualifying track record in the Global 500Expertise in mobile, web content management,eCommerce and analyticsClientsAwards
  4. 4. The web is viewed onhundreds, if not thousands,of distinct devicesEach has its own screen size,resolution and interaction model(click, swipe, drag, etc.)
  5. 5. Responsive Design.The practice of creating digital experiences thatadapt to seamlessly deliver content suited to thedevice context of the user’s operating system,screen size, or orientation.
  6. 6. Device specific sites? No. Less engaging user experience across devices? No
  7. 7. Device  Agnos,c  Approach    Defining breakpoints where the designbreaks, not using device sizes•  Too many new devices•  Sizes change all the time•  What’s next is too hard to predict
  8. 8. One Codebase.One CodebaseOne Content Platform One Content Platform.One URL One URL. One site to rule them all.
  9. 9. Content Design rather than web design
  10. 10. Other  Posi,ves  to  Responsive   •  Increases SEO •  Simplifies Analytics •  One codebase to maintain •  One content repository to manage •  No redirects can increase speed •  Reach more channels in traditional timeframe
  11. 11. Responsive design combines flexible grids, flexibleimages/media, and CSS media queries
  12. 12. RESPONSIVE  DESIGN  Consider content priority and implications on experience and brand across all devicesDesign inside out (phone through desktop)Control all layouts via CSS (Tablet, Mobile, Desktop)Offer graceful degradation
  13. 13. Responsive Alignment  
  14. 14. Responsive  Component  Order  
  15. 15. “Mobile First”helps focus on onlythe most importantdata and actions inan applicationMobile internetadoption hasoutpaced desktopinternet adoption byas much as eighttimes
  16. 16. Answer this question: If it’s not needed on mobile, is it needed in the first place?
  17. 17. The  Reality  •  Most companies already have a web presence•  Some have gone through recent costly redesigns of one of their platforms•  Mobile First is sometimes unrealistic and difficult for stakeholders to process•  Desktop first, is usually the most common and sometimes easy upfront•  Educating clients and stakeholders about what responsive really means is crucial
  18. 18. Staged  Approaches   Mobile First Desktop and Down Tablet and Out
  19. 19. Responsive  Solu,ons   •  Show desktop and mobile together, make those decisions really demonstrate the issues clearly •  Prototyping in Axure, before HTML •  Mobile research for user types is really helpful •  Designing in a static format doesn’t really work anymore •  Design needs to understand development and how it will actually work •  Design and Development communication is crucial
  20. 20. Responsive  Tips  •  Don’t make radical changes in layout or style•  Be cognizant of page load, hidden structure and markup•  Timing of loading content, subnav, hidden components•  Interactions are limited more so in responsive•  Impact from a budget, mindset, decision making standpoint•  Content prioritization is crucial
  21. 21. Responsive  Naviga,on  Menus  Convert a Menu to a Dropdown for Small Screens
  22. 22. Responsive  Data  Tables  Swap out tables for graphs
  23. 23. Images  &  Video  Resize and swap
  24. 24. Hiding  Components  •  Can hack to point to dummy content•  Markup still exists
  25. 25. Test  on  Devices!!  •  Even when prototyping in Axure•  Use designs in their environment•  Emulators only get you part of the way
  26. 26. DeWalt  Demo Video  
  27. 27. Responsive  Layout  PaIerns patterns.html patterns-for-responsive-design/ responsivewireframes/
  28. 28. Visit us at Siteworx.comMatthew FiorePrincipal