Structured content and APIs allow content to be reused across different contexts and devices. Content management systems and structured markup like XML help make content nimble by defining it in a way that is well organized, described and can be easily adapted. APIs provide programmatic access to content so it can be dynamically assembled and presented in many different forms. Together, these techniques help content be freed from any single device or page and make it available anywhere.

1. #meetcontent
Creating and Planning
Content for Responsive
Web Designs
Georgy Cohen
@radiofreegeorgy

2. #meetcontent
About me
2
http://www.flickr.com/photos/rbowen/2446689941/

3. #meetcontent
Going mobile
“ These are
weird times
for publishing.
Erin Kissane
Confab
May 9, 2011
3

4. #meetcontent
Going mobile
“
Digital
Today, half of the total Omnivores
How Tablets,
U.S. mobile population Smartphones and
uses mobile media. ... Connected Devices
The growth in mobile are Changing
U.S. Digital Media
media use is driven by Consumption Habits
the increase in October 2011
smartphone adoption.
http://www.comscore.com/Press_Events/
Presentations_Whitepapers/2011/Digital_Omnivores
4

5. #meetcontent
Going mobile
• 46 percent of Smartphone
American adults own a
smartphone Adoption and
Usage
• 25 percent of February 2012
smartphone owners
use it as their primary
internet device *
* = as of July 2011, when 35 percent of http://pewinternet.org/Reports/2012/Smartphone-
Update-2012/Findings.aspx
U.S. adults reported owning a smartphone
5

6. #meetcontent
Going mobile
The
Smartphone
Class
Connected Consumers
Transform US
Commerce and
Culture, May 2012
http://www.emarketer.com/Article.aspx?
R=1009014&ecid=a6506033675d47f881651943c21c5ed4
6

7. #meetcontent
Going mobile
The Mobile
Browsing Behaviors
and Expectations of
College-Bound High
School Students
February 2012
http://omniupdate.com/assets/whitepapers/
Mobile_Browsing_Behaviors_and_Expectations_of_College_Bound_High_Sc
hool_Students.php
7

8. #meetcontent
Going mobile
State of the
News Media
2012
Pew Research
Center's Project for
Excellence in
Journalism
http://stateofthemedia.org/
8

9. #meetcontent
Going mobile
“
Digital
Devices influence the way Omnivores
people consume content How Tablets,
and it is important to Smartphones and
remember that they do not Connected Devices
are Changing
exist in isolation of one
U.S. Digital Media
another, but have a Consumption Habits
complementary relationship October 2011
in consumers’ lives.
http://www.comscore.com/Press_Events/
Presentations_Whitepapers/2011/Digital_Omnivores
9

10. #meetcontent
Going mobile
Same site, different devices - different content!
10

11. #meetcontent
Going mobile
Same site, different devices - different content!
11

12. #meetcontent
Going mobile
Same site, different devices - different content!
12

13. #meetcontent
Going mobile
Same site, different devices - different content!
13

14. It’s time to revisit our
assumptions about
the mobile use case.

15. #meetcontent
The mobile use case
Is it this...
15
http://www.flickr.com/photos/32615508@N02/3047982712/

16. #meetcontent
...or this?
The mobile use case
16
http://www.flickr.com/photos/carbonnyc/5140154965/

17. Where are
http://www.flickr.com/photos/albertoalerigi/2886121661/
we going?

18. Let’s build our sites for
our users, wherever
they are, however they
are finding us.

19. #meetcontent
Introducing responsive web design
19

20. #meetcontent
Introducing responsive web design
“
Rather than quarantining
our content into
disparate, device-specific
experiences, we can use
[technology] to
progressively enhance
our work within different
viewing contexts.
20

21. #meetcontent
21

22. #meetcontent
Introducing responsive web design
“
Focus and prioritize your
digital offerings by
embracing the constraints
inherent in mobile design. ...
Set a baseline mobile
experience first, then
progressively enhance or
adapt your layout as device
capabilities change.
http://www.knightdigitalmediacenter.org/leadership_blog/comments/
20111220_luke_wroblewski_on_how_news_organizations_can_go_mobile_first/
22

23. #meetcontent
Introducing responsive web design
Content should
be consistent
across devices.
Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/
23

24. #meetcontent
#meetcontent
24

25. #meetcontent
25

26. #meetcontent
It’s everywhere! What about us?
(You know, the
content people.)
26
http://www.flickr.com/photos/the4mahers/5425731313/

27. “ [Responsive web design is] the
most exciting thing to happen to
content strategy since the Excel
spreadsheet.
Karen McGrane
http://karenmcgrane.com/2011/12/14/mobile-content-strategy/
27

