Creating and Planning Content for Responsive Web Designs

Creating and Planning Content
for Responsive Web Designs
Georgy Cohen
@radiofreegeorgy / @crosstowncomm
June 12, 2012
#psuweb12

#psuweb12 @radiofreegeorgy

About me

2


About me

3
http://www.ﬂickr.com/photos/rbowen/2446689941/


Going mobile

“ These are
weird times
for publishing.

– Erin Kissane,
Confab
May 9, 2011

4


Going mobile

“
Digital
Today, half of the total Omnivores
U.S. mobile population How Tablets,
uses mobile media. ... Smartphones and
Connected Devices
The growth in mobile are Changing
media use is driven by U.S. Digital Media
the increase in Consumption Habits
October 2011
smartphone adoption.

http://www.comscore.com/Press_Events/
Presentations_Whitepapers/2011/Digital_Omnivores

5


Going mobile

• 46 percent of
American adults own a Smartphone
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 U.S. http://pewinternet.org/Reports/2012/Smartphone-
Update-2012/Findings.aspx

adults reported owning a smartphone

6


Going mobile

The
Smartphone
Class
Connected Consumers
Transform US
Commerce and Culture
May 2012

http://www.emarketer.com/Article.aspx?
R=1009014&ecid=a6506033675d47f881651943c21c5ed4

7


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_Scho
ol_Students.php

8


Going mobile

State of the
News Media
2012
Pew Research
Center's Project for
Excellence in
Journalism

http://stateofthemedia.org/

9


Going mobile

“
Digital
Devices inﬂuence the way Omnivores
people consume content How Tablets,
and it is important to Smartphones and
remember that they do not Connected Devices
exist in isolation of one are Changing
another, but have a U.S. Digital Media
Consumption Habits
complementary relationship
October 2011
in consumers’ lives.

http://www.comscore.com/Press_Events/
Presentations_Whitepapers/2011/Digital_Omnivores

10


Going mobile

Same site, different devices - different content!

11


Going mobile


12


Going mobile


13


Going mobile


14

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

15


The mobile use case

Is it this...
16
http://www.ﬂickr.com/photos/32615508@N02/3047982712/


...or this?
The mobile use case

17
http://www.ﬂickr.com/photos/carbonnyc/5140154965/

Where are
http://www.ﬂickr.com/photos/albertoalerigi/2886121661/
we going?

Let’s build our
sites for our users,
wherever they are,
however they are
ﬁnding us.

http://www.ﬂickr.com/photos/gsfc/6760135001/

19


Introducing responsive web design

20



“ Rather than quarantining
our content into
disparate, device-
speciﬁc experiences, we
can use [technology] to
progressively enhance
our work within different
viewing contexts.

21


22



“ Focus and prioritize your
digital offerings by
embracing the constraints
inherent in mobile
design. ... Set a baseline
mobile experience ﬁrst,
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_ﬁrst/

23



Content should
be consistent
across devices.

Steve Garﬁeld via Instagram / http://instagr.am/p/ne9Tq/

24


25


26


It’s everywhere! What about us?

(You know, the
content people.)

27
http://www.ﬂickr.com/photos/the4mahers/5425731313/



“ ...the most exciting thing to
happen to content strategy
since the Excel spreadsheet.

- Karen McGrane
http://karenmcgrane.com/2011/12/14/mobile-content-strategy/

28


It’s everywhere! What about us?

(You know, the
content people.)

29



“ ...the most exciting thing to
happen to content strategy
since the Excel spreadsheet.

- Karen McGrane
http://karenmcgrane.com/2011/12/14/mobile-content-strategy/

30



“ Start with the content,
not the device.

- Jeremy Keith
http://adactio.com/journal/4523/

31



Content should
be consistent
across devices.


32



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


33



Same site, different devices -- different content!

34



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

35



This is a job
for Voltron!

36

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



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

38

] How do we make our
content a “ﬂuid thing”?

39
http://www.ﬂickr.com/photos/gfrphoto/1695650382/

