Adapting ourselves to adaptive content
Upcoming SlideShare
Loading in...5
×
 

Adapting ourselves to adaptive content

on

  • 6,517 views

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

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.

Statistics

Views

Total Views
6,517
Slideshare-icon Views on SlideShare
6,216
Embed Views
301

Actions

Likes
13
Downloads
106
Comments
1

7 Embeds 301

http://www.justaboutsane.com 189
http://lanyrd.com 86
http://thinkux.posterous.com 12
http://storify.com 9
http://www.linkedin.com 2
https://twitter.com 2
http://www.mefeedia.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Adapting ourselves to adaptive content Adapting ourselves to adaptive content Presentation Transcript

    • 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
    • 6
    • 7
    • 8
    • 10
    • 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
    • 15
    • 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 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
    • 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
    • 63
    • 64
    • 65
    • 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?”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
    • 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. 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