We’ve all heard that content is king, yet when it comes to designing web experiences we’re still stuck with lorem ipsum and placeholder images, as though the real content didn’t matter. We’re still designing web experiences from the top down, starting with the desktop view of the homepage, even though they’re more likely to be experienced from the bottom up – starting with a content detail page on a mobile device. Designing from the content out means starting with atomic elements of content, and building a system of components and layouts based on the real structure of content.

1. John Eckman | @jeckman | #NERDSummit
Design From
the Content Out
John Eckman
@jeckman
Sept. 26th, 2015
#wcrihttp://www.queensmuseum.org/2013/10/panorama-of-the-city-of-new-york

2. http://i.imgur.com/JAgd0.jpg

3. John Eckman | @jeckman | #wcri
https://en.wikipedia.org/wiki/Georges-Eug%C3%A8ne_Haussmann

4. John Eckman | @jeckman | #wcri
http://www.citi.io/wp-content/uploads/2015/03/paris_aerial_view.jpg

5. https://en.wikipedia.org/wiki/Avenue_de_l%27Op%C3%A9ra#/media/File:Camille_Pissarro_-
_Avenue_de_l%27Opera_-_Mus%C3%A9e_des_Beaux-Arts_Reims.jpg

6. “Design is the conscious attempt to
impose a meaningful order”

7. John Eckman | @jeckman | #NERDSummit
http://mosesjacobsopera.com/

8. John Eckman | @jeckman | #NERDSummit
http://mosesjacobsopera.com/

9. https://upload.wikimedia.org/wikipedia/commons/a/ab/
Robert_Moses_with_Battery_Bridge_model.jpg

10. “There is a quality even
meaner than outright
ugliness or disorder . . .
the dishonest mask of
pretended order, achieved by
ignoring or suppressing the
real order that is struggling
to exist and to be served.”

11. John Eckman | @jeckman | #wcri
When it comes to Web Design,
we’re doing it wrong.

12. John Eckman | @jeckman | #wcri
We’ve been doing it
wrong for some time

13. John Eckman | @jeckman | #wcri
We’ve been doing it
wrong for some a very
long time

14. John Eckman | @jeckman | #NERDSummit
– John Allsop
“Now is the time for the medium of the web to outgrow its
origins in the printed page. Not to abandon so much wisdom
and experience, but to also chart its own course, where
appropriate.
The web’s greatest strength, I believe, is often seen as a
limitation, as a defect. It is the nature of the web to be flexible,
and it should be our role as designers and developers to
embrace this flexibility . . .”
https://upload.wikimedia.org/wikipedia/commons/7/74/Huxisanxiaotu.jpg
http://alistapart.com/article/dao

15. John Eckman | @jeckman | #NERDSummit
– John Allsop
“Now is the time for the medium of the web to outgrow its
origins in the printed page. Not to abandon so much wisdom
and experience, but to also chart its own course, where
appropriate.
The web’s greatest strength, I believe, is often seen as a
limitation, as a defect. It is the nature of the web to be flexible,
and it should be our role as designers and developers to
embrace this flexibility . . .”
https://upload.wikimedia.org/wikipedia/commons/7/74/Huxisanxiaotu.jpg
http://alistapart.com/article/dao

16. John Eckman | @jeckman | #wcri
Responsive
Design is part of
the answer
http://responsivewebdesign.com/about/

17. John Eckman | @jeckman | #wcri
Content
Strategy is part
of the answer
http://responsivewebdesign.com/about/

18. John Eckman | @jeckman | #wcri
Put them together, and
design from the content out

19. #1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up

20. John Eckman | @jeckman | #wcri
#1: Design with Real Content
https://www.flickr.com/photos/55776264@N00/3168781203/

21. John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content

22. John Eckman | @jeckman | #wcri
http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content

23. John Eckman | @jeckman | #wcri
• Lorem Ipsum is a placeholder - don’t rely on it
• Real content has unpredictable structure - length,
variability, frequency - the “warp and weft” of real
human messiness
• Real content has different image tonality, frequency
• Designing with placeholder content is like cooking
with fake ingredients.
Lorem Ipsum is synthetic content

24. John Eckman | @jeckman | #wcri

25. John Eckman | @jeckman | #wcri
“But I must explain to you how all this mistaken idea of
denouncing pleasure and praising pain was born and I will give
you a complete account of the system, and expound the actual
teachings of the great explorer of the truth, the master-builder of
human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know
how to pursue pleasure rationally encounter consequences that
are extremely painful. Nor again is there anyone who loves or
pursues or desires to obtain pain of itself, because it is pain,
but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has
any right to find fault with a man who chooses to enjoy a
pleasure that has no annoying consequences, or one who avoids
a pain that produces no resultant pleasure?"

