0
ADAPTING OURSELVES TO    ADAPTIVE CONTENTDIWD 2011@karenmcgrane#DIWD
RESPONSIVE DESIGNADAPTIVE                    2
“Fragmenting our content across different“device-optimized” experiences is a losingproposition, or at least an unsustainab...
STRUCTURED CONTENTADAPTIVE                     4
“You can’t afford to create a piece of content forany one platform.Instead of crafting a website, you have to putmore effo...
6
7
8
10
content                  content   contentcontent    content     content         content                                  ...
http://www.flickr.com/photos/filamentgroup/5149016958/
FRAGMENTED CMS TOOLSFRAGMENTED INTERNAL PROCESSESFRAGMENTED DEVICES + PLATFORMS                                 13
A TALE OF TWO PUBLISHERS                           14
15
We’re about to usher in a golden age       of PDFs on the iPad.                        Paul Ford, Ftrain.com              ...
“Existing art and production staffers from the printside would be responsible for making two iPadlayouts (one in portrait ...
All I see is an  entire organization screaming,“WE WANT IT TO BE THE EIGHTIES          GODDAMMIT.”        Condé Nast Is Ex...
COPE: Create Once, Publish Everywhere   23
CONTENTPROVIDERSMUSICPARTNERS    NPR, Open Content and API’s, O’Reilly Oscon   24
NPR.ORG                NPR Digital Media Examples          NPR, OpenCOPE and API’s, O’Reilly Oscon                of Conte...
NPR.ORGPLAYER          NPR Digital Media Examples          of COPE                      26
NPR NEWSIPHONE APP             27
NPR MOBILEWEB SITE             28
NPR ADDICTIPHONE APPProduced by a public user,based entirely on the NPR API                                29
NPR ON THEPUBLIC RADIOPLAYER               30
NPR ONWBUR         31
NPR ONMPR         32
NPR ONiGOOGLE          33
NPR INiTUNES         34
NPR’SCMS        35
NPR’S API            36
BUSINESS VALUE?                  37
31,000                           2010 IPAD ISSUE SALES         22,000                  13,000                            1...
NPR PAGE VIEWS   88M  43M                       39
“Over the last year, NPR’s total page view growth hasincreased by more than 80%. How did we get thatmuch growth? Our API.T...
WHY ARE NEWSORGANIZATIONSTHE INNOVATORS?                  41
MastheadHed: Headline, heading, head or title ofa story, rarely a complete sentence.Dek: Deck, blurb, or article teaser or...
It’s scary to think about your packagedevolved into different content elements.It takes imagination and understanding to  ...
THE FUTURE OFADAPTIVE CONTENT                   44
MOBILE                       WEB       MOBILE           WEBSITE                                  APPS  SOCIAL             ...
REUSABLE CONTENT STORE                         46
Intelligent                 Flexible              Structured  Nimble                        Agile                 Adaptive...
WHAT’S STOPPING US?                      48
“BUT WE’VE ALWAYS RECYCLEDTHIS WAY!”                             49
Thinking about where content will “live”    on a “web page” is pretty 1999.                   Lisa Welchman, @lwelchman   50
MOBILE                      WEB       MOBILE           WEBSITE                                 APPS  SOCIAL               ...
MOBILE                      WEB       MOBILE           WEBSITE                                 APPS  SOCIAL               ...
MOBILE                      WEB       MOBILE           WEBSITE                                 APPS  SOCIAL               ...
THE MARRIAGE OFCONTENT AND FORM                   54
“Traditional publishing and content managementsystems bind content to display and deliverymechanisms, which forces a recyc...
API               OWLXML                                                             RDFEXIF                              ...
IT’S NOT A TECHNOLOGY PROBLEM.IT’S A STRATEGY PROBLEM.WHICH MEANS IT’S A PEOPLEPROBLEM.                             57
WHAT DO WE NEEDTO GET THERE?                  58
BETTER CMS WORKFLOWWRITE FOR THE CHUNK, NOT THEPAGEDEMYSTIFY METADATA                           59
BETTER CMS WORKFLOW                      60
CMS IS THE ENTERPRISESOFTWARE THAT UX FORGOT                          62
63
64
65
CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPIN...
“The happier people are, the better their contentwill be, the more content they’ll produce.Digital newsrooms have moved fr...
“Beautiful software, even for back-end users, isbecoming an expectation.We’re moving in this direction because we nowunder...
WRITE FOR THE CHUNK,NOT THE PAGE                       69
BLOBS vs. CHUNKS                   71
NPR’SCMS        72
Page Title                 Example: Widget-o-Rama: FancyWidget No. 5PRODUCT DESCRIPTION—ANSWERS THE QUESTION “WHAT IS IT?”...
Display          StylesContent                 InputModel               Templates                                74
75
76
TRUNCATION IS NOT ACONTENT STRATEGY                      78
DEMYSTIFYING METADATA                        79
METADATA PROGRAMMATICALLYBUILDS PAGES                        80
Metadata is the new art direction.                  Ethan Resnick, @studip101   81
METADATA SUPPORTSPERSONALIZED CONTENT                       82
ABC Co.
METADATA HELPS PRIORITIZECONTENT                            84
85
USE MOBILE AS A WEDGE.                         86
The more structure you put into content       the freer it will become.                   Rachel Lovinger, @rlovinger   87
SEPARATION OF CONTENTFROM DISPLAY.(FOR REAL THIS TIME.)                        88
This approach of using structured content  removes much of the requirement for       formatting tools in the CMS.      Rac...
DESIGN WITH AND FORSTRUCTURED CONTENT.                      90
I’ve never seen anyone regret havingflexibility in how they deploy content.                            Jeff Eaton, @eaton ...
THANKS!ROCK ON!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Adapting ourselves to adaptive content
Upcoming SlideShare
Loading in...5
×

Adapting ourselves to adaptive content

6,046

Published on

For years, we've been telling designers: the web is not print. You can't have pixel-perfect layouts. You can't determine how your site will look in every browser, on every platform, on every device. We taught designers to cede control, think in systems, embrace web standards. So why are we still letting content authors plan for where their content will "live" on a web page? Why do we give in when they demand a WYSIWYG text editor that works "just like Microsoft Word"? Worst of all, why do we waste time and money creating and recreating content instead of planning for content reuse? What worked for the desktop web simply won't work for mobile. As our design and development processes evolve, our content workflow has to keep up. Karen will talk about how we have to adapt to creating more flexible content.

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,046
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
111
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "Adapting ourselves to adaptive content"

  1. 1. ADAPTING OURSELVES TO ADAPTIVE CONTENTDIWD 2011@karenmcgrane#DIWD
  2. 2. RESPONSIVE DESIGNADAPTIVE 2
  3. 3. “Fragmenting our content across different“device-optimized” experiences is a losingproposition, or at least an unsustainable one. —Ethan Marcotte, Responsive Web Design 3
  4. 4. STRUCTURED CONTENTADAPTIVE 4
  5. 5. “You can’t afford to create a piece of content forany one platform.Instead of crafting a website, you have to putmore effort into crafting the description of thedifferent bits of an asset, so they can be reusedmore effectively, so they can deliver more value. —Nic Newman, BBC Nimble Report, http://nimble.razorfish.com 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 10
  10. 10. content content contentcontent content content content 11
  11. 11. http://www.flickr.com/photos/filamentgroup/5149016958/
  12. 12. FRAGMENTED CMS TOOLSFRAGMENTED INTERNAL PROCESSESFRAGMENTED DEVICES + PLATFORMS 13
  13. 13. A TALE OF TWO PUBLISHERS 14
  14. 14. 15
  15. 15. We’re about to usher in a golden age of PDFs on the iPad. Paul Ford, Ftrain.com 20
  16. 16. “Existing art and production staffers from the printside would be responsible for making two iPadlayouts (one in portrait and one in landscape) onAdobe’s platform.—Condé Nast Is Experiencing Technical Difficulties http://www.observer.com/2011/07/scott-dadich-ipad-conde-nast/?show=all 21
  17. 17. All I see is an entire organization screaming,“WE WANT IT TO BE THE EIGHTIES GODDAMMIT.” Condé Nast Is Experiencing Technical Difficulties 22
  18. 18. COPE: Create Once, Publish Everywhere 23
  19. 19. CONTENTPROVIDERSMUSICPARTNERS NPR, Open Content and API’s, O’Reilly Oscon 24
  20. 20. NPR.ORG NPR Digital Media Examples NPR, OpenCOPE and API’s, O’Reilly Oscon of Content 25
  21. 21. NPR.ORGPLAYER NPR Digital Media Examples of COPE 26
  22. 22. NPR NEWSIPHONE APP 27
  23. 23. NPR MOBILEWEB SITE 28
  24. 24. NPR ADDICTIPHONE APPProduced by a public user,based entirely on the NPR API 29
  25. 25. NPR ON THEPUBLIC RADIOPLAYER 30
  26. 26. NPR ONWBUR 31
  27. 27. NPR ONMPR 32
  28. 28. NPR ONiGOOGLE 33
  29. 29. NPR INiTUNES 34
  30. 30. NPR’SCMS 35
  31. 31. NPR’S API 36
  32. 32. BUSINESS VALUE? 37
  33. 33. 31,000 2010 IPAD ISSUE SALES 22,000 13,000 11,000 10,500 8,700 4,300 2,775Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov. 38
  34. 34. NPR PAGE VIEWS 88M 43M 39
  35. 35. “Over the last year, NPR’s total page view growth hasincreased by more than 80%. How did we get thatmuch growth? Our API.The biggest impact that the API has made, however, iswith our mobile strategy. The API has enabled NPRproduct owners to build specialized apps on a widerange of platforms and devices, liberating them frombeing dependent on custom development to accessthe content. Through this process, we built our iPhoneand iPad apps, mobile sites, open sourced Android appand HTML5 site, some of which were turned around ina matter of weeks! —Zach Brand, Senior Director Technology, NPR 40
  36. 36. WHY ARE NEWSORGANIZATIONSTHE INNOVATORS? 41
  37. 37. MastheadHed: Headline, heading, head or title ofa story, rarely a complete sentence.Dek: Deck, blurb, or article teaser or sub-headline. Aphrase or two between the headline and the body ofthe article that explains what the story is about.•Nut graf Lede: Lead, as in leading paragraph, usually the first sentence, or in some cases the first two Captions are photo headlines•Nutshell paragraph sentences, ideally 20-25 words in length. An Cutlines are the words (under the effective lead is a brief, sharp statement of the caption, if there is one) describing the•Summarizes the storys essential facts. photograph or illustration. storys content•Often bullet- Lorem ipsum dolor sit amet, consectetuer pointed adipiscing elit, sed diam nonummy nibh euismod•Sometimes set tincidunt ut laoreet dolore magna aliquam erat off in a box volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 42
  38. 38. It’s scary to think about your packagedevolved into different content elements.It takes imagination and understanding to take that apart. And courage. Sarah Chubb Sauvayre, Condé Nast 43
  39. 39. THE FUTURE OFADAPTIVE CONTENT 44
  40. 40. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET 45
  41. 41. REUSABLE CONTENT STORE 46
  42. 42. Intelligent Flexible Structured Nimble Agile Adaptive Atomized Semantic 47
  43. 43. WHAT’S STOPPING US? 48
  44. 44. “BUT WE’VE ALWAYS RECYCLEDTHIS WAY!” 49
  45. 45. Thinking about where content will “live” on a “web page” is pretty 1999. Lisa Welchman, @lwelchman 50
  46. 46. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS PRINTMICROSITES PRINT BLOGS EMAIL INTRANET 51
  47. 47. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS WEBMICROSITES PRINT BLOGS EMAIL INTRANET 52
  48. 48. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS MOBILEMICROSITES PRINT BLOGS EMAIL INTRANET 53
  49. 49. THE MARRIAGE OFCONTENT AND FORM 54
  50. 50. “Traditional publishing and content managementsystems bind content to display and deliverymechanisms, which forces a recycling approach formulti-platform publishing.A semantic content publishing system, on theother hand, creates well-defined chunks of contentthat can be combined in whatever way is mostappropriate for a particular platform. All displayissues are addressed by delivery applications,rather than by a content management systemearlier in the process. —Dan Willis http://dswillis.com/uxcrank/?p=378 55
  51. 51. API OWLXML RDFEXIF DITA XMP http://www.flickr.com/photos/97867906@N00/5913915289/ 56
  52. 52. IT’S NOT A TECHNOLOGY PROBLEM.IT’S A STRATEGY PROBLEM.WHICH MEANS IT’S A PEOPLEPROBLEM. 57
  53. 53. WHAT DO WE NEEDTO GET THERE? 58
  54. 54. BETTER CMS WORKFLOWWRITE FOR THE CHUNK, NOT THEPAGEDEMYSTIFY METADATA 59
  55. 55. BETTER CMS WORKFLOW 60
  56. 56. CMS IS THE ENTERPRISESOFTWARE THAT UX FORGOT 62
  57. 57. 63
  58. 58. 64
  59. 59. 65
  60. 60. CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA 66
  61. 61. “The happier people are, the better their contentwill be, the more content they’ll produce.Digital newsrooms have moved from shoveling tocreating. Those two tasks require very differentenvironments. —Patrick Cooper, NPR http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/ 67
  62. 62. “Beautiful software, even for back-end users, isbecoming an expectation.We’re moving in this direction because we nowunderstand that better content managementsystems foster better content. —Matt Thompson http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/ 68
  63. 63. WRITE FOR THE CHUNK,NOT THE PAGE 69
  64. 64. BLOBS vs. CHUNKS 71
  65. 65. NPR’SCMS 72
  66. 66. Page Title Example: Widget-o-Rama: FancyWidget No. 5PRODUCT DESCRIPTION—ANSWERS THE QUESTION “WHAT IS IT?”Product NameProduct LineShort Guidelines: Two sentences. The product description should answer the questionsDescription “What is it?” “Who is it for?” and “What does it do?” The description must include at least one real, actual noun besides the name of the Example description: Widget-o-Rama’s FancyWidget product. No. 5 is an inverse reactive current supply mechanism used for operating nofer-trunnions and reducing sinusoidal depleneration when used in conjunction with a drawn reciprocating dingle arm.PRODUCT BENEFITS—ANSWERS THE QUESTION “WHY SHOULD I BUY IT?”Benefit/Feature Guidelines: Benefits are about the customerPairs and answer the question, “What will this do for me?” Features are about the product and answer the question, “How does the product work?” On the Widget-o-Rama website, they should come in pairs consisting of a very Examples: specific benefit, followed by the feature or Reduces maintenance costs by up to 50% by features that make it possible. Use concrete replacing delicate gremlin studs with a robust spiral terms whenever you can. decommutator and eliminating the need for drammock oil after phase detractors are remissed. Prevents side fumbling via the addition of pentametric fan consisting of six hydrocoptic marzelvanes fitted to the ambifacient lunar vaneshaft. http://www.alistapart.com/articles/content-templates-to-the-rescue/ 73
  67. 67. Display StylesContent InputModel Templates 74
  68. 68. 75
  69. 69. 76
  70. 70. TRUNCATION IS NOT ACONTENT STRATEGY 78
  71. 71. DEMYSTIFYING METADATA 79
  72. 72. METADATA PROGRAMMATICALLYBUILDS PAGES 80
  73. 73. Metadata is the new art direction. Ethan Resnick, @studip101 81
  74. 74. METADATA SUPPORTSPERSONALIZED CONTENT 82
  75. 75. ABC Co.
  76. 76. METADATA HELPS PRIORITIZECONTENT 84
  77. 77. 85
  78. 78. USE MOBILE AS A WEDGE. 86
  79. 79. The more structure you put into content the freer it will become. Rachel Lovinger, @rlovinger 87
  80. 80. SEPARATION OF CONTENTFROM DISPLAY.(FOR REAL THIS TIME.) 88
  81. 81. This approach of using structured content removes much of the requirement for formatting tools in the CMS. Rachel Andrew, Your WYSIWYG Editor Sucks 89
  82. 82. DESIGN WITH AND FORSTRUCTURED CONTENT. 90
  83. 83. I’ve never seen anyone regret havingflexibility in how they deploy content. Jeff Eaton, @eaton 91
  84. 84. THANKS!ROCK ON!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149
  1. A particular slide catching your eye?

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

×