Adapting Ourselves to Adaptive Content
96
ADAPTING OURSELVES TO ADAPTIVE CONTENT @karenmcgrane
-
Upload
karen-mcgrane -
Category
Technology
-
view
123 -
download
0
description
Full transcript available here: http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/ 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.
Transcript of Adapting Ourselves to Adaptive Content
ADAPTING OURSELVES TO ADAPTIVE CONTENT
@karenmcgrane
“Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one.
—Ethan Marcotte Responsive Web Design
“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
We’re about to usher in a golden age of PDFs on the iPad.
Paul Ford, @ftrain
“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
All I see is an entire organization screaming,
“WE WANT IT TO BE THE EIGHTIES GODDAMMIT.”
Condé Nast Is Experiencing Technical Difficulties
COPE: Create Once, Publish Everywhere
COPE:CREATE ONCE,PUBLISH EVERYWHERE
CONTENT
PROVIDERS
MUSIC
PARTNERS
NPR, Open Content and API’s, O’Reilly Oscon 14
NPR.ORG
NPR Digital Media Examples of COPENPR, Open Content and API’s, O’Reilly Oscon
NPR.ORG PLAYER
NPR Digital Media Examples of COPE
NPR NEWS iPHONE APP
NPR MOBILE WEB SITE
NPR ADDICT IPHONE APPProduced by a public user, based entirely on the NPR API
NPR ON THE PUBLIC RADIO PLAYER
NPR ON WBUR
NPR ON MPR
NPR ON iGOOGLE
NPR IN iTUNES
NPR’S CMS
NPR’S API
BUSINESS VALUE?
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
NPR PAGE VIEWS
43 Million
88 Million
“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.
—Zach Brand, Senior Director Technology, NPR
“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, Android app and HTML5 site, some of which were turned around in a matter of weeks!
Bringing it all together into a cohesive workflow has been a real challenge for us. It’s been tough — there’s a lot more work.
Our goal is to have ultimate flexibility and we’re able to take a piece of content and put it on 15 different screens and still have a very consistent look and feel.
Our aim is to publish once and distribute everywhere.Instead of building a product and a workflow to support, we’re trying to flip that to build a workflow and a system to support these multiple design outputs: Adaptive Content.
THE FUTURE OF ADAPTIVE CONTENT
SemanticAtomized
Intelligent
Adaptive
Nimble Agile
Structured
Flexible
CONTENT
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
REUSABLE CONTENT STORE
MULTIPLE SIZESMEANINGFUL METADATAWRITTEN FOR REUSE
WHY ARE NEWS ORGANIZATIONS THE INNOVATORS?
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.
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 PRIMACY OF PRINT
Thinking about where content will “live” on a “web page” is pretty 1999.
Lisa Welchman, @lwelchman
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
WEB
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
MOBILE
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
CONTENT
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
THE MARRIAGE OF CONTENT AND FORM
“Traditional publishing and content management systems bind content to display and delivery mechanisms, which forces a recycling approach for multi-platform publishing.
—Dan Willis
“A semantic content publishing system 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.
WHAT DO WE NEED TO GET THERE?
MULTIPLE SIZESMEANINGFUL METADATAWRITTEN FOR REUSE
WRITE FOR THE CHUNK, NOT THE PAGEDEMYSTIFY METADATABETTER CMS WORKFLOW
TRUNCATION IS NOT A CONTENT STRATE...
BLOBS vs. CHUNKS
NPR’S CMS
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.
CMS CONTENT STRATEGY
CSS
ADAPTIVE CONTENT
Content Wrangling
DataModel
DisplayStyles
DEMYSTIFYING METADATA
METADATA PROGRAMMATICALLY BUILDS PAGES
Metadata is the new art direction.
Ethan Resnick, @studip101
METADATA HELPS PRIORITIZE CONTENT
METADATA SUPPORTS PERSONALIZED CONTENT
BETTER CMS WORKFLOW
Content admins hate all the fields.But the reason they hate all the fields
is the workflow is bad.
Jason Pamental, @jpamental
CMS IS THE ENTERPRISE SOFTWARE THAT UX FORGOT
CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA
CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA
“The happier people are, the better their content will be, the more content they’ll produce.
—Patrick Cooper, NPR
“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
USE MOBILE AS A WEDGE.
The more structure you put into content the freer it will become.
Rachel Lovinger, @rlovinger
SEPARATION OF CONTENT FROM DISPLAY.(FOR REAL THIS TIME.)
The future of content management systems is in their ability
to capture the content in a clean, presentation-independent way.
Daniel Jacobson, NPR
DESIGN WITH AND FORSTRUCTURED CONTENT.
I’ve never seen anyone regret having flexibility in how they deploy content.
Jeff Eaton, @eaton
