lynda.com staff author and information philosopher Morten Rand-Hendriksen presents his ideas on designing for informational user experiences. Originally presented at WordCamp Miami 2015. For a full list of links from the talk visit http://mor10.com/designing-informational-user-experiences-links-from-my-wordcamp-miami-talk/ A website is a communication tool built to convey a message from the publisher to the audience (and sometimes back). Responsive Web Design (RWD) was created to allow this communication to happen in the best possible way across all screen sizes and resolutions. For RWD to reach its full potential, we use design to enhance our content. Some call it “Content First,” others call it the “Core Model”. I calls it “Designing for Informational User Experiences” and in this talk I’ll show you how to do it right. When designing websites, and in particular when designing WordPress themes, it can be easy to get lost in the technical minutia of frameworks, grid systems, and design patterns. When designing for informational user experiences, these elements take a back seat to the more important aspect of getting the message across. RWD gives us the tools to display the content in the best possible way. Designing for Informational User Experiences allows us to focus on the content and use RWD techniques to present every element in the most informational way across all screens and accessibility devices. In this talk the audience is introduced to the Informational User Experience design process. Through examples from the web, practical demonstrations, and tips and tricks gleaned from 15 years in the industry, Morten gives the audience a foundation of knowledge that will help them see beyond frameworks, grids, and media queries to what really matters: Communicating ideas through the web.

1. DESIGNING FOR
INFORMATIONAL
USER EXPERIENCES
A RWD WORKFLOW
A workshop in several acts
by Morten Rand-Hendriksen
Saturday, May 30, 15

2. @MOR10
Saturday, May 30, 15

3. +
Saturday, May 30, 15

4. FLO RIDA
Saturday, May 30, 15

5. Saturday, May 30, 15

6. Jan van Hellemond: https://goo.gl/OBcEdP
Saturday, May 30, 15

7. Saturday, May 30, 15

8. Saturday, May 30, 15

9. More people today have access to a
cell phone than a clean toilet.
The World Bank: http://goo.gl/WdTGyg
Saturday, May 30, 15

10. Saturday, May 30, 15

11. Saturday, May 30, 15

12. THE WEB IS OUR
OPPORTUNITY
TO BE BETTER
Saturday, May 30, 15

13. Saturday, May 30, 15

14. THE WEB IS THE
COMMUNICATION
PLATFORM
OF OUR GENERATION
Saturday, May 30, 15

15. INFORMATIONAL
USER EXPERIENCES
Saturday, May 30, 15

16. NOPE
NOPE
MAYBE
ALL OF THIS
ALL OF THIS
Saturday, May 30, 15

17. NOPE
NOPE
NOPE
NOPE
MAYBE
ALL OF THIS
Saturday, May 30, 15

18. MAYBE
ALL OF THIS
NOPE
NOPE
Saturday, May 30, 15

19. NOPE
NOPE
MAYBE
MAYBE
NOPE
Saturday, May 30, 15

20. NOPE NOPE
NOPE
NOPE
NOPE
NOPE
PROBABLY THIS
Saturday, May 30, 15

21. Saturday, May 30, 15

22. CONTENT-FIRST
UNDERSTANDABLE
MOBILEACCESSIBLE
IUX
USER-CENTRIC
EMPATHETIC
RESPONSIVE
PERFORMANT
CONTEXTUAL
ENHANCED
INTUITIVE
INFORMATIVE
Saturday, May 30, 15

23. UNDERSTANDABLE
MOBILE
IUX
RESPONSIVE
PERFORMANT
CONTEXTUAL
ENHANCED
INTUITIVE
INFORMATIVE
CONTENT-FIRST
ACCESSIBLE
USER-CENTRIC
EMPATHETIC
Saturday, May 30, 15

24. There is no ‘ideal’
platform or browser;
there is only
content and people.
Saturday, May 30, 15

25. http://uu-k1.no/gardermoen/
Accessibility means the user decides
the best way for them to access the content.
Saturday, May 30, 15

26. Larry Miller
CC BY-SA
https://goo.gl/9yQCbD
Saturday, May 30, 15

27. Conrad Sykes: https://youtu.be/cp2rBW1hji0
Saturday, May 30, 15

28. At the core of good
design lies empathy
for the user.
Saturday, May 30, 15

29. At the core of good
design lies empathy
for people.
Saturday, May 30, 15

30. Saturday, May 30, 15

31. Saturday, May 30, 15

32. Saturday, May 30, 15

33. Saturday, May 30, 15

34. Saturday, May 30, 15

35. Understand the user:
their motivations,
their circumstance,
their reason to be here.
Saturday, May 30, 15

36. All people care about
is your content.
Saturday, May 30, 15

37. You can create good experiences without
knowing the content. What you can’t do
is create good experiences without
knowing your content structure.
What is your content made from,
not what your content is.
Mark Boulton: http://goo.gl/NJ3OiV
Saturday, May 30, 15

38. Atomic Design: http://goo.gl/W1OWPM
Saturday, May 30, 15

39. IDA AALEN:
http://goo.gl/jBzJEd
Saturday, May 30, 15

