Adaptive Content for Future-Proofed World


Published on

With the multitude of web-connected devices around us and in development, it’s becoming too difficult to anticipate what screen sizes to design for. The answer to this dilemma is to start thinking differently about content. It’s no longer just text and images appearing on a web page so why are we still writing like it is? This session will explore ways to model your existing and new content so it can grow and adapt with your organization and your end-users into the unknown future.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Encourage out-loud tweets – questions, interruptions
  • Sampling of different content itemsAsk audience for other examples
  • My own definition
  • AliasesLead-in to Responsive conversation
  • First great example I saw of Responsive designEthan MarcottePull up site in browser
  • Can’t just flip a switch for a Responsive WebsiteContent strategy should come first, especially when you are looking to present it in multiple channels
  • Different devices/environments Different photo sizesDifferent placement of elements like date, sound clip, related item displaysDifferent colors, backgrounds, context
  • NPR’s CMSScreenshots to come of Luminate CMS
  • Not only do different users have different size screens, the SAME user is likely to access your content from different screensConsistent experiences are more important than ever
  • Evolution of devices and screen sizesBrand new iPhone in September with slightly larger screen
  • Content is the lifeblood of your organization
  • First of 2 acronymsRepresents a sea change in your org’s content strategy
  • Second acronymYour CMS must allow you to create custom content types and custom fieldsYou need a CMS to COPE
  • Ask for audience examples
  • Ask for audience examples
  • Now that we know all of the elements of the CMS, how do we fit them together?Define custom content types, each with their own fields or meta dataHow does one know how to create a content model? (see next slide)
  • Content strategy drives the content model – comes FIRSTYour organization likely has some semblance of a content strategyAdaptive content should become central to that strategy
  • Traditional elements of content strategy you may already be thinking aboutLet’s take a closer look at some of these…
  • Content inventory – basis for content quality audit, gap analysis and SEO
  • Sitemap – high-level structure for your content based on content quality audit and gap analysis
  • Plan for the publication of all types of content – web, email, traditional mail, etc.
  • Staff training
  • Authoring guidelines and documentation
  • Additional elements of content strategy that are most relevant to Adaptive ContentLet’s take a closer look at how they’re relevant…
  • Write for the Chunk – focus on each piece of Meta Data individually
  • Don’t think solely about how your content will display on a Web Page
  • What you put in the WYSIWYG
  • 1 of 2 slides on this
  • From Karen McGrane’s deckGreat illustration of how Adaptive Content should be the foundation for content strategy, content model and display templates
  • Adaptive Content for Future-Proofed World

    1. 1. Adaptive Content for aFuture-Proofed WorldPRESENTED BY: LACEY KRUGER, LEAD INFORMATION ARCHITECT
    2. 2. WHO IS THIS PERSON?Lacey KrugerLead Information Architect- 7+ years with Blackbaud/Convio- Specializes in: • User Experience Design • Mobile Web Presence • CMS Architecture
    3. 3. #BBCON TWEETS: #bbinteractive
    4. 4. AGENDA•What is Adaptive Content?•Why is Adaptive Content important?•What do we need to get started?•Content Modeling•Content Strategy•A Future-Proofed Content Model
    5. 5. CONTENT IS…
    6. 6. ADAPTIVE CONTENT IS… Content that is structured so that a single item can be displayed across a multitude of devices in a multitude of formats
    7. 7. ADAPTIVE CONTENT IS… a.k.a. • Structured Content • Mobile Content • Intelligent Content • Responsive Content
    8. 8. ADAPTIVE CONTENT AND RESPONSIVE DESIGN “Responsive Web Design is an approach to web design in which a site is crafted to provide an optimal viewing experience across a wide range of devices.” - Wikipedia
    10. 10. “If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow or it can crash. Be water my friend.” - Bruce LeeSource:
    11. 11. ADAPTIVE CONTENT AND RESPONSIVE DESIGN• To develop a successful Responsive Design, you really need to re-think your website from the ground up 1. Content Strategy = ADAPTIVE CONTENT 2. Information Architecture 3. Page Layouts 4. Design
    13. 13. UNDER THE HOOD…Source: Adapting Ourselves to Adaptive Content by Karen McGrane
    14. 14. WHY SHOULD I CARE?Source: Google/Ipsos/Sterling, 2012
    15. 15. WHY SHOULD I CARE?2003 2007 2008 2010 2011 2012Modern iPhone Android iPad Kindle Fire GoogleBlackberry (HTC Dream) Nexus Tablet What’s Next??
    16. 16. WHY SHOULD I CARE? Content is KING!• It’s how you tell your stories• It’s what makes the donors go-round•It’s what makes people tell their friends• It’s what keeps visitors ENGAGED• It’s what keeps your organization RELEVANT
    17. 17. WHERE DO WE START?COPE(Create Once, Publish Everywhere)
    18. 18. WHERE DO WE START? CMS (Content Management System)
    19. 19. ELEMENTS OF CMS•Content Types•Meta Data•Display Templates
    20. 20. CONTENT TYPES•Group of content items that share a predictable, consistent set of attributes
    21. 21. META DATA•The attributes or fields needed for each content type•Not to be confused with Meta Data for Search (although still important for Search!)•Not all fields are required to allow for variable content
    22. 22. META DATA
    23. 23. DISPLAY TEMPLATES•Part of your CMS that defines how your Meta Data gets displayed on the screen•May require different Display Templates for different devices•Let the software do the work
    24. 24. DISPLAY TEMPLATES•Turns this…
    25. 25. DISPLAY TEMPLATES•Into this…
    26. 26. DISPLAY TEMPLATES•And this…
    27. 27. DISPLAY TEMPLATES•And this…
    28. 28. DISPLAY TEMPLATES•And this…
    29. 29. CONTENT MODELING Content Strategist Content Content Content Content Type Type Type TypeMeta Meta Meta Meta Meta MetaData Data Data Data Data Data Meta Meta Meta Meta Meta Data Data Data Data Data Display Display Display Display Templates Templates Templates Templates
    30. 30. CONTENT STRATEGY “Plans for the • Creation • Publication and • Governance of useful, usable content” - Kristina Halvorson
    31. 31. ELEMENTS OF CONTENT STRATEGY •Content Inventory •Editorial Strategy •Message Hierarchy, Authoring Guidelines, Editorial Calendar •Web Writing •Writing content for online publication •Search Engine Optimization •Increase potential relevance to specific search engine keywordsSource: The Discipline of Content Strategy by Kristina Halvorson
    32. 32. CONTENT STRATEGY ARTIFACTSContent Inventory
    33. 33. CONTENT STRATEGY ARTIFACTSInformation Architecture
    34. 34. CONTENT STRATEGY ARTIFACTSEditorial Calendar
    35. 35. CONTENT STRATEGY ARTIFACTSStaff Training
    36. 36. CONTENT STRATEGY ARTIFACTSAuthoring Guides
    37. 37. MORE ELEMENTS OF CONTENT STRATEGY •Content Management Strategy •Defines the technologies needed to capture, store, deliver, and preserve content •Content Channel Distribution Strategy •Defines how and where content will be made available to users (email, website, apps, devices, syndicated sources, etc.) •Meta Data Strategy •Identifies the type and structure of meta dataSource: The Discipline of Content Strategy by Kristina Halvorson
    38. 38. ADAPTIVE CONTENT STRATEGY•Content Management Strategy •Choose a CMS that allows for creation of Custom Content Types and Fields•Content Channel Distribution Strategy •Identify your priorities to drive requirements for Display Templates•Meta Data Strategy •Select a Content Strategist who can create a Future-Proofed, Adaptive Content Model
    39. 39. A FUTURE-PROOFED CONTENT MODEL•Web Writing for the 21st Century - Inverted Pyramid approach - Make your point FIRST, then follow with supporting details - “Write for the chunk”
    40. 40. A FUTURE-PROOFED CONTENT MODEL•Beware the WYSIWYG! - Only use it for Substance - When it’s possible to define consistent Meta Data for a content type, do it
    41. 41. A FUTURE-PROOFED CONTENT MODEL•Consistent Substance - Users won’t want less when they’ve drilled down into a single content item
    42. 42. A FUTURE-PROOFED CONTENT MODEL•Meta Data for all devices - Multiple sizes of images and thumbnails (or image resize tool)
    43. 43. A FUTURE-PROOFED CONTENT MODEL•Meta Data for all devices - Title and Description should work in any device - First 3-5 words are always MOST important
    44. 44. FUTURE-PROOFING CONTENTSource: Adapting Ourselves to Adaptive Content by Karen McGrane
    45. 45. CLIFF’S NOTES• Content is the lifeblood of your organization• Adaptive Content is the way of the future – catch on now!• Create or update your Content Strategy with a foundation of Adaptive Content• Develop a Content Model that is Adaptive and Future Proofed - Web Writing for the 21st Century - Beware the WYSIWYG - Consistent Substance - Meta Data for All Devices
    46. 46. I WANT MORE!•Come see my team at the Creative Services Booth!•Or, email me:
    47. 47. I WANT MORE!• Karen McGrane - Presentations: • Adapting Ourselves to Adaptive Content • Content Strategy for Mobile - Upcoming book: Content Strategy for Mobile• Ethan Marcotte - Book: Responsive Web Design• Kristina Halvorson - Book: Content Strategy for the Web