This covers a holistic approach to web design that includes goals, strategies, and tactics to overcome today's web design challenges. Working from the content out we use the 3C's of mobile first to address the Content, Constraint, and Capabilities. To maintain accessibility and predictability of the experience we use progressive enhancement and adaptive design to round out a responsive website.

1. Responsive
Experience Design
(RXD)
Holistic approach to the web design
Mike Donahue, UX Architect at Citrix
UXDEV Summit Feb. 2016
@UXDevSummit #uxdevsummit
@mdonahue37 #RXD #RXDBook

2. 2011 Seattle, An Event Apart
Eric Meyers

3. 2011 Seattle, An Event Apart
Kristina
Havorson
Luke
Wroblewski
Jeffrey
Zeldman
Jeremy
Keith

4. Then…someone mentioned
Responsive Web Design (RWD)
Mind blown. World changed.

5. Responsive Web Design
Ethan Marcotte

6. This is responsive web design

9. Goals
Inclusive (radically)
Accessible
Appropriate

10. “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

11. Goals
Inclusive (radically)
Accessible
Appropriate

12. Goals
Inclusive (radically)
Accessible
Appropriate

14. Useful Desirable

15. Desirability is subjective

17. content
layout container
interface
widgets
Content out
Content is why
people are here.
The Mai Tai Diagram Credit: Nick Finck

18. layout container
interface
widgets
Content out
Would you pay
$8 for this?

19. Content informs design.

20. Page tables can help.
Priority!index!
The%priority%index%lays%out%the%highClevel%goals%of%the%page%in%priority%order.%It%should%
capture%the%objective,%purpose,%or%intent%of%the%page,%but%not%the%structure%or%individual%
elements%of%the%page%(that%happens%in%the%outline).%%%
%
Page!title! Title%should%be%mutually%exclusive,%clear%in%intent,%and%able%to%
stand%on%its%own.%
Objective! Objective%should%be%a%singular%high%level%goal%for%the%page.%
Ideally%it%would%also%be%an%emotion%driven%goal.%
Key!message! This%should%closely%align%with%the%title%or%intro%text%of%the%
page.%
Priority!1!!
!
It’s%ok,%even%great,%if%a%page%has%a%single%goal.%There%should%
never%be%more%than%3%priorities%for%any%single%page.%
Priority!2!(optional)!
!
%
Priority!3!(optional)! %
Target!audience! List%the%primary%and%secondary%readers%of%the%content.%There%
should%never%be%more%than%two%targets.%
Success!metrics! Spell%out%what%success%looks%like,%how%you%will%know%if%your%
page%is%achieving%it’s%objective.%
Location! Where%does%the%page%live%within%the%structure%of%the%site?%
%
Stakeholders! %
Governance! Define%the%plan%for%ongoing%maintenance%of%the%page,%who%
will%update%it%and%how%often.%
Spend most of your time here

21. “Design without
content
is decoration.”
Jeffery Zeldman

22. Mobile First
Design for the
person before the
device.

23. 3C’s of Mobile First
1. Context
2. Constraints
3. Capabilities

24. 3C’s of Mobile First
1. Context
2. Constraints
3. Capabilities

25. 3C’s of Mobile First
1. Context
2. Constraints
3. Capabilities

26. 3C’s of Mobile First
1. Context
2. Constraints
3. Capabilities

27. Mobile first leverages capabilities that
empower users.

28. Progressive
enhancement
Start with something
useful and usable,
and make it
desirable.

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

30. Useful Desirable

31. Plan for failure – it will happen.
With JavaScript

32. Plan for failure – it will happen.
Without JavaScript

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

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

35. “If the content is critical, assume
the enhancement will fail.
If it’s not, assume it will work”
Jared Smith, WebAIM

36. Semantic, Well-formed HTML
Design Development
Content
(structured, appropriately concise)
Basic CSS Basic JSBasic Styles & Features
(color, typography, navigation)
Nice CSS Nice JSNice Styles & Features
(basic layout, basic interactions)
OMG CSS OMG JSOMG Styles & Features
(responsive, advanced interactions)
Progressive enhancement stack

37. No enhancement will
overcome bad content.

38. “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

39. Be adaptive when appropriate
Google result on mobile Google result on desktop

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

41. UXDEV Summit 39% off discount: ctwuxdev
Responsive
Experience Design
(RXD)
Holistic approach to the web design
Mike Donahue, UX Architect at Citrix
UXDEV Summit Feb. 2016
@UXDevSummit #uxdevsummit
@mdonahue37 #RXD #RXDBook