responsive experience design (rxd): a holistic approach to web - uxdev summit
TRANSCRIPT
![Page 1: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/1.jpg)
Responsive Experience Design (RXD)Holistic approach to the web designMike Donahue, UX Architect at Citrix
UXDEV Summit Feb. 2016
@UXDevSummit #uxdevsummit @mdonahue37 #RXD #RXDBook
![Page 2: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/2.jpg)
2011 Seattle, An Event Apart
Eric Meyers
![Page 3: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/3.jpg)
2011 Seattle, An Event Apart
Kristina Havorson
Luke Wroblewski
Jeffrey Zeldman
JeremyKeith
![Page 4: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/4.jpg)
Then…someone mentioned Responsive Web Design
(RWD)
Mind blown. World changed.
![Page 5: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/5.jpg)
Responsive Web Design
Ethan Marcotte
![Page 6: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/6.jpg)
This is responsive web design
![Page 7: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/7.jpg)
![Page 8: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/8.jpg)
![Page 9: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/9.jpg)
GoalsInclusive (radically)AccessibleAppropriate
![Page 10: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/10.jpg)
“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
![Page 11: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/11.jpg)
GoalsInclusive (radically)AccessibleAppropriate
![Page 12: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/12.jpg)
GoalsInclusive (radically)AccessibleAppropriate
![Page 13: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/13.jpg)
![Page 14: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/14.jpg)
Useful Desirable
![Page 15: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/15.jpg)
Desirability is subjective
![Page 16: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/16.jpg)
![Page 17: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/17.jpg)
content
layout container
interface
widgets
Content outContent is why people are here.
The Mai Tai Diagram Credit: Nick Finck
![Page 18: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/18.jpg)
layout container
interface
widgetsContent outWould you pay $8 for this?
![Page 19: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/19.jpg)
Content informs design.
![Page 20: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/20.jpg)
Page tables can help.
Spend most of your time here
![Page 21: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/21.jpg)
“Design without content
is decoration.”Jeffery Zeldman
![Page 22: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/22.jpg)
Mobile FirstDesign for the person before the device.
![Page 23: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/23.jpg)
3C’s of Mobile First1. Context2. Constraints3. Capabilities
![Page 24: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/24.jpg)
3C’s of Mobile First1. Context2. Constraints3. Capabilities
![Page 25: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/25.jpg)
3C’s of Mobile First1. Context2. Constraints3. Capabilities
![Page 26: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/26.jpg)
3C’s of Mobile First1. Context2. Constraints3. Capabilities
![Page 27: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/27.jpg)
Mobile first leverages capabilities that empower users.
![Page 28: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/28.jpg)
Progressive enhancementStart with something useful and usable, and make it desirable.
![Page 29: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/29.jpg)
Progressive enhancement doesn’t mean design for the lowest common denominator. It means start there.
Jeremy Keith
![Page 30: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/30.jpg)
Useful Desirable
![Page 31: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/31.jpg)
Plan for failure – it will happen.
With JavaScript
![Page 32: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/32.jpg)
Plan for failure – it will happen.
Without JavaScript
![Page 33: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/33.jpg)
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.
![Page 34: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/34.jpg)
You will be judged by how you fail.with JavaScript without JavaScript
![Page 35: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/35.jpg)
“If the content is critical, assume the enhancement
will fail.If it’s not, assume it will
work”Jared Smith, WebAIM
![Page 36: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/36.jpg)
Progressive enhancement stack
![Page 37: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/37.jpg)
No enhancement willovercome bad content.
![Page 38: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/38.jpg)
“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
![Page 39: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/39.jpg)
Be adaptive when appropriateGoogle result on mobile Google result on desktop
![Page 40: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/40.jpg)
Don’t build sites that just fill available screen space. Build experiences that fulfill human
needs.
![Page 41: Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit](https://reader031.vdocuments.site/reader031/viewer/2022030117/589eceb51a28ab47138b6653/html5/thumbnails/41.jpg)
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