28. #meetcontent
What about us?
(You know, the
content people.)
28

29. #meetcontent
“ ...the most exciting thing to
happen to content strategy
since the Excel spreadsheet.
- Karen McGrane
http://karenmcgrane.com/2011/12/14/mobile-content-strategy/
29

30. “ Start with the content,
not the device.
Jeremy Keith
http://adactio.com/journal/4523/
30

31. #meetcontent
Introducing responsive web design
Content should
be consistent
across devices.
Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/
31

32. Content is
unpredictable, but it
shouldn’t be random.

33. #meetcontent
Introducing responsive web design
Same site, different devices - different content!
33

34. “ Responsive websites use
new technologies and better
browser support to rearrange,
resize, add or subtract content to
fit the device. Additionally, it forces
the web team – designers, writers
and developers – to rethink how
that content is edited, organized
and delivered.
Dan Woychick
http://woychickdesign.wordpress.com/2012/01/30/adaptation/
34

35. “
Future-ready content [is] about seeing
structures through the lens of meaning and
storytelling, and building relationships across
disciplines so that our databases reflect this
richness and complexity.
- Sara Wachter-Boettcher
Feb. 28, 2012
http://www.flickr.com/photos/tabor-roeder/4308200246/ http://www.alistapart.com/articles/future-ready-content/

36. “ Think of your core content as a
fluid thing that gets poured into a
huge number of containers. Get
your content ready to go anywhere
because it’s going to go
everywhere.
Brad Frost
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
36

37. ] How do we make our
content a “fluid thing”?
37
http://www.flickr.com/photos/gfrphoto/1695650382/

38. How do we prepare our content for the future?
38
http://www.flickr.com/photos/brunoderegge/4974522829/

39. Content goals are more
important than ever.

40. #meetcontent
Responsive web design, content and higher ed
A look at
• Content goals are more responsive design
important than ever. They will and web content
inform how we shape content in higher education
in a responsive context.
• There is no page, no single
container, no single grid, no
single answer.
• Content and design are BFFs.
(They like to party with
technology.)
40

41. John M. Rogerson
Our current "responsive" iteration is
focused on providing content first,
navigation second. We build out
"mobile first" (for want of a better term).

42. Anthony Bosio
... [We] make decisions about the best order for
the content in that form and rely on CSS to
present the content as needed for various screen
widths. This practice pre-dates responsive design
in our shop because content order was always an
important consideration for accessibility.

43. Brett Pollak
[The campus web steering committee]
understood that this was a new thing. ...
We cited emerging best practices and
iterated through that process.

44. Erik Runyon
On subpages, the content is primarily
identical for all devices as we didn't want
to make assumptions about the intent of
the user based on device.

45. Jessica M. Sparks
I would say until you layout
wireframes in a side-by-side way you
really can't comprehend how different
the content will look and feel.

46. Graphic courtesy of the Wright State University Web Team

47. Graphic courtesy of the Wright State University Web Team

48. “
My developer
and I realized in
five minutes of
looking at our
wireframes that
the order of
content had to
change.
Graphic courtesy of the Wright State University Web Team

49. Sarah Clayton
Based on objectives for the Regent College
website, our web agency developed
individualized content plans for each
section/page, that included purpose of
page, key messaging, and content hierarchy.

50. #meetcontent
Note: Notrehigher ed
Responsive web design, content and Dame’s
Erik Runyon keeps a
• Content goals are more list of higher ed RWD
important than ever. Theysites at
will
inform how we shape content
http://mcont.co/
in a responsive context.
weedygarden
• There is no page, no single
container, no single grid, no
single answer.
• Content and design are BFFs.
(They like to party with
technology.)
50

51. #meetcontent
Planning content: Writing
Let go of pixel
perfection.
51

52. “ The real value of writers is to use
their creativity to craft content that
software and computing devices
can deliver in meaningful ways to
those who need it.
Scott Abel
http://www.econtentmag.com/Articles/Column/Flexing-Your-Content/Spectacular-Content-
Experiences-Require-Writers-to-Think-Differently-81707.htm?utm_source=dlvr.it&utm_medium=twitter
52

53. “ When content doesn’t work
well on responsive sites, it’s
glaringly obvious.
Sara Wachter-Boettcher
http://collegewebeditor.com/blog/index.php/archives/2012/05/01/why-do-highered-responsive-
websites-need-more-responsible-content/
53

54. #meetcontent
Planning content: Writing
54

55. #meetcontent
Planning content: Writing
vs.
55

56. #meetcontent
Planning content: Writing
56

57. #meetcontent
Planning content for responsive web designs
Structured
content
http://www.flickr.com/photos/cambodia4kidsorg/260004685/
57

