adaptive content for a future-proofed world 2014

Post on 24-May-2015

158 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

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?

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!

top related