Future-proof your content using an adaptive approach

IWMW16

UPDATED JUNE 2016

2

• Multichannel and Omnichannel • Adaptive content defined • Google instant answers • Facebook Instant Articles

In this master class

• Old website and CMS • New website and publishing

platform • How the Content Publisher works

• Identify content types • Create a content model • Test your content model • Retrospective • Lessons learned

1. Adaptive content and why it's important

2. Case study: the Content Publisher

3. How to future-proof your content

3

Who we are

• Richard Prowse - Head of Content • Miao He - Digital Editor • Tom Natt - Developer

4

What we do

• 14-strong digital team • Work with extended teams in our faculties and administrative

services • Develop platforms and services • Set and implement standards • Deliver ‘core’ content

1. Adaptive content and why it's important

How people consume content has changed

6

Multichannel Omnichannel

Same regardless of context

YouTubeWebsite Facebook page

Facebook pageProduct discussion

WebsiteProduct listing

YouTube Product demonstration

Contextually relevant content

I need to buy…

I need to buy…When does the

store close?

7Image Source: Future-proof your content using an adaptive approach, Richard Prowse

Ever-increasing number of devices and platforms

8

9

Adaptive content - structured content that is semantically marked up

10

Index store.html [containing metadata]

Store content type [Structural model of “Store”]

Store

location

City

GPS

Latitude

Longitude

Hours

Open

Close

Machine readable description of a “store”

stored in a database Create Map to machine readable output using schema.org metadata

Day

Google or other third party tool.

Google instant answers

Transform Answer

11Image Source: Future-proof your content using an adaptive approach, Richard Prowse

Facebook Instant Articles

12

Implementing adaptive content can help

organisations scale content creation, delivery

and management

13

2. Case study: the Content Publisher

Old website and CMS

• Website doesn’t support mobile devices, poor ranking in Google, inaccessible to users with disabilities

• Over 500,000 published content items on bath.ac.uk, with no standards or structure

• Poor user experience — out-of-date information, duplicate content, inconsistent navigation

• Existing Content Management System (CMS) difficult to use • Out of 348 trained authors, only 29 regularly log in to

OpenCMS

15

OpenCMS interface

OpenCMS and archived section

16

University of Bath, Guest Accommodation section

New website and publishing platform

• Mobile-friendly website, built with Google in mind and accessible to users with disabilities

• Easier to navigate and find information • Content is useful and trustworthy • Quicker for visitors to complete tasks • Standards, structure and reuse built in • Easier access to performance data to improve decision-making

17

University of Bath, Guest Accommodation section

Content Publisher interface

Content Publisher and website

18

How the Content Publisher works

19

TEMPLATESPUBLISHER HUGO

EDITOR

WEBSITE

3. How to future-proof your content

Project timeline

Test

Iteration 1 Iteration 2 Iteration 3

Deliver

Sprint 1 Sprint 2

Deliver

DiscoverTest

DesignDevelop DesignDevelop

Discover

Deliver

DesignDevelop

DiscoverTest

Adopting an Agile approach

Identify content types

Goal

• Learn how to identify content types so content can be structured for reuse

23

Exercise 1 - webpage sort

Task: • Split into four groups • Sort the pages into content type based on their structure • Make a separate pile of pages that do not have a structure

Time allowed: • 10 minutes

24

Take a five-minute break

Create a content model

On paper

Goal

• Mark up the structure of a content type and identify components for reuse

28

“The process of determining the structure and granularity of your content.”Charles Cooper“Managing Enterprise Content: A Unified Content Strategy (2nd Edition) (Voices That Matter)”

IMAGE: © 2015 CONTENTMARKETINGWORLD.COM

Cooper, Charles. “Managing Enterprise Content: A Unified Content Strategy (2nd Edition) (Voices That Matter)”

CONTENT COMPONENT

CONTENT ELEMENT

CONTENT COMPONENT

CONTENT COMPONENT

CONTENT COMPONENT

“[Content elements] the building blocks of your content”

“[Content Component] the smallest part that can be semantically defined”

“[Content type] is an assembly of [Content elements]”

CONTENT TYPE

30

Chunking up the blobs

Example content model - by content type

31

GUIDE

University of Bath, The Quads student accommodation

32

ABOUT

ENQUIRIES

