Intro to ResponsiveStill trying to wrap your head around responsive design? This presentation of basic terms, concepts, and examples can help.

Tom Elliott UX+

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

DefinitionCrafting 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

ExampleCheck out the responsive web design of http://www.fork-cms.com/. Can you identify the scaling, breakpoints, and complexity levels?

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.

noticehow the layout widens, but otherwise changes little.

Constraints

The challenge of responsive web.

+

Screen SizeThe most obvious need for responsive web design is the varying screen size of different devices - impacts content, layout, & functionality.

Pixel DensityComplicating screen size is pixel density, which varies greatly on mobile devices. It effects content mostly, but also layout.

noticeThe images above. High pixel densities

may reduce imagery to incoherence.

InteractionDevices 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.

ContextResponsive web design must also accommodate changes in user context. Indoor or outdoor, quiet or noisy, mobile or stationary, focused or multitasking.

Concepts

What is responsive design made of?

+

ScalingColumns, 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.

exampleScalable image cropping: http://foodsense.is/

BreakpointsWhen 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?

Complexity LevelsWhen 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.

exampleAbove are 4 breakpoints, but the far left layout

contains more content complexity.

Reference ResolutionBreakpoints 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.

exampleAbove are 3 breakpoints, but the middle screen-size is the primary design focus.

Grid-based LayoutsGrids 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

Design by ModuleThe 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

Related Issues

Mobile first, Standards, and 508 Compliance.

+

Mobile First DesignA 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.

Design StandardsDefining and clarifying rules-based, design patterns will reduce the burden of adapting layouts and interactions to different devices.

508 ComplianceA law enforcing minimum accessibility standards for websites. For example, screen readers employed by vision impaired users. This could be thought of as responsive design.

Complications

More to think about.

+

Device VarietyThe 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.

Design ToolsPhotoshop, 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?)

?

Applications vs. WizardsApplication 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

Lowest Common DenominatorA 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

Reduced PriorityThe 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.

Amazon

Lessons from responsive design in practice. (as of 2011)

+

Reference ResolutionLooking 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.

Independently Responsive ModulesSome 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

Negative SpaceWhen 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.

Minor BreakpointsAmazon.com contains several ‘flex zones’ that shed content as they shrink. Though minor changes, these are breakpoints. Lesson: Breakpoints come in different sizes.

UX Design

6 tips for designing responsively.

+

1. Standardize your gridThe 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.

2. Embrace Modular DesignChanging layouts efficiently, requires a modular approach to design. Units of content and functionality must be self-contained to reposition seamlessly, so plan accordingly.

3. Map the User to DevicesWhen 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?

4. Set Breakpoints & Exclude DevicesSet 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.

5. Choose a Reference ResolutionAn 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.

6. Plan Complexity LevelsWith 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.

Final Thoughts

Don’t forget the following…

+

Responsive design is for peopleBecause 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.

Responsive design isn’t new or doneThe 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.

Responsive design is all or nothingFor 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.

Don’t fear modular designMany 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.