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
![Page 1: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/1.jpg)
ADAPTIVE CONTENT FOR A FUTURE-PROOFED WORLDLacey Kruger
Principal Information Architect, Blackbaud
![Page 2: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/2.jpg)
CONTENT IS…
![Page 3: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/3.jpg)
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
![Page 4: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/4.jpg)
ADAPTIVE CONTENT IS…
a.k.a.• Structured Content• Mobile Content• Responsive Content• Intelligent Content
![Page 5: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/5.jpg)
“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
![Page 6: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/6.jpg)
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
![Page 7: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/7.jpg)
ADAPTIVE CONTENT
![Page 8: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/8.jpg)
UNDER THE HOOD…
Source: Adapting Ourselves to Adaptive Content by Karen
![Page 9: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/9.jpg)
WHY SHOULD I CARE?
Source: Google/Ipsos/Sterling, 2012
![Page 10: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/10.jpg)
WHY SHOULD I CARE?
2003Modern Blackberry
2007iPhone
2010iPad
2008Android(HTC Dream)
2011Kindle Fire
2012Google Nexus Tablet
What’s Next??
![Page 11: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/11.jpg)
WHERE DO WE START?
COPE(Create Once, Publish Everywhere)
![Page 12: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/12.jpg)
CMSWHERE DO WE START?
(Content Management System)
![Page 13: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/13.jpg)
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
![Page 14: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/14.jpg)
•Group of content items that share a predictable, consistent set of attributes
CONTENT TYPES
![Page 15: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/15.jpg)
CONTENT TYPES
Web Page:Attraction: Event:
Example: Central Park Conservancy
![Page 16: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/16.jpg)
• 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
![Page 17: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/17.jpg)
•Got a Content Inventory?
DEFINING CONTENT TYPES
![Page 18: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/18.jpg)
•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
![Page 19: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/19.jpg)
META DATA
![Page 20: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/20.jpg)
DEFINING META DATA
• “Attraction” content type- Section Navigation - Title- Image of the
attraction- Description- Location- Map link- Details
![Page 21: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/21.jpg)
DEFINING META DATA
• “Attraction” content type- Featured?- What – Topic
Category- For Whom –
Audience Category
- Where/Near – Location Category
![Page 22: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/22.jpg)
•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
![Page 23: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/23.jpg)
•Turns this…
DISPLAY TEMPLATES
![Page 24: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/24.jpg)
•Into this…
DISPLAY TEMPLATES
![Page 25: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/25.jpg)
•And this…
DISPLAY TEMPLATES
![Page 26: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/26.jpg)
•And this…
DISPLAY TEMPLATES
![Page 27: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/27.jpg)
•And this…
DISPLAY TEMPLATES
![Page 28: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/28.jpg)
•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
![Page 29: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/29.jpg)
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
![Page 30: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/30.jpg)
•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
![Page 31: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/31.jpg)
•Consistent Substance-Users won’t want less when they’ve drilled down into a single content item
A FUTURE-PROOFED CONTENT MODEL
![Page 32: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/32.jpg)
•Meta Data for all devices-Multiple sizes of images and thumbnails (or image resize tool)
A FUTURE-PROOFED CONTENT MODEL
![Page 33: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/33.jpg)
•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
![Page 34: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/34.jpg)
•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
![Page 35: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/35.jpg)
FUTURE-PROOFING CONTENT
Source: Adapting Ourselves to Adaptive Content by Karen McGrane
![Page 36: Adaptive Content for a Future-Proofed World 2014](https://reader035.vdocuments.site/reader035/viewer/2022070316/5560ec98d8b42aa65e8b562c/html5/thumbnails/36.jpg)
• 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!