SECTION (REPEATABLE)

FEATURE IMAGE

Example content model - by content element

33

TITLE

SUMMARY

IMAGE CAPTION

IMAGE

HEADING

BODY TEXT

CONTACT NAMECONTACT EMAILCONTACT NUMBER

Example content model - by content component

34

CONTENT ELEMENT - ABOUT

CONTENT ELEMENT - ENQUIRIES

CONTENT ELEMENT - SECTION (REPEATABLE)

CONTENT ELEMENT - FEATURE IMAGE

CONTENT COMPONENT - HEADING

CONTENT COMPONENT - SUMMARY

CONTENT COMPONENT - IMAGE CAPTION

CONTENT COMPONENT - IMAGE

CONTENT COMPONENT - HEADING

CONTENT COMPONENT - BODY TEXT

CONTENT COMPONENT - CONTACT NAMECONTENT COMPONENT - CONTACT EMAILCONTENT COMPONENT -CONTACT NUMBER

CONTENT TYPE - GUIDE

Guide template

Guide content type in Content Publisher

35

CONTENT ELEMENT - FEATURE IMAGE

CONTENT ELEMENT - ABOUT

CONTENT ELEMENT - SECTION (REPEATABLE)

Exercise 2 - Chunking up the blobs

Task: • Use the 'Person profile' content type you identified as part of

the webpage sort • Identify the structures that make up that 'Person profile',

including content elements and components • Mark these up on paper

Time allowed: • 20 minutes

36

Take a five-minute break

In Google forms

Creating a content element

39

Use the ‘Add title and description’ to represent Content elements

Adding a description to a content component

40

Select the three vertical dots and ‘Description’ to add microcopy to your content component

Adding an image content component

41

Select ‘Data validation’. A series of drop down fields will appear, select ‘Text and ‘URL’

Example Guide content type in Google forms

42

Example: http://goo.gl/forms/BmjkzvoaIe7Er5i73

Exercise 3 - Build your prototypeTask:

• Use the ‘Person profile’ you marked up in the previous exercise, build a working model in Google Forms

• Make the Google Form user friendly - include easy to understand headings and microcopy to help the person complete the form

• Don’t worry about repeating elements or required fields

Time allowed: • 30 minutes

43

Test your content model

Goal

45

• Understand the importance of testing a content model with real content

Exercise 4 - Test your prototype

Task: • Share your completed Google form with the team opposite • Using the 'Person profile' provided, fill out the form using the

content model developed by the opposite team • Using the post-it notes provided, write down one thing that

worked well and one thing that didn’t

Time allowed: • 20 minutes

46

Take a five-minute break

Retrospective

“No [content] model is supposed to survive first contact with real content, but… they need to survive future contact.”Cleve Gibbonhttp://www.clevegibbon.com/2013/09/no-model-survives-first-contact-with-real-content/

IMAGE: © 2015 CLEVEGIBBON.COM

Lessons learnt

51

Sharing your content model - defining fields

Example: https://docs.google.com/spreadsheets/d/15OWj6K3CRvecX8C4UKiL-4tai4l0ShGSOQZ8c9Fu3qg/edit#gid=0

52Example: https://docs.google.com/spreadsheets/d/15OWj6K3CRvecX8C4UKiL-4tai4l0ShGSOQZ8c9Fu3qg/edit#gid=0

Sharing your content model - character length

53Example: https://docs.google.com/spreadsheets/d/15OWj6K3CRvecX8C4UKiL-4tai4l0ShGSOQZ8c9Fu3qg/edit#gid=0

Sharing your content model - field and data type

54Example: https://docs.google.com/spreadsheets/d/15OWj6K3CRvecX8C4UKiL-4tai4l0ShGSOQZ8c9Fu3qg/edit#gid=0

Sharing your content model - relationships

Implementing Adaptive content

55

• http://schema.org/ • https://instantarticles.fb.com/ • https://www.ampproject.org/

Q&A

57

Thanks for comingIf you’d like to chat more, please join (buy) us a drink later

Follow us: • @richprowse • @tomnatt • @uniofbathdmc

Find out what we’re doing at blogs.bath.ac.uk/digital.

Previous master class

http://www.slideshare.net/richprowse/working-in-an-agile-way-content-creation-delivery-and-standards