adaptive content for a future-proofed world 2014
DESCRIPTION
With the multitude of web-connected devices around us and in development, its becoming too difficult to anticipate what screen sizes to design for. The answer to this dilemma is to start thinking differently about content. Its 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 existing and new online content so it can grow and adapt with your websites, clients and end-users into the unknown future.TRANSCRIPT
ADAPTIVE CONTENT FOR A FUTURE-PROOFED WORLDLacey Kruger
Principal Information Architect, Blackbaud
CONTENT IS…
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
ADAPTIVE CONTENT IS…
a.k.a.• Structured Content• Mobile Content• Responsive Content• Intelligent Content
“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
ADAPTIVE CONTENT AND RESPONSIVE DESIGN
Source: http://www.physics-chemistry-class.com/chemistry/properties-of-water-in-different-states.html
“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 Lee
ADAPTIVE CONTENT
UNDER THE HOOD…
Source: Adapting Ourselves to Adaptive Content by Karen
WHY SHOULD I CARE?
Source: Google/Ipsos/Sterling, 2012
WHY SHOULD I CARE?
2003Modern Blackberry
2007iPhone
2010iPad
2008Android(HTC Dream)
2011Kindle Fire
2012Google Nexus Tablet
What’s Next??
WHERE DO WE START?
COPE(Create Once, Publish Everywhere)
CMSWHERE DO WE START?
(Content Management System)
CONTENT MODELING
Content Strategist
Content Type
Content Type
Content Type
Content Type
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Display Templates
Display Templates
Display Templates
Display Templates
•Group of content items that share a predictable, consistent set of attributes
CONTENT TYPES
CONTENT TYPES
Web Page:Attraction: Event:
Example: Central Park Conservancy
• Create a content type:• When your content has a predictable, specific set of
properties
• To enforce a consistent formatting
• To organize content so that it can be sorted and filtered
• To build relationships with other content
• When is a new content type unnecessary?• There are only a few items
• The standard Web Page content type will suffice
DEFINING CONTENT TYPES
•Got a Content Inventory?
DEFINING CONTENT TYPES
•The attributes or fields needed for each content type
•Not to be confused with Meta Data for Search (although still important for Search!)
META DATA
META DATA
DEFINING META DATA
• “Attraction” content type- Section Navigation - Title- Image of the
attraction- Description- Location- Map link- Details
DEFINING META DATA
• “Attraction” content type- Featured?- What – Topic
Category- For Whom –
Audience Category
- Where/Near – Location Category
•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
DISPLAY TEMPLATES
•Turns this…
DISPLAY TEMPLATES
•Into this…
DISPLAY TEMPLATES
•And this…
DISPLAY TEMPLATES
•And this…
DISPLAY TEMPLATES
•And this…
DISPLAY TEMPLATES
•Start by defining defaults for each content type:-Single Display-List display
•Review all of your wireframe and mock-ups, identifying any dynamic lists for additional list displays
DEFINING DISPLAY TEMPLATES
CONTENT MODELING
Content Strategist
Content Type
Content Type
Content Type
Content Type
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Meta Data
Display Templates
Display Templates
Display Templates
Display Templates
•Beware the WYSIWYG!-Only use it for Substance-When it’s possible to define consistent Meta Data for a content type, do it
A FUTURE-PROOFED CONTENT MODEL
•Consistent Substance-Users won’t want less when they’ve drilled down into a single content item
A FUTURE-PROOFED CONTENT MODEL
•Meta Data for all devices-Multiple sizes of images and thumbnails (or image resize tool)
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
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”
A FUTURE-PROOFED CONTENT MODEL
FUTURE-PROOFING CONTENT
Source: Adapting Ourselves to Adaptive Content by Karen McGrane
• Karen McGrane- Presentations:
• Adapting Ourselves to Adaptive Content• Content Strategy for Mobile
- Book: Content Strategy for Mobile
• Ethan Marcotte- Book: Responsive Web Design
• Kristina Halvorson- Book: Content Strategy for the Web
I WANT MORE!