Adapting Ourselves to Adaptive Content

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.

Published in: Technology

Adapting Ourselves to Adaptive Content from Karen McGrane

Transcript

1. ADAPTING OURSELVES TO ADAPTIVE CONTENT@karenmcgrane
2. “Fragmenting our content acrossdifferent “device-optimized”experiences is a losing proposition,or at least an unsustainable one. —Ethan Marcotte Responsive Web Design
3. “You can’t afford to create a piece ofcontent for any one platform.Instead of crafting a website, youhave to put more effort into craftingthe description of the different bitsof an asset, so they can be reusedmore effectively, so they can delivermore value. —Nic Newman, BBC
4. We’re about to usher in a golden age of PDFs on the iPad. Paul Ford, @ftrain
5. “Existing art and production staffersfrom the print side would beresponsible for making two iPadlayouts (one in portrait and one inlandscape) on Adobe’s platform. —Condé Nast Is Experiencing Technical Difficulties
6. All I see is an entire organization screaming,“WE WANT IT TO BE THE EIGHTIES GODDAMMIT.” Condé Nast Is Experiencing Technical Difficulties
7. COPE:CREATE ONCE,PUBLISH EVERYWHERE COPE: Create Once, Publish Everywhere
8. CONTENTPROVIDERSMUSICPARTNERS NPR, Open Content and API’s, O’Reilly Oscon 14
9. NPR.ORG NPR Digital Media Examples NPR, OpenCOPE and API’s, O’Reilly Oscon of Content
10. NPR.ORGPLAYER NPR Digital Media Examples of COPE
11. NPR NEWSiPHONE APP
12. NPR MOBILEWEB SITE
13. NPR ADDICTIPHONE APPProduced by a public user,based entirely on the NPR API
14. NPR ON THEPUBLIC RADIOPLAYER
15. NPR ONWBUR
16. NPR ONMPR
17. NPR ONiGOOGLE
18. NPR INiTUNES
19. NPR’SCMS
20. NPR’S API
21. BUSINESS VALUE?
22. 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.
23. NPR PAGE VIEWS 88 Million 43 Million
24. “Over the last year, NPR’s total pageview growth has increased by morethan 80%.How did we get that much growth?Our API. —Zach Brand, Senior Director Technology, NPR
25. “The biggest impact that the API has made,however, is with our mobile strategy. TheAPI has enabled NPR product owners tobuild specialized apps on a wide range ofplatforms and devices, liberating themfrom being dependent on customdevelopment to access the content.Through this process, we built our iPhoneand iPad apps, mobile sites, Android appand HTML5 site, some of which wereturned around in a matter of weeks!
26. Our goalis building a once isall together to haveBringing it to publish intoInstead ofOur aimultimate and a workflow to flexibility anda cohesive workflow hasproductand distributetake a piece everywhere.we’rea realto trying forbeen able challenge tosupport, we’reof content and put —on 15us. It’s been tough itflip that to build adifferent lot moreand stillthere’s a screens work.toworkflow and a systemhave a very consistent looksupport these multipleand feel.design outputs:Adaptive Content.
27. THE FUTURE OFADAPTIVE CONTENT
28. Intelligent Flexible Structured Nimble Agile Adaptive Atomized Semantic
29. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET
30. REUSABLE CONTENT STORE
31. MULTIPLE SIZESMEANINGFUL METADATAWRITTEN FOR REUSE
32. WHY ARE NEWS ORGANIZATIONSTHE INNOVATORS?
33. 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.
34. 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
35. THE PRIMACY OF PRINT
36. Thinking about where content will“live” on a “web page” is pretty 1999. Lisa Welchman, @lwelchman
37. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS PRINTMICROSITES PRINT BLOGS EMAIL INTRANET
38. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS WEBMICROSITES PRINT BLOGS EMAIL INTRANET
39. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS MOBILEMICROSITES PRINT BLOGS EMAIL INTRANET
40. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET
41. THE MARRIAGE OFCONTENT AND FORM
42. “Traditional publishing and contentmanagement systems bind contentto display and delivery mechanisms,which forces a recycling approachfor multi-platform publishing. —Dan Willis
43. “A semantic content publishingsystem creates well-defined chunksof content that can be combined inwhatever way is most appropriatefor a particular platform.All display issues are addressed bydelivery applications, rather than bya content management systemearlier in the process.
44. WHAT DO WE NEEDTO GET THERE?
45. MULTIPLE SIZESMEANINGFUL METADATAWRITTEN FOR REUSE
46. WRITE FOR THE CHUNK, NOT THEPAGEDEMYSTIFY METADATABETTER CMS WORKFLOW
47. TRUNCATION IS NOT ACONTENT STRATE...
48. BLOBS vs. CHUNKS
49. NPR’SCMS
50. 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.
51. CSS Display Styles ADAPTIVE CONTENT Data Content Model WranglingCMS CONTENT STRATEGY
52. DEMYSTIFYING METADATA
53. METADATA PROGRAMMATICALLYBUILDS PAGES
54. Metadata is the new art direction. Ethan Resnick, @studip101
55. METADATA HELPS PRIORITIZECONTENT
56. METADATA SUPPORTSPERSONALIZED CONTENT
57. BETTER CMS WORKFLOW
58. Content admins hate all the fields.But the reason they hate all the fields is the workflow is bad. Jason Pamental, @jpamental
59. CMS IS THE ENTERPRISESOFTWARE THAT UX FORGOT
60. CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA
61. “The happier people are,the better their content will be,the more content they’ll produce. —Patrick Cooper, NPR
62. “Beautiful software, even for back-endusers, is becoming an expectation.We’re moving in this directionbecause we now understand thatbetter content management systemsfoster better content. —Matt Thompson
63. USE MOBILE AS A WEDGE.
64. The more structure you put intocontent the freer it will become. Rachel Lovinger, @rlovinger
65. SEPARATION OF CONTENTFROM DISPLAY.(FOR REAL THIS TIME.)
66. The future of content management systems is in their ability to capture the content in a clean, presentation-independent way. Daniel Jacobson, NPR
67. DESIGN WITH AND FORSTRUCTURED CONTENT.
68. I’ve never seen anyone regret havingflexibility in how they deploy content. Jeff Eaton, @eaton
69. THANKS!ROCK ON!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149

The world

Tuesday, April 14, 2015