Designing Narrative content

Martha Rotter :: @martharotter

cartoon courtesy of xkcd.com

by  Dustin Diaz 

by  photohome_uk 

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

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

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-storming or building content strategy for long-form content

by  Narisa 

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 with developers.

image courtesy of thinkgeek.com

So Just What is Narrative content?

Narrative content is

content that describes a story, an idea, a

discussion

by  vasta 

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/

Narrative content is not the same as identifying

text, instructions on a web page,

labels or calls to action.

Narrative Content is NOT descriptive text or calls-to-

action

Not Narrative Content

cartoon copyright theoatmeal.com

Not Narrative Content

cartoon copyright theoatmeal.com

Narrative content from an editing perspective could be

anywhere from 500-5,000 words.

  by  Chris Blakeley 

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

Narrative content is found in magazines,

newspapers, short and long form

fiction and non-fiction,

interviews and many blogs.

 by  Tracy Hunter 

Narrative Content is Found in Newspapers, Magazines, Blogs, and

Much More

Narrative Content can be the Difference Between

These Two:

Stop Believing That People Don’t Like To

Read

from 37Signals A/B Test results Aug 2011

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?

Good Examples :: The Atavist

Good Examples :: Palimpsest

Good Examples :: NY Library’s Biblion

Good Examples :: The Economist

article taken from http://www.economist.com/node/21525840

Good Examples :: The Atlantic

Good Examples :: Financial Times

Bad Examples :: The Irish Times

article taken from http://www.irishtimes.com/newspaper/travel/2011/0903/1224303392437.html

Bad Examples :: The New York Times

article taken from http://www.nytimes.com/2011/08/24/world/africa/24libya.html?pagewanted=all

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:

!   Obstructed

Thinking About the Digital Reading Experience

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

Maybe Numbers Tell The Right Story?

graphs from Google Trends - August 2011

How Are We Going to Learn

Designing Narrative Content

Today?

We’ve Defined Narrative Content

!  Now Let’s Take it from IDEA to REALITY

  by  Scoobymoo 

Three Steps

!   Talk about workflow

!   Talk about tailoring content

!   Talk about the technology

by  Hub☺ 

WORKFLOW

Let’s Talk About Workflow

 by  zemanta 

What’s the *PROBLEM* With workflows today?

Maybe We (or our tools) Are Too Specific?

 by  Anders Adermark 

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?

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 spending money in unproven arenas?

Is there a “Let’s see how it goes when competitor X tries it”

feeling?

  by  PierluigiCo 

Maybe It’s Something

Else? Ownership? Uptime / Tool Access? Money? Internal Issues? What else?

First things First

Get your strategy right

Ideally Workflow Goes Something Like This:

!   Input Content (writing & art)

!   Copy Editing

!   Previewing

!   Fix any errors

!   Publish

!   Content is live everywhere

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 replaced quickly

Most Of These Problems Are Due To the Same Two

Things !  1) Little or no previewing / testing

!  2) Duplicating instead of reusing content

[And then of course there’s 3) Late Content, but we can’t solve that today. Sorry!]

by  DonnaGrayson 

Let’s Align Expectations

!   Writer / Copyeditor guidelines

!   Style, look-and-feel, image, art

!   ALERTS

Repeat after me, “Surprises are bad.”

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.”

Let’s Understand Our Systems !   Talk to developers to understand limitations

!   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?

(So we can help improve them!)

Tailoring Our Content

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

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)

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

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

  by  twicepix 

Technology time

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

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.

image from http://treesaver.net

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 information architecture only has one dimension

image from http://www.informationarchitects.jp/en/ipad-scroll-or-card/

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 called “A Simpler Page” : http://www.alistapart.com/articles/a-simpler-page

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

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

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

Bibliotype Follows a Scrolling Model

•  Content needs to scale over different platforms and screen 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 architecture requires chunking of stacks of content

The scroll model allows you to easily separate content and design.

Scrolling might be preferred when:

image from http://www.informationarchitects.jp/en/ipad-scroll-or-card/

Other Ideas :: The Golden Grid

image from http://goldengridsystem.com/

image from http://goldengridsystem.com/

Other Ideas :: Less Framework

image from http://lessframework.com/

image from http://lessframework.com/

Martha, my head hurts

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

Technology Breakdown :: How do You Decide?

!  When not to use the scroll model

•  - Linear information 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. Imagine trying to scroll

by  MagnesMuseum 

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 confusing. by  mikebaird 

Technology Breakdown :: What Does It Look Like?

image from http://treesaver.net

Technology Breakdown :: What Does It Look Like?

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

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.

HANDS-ON

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.

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

Decide on a Theme

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

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.

DEMO :: Table of contents

2) Drop Content into Templates !   Copy & paste content in between the template

markers

!   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/

!   Save, save, save

DEMO :: Adding Content

DEMO :: Editing Content

3) Resize & Add Images !   You might want multiple image sizes for different

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 Paint, Acorn, Pixelmator, etc.

DEMO :: Resizing Images

DEMO :: Two Different Images

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)

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

Content Resources (AKA, Go Learn More)

!   Reading about readable 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)

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/