Still trying to get your head around responsive design? This presentation of basic terms, concepts, and examples can help. Useful for introducing responsive design thinking to UX professionals and departments. PROPS: to Ethan Marcotte for his book, "Responsive Web Design" (available for sale on Amazon) from which this presentation drew heavily.

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.