40. STEPHANIE LEARY
Content Strategy for
WordPress
http://goo.gl/OooOLA
Saturday, May 30, 15

41. Saturday, May 30, 15

42. Saturday, May 30, 15

43. Saturday, May 30, 15

44. Saturday, May 30, 15

45. Wired:
http://goo.gl/LCR2LP
Saturday, May 30, 15

46. Saturday, May 30, 15

47. Mobile users expect pages to load as fast
or faster than they load on the desktop.
85%
http://goo.gl/T90nV3
Saturday, May 30, 15

48. Saturday, May 30, 15

49. Wired:
http://goo.gl/LCR2LP
Saturday, May 30, 15

50. flickr.com/kwl
Saturday, May 30, 15

51. Design to support content:
know its use case,
know its value,
work like a bespoke tailor.
Saturday, May 30, 15

52. For most WordPress
powered sites,
we know nothing
about the content
or its structure.
Saturday, May 30, 15

53. but seriously
Saturday, May 30, 15

54. Saturday, May 30, 15

55. “Business” is not a use case.
Morten the Northman
Saturday, May 30, 15

56. As an industry, we sell websites like
paintings. Instead, we should be
selling beautiful and easy access to
content, agnostic of device,
screen size, or context.
Dan Mall: http://goo.gl/YDZLH9
Saturday, May 30, 15

57. Saturday, May 30, 15

58. BUTTON
Saturday, May 30, 15

59. DEATH BY GENERICIDE
Saturday, May 30, 15

60. Saturday, May 30, 15

61. flickr.com/kwl
BE OPINIONATED
Saturday, May 30, 15

62. Saturday, May 30, 15

63. Saturday, May 30, 15

64. USER-CENTRIC
EMPATHETIC
Saturday, May 30, 15

65. UNDERSTANDABLE
IUX
CONTEXTUAL
ENHANCED
INTUITIVE
INFORMATIVE
ACCESSIBLE
USER-CENTRIC
EMPATHETIC
MOBILE
RESPONSIVE
PERFORMANT
CONTENT-FIRST
Saturday, May 30, 15

66. More people today have access to a
cell phone than a clean toilet.
The World Bank: http://goo.gl/WdTGyg
Saturday, May 30, 15

67. The web is mobile.
Large screens are the
edge case.
Saturday, May 30, 15

68. #MOBILEGEDDON
21
APRIL
Saturday, May 30, 15

69. flickr.com/kwl
Make our blob
responsive ready so I
can read it on my
retina iPhone watch!
Saturday, May 30, 15

70. OpenSignal: http://goo.gl/JLoRVd
Saturday, May 30, 15

71. Saturday, May 30, 15

72. http://cssmediaqueries.com/target/
Saturday, May 30, 15

73. Saturday, May 30, 15

74. The web has
no breakpoints.
Saturday, May 30, 15

75. Devices have
no breakpoints.
Saturday, May 30, 15

76. Breakpoints are a
design decision.
Saturday, May 30, 15

77. Breakpoints belong
with the element.
Saturday, May 30, 15

78. ELEMENT
QUERY
ELEMENT
QUERY
QUERY
Saturday, May 30, 15

79. 1. Start with the smallest screen.
2. Widen the viewport.
3. Stop when it looks like garbage.
4. Add a breakpoint.
RWD WORKFLOW
Saturday, May 30, 15

80. http://bradfrost.com/demo/ish/
Saturday, May 30, 15

81. Saturday, May 30, 15

82. of Americans own a smartphone.
64%
http://goo.gl/50VRc2
Saturday, May 30, 15

83. of Americans rely on their smartphone
for access to the internet.
19%
http://goo.gl/50VRc2
Saturday, May 30, 15

84. Size of the average web page,
of which 1300kB are images.
2MB
http://httparchive.org/
Saturday, May 30, 15

85. Saturday, May 30, 15

86. Saturday, May 30, 15

87. Saturday, May 30, 15

88. • Optimize all images before upload
• Activate RICG Responsive Images
• Use SVGs whenever possible
• Grunticon will save you
RWD TENANTS
Saturday, May 30, 15

89. • Test
• Test
• Test
• Test
• Also, TEST
RWD TENANTS
Saturday, May 30, 15

90. Facebook on mobile has a browser!
Facebook on mobile has a browser?
Facebook on mobile has a browser...
Every mobile Facebook user
Saturday, May 30, 15

91. Mobile users expect pages to load as fast
or faster than they load on the desktop.
85%
http://goo.gl/T90nV3
Saturday, May 30, 15

92. RWD
DESIGN
PERFORMANCE
OPTIMIZATION
Saturday, May 30, 15

93. RESPONSIVE
PERFORMANT
Saturday, May 30, 15

94. IUX
INTUITIVE
INFORMATIVE
ACCESSIBLE
USER-CENTRIC
EMPATHETIC
RESPONSIVE
PERFORMANT
CONTENT-FIRST
UNDERSTANDABLE
CONTEXTUAL
ENHANCED
MOBILE
Saturday, May 30, 15

95. Consider thumbs
Saturday, May 30, 15

96. Saturday, May 30, 15

