This session was presented at bbCon 2015. With an ever-changing landscape of screen sizes, responsive design is the only way to keep up. When nonprofits make the move to responsive design, the structure of their content must change as well. In this session, we'll explore how to use Luminate CMS to construct adaptive content.

1. Adaptive Content with Luminate CMS
PRESENTED BY LACEY KRUGER

2. Meet Lacey…
Lacey Kruger
Principal Information Architect
• 10+ years at Blackbaud/Convio
• Specializes in User Research,
Sitemaps, Wireframes and
CMS architecture
• Member of Blackbaud
Interactive’s User Experience
and Design Team

3. Meet Jane…

4. Source: http://responsivedesign.ca/examples/the-boston-globe-a-newspaper-for-the-21st-century

5. Meet Jane…

6. What is Adaptive Content?
• Content that is structured so that a
single item can be displayed across a
multitude of devices in a multitude of
formats
6 #bbcon

8. Source: Adapting Ourselves to Adaptive Content by Karen McGrane

9. What is Adaptive Content?
9 #bbcon
COPE(Create Once, Publish Everywhere)

10. Why is Adaptive Content Important?
10 #bbcon

11. Why is Adaptive Content Important?
11 #bbcon

12. Why is Adaptive Content Important?
12 #bbcon

13. I’m on board! How do I start?

14. Step 1: Content Inventory

15. Step 2: Identify Content Types
Groups of content that share consistent fields or
attributes, display templates and relationships
Common Types:
• Article
• Blog Post
• Event
• Profile

16. Step 2: Identify Content Types
YES, create a
content type:
• Predictable Properties
• Consistent Formatting
• Sorting and Filtering
• Relationships
DON’T create a
content type:
• Only a few items
• Basic Page content type will
suffice

17. Step 3: Design Display Templates
Layouts for each content type (with some exceptions)…
Single Display Template(s)
• Design for a single item
of said content type
• i.e. News Article page
NOTE: Consider responsive breakpoint views for each
Display Template
List Display Template(s)
• Design for a list of multiple
items of said content type
• i.e. News Landing page

20. Step 4: Define Meta Data
Meta Data are the consistent fields or attributes shared
across items in a content type
Basic fields
• Title
• Description
• Date
Display fields
• Full-size photo
• Thumbnail
• Turn on/off promos
Relational fields
• Topic Category
• Audience Category
• Related Items

21. Use the WYSIWYG sparingly!
21 #bbcon

22. Title
Subtitle
Body
Full-size
image

23. Topic
category
Date
Description
Thumbnail
photo

24. Step 5: Implement and Educate
Luminate CMS allows you to write custom author
instructions for each piece of Meta Data

25. Step 5: Implement and Educate
Remember!
• Suggest
image
dimensions
and
character
counts
• Train on
using
WYSIWYG
sparingly

28. The Result
The feedback from our staff, volunteers, and users
has been great. It definitely was a learning curve the
first week, but overall has been a major improvement
to the organization of our content.
-NMFA Web Team
“
”

29. Summary
• Your org NEEDS Adaptive Content
• Steps:
1. Content Inventory
2. Identify Content Types
3. Design Display Templates
4. Define Meta Data
5. Implement and Educate
• Use the WYSISYG sparingly!
• Result: Future-Proofed Content, Happy Org

30. Want More?
• Karen McGrane
• Presentations:
• Adapting Ourselves to Adaptive Content
• Content Strategy for Mobile
• Book: Content Strategy for Mobile
• Sara Wachter-Boettcher
• Book: Content Everywhere

31. Thank You!
Contact Me:
lacey.kruger@blackbaud.com
http://www.slideshare.net/LaceyKruger