Download as PDF, PPTX
More Related Content
Similar to NoVA UX Responsive Design
NoVA UX Responsive Design
- 1. Responsive Design Techniques October24th, 2012 Matt Fiore Principal Designer Siteworx
- 3. Responsive sites are deviceagnostic, responding to the device they are viewed in Delivering the richest user experience to that device http://bostonglobe.com
- 4. Overview Award-winning interactive agency 7offices, 200+ strong 50% annual company growth Strong qualifying track record in the Global 500 Expertise in mobile, web content management, eCommerce and analytics Clients Awards
- 5. The web isviewed on hundreds, if not thousands, of distinct devices Each has its own screen size, resolution and interaction model (click, swipe, drag, etc.)
- 6. Responsive Design. The practiceof creating digital experiences that adapt to seamlessly deliver content suited to the device context of the user’s operating system, screen size, or orientation.
- 7. Device specific sites?No. Less engaging user experience across devices? No http://www.mobilusdesign.com/responsive-web-designed-websites-for-wordpress/
- 9. Device Agnos,c Approach Defining breakpoints where the design breaks, not using device sizes • Too many new devices • Sizes change all the time • What’s next is too hard to predict
- 10. One Codebase. One Codebase OneContent Platform One Content Platform. One URL One URL. One site to rule them all.
- 11. Content Design ratherthan web design
- 12. 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
- 13. Responsive design combinesflexible grids, flexible images/media, and CSS media queries
- 14. RESPONSIVE DESIGN Considercontent priority and implications on experience and brand across all devices Design inside out (phone through desktop) Control all layouts via CSS (Tablet, Mobile, Desktop) Offer graceful degradation
- 17.
- 18.
- 19. “Mobile First” helps focuson only the most important data and actions in an application Mobile internet adoption has outpaced desktop internet adoption by as much as eight times
- 20. Answer this question: If it’s not needed on mobile, is it needed in the first place?
- 21. 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
- 22. Staged Approaches Mobile First Desktop and Down Tablet and Out
- 23. 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
- 24. 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
- 25. Responsive Naviga,on Menus Convert a Menu to a Dropdown for Small Screens
- 26. Responsive Data Tables Swap out tables for graphs
- 27. Images & Video Resize and swap
- 28. Hiding Components • Can hack to point to dummy content • Markup still exists
- 29. Test on Devices!! • Even when prototyping in Axure • Use designs in their environment • Emulators only get you part of the way
- 30.
- 35. Responsive Layout PaIerns http://www.zurb.com/playground/off-canvas-layouts http://bradfrost.github.com/this-is-responsive/ patterns.html http://bradfrostweb.com/blog/web/complex-navigation- patterns-for-responsive-design/ http://www.thismanslife.co.uk/projects/lab/ responsivewireframes/
- 36. Visit us atSiteworx.com Matthew Fiore Principal Designer [email protected] www.linkedin.com/in/matthewfiore