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