This was a workshop I gave at http://csforum.eu in 2011. DESIGNING NARRATIVE CONTENT --------------------------------------- How can you be sure your content reaches the largest audience possible? By designing content for all contexts, that will reach your audience via any device, any phone, any laptop, anywhere. This workshop will discuss how to create a content strategy for narrative content. We'll explore how to tailor your content, as well as your editorial workflows, for different devices and audiences. We'll use Treesaver, an open-source content layout framework to illustrate narrative content principles. Publishing usually comes at the end of your content strategy, but by orchestrating your process for narrative content, you can ensure your stories, news, product descriptions, and more will be tailored for your audience wherever they are. What you’ll learn How to optimise workflow, production, and deployment for narrative content. How to use the technology behind narrative content. How to customise content for different contexts.

1. Designing Narrative
content
Martha Rotter :: @martharotter
cartoon courtesy of xkcd.com

2. by Dustin Diaz

3. by photohome_uk

4. Introductions :: Who’s
Here?
! Please share:
! Your name
! Your current role / focus
! What you’re working on
! What you’re hoping to
learn from this workshop. By Þorgerður
Þorgerður Olafsdottir

5. What We Will Cover In
This Workshop
! This workshop will ::
! Show you the difference between
effective and ineffective narrative
content
! Show you how to improve your workflow
with narrative content
! Teach you ways to easily include
narrative content in your design and
technology

6. This Workshop Is
! INTERACTIVE
! Focused more on
magazines, newspapers,
blogs and long-form
content than calls-to-
action and labels
! Focused on results - you
will walk away with a
publication you can use
as a skeleton or for brain- by Narisa
storming or building
content strategy for long-
form content

7. What This Workshop Is
Not
! This Workshop is Not ::
! Going to teach you how to write
sexy content
! Going to give you FIVE HOT TOP
TIPS FOR CONTENT STRATEGY!
! Going to make you into a developer
(which you probably don’t want
anyway). But it might teach you
some terms to help you work better image courtesy of thinkgeek.com
with developers.

8. So Just What is
Narrative content?

9. Narrative
content is
content that
describes a
story, an
idea, a
discussion
by vasta

10. Narrative Content
Describes a Story, an
Idea, a Discussion
! [screen grabs of The New Yorker, Wired, Guardian
article]
article taken from http://www.bbc.co.uk/news/world-europe-14798534
article taken from http://www.wired.com/underwire/2011/09/five-essential-online-tools/

11. Narrative content
is not the same
as identifying
text, instructions
on a web page,
labels or calls to
action.

12. Narrative Content is NOT
descriptive text or calls-to-
action

13. Not
Narrative
Content
cartoon copyright theoatmeal.com

14. Not
Narrative
Content
cartoon copyright theoatmeal.com

15. Narrative
content from
an editing
perspective
could be
anywhere from
500-5,000
words.
by Chris Blakeley

16. Narrative Content is of
Varying Length
article taken from http://sethgodin.typepad.com/seths_blog/2011/09/should-the-new-yorker-change.html
article taken from http://www.guardian.co.uk/lifeandstyle/wordofmouth/2011/sep/06/hallucinogenic-foods

17. Narrative content
is found in
magazines,
newspapers, short
and long form
fiction and non-
fiction,
interviews and
many blogs.
by Tracy Hunter

18. Narrative Content is
Found in Newspapers,
Magazines, Blogs, and
Much More

19. Narrative Content can be
the Difference Between
These Two:

20. Stop Believing That
People Don’t Like To
Read
from 37Signals A/B Test results Aug 2011

21. Where Does Narrative
Content Fit In Your
Content Strategy?
! Does your content strategy include:
! A Blog?
! Guest Articles?
! Interviews or Transcripts of Podcasts?
! Opinion Pieces?
! Editorials?
! Articles accompanied by illustrations or
photographs?

22. Good Examples :: The
Atavist

