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.
Upcoming SlideShare
Content in a Zombie Apocalypse
Next
Download to read offline and view in fullscreen.

Share

Adapting Ourselves to Adaptive Content

Download to read offline

Full transcript available here: https://karenmcgrane.com/talks/adapting-ourselves-to-adaptive-content/
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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Adapting Ourselves to Adaptive Content

  1. ADAPTING OURSELVES TO ADAPTIVE CONTENT @karenmcgrane
  2. “ Fragmenting our content across different “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 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
  4. We’re about to usher in a golden age of PDFs on the iPad. Paul Ford, @ftrain
  5. “ 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
  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. C O N T E N T P R O V I D E R S M U S I C P A R T N E R S 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.ORG PLAYER NPR Digital Media Examples of COPE
  11. NPR NEWS iPHONE APP
  12. NPR MOBILE WEB SITE
  13. NPR ADDICT IPHONE APP Produced by a public user, based entirely on the NPR API
  14. NPR ON THE PUBLIC RADIO PLAYER
  15. NPR ON WBUR
  16. NPR ON MPR
  17. NPR ON iGOOGLE
  18. NPR IN iTUNES
  19. NPR’S CMS
  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,775 Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov.
  23. NPR PAGE VIEWS 88 Million 43 Million
  24. “ 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
  25. “ 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!
  26. Our goalis building a once isall together to have Bringing it to publish into Instead of Our aim ultimate and a workflow to flexibility and a cohesive workflow has product and distributetake a piece everywhere. we’rea realto trying for been able challenge to support, we’re of content and put —on 15 us. It’s been tough it flip that to build a different lot moreand still there’s a screens work.to workflow and a system have a very consistent look support these multiple and feel. design outputs: Adaptive Content.
  27. THE FUTURE OF ADAPTIVE CONTENT
  28. Intelligent Flexible Structured Nimble Agile Adaptive Atomized Semantic
  29. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENT MICROSITES PRINT BLOGS EMAIL INTRANET
  30. REUSABLE CONTENT STORE
  31. MULTIPLE SIZES MEANINGFUL METADATA WRITTEN FOR REUSE
  32. WHY ARE NEWS ORGANIZATIONS THE INNOVATORS?
  33. 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. •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 story's essential facts. photograph or illustration. story's 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 package devolved 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 PRINT MICROSITES PRINT BLOGS EMAIL INTRANET
  38. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS WEB MICROSITES PRINT BLOGS EMAIL INTRANET
  39. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS MOBILE MICROSITES PRINT BLOGS EMAIL INTRANET
  40. MOBILE WEB MOBILE WEBSITE APPS SOCIAL TABLET MEDIA APPS CONTENT MICROSITES PRINT BLOGS EMAIL INTRANET
  41. THE MARRIAGE OF CONTENT AND FORM
  42. “ Traditional publishing and content management systems bind content to display and delivery mechanisms, which forces a recycling approach for multi-platform publishing. —Dan Willis
  43. “ 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.
  44. WHAT DO WE NEED TO GET THERE?
  45. MULTIPLE SIZES MEANINGFUL METADATA WRITTEN FOR REUSE
  46. WRITE FOR THE CHUNK, NOT THE PAGE DEMYSTIFY METADATA BETTER CMS WORKFLOW
  47. TRUNCATION IS NOT A CONTENT STRATE...
  48. BLOBS vs. CHUNKS
  49. NPR’S CMS
  50. Page Title Example: Widget-o-Rama: FancyWidget No. 5 PRODUCT DESCRIPTION—ANSWERS THE QUESTION “WHAT IS IT?” Product Name Product Line Short Guidelines: Two sentences. The product description should answer the questions Description “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 customer Pairs 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 Wrangling CMS CONTENT STRATEGY
  52. DEMYSTIFYING METADATA
  53. METADATA PROGRAMMATICALLY BUILDS PAGES
  54. Metadata is the new art direction. Ethan Resnick, @studip101
  55. METADATA HELPS PRIORITIZE CONTENT
  56. METADATA SUPPORTS PERSONALIZED 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 ENTERPRISE SOFTWARE THAT UX FORGOT
  60. CONTEXTUAL INQUIRY USER PERSONAS USER SCENARIOS TASK ANALYSIS WORKFLOW MAPPING CARD SORTING CONTENT MODELING ITERATIVE PROTOTYPING USABILITY TESTING ANALYTICS 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-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
  63. USE MOBILE AS A WEDGE.
  64. The more structure you put into content the freer it will become. Rachel Lovinger, @rlovinger
  65. SEPARATION OF CONTENT FROM 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 FOR STRUCTURED CONTENT.
  68. I’ve never seen anyone regret having flexibility in how they deploy content. Jeff Eaton, @eaton
  69. THANKS! ROCK ON! @karenmcgrane karen@bondartscience.com www.bondartscience.com +1 (917) 887-8149
  • MinkyoungKim13

    Sep. 14, 2019
  • MohamedAbdelaalAhmed

    Feb. 2, 2019
  • GovindaPal

    Aug. 28, 2018
  • hjjoachim

    Mar. 20, 2017
  • PatrickSmith55

    Nov. 29, 2016
  • AshleyFerrell

    Jun. 1, 2016
  • lauggh

    Apr. 12, 2016
  • JaniePecanty1

    Nov. 27, 2015
  • keff

    Aug. 25, 2015
  • pga1999

    Jul. 31, 2015
  • frankieying

    Jun. 26, 2015
  • rjacquez

    May. 21, 2015
  • greggyour

    May. 15, 2015
  • Krazyfrock

    Apr. 14, 2015
  • ClaudiaEhmke

    Feb. 18, 2015
  • thewhaleboat

    Jan. 15, 2015
  • rachelmercer

    Jan. 8, 2015
  • paulvanneste

    Nov. 11, 2014
  • stenopedro

    Aug. 4, 2014
  • onaSousa

    Jul. 17, 2014

Full transcript available here: https://karenmcgrane.com/talks/adapting-ourselves-to-adaptive-content/ 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.

Views

Total views

206,046

On Slideshare

0

From embeds

0

Number of embeds

117,642

Actions

Downloads

904

Shares

0

Comments

0

Likes

154

×