Intro to Responsive
0 likes2,030 views
This document provides an overview of responsive web design, highlighting essential concepts like scaling, breakpoints, and the importance of a modular approach to accommodate various devices and contexts. It discusses practical examples from Amazon and offers tips for designing responsively, emphasizing the need for standard grids and strategic reference resolutions. Additionally, it addresses challenges and trends in responsive design, illustrating that while the approach is evolving, it remains crucial to prioritize user experience over device specifications.
Intro to Responsive
- 1. Intro to Responsive Still trying to wrap your head around responsive design? This presentation of basic terms, concepts, and examples can help. Tom Elliott UX +
- 2. Definition - Why Responsive Web? Constraints - The challenge of Responsive Web Concepts - What is responsive web made of? Related Issues - Mobile First, Standards, and 508 Compliance Complications - More to think about Amazon - Lessons from Responsive Web in practice UX Design - How to solution responsively Summary
- 3. Definition Crafting a website to adapt it’s presentation to different contexts (usually thought of as devices). A flexible experience employing scaling, breakpoints, and complexity levels. Web on TV Desktops Laptops Tablets Cellphones 1 design, all devices
- 4. Example Check out the responsive web design of http://www.fork-cms.com/. Can you identify the scaling, breakpoints, and complexity levels?
- 5. What about Flex? Confused with Responsive Design, Flex layouts scale disproportionally adjusting to different browser widths. Flex is one of several adaptive techniques a Responsive Design might use, but it is not responsive itself. notice how the layout widens, but otherwise changes little.
- 6. Constraints The challenge of responsive web. +
- 7. Screen Size The most obvious need for responsive web design is the varying screen size of different devices - impacts content, layout, & functionality.
- 8. Pixel Density Complicating screen size is pixel density, which varies greatly on mobile devices. It effects content mostly, but also layout. notice The images above. High pixel densities may reduce imagery to incoherence.
- 9. Interaction Devices also vary in their interface inputs. Unlike screen size, in interaction bigger is not always better. Mobile touch screens are superior to mouse control in some respects.
- 10. Context Responsive web design must also accommodate changes in user context. Indoor or outdoor, quiet or noisy, mobile or stationary, focused or multitasking.
- 11. Concepts What is responsive design made of? +
- 12. Scaling Columns, images, and fonts can scale proportionally or disproportionally as layouts expand or contract - as can the cropping of images. To make scaling layouts, set dimensions as %’s instead of pixels. example Scalable image cropping: http://foodsense.is/
- 13. Breakpoints When distinct points in scale are reached, layout changes can occur. These breakpoints define boundaries between devices imposed by their increasing restrictions (shrinking screen sizes, changing interaction inputs). At a width of 995 px, this layout... ...changes to this layout. Why?
- 14. Complexity Levels When a breakpoint is passed, a layout may gain or loose content and functionality. Such breakpoints define changes in complexity level. Note: While breakpoints and complexity levels work together, not all breakpoints alter complexity level. example Above are 4 breakpoints, but the far left layout contains more content complexity.
- 15. Reference Resolution Breakpoints carve a responsive design into unique layouts. But which will be the primary, reference resolution - with the other designs based upon it? Like user personas, one must be primary. example Above are 3 breakpoints, but the middle screen-size is the primary design focus.
- 16. Grid-based Layouts Grids make responsive web design possible. Grids provide the uniform structure necessary to adapt layouts to changing screen sizes. The 960 pixel grid’s flexibility makes it a good choice, either 12 or 16 columns. For more on grids see: 960 Grid System 960 grid: 12 column 960 grid: 16 column
- 17. Design by Module The layout changes of responsive web design require a modular approach. Content and functionality, organized into smaller, related groups, adapt easily to changing layouts. Identify the modules: http://2011.dconstruct.org
- 18. Related Issues Mobile first, Standards, and 508 Compliance. +
- 19. Mobile First Design A design approach that sets mobile devices as the reference resolution rather than desktop. Why? Because designing for small screens forces simplicity and economy, benefiting all experiences.
- 20. Design Standards Defining and clarifying rules-based, design patterns will reduce the burden of adapting layouts and interactions to different devices.
- 21. 508 Compliance A law enforcing minimum accessibility standards for websites. For example, screen readers employed by vision impaired users. This could be thought of as responsive design.
- 22. Complications More to think about. +
- 23. Device Variety The enormous variety among mobile devices, in both screen size and browser capabilities (CSS and Javascript support), makes true responsive design difficult. Designing for iPhone alone is not enough.
- 24. Design Tools Photoshop, Axure, Visio, and Omnigraffle all lack workspaces that can present flexible layouts. As such, they promote a fixed-width bias when they are used to problem solve or communicate with development. (Can apples represent oranges?) ?
- 25. Applications vs. Wizards Application interfaces avoid the navigation metaphor, presenting contextual controls next to content. Wizards are linear navigation experiences offering less interactivity and user control. Designs for small screens steer toward navigation heavy design - a wizard bias. Gift Cards - a single page application experience Checkout - a multi-page wizard experience
- 26. Lowest Common Denominator A responsive web design, particularly if it’s mobile first, risks reducing to a lowest common denominator (smallest real estate, slowest processor, most browser limitations). Can responsive design avoid becoming lowest common denominator? This 1400 pixel home page offers little - serving the limitations of cell phones
- 27. Reduced Priority The use of grids and modules in responsive design pulls toward a consistency of elements in size and appearance - aiding the rearrangement of components, but tending to make everything look the same. The checkerboard, a UX without priority.
- 28. Amazon Lessons from responsive design in practice. (as of 2011) +
- 29. Reference Resolution Looking at the home page, we can guess the reference resolution (approx. 800 pixels). Why did Amazon choose it? It accommodates the Kindle’s screen size. Lesson: The choice of reference resolution is strategic.
- 30. Independently Responsive Modules Some parts of Amazon’s site scale down to 550 pixels, but others only to 1000 pixels. Lesson: A page is only as responsive as its least responsive element. 1000 pixels 550 pixels
- 31. Negative Space When Amazon’s home page scales up to 1600 pixels, it allows some space to remain empty. Lesson: It is not necessary to fill the entire screen in all contexts.
- 32. Minor Breakpoints Amazon.com contains several ‘flex zones’ that shed content as they shrink. Though minor changes, these are breakpoints. Lesson: Breakpoints come in different sizes.
- 33. UX Design 6 tips for designing responsively. +
- 34. 1. Standardize your grid The challenge of accommodating new devices and contexts will continue to grow. Teams who don’t adopt a single grid for all of their experiences, will struggle to keep up.
- 35. 2. Embrace Modular Design Changing layouts efficiently, requires a modular approach to design. Units of content and functionality must be self-contained to reposition seamlessly, so plan accordingly.
- 36. 3. Map the User to Devices When researching users, assign a primary device for each persona. When a device type changes, determine if a true use case change occurs (affecting content & functionality). Consider the context of each device. How are they used differently?
- 37. 4. Set Breakpoints & Exclude Devices Set breakpoints where layout must change. These will likely land between devices, but may occur within device types as well. Assign breakpoint types: minor, major, & use case. And remember, not all devices must be supported.
- 38. 5. Choose a Reference Resolution An important consideration, your reference resolution is the design’s starting point. It could be set to the device of the primary persona, to the smallest screen size (mobile first), or could simply be the ‘center-most’ layout.
- 39. 6. Plan Complexity Levels With the reference resolution set, it is now possible to define the primary content and functionality. Adjust both up or down to create changing complexity levels for each new breakpoint.
- 40. Final Thoughts Don’t forget the following… +
- 41. Responsive design is for people Because a responsive design must serve many device- based constraints, there is a tendency to think of responsive web as “designing for different devices,” but devices are not the audience, people are.
- 42. Responsive design isn’t new or done The growing number of today’s web-capable devices has introduced the term ‘Responsive Web Design,’ but accommodating device constraints and user contexts is not new. Further, what qualifies as ‘responsive web’ today, will continue to grow in breadth and complexity into the future.
- 43. Responsive design is all or nothing For an enterprise website, responsive design will likely roll out, one page or module at a time. But until a user flow is entirely responsive, the user will perceive the experience as unresponsive.
- 44. Don’t fear modular design Many organizations continue to spend more money designing unique experiences for each device. Creating a single responsive design is cheaper, so why avoid it? Responsive design is an advanced from of modular, standards-based design. Design departments fond of thinking in terms of ‘pages’ and ‘projects’ resist embracing responsive design’s modular architecture.