24. Good Examples ::
Palimpsest

26. Good Examples :: NY
Library’s Biblion

27. Good Examples ::
The Economist
article taken from http://www.economist.com/node/21525840

28. Good Examples ::
The Atlantic

29. Good Examples ::
Financial Times

30. Bad Examples :: The Irish
Times
article taken from http://www.irishtimes.com/newspaper/travel/2011/0903/1224303392437.html

31. Bad Examples :: The New
York Times
article taken from http://www.nytimes.com/2011/08/24/world/africa/24libya.html?pagewanted=all

32. What Makes Them Good
or Bad?
! Good Narrative Content is:
! Easy-to-Read
! Favors the reader’s view
! Uncluttered
! Intuitive
! Accessible*
! Bad Narrative Content is:

33. Thinking About the Digital
Reading Experience
image from http://craigmod.com/bibliotype/

35. Maybe Numbers Tell The
Right Story?
graphs from Google Trends - August 2011

36. How Are We
Going to Learn
Designing
Narrative Content
Today?

37. We’ve Defined Narrative
Content
! Now Let’s Take it from
IDEA
to
REALITY
by Scoobymoo

38. Three Steps
! Talk about workflow
! Talk about tailoring
content
! Talk about the
technology
by Hub☺

39. WORKFLOW

40. Let’s Talk About
Workflow
by zemanta

41. What’s the *PROBLEM*
With workflows today?

43. Maybe We (or
our tools) Are
Too Specific?
Does your CMS have one output capability?
Are you trying to get your content in more
places?
Does your site or app look funny in other
browsers or on phones?
Are you missing out on opportunities due
to difficulty sharing content?
by Anders Adermark

44. Maybe Our
Team Is
Stuck In A
Rut?
Are people reluctant to try new
things?
Is being “cutting edge” a risk?
Is management concerned about by PierluigiCo
spending money in unproven
arenas?
Is there a “Let’s see how it goes
when competitor X tries it”

45. Maybe It’s
Something
Else?
Ownership?
Uptime / Tool Access?
Money?
Internal Issues?
What else?

46. First things First

47. Get your strategy right

48. Ideally Workflow Goes
Something Like This:
! Input Content (writing & art)
! Copy Editing
! Previewing
! Fix any errors
! Publish
! Content is live everywhere

49. In Reality It Might Go
More Like This:
! Input Content (writing & art)
! Run spell-check
! Publish
! Content is live everywhere
! THEN:
! Edits made on-the-fly & republished
! One image doesn’t show up on an iPhone 3GS
! Headline image found to be offensive, so has to be

50. Most Of These Problems
Are Due To the Same Two
Things or no
! 1) Little
previewing / testing
! 2) Duplicating instead
of reusing content
[And then of course
there’s
by DonnaGrayson 3) Late Content, but we
can’t solve that today.
Sorry!]

51. Let’s Align Expectations
! Writer / Copyeditor guidelines
! Style, look-and-feel, image, art
! ALERTS
Repeat after me, “Surprises are
bad.”

52. Let’s Set Schedules
! For content delivery
! For new features
! For ability to test
! For feedback turnaround
! Look at upcoming events, book launches, media
coverage
Repeat after me, “Realistic Is
Good.”

53. Let’s Understand Our
Systems
! Talk to developers to understand limitations
(So we can help improve them!)
! When you have a list of asks, talk to them first to see
what is feasible, what’s hard, what is impossible with
current architecture
! Where do things break down?
! When the system is offline?
! When you can’t get on the Internet?
! When upgrades happen?
! When the servers are congested?

54. Tailoring Our Content

55. Tailoring Our Content ::
What Works in this
Format?
! This style works great for:
! publications which need to work on a variety of
platforms/browsers/mobile devices
! Articles and stories where the alignment of the
image and the words is not critical
! Small budgets, Big dreams