How do we prepare our content for the future?

40
http://www.ﬂickr.com/photos/brunoderegge/4974522829/


Planning content for responsive web designs

• Content goals are more
important than ever.

• There is no page, no single
container, no single grid, no
single answer.

41


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.

single answer.

• Content and design are BFFs.
(They like to party with
technology.)
42

John M. Rogerson

“
Our current "responsive" iteration is
focused on providing content ﬁrst,
navigation second. We build out
"mobile ﬁrst" (for want of a better term).

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.

Brett Pollak

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

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.

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.

Graphic courtesy of the Wright State University Web Team

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

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.


Responsive web design, content and higher ed
Note: Notre Dame’s Erik
• Content goals are more Runyon keeps a list of
important than ever. Theyhigher ed RWD sites at
will
inform how we shape content
http://mcont.co/
in a responsive context.
weedygarden
single answer.

• Content and design are BFFs.
(They like to party with
technology.)
52


Planning content: Writing

Let go of pixel
perfection.

53



Hire better writers.

“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.ﬂickr.com/photos/dollarside/5326443055/

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

54



Hire better writers.

“When content doesn’t work
well on responsive sites, it’s
glaringly obvious.”


http://www.ﬂickr.com/photos/dollarside/5326443055/

http://collegewebeditor.com/blog/index.php/archives/2012/05/01/why-do-highered-responsive-
websites-need-more-responsible-content/

55



56



vs.

57



58


Planning content for responsive web designs

Structured
content

http://www.ﬂickr.com/photos/cambodia4kidsorg/260004685/

59


Planning content: Structured content

Nimble
Rachel
Lovinger,
Razorﬁsh
2010
nimble.razorﬁsh.com
60

“ 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,
“Nimble”

61
http://www.ﬂickr.com/photos/feeferlump/5982260735/

What is
nimble
content?

• Well-structured
• Well-deﬁned
• Well-described
Rachel Lovinger,
“Nimble”

62
http://www.ﬂickr.com/photos/feeferlump/5982260735/



Structured content has a
lot to do with standards-
compliant metadata that
reinforces the separation
of information from design.

Jason Scott, Sept. 28, 2011
Photo by Erin Kissane

63



64


Making content responsive: Structured content

vs.

65
http://www.ﬂickr.com/photos/pkg/6792738213/



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

http://www.ﬂickr.com/photos/qole/405915600/

66



The role of
the CMS

http://www.ﬂickr.com/photos/zigazou76/3665789236/

67



Create Once,
Publish Everywhere
Learn how
to COPE

68



<station id="305"> The magic of APIs
<callLetters>WAMU</callLetters>
<band>FM</band>
<name>WAMU-FM</name>
<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>

69



70


Planning content: Hierarchy

Making decisions,
inﬂuencing meaning.

71



72


Making content responsive: Hierarchy

73
http://www.ﬂickr.com/photos/jbhthescots/6858612077/



or

Via http://trentwalton.com/2011/07/14/content-choreography/

74



“ 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.
http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/

75


“Known unknowns”
Known unknowns

76
http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872


Planning content: “Known unknowns”

• Search engine
optimization (SEO)
and analytics
Via Jason Grigsby, Cloud Four
http://cloudfour.com/responsive-web-design-business-challenges/
and 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/

77

Knowing is half the battle
Test your content in multiple
contexts, see how it behaves
and adjust accordingly.
78


Planning content: Our charge

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—conﬁdent it will live on, heart
intact, as it travels into the great future unknown.

Feb. 28, 2012
http://www.alistapart.com/articles/future-ready-content/

79

Thank you! Questions?
www.takethecrosstown.com
Twitter: #psuweb12 @radiofreegeorgy

Creating and Planning Content for Responsive Web Designs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Creating and Planning Content for Responsive Web Designs

Ähnlich wie Creating and Planning Content for Responsive Web Designs (20)

Mehr von Georgiana Cohen

Mehr von Georgiana Cohen (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creating and Planning Content for Responsive Web Designs

Hinweis der Redaktion