Intro to Responsive Web Design 2012

Designing across contexts

ResponsiveWeb Design

“The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back,”

The Problem:

Ethan Marcotte, Responsive Web Design

2

One Answer:

Responsive Web Design

3

What is Responsive Web Design?

“A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.” Stanford.edu, http://tinyurl.com/76vkv2w

Responsive Web Design

http://stephencaver.com/

5

Almost there but not quite - using % percentages rather than fixed pixel widths, fluid designs can expand and contract with browser size but lack the ability to adapt their structure, styling and content to meet changing contexts.

Misconceptions: It’s Not Fluid

http://www.designinfluences.com/fluid960gs/

6

The traditional web design approach of setting a constrained set pixel width for each page and their subsequent elements is quickly growing antiquated and inefficient.

Misconceptions: It’s Not Fixed Width

http://visa.com

7

The Basics

1. A flexible, grid based layout

2. Flexible images and media

3. Media queries

The 3 Main Ingredients

Ethan Marcotte, Responsive Web Design

9

1. A flexible, grid based layoutA flexible, grid based layout is the fundamental core of the Responsive Design puzzle, adapting and reshaping in structure to fit the users’ needs at each browser resolution.

http://colly.com

10

2. Flexible images and mediaFlexible images and media can scale (to a point) as browser sizes change ensuring that quality and intended experience is not disrupted as resolution changes.

http://www.dolectures.com/

11

3. Media queriesMedia queries instruct the system to detect what browser/device is being used and load different CSS style sheets tailoring the experience to the users’ actual context.

http://2012.newadventuresconf.com/

12

What does this mean for UX?

Emphasis on user research & personasKnowing your users’ needs and the relevant use cases directly informs the content strategy and design across all screen resolutions. It should also be how you determine whether or not Responsive Web Design is even the right choice for the project.

14

YouTube, Play Means Business (AKQA 2012)

Mobile first approachA mobile first approach becomes much more beneficial as it forces you to focus on the core user needs and content requirements at the most basic level working your way outward from there. Progressive enhancement, not graceful degradation.

http://www.awwwards.com/gallery/60054/23

15

Content strategy with design in mindContent strategy and layout design go hand in hand with Responsive Web Design. Content needs to be laid out in such a way that it can break and adjust in it’s placement without losing disrupting the overall messaging and purpose.

Multi device layouts:

Layout 1 Layout 2 Layout 3

http://www.lukew.com/

16

Collaborative iteration in designThe design, prototyping and testing process must become a collaborative and iterative cycle involving UX, visual design and tech as the site is sketched, designed, prototyped, tested and refined.

Pon Kattera, Design Process in the Responsive Age

17

Look for follow up email with resources & further reading

Thank You