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