Designing Narrative     content     Martha Rotter :: @martharotter                                      cartoon courtesy o...
by  Dustin Diaz 
by  photohome_uk 
Introductions :: Who’s           Here?!  Please share: !   Your name !   Your current role / focus !   What you’re working...
What We Will Cover In            This Workshop!   This workshop will :: !   Show you the difference between  effective and...
This Workshop Is!   INTERACTIVE!   Focused more on  magazines, newspapers,  blogs and long-form  content than calls-to-  a...
What This Workshop Is              Not!   This Workshop is Not ::  !   Going to teach you how to write    sexy content  ! ...
So Just What isNarrative content?
Narrative              content is             content that             describes a               story, an                ...
Narrative Content          Describes a Story, an           Idea, a Discussion!   [screen grabs of The New Yorker, Wired, G...
Narrative content is not the same  as identifyingtext, instructions on a web page,labels or calls to      action.
Narrative Content is NOTdescriptive text or calls-to-          action
NotNarrativeContent            cartoon copyright theoatmeal.com
NotNarrativeContent            cartoon copyright theoatmeal.com
Narrative                         content from                          an editing                          perspective   ...
Narrative Content is of                     Varying Lengtharticle taken from http://sethgodin.typepad.com/seths_blog/2011/...
Narrative content                        is found in                        magazines,                     newspapers, sho...
Narrative Content isFound in Newspapers,Magazines, Blogs, and     Much More
Narrative Content can be the Difference Between       These Two:
Stop Believing ThatPeople 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 B...
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/1224...
Bad Examples :: The New      York Times    article taken from http://www.nytimes.com/2011/08/24/world/africa/24libya.html?...
What Makes Them Good         or Bad?!   Good Narrative Content is:  !   Easy-to-Read  !   Favors the reader’s view  !   Un...
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   DesigningNarrative Content     Today?
We’ve Defined Narrative          Content!  Now Let’s Take it from IDEA to REALITY                              by  Scoobym...
Three Steps               !   Talk about workflow               !   Talk about tailoring                 content          ...
WORKFLOW
Let’s Talk About    Workflow                    by  zemanta 
What’s the *PROBLEM*With workflows today?
Maybe We (orour tools) AreToo Specific?Does your CMS have one output capability?	Are you trying to get your content in mor...
Maybe Our    Team Is   Stuck In A      Rut?Are people reluctant to try newthings?	Is being “cutting edge” a risk?	Is manag...
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 e...
In Reality It Might Go         More Like This:!   Input Content (writing & art)!   Run spell-check!   Publish!   Content i...
Most Of These ProblemsAre Due To the Same Two         Things or no             !   1) Little                              ...
Let’s Align Expectations!   Writer / Copyeditor guidelines!   Style, look-and-feel, image, art!   ALERTS     Repeat after ...
Let’s Set Schedules!   For content delivery!   For new features!   For ability to test!   For feedback turnaround!   Look ...
Let’s Understand Our                      Systems!   Talk to developers to understand limitations                 (So we c...
Tailoring Our Content
Tailoring Our Content ::     What Works in this           Format?!   This style works great for:  !   publications which n...
Tailoring Our Content ::What Doesn’t Work in this         Format?!   This style is not optimal for :  !   publications whi...
image from http://all-sorts.biz/
Tailoring Our Content ::       Best Practices!   Think about the content length with regard to images!   Don’t pick loads ...
  by  twicepix 
Technology time
Technology Breakdown ::What Are Some Options?!   Treesaver - an open-source framework for dynamically laying out articles ...
Treesaver!   Treesaver is an HTML5 platform for narrative  experiences—with text and pictures and video!   Treesaver divid...
image from http://treesaver.net
Treesaver Follows A           Pagination Model1. A pagination, or   card, model is   great for when you   have full contro...
Bibliotype!   Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and ...
Screenshot from “A List Apart”, Illustration by Kevin Cornell
image from http://craigmod.com/bibliotype/
Bibliotype Follows a             Scrolling ModelThe scroll model allows you to easily separatecontent and design.  •  Cont...
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!
!   When not to use the Technology Breakdown ::  scroll model•  - Linear informationYou Decide?      How do  architecture ...
Technology Breakdown ::  How do You Decide?                         !   When not to use the                              p...
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 co...
HANDS-ON
The CS Forum Times!   We’re going to quickly create a four-story publication  that will then be available on the web.!   W...
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 sp...
1) Decide on Copy &  Publication Order (TOC)!   Select the articles you’re planning on including!   Check copyright!   Cho...
DEMO :: Table of contents
2) Drop Content into!   Copy & paste content in between the template    markers       Templates!   Add formatting with an ...
DEMO :: Adding Content
DEMO :: Editing Content
3) Resize & Add for different!   You might want multiple image sizes                                        Images  device...
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...
Workshop Resources!   All content used today lives on  http://martharotter.com/csforum!   Live Treesaver Demo is at  http:...
Content Resources      (AKA,readable Learn More)!   Reading about                  Go content, publishing on the  web, fle...
Content Resources cont.!   Bibliotype  !    http://craigmod.com/bibliotype/  !    http://www.alistapart.com/articles/a-sim...
Designing Narrative Content Workshop
Designing Narrative Content Workshop
Designing Narrative Content Workshop
Designing Narrative Content Workshop
Designing Narrative Content Workshop
Upcoming SlideShare
Loading in...5
×

Designing Narrative Content Workshop

2,389

Published on

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.

Published in: Technology, Education