56. Tailoring Our Content ::
What Doesn’t Work in this
Format?
! This style is not optimal for :
! publications which are optimised for one device
! publications whose audiences have a homogenous
experience of the content
! publications which require a printed version (and
especially those that are required to look like the
printed version)

57. image from http://all-sorts.biz/

58. Tailoring Our Content ::
Best Practices
! Think about the content length with regard to images
! Don’t pick loads of obscure or heavy fonts - find one or
two that are unique & suit your style
! Remember that not everyone is on a T1 (AKA
superfastinterwebz)
! Experiment with multiple images in various sizes
! Take risks and try new platforms
! The content is the priority: keep it flexible and open

59. by twicepix

60. Technology time

61. Technology Breakdown ::
What Are Some Options?
! Treesaver - an open-source framework for
dynamically laying out articles and images; uses
pagination, not scrolling; web standards-based, so
works everywhere
! Bibliotype - an open-source framework for creating
publications which have easy-to-use menus and look
great everywhere; based on scrolling, not pagination

62. Treesaver
! Treesaver is an HTML5 platform for narrative
experiences—with text and pictures and video
! Treesaver divides content into pages, automatically
adjusting to the size of any screen.

63. image from http://treesaver.net

65. Treesaver Follows A
Pagination Model
1. A pagination, or
card, model is
great for when you
have full control
over the device
2. When your
information
doesn’t need more
room than a single
canvas
3. And when the
interaction model
is linear and the image from http://www.informationarchitects.jp/en/ipad-scroll-or-card/
information
architecture only
has one dimension

66. Bibliotype
! Bibliotype is a (very) simple
HTML, CSS and JS based
library for rapid prototyping
long-form typography and
reading on tablets.
! http://craigmod.com/
bibliotype/demo/
! For more information on
why this works, read Craig’s
A List Apart article here
image from http://craigmod.com/bibliotype/
called “A Simpler Page” :
http://www.alistapart.com/
articles/a-simpler-page

67. Screenshot from “A List Apart”, Illustration by Kevin Cornell

68. image from http://craigmod.com/bibliotype/

69. Bibliotype Follows a
Scrolling Model
The scroll model allows you to easily separate
content and design.
• Content needs to scale over
Scrolling might platforms and screen
different be preferred when:
sizes (e.g., mobile, tablet,
desktop)
1. Layouts need to be
automatically generated (daily
newspapers)
2. Accessibility is an issue
(variable font sizes for sight
impaired people)
3. A complex information image from http://www.informationarchitects.jp/en/ipad-scroll-or-card/
architecture requires chunking
of stacks of content

70. Other Ideas :: The Golden
Grid
image from http://goldengridsystem.com/

71. image from http://goldengridsystem.com/

72. Other Ideas :: Less
Framework
image from http://lessframework.com/

73. image from http://lessframework.com/

74. Martha, my head hurts

75. Martha, I *said* I’m not a
developer!

76. ! When not to use the
Technology Breakdown ::
scroll model
• - Linear informationYou Decide?
How do
architecture
(PowerPoint, novel,
children’s book),
demands the pagination
model.
- Scrolling metaphor
breaks when pages
become too long (as in
20 pages or more) and
the scroll bar becomes
so tiny that it doesn’t
offer a visual clue about
page length anymore. by MagnesMuseum

77. Technology Breakdown ::
How do You Decide?
! When not to use the
pagination model
• -A pagination model
can be difficult if content
has multiple dimensions
or if the information is
not linear.
- As soon as you add
another dimension than
just page forward and
page back, things can get
by mikebaird confusing.

78. Technology Breakdown ::
What Does It Look Like?
image from http://treesaver.net

79. Technology Breakdown ::
What Does It Look Like?
image from http://craigmod.com/bibliotype/

