Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adapting Ourselves to Adaptive Content

187,729 views

Published on

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
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Karen,
    great presenation about #adaptivecontent. We - at our #contentlab at Pubicis Munich thinking about the same strategies.

    Best
    Michael
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello
    Am mary ,
    i saw your profile today and became interested in you, i will like to know you the more, and i want you to send an email to my mail so that i can give you my picture for you to know whom i am. Here is my email address (maryjobe86@yahoo.de) I believe we can move from here. I am waiting for your reply in my mail don't send it in the site.
    Remember the distance or color does not matter but love matters allot in life
    (maryjobe86@yahoo.de)
    Hello
    Am mary ,
    i saw your profile today and became interested in you, i will like to know you the more, and i want you to send an email to my mail so that i can give you my picture for you to know whom i am. Here is my email address (maryjobe86@yahoo.de) I believe we can move from here. I am waiting for your reply in my mail don't send it in the site.
    Remember the distance or color does not matter but love matters allot in life
    (maryjobe86@yahoo.de)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello
    Am mary ,
    i saw your profile today and became interested in you, i will like to know you the more, and i want you to send an email to my mail so that i can give you my picture for you to know whom i am. Here is my email address (maryjobe86@yahoo.de) I believe we can move from here. I am waiting for your reply in my mail don't send it in the site.
    Remember the distance or color does not matter but love matters allot in life
    (maryjobe86@yahoo.de)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • very Interesting Karen
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Adapting Ourselves to Adaptive Content

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

×