97. Scott Hurff: http://goo.gl/Ih5Prn
Saturday, May 30, 15

98. Saturday, May 30, 15

99. flickr.com/kwl
Saturday, May 30, 15

100. Saturday, May 30, 15

101. The phone in your pocket is
more powerful than the
computer that was used to
design the first iPhone.*
* Citation needed. Don’t quote me on it.
Saturday, May 30, 15

102. Bijan Sabet: https://goo.gl/7h2BvD
Our things
can do
awesome
stuff if we let
them.
Saturday, May 30, 15

103. Brad Frost: http://goo.gl/UBCiMX
ADAPTIVE MAPS
Saturday, May 30, 15

104. Dmitry Semenov: http://goo.gl/ZpXiFi
CONDITIONAL LIGHTBOX
Saturday, May 30, 15

105. Nick Williams: http://goo.gl/etpgPN
DYNAMIC STICKY HEADER
Saturday, May 30, 15

106. time & space
Saturday, May 30, 15

107. Tomomi Imura: https://vimeo.com/79466285
Saturday, May 30, 15

108. http://caniuse.com
Saturday, May 30, 15

109. Most connected
devices use touch as
their primary input.
Saturday, May 30, 15

110. With touch
there is no :hover.
Saturday, May 30, 15

111. :hover is now
graceful degradation.
Saturday, May 30, 15

112. flickr.com/kwl
Saturday, May 30, 15

113. :hover is now
graceful degradation.
Saturday, May 30, 15

114. http://modernizr.com/
Saturday, May 30, 15

115. CONTEXTUAL
ENHANCED
Saturday, May 30, 15

116. IUX
USER-CENTRIC
EMPATHETIC
RESPONSIVE
PERFORMANT
CONTENT-FIRST
CONTEXTUAL
ENHANCED
MOBILE
INTUITIVE
INFORMATIVE
ACCESSIBLE
UNDERSTANDABLE
Saturday, May 30, 15

117. This Door is the Epitome
of User Experience Design
by Kelly Jepsen
https://goo.gl/uTH38u
Saturday, May 30, 15

118. This Door is the Epitome
of User Experience Design...
Because It’s Hard to Get It Right
The First Time
by Cameron Moll
https://goo.gl/GDpEKj
Saturday, May 30, 15

119. Saturday, May 30, 15

120. Wikimedia Commons
http://goo.gl/8oMQy6
Saturday, May 30, 15

121. Edson Chilundo: https://goo.gl/SmdGNW
Saturday, May 30, 15

122. Saturday, May 30, 15

123. Medium: https://goo.gl/ApoaP8
Saturday, May 30, 15

124. Traditionally an underline was
used for emphasis (...)
(...) the use of underline for links,
especially in paragraphs of text, is
semantically different from this
classical use.
Ilya Birman: http://goo.gl/4C0nM3
Saturday, May 30, 15

125. Wired: http://goo.gl/w51Chy
Saturday, May 30, 15

126. The FOLD
Saturday, May 30, 15

127. BUTTON
Saturday, May 30, 15

128. If you are assuming people engage
above the fold (...), you are likely
wrong.
More engagement happens right at
and below the fold than above.
LukeW: http://goo.gl/XrTA0V
Saturday, May 30, 15

129. http://goo.gl/LsOrYX
Saturday, May 30, 15

130. http://goo.gl/LsOrYX
Saturday, May 30, 15

131. LukeW: http://goo.gl/XrTA0V
Saturday, May 30, 15

132. Saturday, May 30, 15

133. Saturday, May 30, 15

134. Saturday, May 30, 15

135. Saturday, May 30, 15

136. BUTTON
Saturday, May 30, 15

137. BUTTON
Surprisingly you are able to read this sentence!
90vh
Saturday, May 30, 15

138. Speaking of
Pagination...
Saturday, May 30, 15

139. Saturday, May 30, 15

140. Saturday, May 30, 15

141. Pagination (of articles)
is anti-user.
Saturday, May 30, 15

142. Saturday, May 30, 15

143. Saturday, May 30, 15

144. MENU
7.2%
increase
BBC: http://goo.gl/z3N19t
Saturday, May 30, 15

145. 22.4%
increase
BBC: http://goo.gl/z3N19t
Saturday, May 30, 15

146. MENU 20%
increase
BBC: http://goo.gl/z3N19t
Saturday, May 30, 15

147. https://goo.gl/bkXkPk
Saturday, May 30, 15

148. The hamburger is
bad for you.
Sadly, as of now I have
no better options.
Saturday, May 30, 15

149. LukeW: Obvious Always Wins - http://goo.gl/5Eqb3u
Saturday, May 30, 15

150. LukeW: Obvious Always Wins - http://goo.gl/5Eqb3u
Saturday, May 30, 15

151. CONTENT-FIRST
UNDERSTANDABLE
MOBILEACCESSIBLE
IUX
USER-CENTRIC
EMPATHETIC
RESPONSIVE
PERFORMANT
CONTEXTUAL
ENHANCED
INTUITIVE
INFORMATIVE
Saturday, May 30, 15

152. @MOR10
Saturday, May 30, 15