80. Technology Breakdown ::
Why Don’t We Just Build
An App?
! Apps might be better if you need more control over the
look & feel of your content
! Apps might be appropriate if your audience is all on
the same platform.
! For example, your site statistics show that 90% of
your audience uses an iPhone.
! Or if you’re building an internal application for a
company and all employees have Android tablets.
! The number one reason not to build a device-specific
app:
Apps don’t scale.

81. HANDS-ON

82. The CS Forum Times
! We’re going to quickly create a four-story publication
that will then be available on the web.
! We will use articles from CS Forum speakers and any
creative commons licensed images you like.
! The publication will be available afterwards for you to
download and play with or edit or use yourself.

83. The CS Forum Times
http://martharotter.com/csforum/ts

84. Decide on a Theme

85. Here Are Some Article
Suggestions :: Any
Others?
! Blurb from CS book?
! Blog Post from one of keynote speakers
! Article from A List Apart
! Interview with one of CS Forum speakers
! Review from someone’s CS Forum blog post / notes

86. 1) Decide on Copy &
Publication Order (TOC)
! Select the articles you’re planning on including
! Check copyright
! Choose relevant art
! Decide on order of articles, advertisements, etc.

87. DEMO :: Table of contents

88. 2) Drop Content into
! Copy & paste content in between the template
markers Templates
! Add formatting with an HTML WYSIWYG tool, your
CMS, or by hand if you prefer
! I recommend
http://www.coffeecup.com/free-editor/ for
Windows,
http://www.barebones.com/products/bbedit/
index.html for Mac
! Check here for some suggestions:
http://www.webdesignbooth.com/15-really-useful-web-
based-html-editors/

89. DEMO :: Adding Content

90. DEMO :: Editing Content

91. 3) Resize & Add for different
! You might want multiple image sizes
Images
devices. Decide on these ahead of time so that it can be
part of the workflow or automatic in the CMS.
! You might also want to use slightly different images for
the same piece (article 3 example). This is also
something that can be done on your desktop, with an
automated resizer, or in your CMS.
! Resizing Tools:
! http://www.gimp.org/ (free, Windows & Mac)
! http://www.pragmaticworld.com/image_resizer (free,
browser-based)
! The usual suspects: Photoshop, Elements, Windows

92. DEMO :: Resizing Images

93. DEMO ::
Two Different Images

94. 4) Upload And Check
! Use a live preview in a web browser if it’s already on
the server
! If it’s only on your computer, use a program like
XAMPP to access your content via
http://localhost/MYWEBAPP
! When it’s live and public, check it from multiple
browsers, tablets and phones if you can (and
especially if the style, images, or other items have
changed from their norm)

95. Workshop Resources
! All content used today lives on
http://martharotter.com/csforum
! Live Treesaver Demo is at
http://martharotter.com/csforum/ts
! Live Bibliotype Demo is at
http://martharotter.com/csforum/bib
! Materials for you to download and try are at
http://martharotter.com/csforum/workshop.zip

96. Content Resources
(AKA,readable Learn More)
! Reading about
Go content, publishing on the
web, flexible design
! Khoi Vinh’s blog (formerly NY Times design director) :: http://www.subtraction.com/
! iA blog (consultants, creators of annual Web Trends map) ::
http://www.informationarchitects.jp/en/articles/
! Craig Mod (Flipboard) :: http://craigmod.com/journal/
! Ethan Marcotte (author of Responsive Web Design) ::
http://www.alistapart.com/authors/m/emarcotte
! Martha Rotter (me!) :: http://martharotter.com/blog
! Treesaver
! http://treesaver.net/ (site for publishers)
! http://treesaverjs.com/ (site for developers/designers)

97. Content Resources cont.
! Bibliotype
! http://craigmod.com/bibliotype/
! http://www.alistapart.com/articles/a-simpler-page/
! http://code.google.com/p/bibliotype-wp/
! The Golden Grid System
! http://goldengridsystem.com/
! Less Framework 4
! http://lessframework.com/
! http://mashable.com/2011/03/17/less-framework-guid/