58. #meetcontent
Planning content: Structured content
Nimble
Rachel
Lovinger,
Razorfish
2010
nimble.razorfish.com
58

59. “ Simply put, digital content
needs to be free – to go where
and when people want it
most. ... The more structure
you put into content the freer it
will become.
Rachel Lovinger
Author, Nimble
nimble.razorfish.com
59

60. What is
nimble
content?
• Well-structured
• Well-defined
• Well-described
Rachel Lovinger,
“Nimble”
60
http://www.flickr.com/photos/feeferlump/5982260735/

61. #meetcontent
Planning content: Structured content
Jason Scott, Sept. 28, 2011
Photo by Erin Kissane
61

62. #meetcontent
Planning content: Structured content
62

63. #meetcontent
Making content responsive: Structured content
vs.
63
http://www.flickr.com/photos/pkg/6792738213/

64. Dress your content in
layers so it’s ready for
any weather (or device)
it may encounter.

65. #meetcontent
Planning content: Structured content
The role of
the CMS
http://www.flickr.com/photos/zigazou76/3665789236/
65

66. #meetcontent
Planning content: Structured content
Create Once,
Publish Everywhere
Learn how
to COPE
66

67. #meetcontent
Planning content: Structured content
<station
id="305">
<callLetters>WAMU</callLetters>
<band>FM</band>
<name>WAMU-­‐FM</name>
The magic of APIs
<frequency>88.5</frequency>
<marketCity>Washington</marketCity>
<signal
relative="5">strong</signal>
<url
typeId="1"
type="Organization
Home
Page"
title="WAMU
88.5
Homepage">http://wamu.org</url>
<url
typeId="2"
type="Program
Schedule"
title="Program
Schedule">http://wamu.org/programs/schedule/</
url>
<url
typeId="4"
type="Pledge
Page"
title="Support
WAMU">http://www.wamu.org/support/membership/campaign/
</url>
<url
typeId="7"
type="Audio
Stream"
title="Listen
to
WAMU
88.5">http://wamu.org/listen/</url>
<url
typeId="9"
type="Podcast"
title="WAMU:
Metro
Connection">http://www.npr.org/templates/rss/
podcast.php?id=510081</url>
<url
typeId="9"
type="Podcast"
title="The
Diane
Rehm
Show:
Friday
News
Roundup">http://www.npr.org/
templates/rss/podcast.php?id=510024</url>
<url
typeId="9"
type="Podcast"
title="WAMU:
The
Kojo
Nnamdi
Show">http://www.npr.org/templates/rss/
podcast.php?id=510206</url>
<url
typeId="9"
type="Podcast"
title="WAMU:
The
Politics
Hour">http://www.npr.org/templates/rss/
podcast.php?id=510207</url>
<image
type="logo">http://media.npr.org/images/stations/logos/wamu_fm.gif</image>
<tagline>Your
NPR
News
Station
In
the
Nation's
Capital</tagline>
</station>
67

68. #meetcontent
Planning content: Structured content
68

69. #meetcontent
Planning content: Hierarchy
Making decisions,
influencing meaning.
69

70. #meetcontent
Planning content: Hierarchy
70

71. #meetcontent
Making content responsive: Hierarchy
71
http://www.flickr.com/photos/jbhthescots/6858612077/

72. #meetcontent
Planning content: Hierarchy
or
Via http://trentwalton.com/2011/07/14/content-choreography/
72

73. “ Most news sites ... have a
single presentation that
rarely deviates. ... We always
thought it should be the other
way around. The layout should
change to reflect the content.
So we designed several flexible
approaches that anticipate
news situations.
Tito Bottitta
Upstatement
http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/
73

74. #meetcontent
“Known unknowns”
Known unknowns
74
http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872

75. #meetcontent
Planning content: “Known unknowns”
• Search engine
optimization (SEO)
and analytics
http://googlewebmastercentral.blogspot.com/2012/06/
recommendations-for-building-smartphone.html
• Responsive images
http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872
Via Mat Marquis
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
75

76. Test your content in
multiple contexts, see
how it behaves and
adjust accordingly.

77. “ Technology will change. Standards
will evolve. But the need for
understanding our content—its
purpose, meaning, structure,
relationships, and value—will
remain. When we can embrace this
thinking, we will unshackle our
content—confident it will live on,
heart intact, as it travels into the
great future unknown.
Sara Wachter-Boettcher
http://www.alistapart.com/articles/future-ready-content/
77

78. #meetcontent
meetcontent.com
@meetcontent

79. #meetcontent
Mark your calendar!
Reimagine Content
in Higher Education
Rick Allen • July 17, 2012
Cost: FREE
Sign-up: http://mcont.co/071712webinar
79