26. John Eckman | @jeckman | #wcri
“But I must explain to you how all this mistaken idea of
denouncing pleasure and praising pain was born and I will give
you a complete account of the system, and expound the actual
teachings of the great explorer of the truth, the master-builder of
human happiness. No one rejects, dislikes, or avoids pleasure
itself, because it is pleasure, but because those who do not know
how to pursue pleasure rationally encounter consequences that
are extremely painful. Nor again is there anyone who loves or
pursues or desires to obtain pain of itself, because it is pain,
but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has
any right to find fault with a man who chooses to enjoy a
pleasure that has no annoying consequences, or one who avoids
a pain that produces no resultant pleasure?"
Nor again is there anyone who
loves or pursues or desires to
obtain pain of itself, because it is
pain, but because occasionally
circumstances occur in which
toil and pain can procure him
some great pleasure.

27. John Eckman | @jeckman | #wcri
What if your client
doesn’t yet have content?

30. John Eckman | @jeckman | #wcri
Proto-Content
• Use the site’s current content
• Write your own
• Use text from competitors’ websites
• Use ‘real’ content from another
context (wikipedia)
http://wordpress.tv/2015/05/11/travis-totz-design-better-websites-with-content-first/

31. John Eckman | @jeckman | #wcri
#1A: Design with Real Content (Including Ads!)

32. John Eckman | @jeckman | #wcri

33. John Eckman | @jeckman | #wcri
#2: Design from the Bottom Up
https://upload.wikimedia.org/wikipedia/commons/e/e6/Keeler_Oak_Tree_-_distance_photo,_May_2013.jpg

34. John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E

35. John Eckman | @jeckman | #wcri
Home
Cat CCat B Cat DCat A Cat E

36. John Eckman | @jeckman | #wcri
#3: Design Systems, Not Pages
https://upload.wikimedia.org/wikipedia/commons/9/92/Sort_sol_pdfnet.jpg

37. 1. Separation - avoid crowding neighbors (short range repulsion)
2. Alignment - steer towards average heading of neighbors
3. Cohesion - steer towards average position of neighbors (long range
attraction)
https://en.wikipedia.org/wiki/Flocking_(behavior)

38. 1. Separation - avoid crowding neighbors (short range repulsion)
2. Alignment - steer towards average heading of neighbors
3. Cohesion - steer towards average position of neighbors (long range
attraction)
https://en.wikipedia.org/wiki/Flocking_(behavior)

39. John Eckman | @jeckman | #wcri

44. Pages are specific instances of templates that replace
placeholder content with real representative
content. . . . pages are essential for testing the
effectiveness of the underlying design system. It is at
the page stage that we’re able to take a look at how
all those patterns hold up when real content is
applied to the design system.

45. http://www.public-domain-image.com/free-images/nature-landscapes/forest/view-at-green-
forest-from-the-observation-tower/
We need to see the forest

46. http://www.public-domain-image.com/free-images/nature-landscapes/forest/hardwood-trees-in-forest.jpg
. . . and the trees

47. “This order is all composed of movement and
change, and although it is life, not art, we may
fancifully call it the art form of the city and liken it
to the dance . . . an intricate ballet in which the
individual dancers and ensembles all have
distinctive parts which miraculously reinforce each
other and compose an orderly whole”
- Jane Jacobs
https://en.wikipedia.org/wiki/Pedestrian_scramble

48. John Eckman | @jeckman | #NERDSummit
–John Allsopp
“The journey begins by letting go of
control, and becoming flexible.”

49. #1: Design with Real Content#1: Design with Real Content
#3: Design Systems, Not Pages
#2: Design from the Bottom Up

50. john@10up.com
@jeckman
johneckman.com
openparenthesis.org
goatless.org

51. John Eckman | @jeckman | #wcri
Resources
• Mark Boulton - A Richer Canvas (March 2011). http://www.markboulton.co.uk/journal/a-richer-
canvas, Structure First, Content Always (Feb 2012) - http://www.markboulton.co.uk/journal/
structure-first-content-always
• Stephen Hay - Responsive Design Workflow. https://vimeo.com/47171001 (from BDConf,
April 2012)
• Dave Rupert - Responsive Deliverables http://daverupert.com/2013/04/responsive-
deliverables/
• Chris Coyier - Design Systems: Building for the Future. https://css-tricks.com/design-systems-
building-future/
• Dave Olsen - The Death of Lorem Ipsum. Confab Higher Ed 2014. http://www.slideshare.net/
dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content
• Travis Totz - Design Better Websites with Content First. http://wordpress.tv/2015/05/11/travis-
totz-design-better-websites-with-content-first/
• Brad Frost, Atomic Design. http://atomicdesign.bradfrost.com/