Post on 11-Jan-2017
ADAPTING OURSELVES TO ADAPTIVE CONTENT
DIWD 2011@karenmcgrane#DIWD
RESPONSIVE DESIGN
2
ADAPTIVE
“Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one.
—Ethan Marcotte, Responsive Web Design
3
STRUCTURED CONTENT
4
ADAPTIVE
“You can’t afford to create a piece of content for any one platform.
Instead of crafting a website, you have to put more effort into crafting the description of the different bits of an asset, so they can be reused more effectively, so they can deliver more value.
—Nic Newman, BBC
5Nimble Report, http://nimble.razorfish.com
6
7
8
10
11
content
content
content
content
content
content
content
http://www.flickr.com/photos/filamentgroup/5149016958/
13
FRAGMENTED CMS TOOLSFRAGMENTED INTERNAL PROCESSESFRAGMENTED DEVICES + PLATFORMS
A TALE OF TWO PUBLISHERS
14
15
We’re about to usher in a golden age of PDFs on the iPad.
20Paul Ford, Ftrain.com
“Existing art and production staffers from the print side would be responsible for making two iPad layouts (one in portrait and one in landscape) on Adobe’s platform.—Condé Nast Is Experiencing Technical Difficulties
21http://www.observer.com/2011/07/scott-dadich-ipad-conde-nast/?show=all
All I see is an entire organization screaming,
“WE WANT IT TO BE THE EIGHTIES GODDAMMIT.”
22Condé Nast Is Experiencing Technical Difficulties
23COPE: Create Once, Publish Everywhere
CONTENT
PROVIDERS
MUSIC
PARTNERS
NPR, Open Content and API’s, O’Reilly Oscon 24
NPR.ORG
NPR Digital Media Examples of COPE 25NPR, Open Content and API’s, O’Reilly Oscon
NPR.ORG PLAYER
26NPR Digital Media Examples of COPE
NPR NEWS IPHONE APP
27
NPR MOBILE WEB SITE
28
NPR ADDICT IPHONE APP
29
Produced by a public user, based entirely on the NPR API
NPR ON THE PUBLIC RADIO PLAYER
30
NPR ON WBUR
31
NPR ON MPR
32
NPR ON iGOOGLE
33
NPR IN iTUNES
34
NPR’S CMS
35
NPR’S API
36
BUSINESS VALUE?
37
38
Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov.
2,775
8,700
11,000
22,000
4,300
10,500
13,000
31,000
2010 IPAD ISSUE SALES
39
NPR PAGE VIEWS
43M
88M
“Over the last year, NPR’s total page view growth has increased by more than 80%. How did we get that much growth? Our API.
The biggest impact that the API has made, however, is with our mobile strategy. The API has enabled NPR product owners to build specialized apps on a wide range of platforms and devices, liberating them from being dependent on custom development to access the content. Through this process, we built our iPhone and iPad apps, mobile sites, open sourced Android app and HTML5 site, some of which were turned around in a matter of weeks!
—Zach Brand, Senior Director Technology, NPR40
41
WHY ARE NEWS ORGANIZATIONS THE INNOVATORS?
42
Masthead
Hed: Headline, heading, head or title of a story, rarely a complete sentence.Dek: Deck, blurb, or article teaser or sub-headline. A phrase or two between the headline and the body of the article that explains what the story is about.
Lede: Lead, as in leading paragraph, usually the first sentence, or in some cases the first two sentences, ideally 20-25 words in length. An effective lead is a brief, sharp statement of the story's essential facts.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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.
•Nut graf
•Nutshell paragraph
•Summarizes the story's content
•Often bullet-pointed
•Sometimes set off in a box
Captions are photo headlinesCutlines are the words (under the caption, if there is one) describing the photograph or illustration.
43
It’s scary to think about your package devolved into different content elements. It takes imagination and understanding to
take that apart. And courage.
Sarah Chubb Sauvayre, Condé Nast
THE FUTURE OF ADAPTIVE CONTENT
44
45
CONTENT
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
REUSABLE CONTENT STORE
46
SemanticAtomized
47
Intelligent
Adaptive
Nimble Agile
Structured
Flexible
48
WHAT’S STOPPING US?
“BUT WE’VE ALWAYS RECYCLED THIS WAY!”
49
Thinking about where content will “live” on a “web page” is pretty 1999.
50Lisa Welchman, @lwelchman
51
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
52
WEB
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
53
MOBILE
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
THE MARRIAGE OF CONTENT AND FORM
54
“Traditional publishing and content management systems bind content to display and delivery mechanisms, which forces a recycling approach for multi-platform publishing.
A semantic content publishing system, on the other hand, creates well-defined chunks of content that can be combined in whatever way is most appropriate for a particular platform. All display issues are addressed by delivery applications, rather than by a content management system earlier in the process.
—Dan Willis55http://dswillis.com/uxcrank/?p=378
56http://www.flickr.com/photos/97867906@N00/5913915289/
RDFXML
DITAEXIFXMP
OWLAPI
57
IT’S NOT A TECHNOLOGY PROBLEM.IT’S A STRATEGY PROBLEM.WHICH MEANS IT’S A PEOPLE PROBLEM.
58
WHAT DO WE NEED TO GET THERE?
59
BETTER CMS WORKFLOWWRITE FOR THE CHUNK, NOT THE PAGEDEMYSTIFY METADATA
60
BETTER CMS WORKFLOW
CMS IS THE ENTERPRISE SOFTWARE THAT UX FORGOT
62
63
64
65
CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA
66
“The happier people are, the better their content will be, the more content they’ll produce.
Digital newsrooms have moved from shoveling to creating. Those two tasks require very different environments.
—Patrick Cooper, NPR
67http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/
“
68
Beautiful software, even for back-end users, is becoming an expectation.
We’re moving in this direction because we now understand that better content management systems 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/
69
WRITE FOR THE CHUNK, NOT THE PAGE
BLOBS vs. CHUNKS
71
NPR’S CMS
72
http://www.alistapart.com/articles/content-templates-to-the-rescue/ 73
Page TitleExample: Widget-o-Rama: FancyWidget No. 5
Product Name
Product Line
Short Description
Example description: Widget-o-Rama’s FancyWidget 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.
Guidelines: Two sentences. The product description should answer the questions “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 product.
PRODUCT DESCRIPTION—ANSWERS THE QUESTION “WHAT IS IT?”
PRODUCT BENEFITS—ANSWERS THE QUESTION “WHY SHOULD I BUY IT?”
Benefit/Feature Pairs
Guidelines: Benefits are about the customer 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 specific benefit, followed by the feature or features that make it possible. Use concrete terms whenever you can.
Examples:Reduces maintenance costs by up to 50% by replacing delicate gremlin studs with a robust spiral 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.
74
Input Templates
Content Model
DisplayStyles
75
76
TRUNCATION IS NOT A CONTENT STRATEGY
78
DEMYSTIFYING METADATA
79
METADATA PROGRAMMATICALLY BUILDS PAGES
80
81
Metadata is the new art direction.
Ethan Resnick, @studip101
METADATA SUPPORTS PERSONALIZED CONTENT
82
ABC Co.
METADATA HELPS PRIORITIZE CONTENT
84
85
USE MOBILE AS A WEDGE.
86
The more structure you put into content the freer it will become.
87Rachel Lovinger, @rlovinger
SEPARATION OF CONTENT FROM DISPLAY.(FOR REAL THIS TIME.)
88
89
This approach of using structured content removes much of the requirement for
formatting tools in the CMS.
Rachel Andrew, Your WYSIWYG Editor Sucks
DESIGN WITH AND FORSTRUCTURED CONTENT.
90
91
I’ve never seen anyone regret having flexibility in how they deploy content.
Jeff Eaton, @eaton
THANKS!ROCK ON!
@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149