Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit

Responsive Experience Design (RXD)Holistic approach to the web designMike Donahue, UX Architect at Citrix

UXDEV Summit Feb. 2016

@UXDevSummit #uxdevsummit @mdonahue37 #RXD #RXDBook

2011 Seattle, An Event Apart

Eric Meyers

2011 Seattle, An Event Apart

Kristina Havorson

Luke Wroblewski

Jeffrey Zeldman

JeremyKeith

Then…someone mentioned Responsive Web Design

(RWD)

Mind blown. World changed.

Responsive Web Design

Ethan Marcotte

This is responsive web design

GoalsInclusive (radically)AccessibleAppropriate

“An accessible web is a better web for

smartphones and other devices, showing how we

all benefit from the inclusive mindset.”Sir Tim Berners-Lee

GoalsInclusive (radically)AccessibleAppropriate

GoalsInclusive (radically)AccessibleAppropriate

Useful Desirable

Desirability is subjective

content

layout container

interface

widgets

Content outContent is why people are here.

The Mai Tai Diagram Credit: Nick Finck

layout container

interface

widgetsContent outWould you pay $8 for this?

Content informs design.

Page tables can help.

Spend most of your time here

“Design without content

is decoration.”Jeffery Zeldman

Mobile FirstDesign for the person before the device.

3C’s of Mobile First1. Context2. Constraints3. Capabilities

3C’s of Mobile First1. Context2. Constraints3. Capabilities

3C’s of Mobile First1. Context2. Constraints3. Capabilities

3C’s of Mobile First1. Context2. Constraints3. Capabilities

Mobile first leverages capabilities that empower users.

Progressive enhancementStart with something useful and usable, and make it desirable.

Progressive enhancement doesn’t mean design for the lowest common denominator. It means start there.

Jeremy Keith

Useful Desirable

Plan for failure – it will happen.

With JavaScript

Plan for failure – it will happen.

Without JavaScript

Plan for failure – it will happen.

Fail well.

Well this doesn’t seem

right.Our sight relies on JavaScript to

deliver the music you love. Please check that it’s enabled

in your browser and try reloading the page.

You will be judged by how you fail.with JavaScript without JavaScript

“If the content is critical, assume the enhancement

will fail.If it’s not, assume it will

work”Jared Smith, WebAIM

Progressive enhancement stack

No enhancement willovercome bad content.

“Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot.

Now, water can flow or it can crash. Be water, my friend.“

Bruce Lee

Be adaptive when appropriateGoogle result on mobile Google result on desktop

Don’t build sites that just fill available screen space. Build experiences that fulfill human

needs.

UXDEV Summit 39% off discount: ctwuxdev

Responsive Experience Design (RXD)Holistic approach to the web designMike Donahue, UX Architect at Citrix

UXDEV Summit Feb. 2016

@UXDevSummit #uxdevsummit @mdonahue37 #RXD #RXDBook