Adapting ourselves to adaptive content

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 unsustainable one. —Ethan Marcotte, Responsive Web Design 3

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

content content contentcontent content content content 11

http://www.flickr.com/photos/filamentgroup/5149016958/

FRAGMENTED CMS TOOLSFRAGMENTED INTERNAL PROCESSESFRAGMENTED DEVICES + PLATFORMS 13

A TALE OF TWO PUBLISHERS 14

We’re about to usher in a golden age of PDFs on the iPad. Paul Ford, Ftrain.com 20

“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

All I see is an entire organization screaming,“WE WANT IT TO BE THE EIGHTIES GODDAMMIT.” Condé Nast Is Experiencing Technical Difficulties 22

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 Content 25

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 11,000 10,500 8,700 4,300 2,775Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov. 38

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

WHY ARE NEWSORGANIZATIONSTHE INNOVATORS? 41

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 ﬁrst sentence, or in some cases the ﬁrst 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

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

THE FUTURE OFADAPTIVE CONTENT 44

MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET 45

REUSABLE CONTENT STORE 46

Intelligent Flexible Structured Nimble Agile Adaptive Atomized Semantic 47

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 TABLET MEDIA APPS PRINTMICROSITES PRINT BLOGS EMAIL INTRANET 51

MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS WEBMICROSITES PRINT BLOGS EMAIL INTRANET 52

MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS MOBILEMICROSITES PRINT BLOGS EMAIL INTRANET 53

THE MARRIAGE OFCONTENT AND FORM 54

“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

API OWLXML RDFEXIF DITA XMP http://www.flickr.com/photos/97867906@N00/5913915289/ 56

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

CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA 66

“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

“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

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?”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?”Beneﬁt/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

Display StylesContent InputModel Templates 74

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

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. Rachel Andrew, Your WYSIWYG Editor Sucks 89

DESIGN WITH AND FORSTRUCTURED CONTENT. 90

I’ve never seen anyone regret havingflexibility in how they deploy content. Jeff Eaton, @eaton 91

THANKS!ROCK ON!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149

http://www.justaboutsane.com	186
http://lanyrd.com	71
http://thinkux.posterous.com	12
http://storify.com	9
http://www.linkedin.com	2
http://www.mefeedia.com	1

Adapting ourselves to adaptive content

by Karen McGrane

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 281

Statistics

Adapting ourselves to adaptive content Presentation Transcript