Designing Narrative Content Workshop

  1. 1. Designing Narrative content Martha Rotter :: @martharotter cartoon courtesy of xkcd.com
  2. 2. by  Dustin Diaz 
  3. 3. by  photohome_uk 
  4. 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. 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. 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. 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. 8. So Just What isNarrative content?
  9. 9. Narrative content is content that describes a story, an idea, a discussionby  vasta 
  10. 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. 11. Narrative content is not the same as identifyingtext, instructions on a web page,labels or calls to action.
  12. 12. Narrative Content is NOTdescriptive text or calls-to- action
  13. 13. NotNarrativeContent cartoon copyright theoatmeal.com
  14. 14. NotNarrativeContent cartoon copyright theoatmeal.com
  15. 15. Narrative content from an editing perspective could be anywhere from 500-5,000 words.  by  Chris Blakeley 
  16. 16. Narrative Content is of Varying Lengtharticle 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. 17. Narrative content is found in magazines, newspapers, short and long form fiction and non- fiction, interviews and many blogs. by  Tracy Hunter 
  18. 18. Narrative Content isFound in Newspapers,Magazines, Blogs, and Much More
  19. 19. Narrative Content can be the Difference Between These Two:
  20. 20. Stop Believing ThatPeople Don’t Like To Read from 37Signals A/B Test results Aug 2011
  21. 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. 22. Good Examples :: The Atavist
  23. 23. Good Examples :: Palimpsest
  24. 24. Good Examples :: NY Library’s Biblion
  25. 25. Good Examples :: The Economist article taken from http://www.economist.com/node/21525840
  26. 26. Good Examples :: The Atlantic
  27. 27. Good Examples :: Financial Times
  28. 28. Bad Examples :: The Irish Times article taken from http://www.irishtimes.com/newspaper/travel/2011/0903/1224303392437.html
  29. 29. Bad Examples :: The New York Times article taken from http://www.nytimes.com/2011/08/24/world/africa/24libya.html?pagewanted=all
  30. 30. 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:
  31. 31. Thinking About the Digital Reading Experience image from http://craigmod.com/bibliotype/
  32. 32. Maybe Numbers Tell The Right Story? graphs from Google Trends - August 2011
  33. 33. How Are We Going to Learn DesigningNarrative Content Today?
  34. 34. We’ve Defined Narrative Content!  Now Let’s Take it from IDEA to REALITY   by  Scoobymoo 
  35. 35. Three Steps !   Talk about workflow !   Talk about tailoring content !   Talk about the technology by  Hub☺ 
  36. 36. WORKFLOW
  37. 37. Let’s Talk About Workflow  by  zemanta 
  38. 38. What’s the *PROBLEM*With workflows today?
  39. 39. Maybe We (orour tools) AreToo Specific?Does your CMS have one output capability? Are you trying to get your content in moreplaces? Does your site or app look funny in otherbrowsers or on phones? Are you missing out on opportunities dueto difficulty sharing content?  by  Anders Adermark 
  40. 40. Maybe Our Team Is Stuck In A Rut?Are people reluctant to try newthings? Is being “cutting edge” a risk? Is management concerned about   by  PierluigiCo spending money in unprovenarenas? Is there a “Let’s see how it goeswhen competitor X tries it”
  41. 41. Maybe It’s Something Else?Ownership?Uptime / Tool Access?Money?Internal Issues?What else?
  42. 42. First things First
  43. 43. Get your strategy right
  44. 44. Ideally Workflow Goes Something Like This:!   Input Content (writing & art)!   Copy Editing!   Previewing!   Fix any errors!   Publish!   Content is live everywhere
  45. 45. 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
  46. 46. Most Of These ProblemsAre 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!]
  47. 47. Let’s Align Expectations!   Writer / Copyeditor guidelines!   Style, look-and-feel, image, art!   ALERTS Repeat after me, “Surprises are bad.”
  48. 48. 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.”
  49. 49. 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?
  50. 50. Tailoring Our Content
  51. 51. 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
  52. 52. 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)
  53. 53. image from http://all-sorts.biz/
  54. 54. 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
  55. 55.   by  twicepix 
  56. 56. Technology time
  57. 57. 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
  58. 58. 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.
  59. 59. image from http://treesaver.net
  60. 60. Treesaver Follows A Pagination Model1. A pagination, or card, model is great for when you have full control over the device2. When your information doesn’t need more room than a single canvas3. 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
  61. 61. 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
  62. 62. Screenshot from “A List Apart”, Illustration by Kevin Cornell
  63. 63. image from http://craigmod.com/bibliotype/
  64. 64. Bibliotype Follows a Scrolling ModelThe scroll model allows you to easily separatecontent and design. •  Content needs to scale overScrolling 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
  65. 65. Other Ideas :: The Golden Grid image from http://goldengridsystem.com/
  66. 66. image from http://goldengridsystem.com/
  67. 67. Other Ideas :: Less Framework image from http://lessframework.com/
  68. 68. image from http://lessframework.com/
  69. 69. Martha, my head hurts
  70. 70. Martha, I *said* I’m not a developer!
  71. 71. !   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 
  72. 72. 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.
  73. 73. Technology Breakdown :: What Does It Look Like? image from http://treesaver.net
  74. 74. Technology Breakdown :: What Does It Look Like? image from http://craigmod.com/bibliotype/
  75. 75. 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.
  76. 76. HANDS-ON
  77. 77. 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.
  78. 78. The CS Forum Times http://martharotter.com/csforum/ts
  79. 79. Decide on a Theme
  80. 80. 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
  81. 81. 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.
  82. 82. DEMO :: Table of contents
  83. 83. 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/
  84. 84. DEMO :: Adding Content
  85. 85. DEMO :: Editing Content
  86. 86. 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
  87. 87. DEMO :: Resizing Images
  88. 88. DEMO ::Two Different Images
  89. 89. 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)
  90. 90. 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
  91. 91. 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)
  92. 92. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×