Top Banner
227

Content Strategy for Mobile: The Workshop

Sep 08, 2014

Download

Technology

Karen McGrane

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Content Strategy for Mobile: The Workshop
Page 2: Content Strategy for Mobile: The Workshop

CONTENT STRATEGY FOR MOBILE@karenmcgrane

Page 3: Content Strategy for Mobile: The Workshop

Could have done with less discussion on content strategy.

Page 4: Content Strategy for Mobile: The Workshop

WHAT YOU’RE IN FORMOBILE CONTENT STRATEGY INTROExercise: Convince Your CEO 9:00–10:30

Break 10:30–11:00

ADAPTIVE CONTENTExercise: State of the Mobile Web 11:00–12:00

Lunch 12:00–1:30

CONTENT INVENTORY Exercise: Select Content to Include + Exclude 1:30–3:00

Break 3:00–3:30

CONTENT MODELINGExercise 4: Create Content Packages 3:30–5:00

Page 5: Content Strategy for Mobile: The Workshop

FOUR MOBILE TRUTHS

Page 6: Content Strategy for Mobile: The Workshop

CONTENT MATTERS ON MOBILE.

1.

Page 7: Content Strategy for Mobile: The Workshop

STRIVE FOR CONTENT PARITY.

2.

Page 8: Content Strategy for Mobile: The Workshop

IT’S NOT A STRATEGY IF YOU CAN’T MAINTAIN IT.

3.

Page 9: Content Strategy for Mobile: The Workshop

YOU DON’T GET TO DECIDE WHICH DEVICE PEOPLE USE.

THEY DO.

4.

Page 10: Content Strategy for Mobile: The Workshop

No one will ever need to do that on mobile.

Page 12: Content Strategy for Mobile: The Workshop

Pepsi’s annual marketing budget is$1.7 BILLION USD

Page 14: Content Strategy for Mobile: The Workshop
Page 15: Content Strategy for Mobile: The Workshop

RETAILER REALIZES THAT PEOPLE USE THEIR MOBILES IN-STORE

33% say they use their

smartphone while in-store

Only 37% of retailers have a mobile website

Source: Google

66% say they use their

phones to “pre-shop”

stores

Page 16: Content Strategy for Mobile: The Workshop
Page 18: Content Strategy for Mobile: The Workshop
Page 19: Content Strategy for Mobile: The Workshop

“If your organization’s information is not available on a small screen, it’s not available at all to people who rely on their mobile phones for access. That’s likely to be young people, people with lower household incomes, and recent immigrants—arguably important target audiences for public health messages.

—Pew Research

Page 20: Content Strategy for Mobile: The Workshop
Page 22: Content Strategy for Mobile: The Workshop
Page 24: Content Strategy for Mobile: The Workshop

By 2015, more Americans will access the internet through mobile devices than through desktop computers.

Source: IDC

Page 25: Content Strategy for Mobile: The Workshop

No one will ever need to do that on mobile.

Somebody already wants to do that on mobile.

Page 26: Content Strategy for Mobile: The Workshop

Mobile should be the “lite” version.

Page 27: Content Strategy for Mobile: The Workshop

Build a separate mobile site

Auto-redirect searches to your mobile site

Send users who need more info to the desktop site

Cut features and content not core to the mobile use case ✘

Page 28: Content Strategy for Mobile: The Workshop
Page 29: Content Strategy for Mobile: The Workshop

SCREEN SIZE IS NOT CONTEXT

Page 30: Content Strategy for Mobile: The Workshop
Page 32: Content Strategy for Mobile: The Workshop

BEWARE PERSONALIZED INTERFACES

http://blogs.msdn.com/b/jensenh/archive/2006/03/31/565877.aspx

Page 33: Content Strategy for Mobile: The Workshop

united club membership

Page 34: Content Strategy for Mobile: The Workshop

http://xkcd.com/869/

SEPARATE MOBILE SITES BREAK SEARCH

Page 35: Content Strategy for Mobile: The Workshop
Page 36: Content Strategy for Mobile: The Workshop

SEPARATE MOBILE SITES BREAK SOCIAL

Page 37: Content Strategy for Mobile: The Workshop

A LINK TO THE FULL DESKTOP WEBSITE IS A TERRIBLE USER EXPERIENCE.

Page 38: Content Strategy for Mobile: The Workshop

Mobile should offer anequivalent experience.Mobile should be the “lite” version.

Page 39: Content Strategy for Mobile: The Workshop

Our current publishing processwill support mobile.

Page 40: Content Strategy for Mobile: The Workshop

MobileWeb

Page 41: Content Strategy for Mobile: The Workshop

MOBILE IS A FILTER, NOT A FORK

Page 42: Content Strategy for Mobile: The Workshop
Page 43: Content Strategy for Mobile: The Workshop

78% of businesses

plan to deploy tablets by

2013

47% want tools for their

sales force

Source: Model Metrics

Page 44: Content Strategy for Mobile: The Workshop

NO FORKING WAY

Page 45: Content Strategy for Mobile: The Workshop

Our current publishing processwill support mobile.

Our editorial process, workflow, and governance will need to change.

Page 46: Content Strategy for Mobile: The Workshop

DISCUSSIONCONVINCE YOUR CEOImagine you have a meeting with your chief executive or main client stakeholder to convince him or her that you need a more robust mobile content strategy. _What are the barriers that are preventing you from getting your content on mobile?

_What are your 3–5 main talking points? How will you persuade your executives you need to do this?

Page 47: Content Strategy for Mobile: The Workshop

WHAT YOU’RE IN FORMOBILE CONTENT STRATEGY INTROExercise: Convince Your CEO 9:00–10:30

Break 10:30–11:00

ADAPTIVE CONTENTExercise: State of the Mobile Web 11:00–12:00

Lunch 12:00–1:30

CONTENT INVENTORY Exercise: Select Content to Include + Exclude 1:30–3:00

Break 3:00–3:30

CONTENT MODELINGExercise 4: Create Content Packages 3:30–5:00

Page 48: Content Strategy for Mobile: The Workshop

ADAPTIVE CONTENTWhat is it, and why would I want it?

Page 49: Content Strategy for Mobile: The Workshop

“Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one.

—Ethan Marcotte Responsive Web Design

Page 50: Content Strategy for Mobile: The Workshop

“You can’t afford to create a piece of content for any one platform. Instead of crafting a website, you have to put more effort into crafting the description of the different bits of an asset, so they can be reused more effectively, so they can deliver more value.

—Nic Newman, BBC

Page 51: Content Strategy for Mobile: The Workshop

CONTENT

EMAIL

INTRANET

SOCIAL MEDIA

MICROSITES

MOBILE WEBWEBSITE

PRINT

TABLET APPS

MOBILE APPS

BLOGS

Page 52: Content Strategy for Mobile: The Workshop

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

Page 53: Content Strategy for Mobile: The Workshop
Page 54: Content Strategy for Mobile: The Workshop
Page 55: Content Strategy for Mobile: The Workshop
Page 56: Content Strategy for Mobile: The Workshop

MULTIPLE VERSIONSALTERNATIVE FALLBACKS

Page 57: Content Strategy for Mobile: The Workshop

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

Page 58: Content Strategy for Mobile: The Workshop
Page 59: Content Strategy for Mobile: The Workshop
Page 60: Content Strategy for Mobile: The Workshop

CHUNKS, NOT BLOBS

Page 61: Content Strategy for Mobile: The Workshop

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

Page 62: Content Strategy for Mobile: The Workshop

Their current website’s landing page is 1.5MB of tangled HTML, inline styles,

Flash presentations, enormous slideshows, and deeply nested

weird <div>s.

@lyzadanger

Page 63: Content Strategy for Mobile: The Workshop
Page 64: Content Strategy for Mobile: The Workshop
Page 65: Content Strategy for Mobile: The Workshop
Page 66: Content Strategy for Mobile: The Workshop
Page 67: Content Strategy for Mobile: The Workshop

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

Page 68: Content Strategy for Mobile: The Workshop

Metadata is a love note to the future.

Jason Scott, @textfiles

Page 69: Content Strategy for Mobile: The Workshop
Page 70: Content Strategy for Mobile: The Workshop
Page 71: Content Strategy for Mobile: The Workshop

REUSABLE CONTENTSTRUCTURED CONTENTPRESENTATION-INDEPENDENT CONTENTMEANINGFUL METADATAUSABLE CMS

Page 72: Content Strategy for Mobile: The Workshop

Content admins hate all the fields.But the reason they hate all the fields

is the workflow is bad.

Jason Pamental, @jpamental

Page 73: Content Strategy for Mobile: The Workshop
Page 74: Content Strategy for Mobile: The Workshop

Jeff Eaton, @eaton

Most CMSs were designed to provide an interface to a data model rather than

a user experience that helps content creators complete their tasks.

Page 75: Content Strategy for Mobile: The Workshop

TASKS ARE MORE IMPORTANT THAN THE DATA MODEL.

Page 76: Content Strategy for Mobile: The Workshop
Page 77: Content Strategy for Mobile: The Workshop
Page 78: Content Strategy for Mobile: The Workshop
Page 79: Content Strategy for Mobile: The Workshop

“The happier people are, the better their content will be, the more content they’ll produce.

—Patrick Cooper, NPR

Page 80: Content Strategy for Mobile: The Workshop

“Beautiful software, even for back-end users, is becoming an expectation.We’re moving in this direction because we now understand that better content management systems foster better content.

—Matt Thompson

Page 81: Content Strategy for Mobile: The Workshop

EXERCISESTATE OF THE MOBILE WEBCompare and contrast the a mobile website with the desktop website. (Don’t look at apps, just the mobile web.)_How much content is offered on the mobile website compared to the desktop site?

_Is the architecture and navigation the same or different?

_Is the branding and messaging the same or different?_How do you imagine this is managed in the CMS?

Page 82: Content Strategy for Mobile: The Workshop
Page 83: Content Strategy for Mobile: The Workshop
Page 84: Content Strategy for Mobile: The Workshop
Page 85: Content Strategy for Mobile: The Workshop

MOBILE CONTENT STRATEGY PROCESSWhat do you need to do?

Page 86: Content Strategy for Mobile: The Workshop

WHAT YOU’RE IN FORMOBILE CONTENT STRATEGY INTROExercise: Convince Your CEO 9:00–10:30

Break 10:30–11:00

ADAPTIVE CONTENTExercise: State of the Mobile Web 11:00–12:00

Lunch 12:00–1:30

CONTENT INVENTORY Exercise: Select Content to Include + Exclude 1:30–3:00

Break 3:00–3:30

CONTENT MODELINGExercise 4: Create Content Packages 3:30–5:00

Page 87: Content Strategy for Mobile: The Workshop
Page 88: Content Strategy for Mobile: The Workshop

Paypal Payments Standard

Nav

Accept credit cards wherever you do business.

Accept credit cards and PayPal on your website. (formerly Website Payments Standard)

Swipe credit cards with your free card reader.

Email your invoices for faster payment.

Access your money quickly.

dHome

dComplete Payment Solutions

dPopular Tools

dSpecialized Solutions

Paypal Business

Get everything you need to accept credit cards from your customers. Online sales, invoicing, in-person payments… this solution securely handles them all.

Get Started

Call: 1-888-818-3922

Watch a Demo

Start selling on your website with our secure payment buttons. You can set up your button in about 1...

PayPal Here is a simple way to accept credit and debit cards, PayPal and even checks—anywhere you...

Use your computer, smartphone or tablet to email professional looking invoices to your customers. Ad...

When the order is complete, the money usually shows up in your PayPal account in a few minutes. From...

Keep your costs down.

Do right by your customers.

Keep up with your payments.

Protect your business from fraud.

_Choosing which content to include and exclude

_Using headings as navigation labels_Truncating body copy for summaries_Resizing images_Ensuring appropriate file formats_Presenting appropriate next steps

88

Page 89: Content Strategy for Mobile: The Workshop

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

Page 90: Content Strategy for Mobile: The Workshop

TYPICAL CONTENT INVENTORYInventories typically look at pages:_Page title, including the main title and what appears in the meta <title> tag

_Content type or CMS template_Page URL_Content owner and/or person who last updated the page_Date the page was created and/or last updated_Keywords that describe the page _Page rank or number of visits

Page 91: Content Strategy for Mobile: The Workshop

Section Page Name Page Template URL Owner Last Update Keywords Page Rank Notes0.0 Home Homepage Homepage 4/17/20121.0 Our Products Our Products Landing Page Landing page 6/18/20111.1 Our Products Acme Cage Mousetrap Product page 6/18/2011 All product pages

contain description, image and specs

1.2 Our Products Acme Snap Mousetrap Product page 6/18/20111.3 Our Products Acme Glue Mousetrap Product page 6/18/20111.4 Our Products Acme Mouse Poison Product page 6/18/20111.5 Our Products Acme Live-Catch Mousetrap Product page 6/18/20111.6 Our Products Acme Bucket Trap Product page 6/18/20112.0 Our Services Our Services Landing Page Landing page2.1 Our Services In-home Consultation Landing page

2.2.0 Our Services Rodent Control Services Landing page2.2.1 Our Services Trap Setting and Removal Article Page2.2.2 Our Services Rodenticide Sprays Article Page2.2.3 Our Services Mouse Contraceptives Article Page2.2.4 Our Services Varmint Hunting Article Page2.2.5 Our Services Cat Rental Article Page

2.3 Our Services Request a Brochure Form Sends to Excel3.0 News and Insights News and Insights Landing

PageEditorially controlled page 4/17/2012

3.1.0 News and Insights Pest Control Perspectives Listing Page 4/17/20123.1.1 News and Insights New Developments in

Possum MonitoringIndividual Whitepaper 4/1/2012

3.1.2 News and Insights Improving Pest Management and Reducing Pesticide Risks in Schools and Parks

Individual Whitepaper 3/1/2012

3.1.3 News and Insights Is Pest Control for the Birds? Individual Whitepaper 2/1/20123.1.4 News and Insights Selling a Cheaper

Mousetrap: Entry and Competition in the Retail Sector

Individual Whitepaper 11/1/2011

3.1.5 News and Insights Mouse control: Are Microchips the Answer?

Individual Whitepaper 10/1/2007

3.1.6 News and Insights Hantavirus Transmission in Urban Areas

Individual Whitepaper 1/1/2008

3.1.7 News and Insights Infection Control Challenges Hospitals Must Address During Construction

Individual Whitepaper 2/1/2008

3.1.8 News and Insights Using Barn Owls for Rodent Control

Individual Whitepaper 3/1/2008

3.1.9 News and Insights Rodent Control After Hurricanes and Floods

Individual Whitepaper Apr 1, 2008

3.1.10 News and Insights Techniques Used In Rodent Control to Safeguard Non-Target Wildlife

Individual Whitepaper May 1, 2008

3.2.0 News and Insights Resources for Consumers Listing page(s) of all articles3.2.1 News and Insights What you can do to control

rodents outside.Individual article Dec 1, 2006

3.2.2 News and Insights Expert tips for using pest control devices

Individual article Jan 1, 2007

3.2.3 News and Insights Natural Rodent Control: Is it Safe? Does it Work?

Individual article Feb 1, 2007

3.2.4 News and Insights How to Eliminate Rats in Your Home

Individual article Mar 1, 2008

3.2.5 News and Insights Protect Yourself From Rodent Intruders

Individual article Apr 1, 2008

3.2.6 News and Insights It’s Raining Rats and Mice! Individual article May 1, 20083.2.7 News and Insights Eliminating House Mice:

Extermination and Prevention Tips

Individual article Jun 1, 2008

3.2.8 News and Insights Safe Ways to Control Pests Around Your Home

Individual article Jul 1, 2008

3.2.9 News and Insights How to Control Garden Pests with Animals and Insects

Individual article Aug 1, 2008

3.2.10 News and Insights Organic Pest Control Options in Organic Gardening

Individual article Sep 1, 2008

3.2.11 News and Insights Pest Identification Map: See What’s Biting in Your Area

Individual article Oct 1, 2008

3.2.12 News and Insights What Makes Flea Pest Control Different From Other Forms of Pest Control?

Individual article Jan 1, 2009

3.3.0 News and Insights Press Room Overview of all media materialsOverview of all media materials Includes contact info for PR Dept.

3.3.1.x News and Insights Press Release Individual press release More than one page3.3.2.x News and Insights Video Template Individual video page More than one page3.3.3.x News and Insights Webinar Template Individual webinar page More than one page

4.0 Our Team Our Professionals Landing Page

Landing page with info about staffLanding page with info about staffLanding page with info about staff

4.1.0 Our Team People Search Search for specific people Search by name, office, speciality

4.1.1 Our Team People Search Results Results for people search4.2.0 Our Team Executive Team Bios for executive team Only bios for executive

team4.3 Our Team Careers Landing page for job seekersLanding page for job seekers Links out to

Monster.com5.0 About Us About Us Landing Page Landing page for company infoLanding page for company info

5.1.x About Us Company History Detailed description of historyDetailed description of history More than one page5.2 About Us Interactive Timeline Timeline of great moments in pest controlTimeline of great moments in pest controlTimeline of great moments in pest controlTimeline of great moments in pest control Built in Flash5.3 About Us What Makes Us Special Key differentiators

5.4.0 About Us Locations Map and contact info Offices listed in alphabetical order

5.4.1 About Us Individual Office Page Address and Directions Includes Google Map5.5 About Us Contact Us Contacts via phone, email, mail, formContacts via phone, email, mail, formContacts via phone, email, mail, form6.0 Just For Fun! Just For Fun Landing Page Landing page for games6.1 Just For Fun! Mousetrap Game Online version of board gameOnline version of board game Built in Flash6.2 Just For Fun! Rube Goldberg Contraption Build your own contraption Built in Flash6.3 Just For Fun! Send an e-card Collection of mouse-themed cardsCollection of mouse-themed cardsCollection of mouse-themed cards Links out to 3rd party6.4 Just For Fun! Mousetrap Videos Collection of mousetrap videosCollection of mousetrap videos Links out to 3rd party7.0 Utilities Get in Touch Contact layer (not a page) Track contact requests7.1 Utilities Privacy Policy Text Page7.2 Utilities Terms and Conditions Text Page7.3 Utilities Disclosure Statement Text Page7.4 Utilities Business Continuity Plans Text Page7.5 Utilities Proxy Voting Policies Text Page7.6 Utilities Search Results Site wide search results

Page 92: Content Strategy for Mobile: The Workshop

CONTENT INVENTORY FOR MOBILEMobile requires looking at chunks and page elements:_Character or word count for headlines, subheads, and page summaries_Character or word count for body copy_Image dimensions or standard crop ratios or cut sizes_Common modules reused across pages (for example, in the right column) which may need to be handled differently on mobile screens_Content format, especially .pdf, .doc, .ppt, or other document formats that won’t condense well on mobile screens_Use of Flash or any other technology that just won’t work on a mobile device

Page 93: Content Strategy for Mobile: The Workshop
Page 94: Content Strategy for Mobile: The Workshop

CONTENT INVENTORY IN THE CMSMobile requires understanding how content is stored in the CMS:_Are content objects stored as blobs with embedded formatting?

_Are content objects chunked out into appropriately fielded entries?

_Are the content chunks at the right level of granularity for mobile?

_Does the CMS have the capability of targeting content at the field or component level?

Page 95: Content Strategy for Mobile: The Workshop

EXERCISECONTENT INVENTORYSelect a reasonably complex page (or set of pages) from PayPal or another site we’ve looked at. _Document what you can about each page. How would you get access to the information you can’t find just by looking at the page?

_Document each content element on the page:• Can you easily identify the format for each object?• Do you need exact sizes or just a rough range?• How will you decide if it should be included?

Page 96: Content Strategy for Mobile: The Workshop

Page ID

Section

Page Name

URL

Owner

First Published

Last Updated

Item ID Content Element Format Size Owner Include/Exclude Notes

Page 97: Content Strategy for Mobile: The Workshop

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

Page 98: Content Strategy for Mobile: The Workshop

RESPONSIVE VS. ADAPTIVE

Page 99: Content Strategy for Mobile: The Workshop

“Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.

http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

Page 100: Content Strategy for Mobile: The Workshop

RESPONSIVE DESIGN + CONTENTMust use exactly the same content as on the desktopDifferent front-end code supports different visual stylesCan choose to exclude content, but...Dumb devices often still wind up downloading the full set of content

Page 101: Content Strategy for Mobile: The Workshop

“Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.

http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

Page 102: Content Strategy for Mobile: The Workshop

ADAPTIVE DESIGN + CONTENTIn most cases, you still want to use the exact same content as on the desktopCan serve different content as needed, but...Your CMS has to support targeting content with business rulesYou have to maintain multiple instances

Page 103: Content Strategy for Mobile: The Workshop

NOT EITHER/ORBOTH + AND

Page 104: Content Strategy for Mobile: The Workshop

THE SIMPLEST POSSIBLE SOLUTIONWHAT TO INCLUDE + EXCLUDEInclude_Headers — especially to serve as navigation labels

_Body copy — if it’s short enough to act as a teaser

_Call to action links_Header image

Exclude_Most illustrative thumbnail images (unless it’s required, say for retail)

_Media in unsupported formats (Flash videos, complex infographics)

_Large tables or charts

You can change the way it looks, but you cannot change what it is.

Page 105: Content Strategy for Mobile: The Workshop

EXERCISESELECT CONTENT TO INCLUDEFor each of the following screens, identify which content elements you think should be included on a mobile screen (and which should be excluded.)_Draw an X through the content you wish to exclude._Make notes about the content you choose to include:• Do you think you can get access to the content at

that level of granularity in the CMS?• Is the desired content an appropriate size? Format?• Are there cases where you want or need certain

content, but you must provide an alternative format?

Page 106: Content Strategy for Mobile: The Workshop

WHAT YOU’RE IN FORMOBILE CONTENT STRATEGY INTROExercise: Convince Your CEO 9:00–10:30

Break 10:30–11:00

ADAPTIVE CONTENTExercise: State of the Mobile Web 11:00–12:00

Lunch 12:00–1:30

CONTENT INVENTORY Exercise: Select Content to Include + Exclude 1:30–3:00

Break 3:00–3:30

CONTENT MODELINGExercise 4: Create Content Packages 3:30–5:00

Page 107: Content Strategy for Mobile: The Workshop

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

Page 108: Content Strategy for Mobile: The Workshop

Content precedes design. Design in the absence of content

is not design, it’s decoration.

Jeffrey Zeldman, @zeldman

Page 109: Content Strategy for Mobile: The Workshop

CONTENT FIRST!

Page 110: Content Strategy for Mobile: The Workshop

“It is unrealistic to write your content — or ask your client to write the content — before you design it. Most of the time. Content needs to be structured and structuring alters your content, designing alters content. It’s not “content then design” or “content or design.” It’s “content and design.”

—Mark Boulton, @markboulton

Page 111: Content Strategy for Mobile: The Workshop
Page 112: Content Strategy for Mobile: The Workshop

“A lot of bad content management implementations homogenize vastly different content types into the same bland template.

The problem in those situations, paradoxically, isn’t too much structure. It’s not enough structure. By defining more content types and modeling them more fully, we can strike the right balance between flexibility and uniformity.

—Yes, I’m quoting myself. What of it?

Page 113: Content Strategy for Mobile: The Workshop

WHAT IS CONTENT MODELING?The process of turning all the “stuff” in the content on the site into a well-organized system of content types, attributes, and data-types. _What type of content is it? Article, product spec, recipe, slideshow...

_What fields or content attributes need to be entered?_What limits are set on each field? Date format, image specs...

Page 114: Content Strategy for Mobile: The Workshop
Page 115: Content Strategy for Mobile: The Workshop
Page 116: Content Strategy for Mobile: The Workshop
Page 117: Content Strategy for Mobile: The Workshop
Page 118: Content Strategy for Mobile: The Workshop
Page 119: Content Strategy for Mobile: The Workshop
Page 120: Content Strategy for Mobile: The Workshop
Page 121: Content Strategy for Mobile: The Workshop
Page 122: Content Strategy for Mobile: The Workshop
Page 123: Content Strategy for Mobile: The Workshop
Page 124: Content Strategy for Mobile: The Workshop

EXERCISECONTENT MODELINGYou will need to make decisions about how to break your content up into discrete elements for publishing to mobile. Keep the following in mind when identifying the properties of a given content type:_How should each content element be broken into fields? _What are requirements and rules for each element? _What constraints should be placed on the types of data stored in each element?

_What “invisible” meta-data might be used to control related content or support dynamic publishing to mobile?

Page 125: Content Strategy for Mobile: The Workshop

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

INVENTORY YOUR CONTENTSELECT CONTENT TO INCLUDE + EXCLUDEMODEL YOUR CONTENTDEFINE CONTENT PACKAGES

Page 126: Content Strategy for Mobile: The Workshop

DON’T CREATE CONTENT FOR A SPECIFIC CONTEXT

Page 127: Content Strategy for Mobile: The Workshop

A PACKAGE OF IMAGE CROPS

Page 128: Content Strategy for Mobile: The Workshop

HEADLINES

Page 129: Content Strategy for Mobile: The Workshop

ARTICLE TITLEARTICLE SIDEBARSEOFACEBOOKTWITTERIPHONEANDROID

Page 130: Content Strategy for Mobile: The Workshop
Page 131: Content Strategy for Mobile: The Workshop
Page 132: Content Strategy for Mobile: The Workshop
Page 133: Content Strategy for Mobile: The Workshop

LENGTH60 characters, 100 characters, 200 characters

TONE + STYLESEO-optimized, Colloqiual

SUPERHEADS + SUBHEADSCombo packages

Page 134: Content Strategy for Mobile: The Workshop

SUMMARIES

Page 135: Content Strategy for Mobile: The Workshop
Page 136: Content Strategy for Mobile: The Workshop
Page 137: Content Strategy for Mobile: The Workshop

TRUNCATION IS NOT A CONTENT STRATE...

Page 138: Content Strategy for Mobile: The Workshop

PROGRESSIVE DISCLOSURE

Page 139: Content Strategy for Mobile: The Workshop

In its purest format, progressive disclosure

means offering a good teaser.

Page 140: Content Strategy for Mobile: The Workshop
Page 141: Content Strategy for Mobile: The Workshop

CALL-TO-ACTION LINKS

Page 142: Content Strategy for Mobile: The Workshop

Different application process — no online application for mobile

Different handling of link to store — maps application on mobile

Different toll free number — for tracking where leads originate

Different content in the CMS

Page 143: Content Strategy for Mobile: The Workshop

BODY FIELDS AND PAGE BREAKS

Page 144: Content Strategy for Mobile: The Workshop
Page 145: Content Strategy for Mobile: The Workshop

SCROLLINGIS OKAY!

Page 146: Content Strategy for Mobile: The Workshop

ANCHORLINKS

Page 147: Content Strategy for Mobile: The Workshop

SHOW/HIDE

Page 148: Content Strategy for Mobile: The Workshop

EXERCISECONTENT PACKAGESDesign an editorial screen used to create and edit the PayPal screen we modeled. Remember to keep the following questions in mind:_What additional fields or attributes will be needed to support publishing in other channels? What sizes will give you the most flexibility?

_Which content elements will require alternative fallbacks? How should those be managed?

_Do you want to provide formatting buttons for some properties? What will happen to that formatting in other channels?

_Will an editor familiar with the visual appearance of an article on the web site be comfortable with the editing screen?

_Some properties are links to other content in the CMS —for example, images may live in an image management app. What tools would simplify the process of an editor managing these connections?

_

Page 149: Content Strategy for Mobile: The Workshop

TEN SIMPLE STEPS

Page 150: Content Strategy for Mobile: The Workshop

Quit thinking you can just guess what subset of content a “mobile user” wants. You’re going to guess wrong.

1.

Page 151: Content Strategy for Mobile: The Workshop

2.Do your research, look at competitors, and evaluate your analytics data. Figure out how to convince the people with money that you need a content strategy for mobile.

Page 152: Content Strategy for Mobile: The Workshop

3.Before jumping into imagining new mobile products, figure out how you can achieve content parity. Same content where you can, equivalent fallbacks where you can’t.

Page 153: Content Strategy for Mobile: The Workshop

4.Use mobile as a catalyst to remove content that isn’t providing value. Edit or delete content to make the experience better for all your users— desktop and mobile.

Page 154: Content Strategy for Mobile: The Workshop

5.Don’t create content for a specific context or platform. It’s not your desktop content, your mobile content, your tablet content, or even your print content. It’s just your content.

Page 155: Content Strategy for Mobile: The Workshop

Develop a process and workflow that will support and enable maximum content reuse with minimum additional effort. That’s adaptive content.

6.

Page 156: Content Strategy for Mobile: The Workshop

7.Create content packages: a flexible system of content elements that cover a range of possible uses. Then manage and maintain those content elements all in one place.

Page 157: Content Strategy for Mobile: The Workshop

8.Separate content from form and create presentation-independent content. Don’t encode meaning through visual styling — instead, add structure and metadata to your content.

Page 158: Content Strategy for Mobile: The Workshop

9.Ensure that your content management tools make it easy —and possible — for your content creators to develop the content structures needed to support adaptive content.

Page 159: Content Strategy for Mobile: The Workshop

10.Invest in CMS frameworks that support multi-channel publishing, and make sure your tools, processes, and workflow will support that.

Page 161: Content Strategy for Mobile: The Workshop

I’M LOCALI’m on the go and need local information.

Page 162: Content Strategy for Mobile: The Workshop

I’M BOREDPocket Robot. Entertain me!

Page 163: Content Strategy for Mobile: The Workshop

I’M INFOSEEKINGI need an answer to a question. Now.

Page 164: Content Strategy for Mobile: The Workshop

BoredBoredBoredInfoseekingInfoseekingInfoseekingLocalLocalLocalBoredInfoseekingInfoseekingInfoseekingLocalInfoseekingInfoseeking

Local25%

Infoseeking44%

Bored31%

Page 165: Content Strategy for Mobile: The Workshop

EXERCISEWHAT ARE YOU SEARCHING FOR?

Page 166: Content Strategy for Mobile: The Workshop

CONTENT IS THE MAIN REASON WE USE OUR MOBILE DEVICES.(Aside from Angry Birds.)

Page 167: Content Strategy for Mobile: The Workshop
Page 168: Content Strategy for Mobile: The Workshop
Page 169: Content Strategy for Mobile: The Workshop
Page 170: Content Strategy for Mobile: The Workshop
Page 171: Content Strategy for Mobile: The Workshop

We’re about to usher in a golden age of PDFs on the iPad.

Paul Ford, @ftrain

Page 172: Content Strategy for Mobile: The Workshop

“Existing art and production staffers from the print side would be responsible for making two iPad layouts (one in portrait and one in landscape) on Adobe’s platform.

—Condé Nast Is Experiencing Technical Difficulties

Page 173: Content Strategy for Mobile: The Workshop

All I see is an entire organization screaming,

“WE WANT IT TO BE THE EIGHTIESDAMMIT.”

Condé Nast Is Experiencing Technical Difficulties

Page 174: Content Strategy for Mobile: The Workshop

COPE: Create Once, Publish Everywhere

COPE:CREATE ONCE,PUBLISH EVERYWHERE

Page 175: Content Strategy for Mobile: The Workshop

CONTENT

PROVIDERS

MUSIC

PARTNERS

NPR, Open Content and API’s, O’Reilly Oscon 175

Page 178: Content Strategy for Mobile: The Workshop

NPR NEWS iPHONE APP

Page 179: Content Strategy for Mobile: The Workshop

NPR MOBILE WEB SITE

Page 180: Content Strategy for Mobile: The Workshop

NPR ADDICT IPHONE APPProduced by a public user, based entirely on the NPR API

Page 181: Content Strategy for Mobile: The Workshop

NPR ON THE PUBLIC RADIO PLAYER

Page 182: Content Strategy for Mobile: The Workshop

NPR ON WBUR

Page 183: Content Strategy for Mobile: The Workshop

NPR ON MPR

Page 184: Content Strategy for Mobile: The Workshop

NPR ON iGOOGLE

Page 185: Content Strategy for Mobile: The Workshop

NPR IN iTUNES

Page 186: Content Strategy for Mobile: The Workshop
Page 187: Content Strategy for Mobile: The Workshop

NPR’S CMS

Page 188: Content Strategy for Mobile: The Workshop

NPR’S API

Page 189: Content Strategy for Mobile: The Workshop

BUSINESS VALUE?

Page 190: Content Strategy for Mobile: The Workshop

Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov.

2,775

8,700

11,000

22,000

4,300

10,500

13,000

31,000

2010 iPAD ISSUE SALES

Page 191: Content Strategy for Mobile: The Workshop

NPR PAGE VIEWS

43 Million

88 Million

Page 192: Content Strategy for Mobile: The Workshop

“Over the last year, NPR’s total page view growth has increased by more than 80%. How did we get that much growth? Our API.

—Zach Brand, Senior Director Technology, NPR

Page 193: Content Strategy for Mobile: The Workshop

“The biggest impact that the API has made, however, is with our mobile strategy. The API has enabled NPR product owners to build specialized apps on a wide range of platforms and devices, liberating them from being dependent on custom development to access the content. Through this process, we built our iPhone and iPad apps, mobile sites, Android app and HTML5 site, some of which were turned around in a matter of weeks!

Page 194: Content Strategy for Mobile: The Workshop
Page 195: Content Strategy for Mobile: The Workshop
Page 196: Content Strategy for Mobile: The Workshop
Page 197: Content Strategy for Mobile: The Workshop
Page 198: Content Strategy for Mobile: The Workshop

SemanticAtomized

Intelligent

Adaptive

Nimble Agile

Structured

Flexible

Page 199: Content Strategy for Mobile: The Workshop
Page 200: Content Strategy for Mobile: The Workshop
Page 201: Content Strategy for Mobile: The Workshop
Page 202: Content Strategy for Mobile: The Workshop

WHY ARE NEWS ORGANIZATIONS THE INNOVATORS?

Page 203: Content Strategy for Mobile: The Workshop

Masthead

Hed: Headline, heading, head or title of a story, rarely a complete sentence.Dek: Deck, blurb, or article teaser or sub-headline. A phrase or two between the headline and the body of the article that explains what the story is about.

Lede: Lead, as in leading paragraph, usually the first sentence, or in some cases the first two sentences, ideally 20-25 words in length. An effective lead is a brief, sharp statement of the story's essential facts.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

•Nut graf

•Nutshell paragraph

•Summarizes the story's content

•Often bullet-pointed

•Sometimes set off in a box

Captions are photo headlinesCutlines are the words (under the caption, if there is one) describing the photograph or illustration.

Page 204: Content Strategy for Mobile: The Workshop

It’s scary to think about your package devolved into different content elements. It takes imagination and understanding to

take that apart. And courage.

Sarah Chubb Sauvayre, Condé Nast

Page 205: Content Strategy for Mobile: The Workshop

THE PRIMARY PLATFORM

Page 206: Content Strategy for Mobile: The Workshop
Page 207: Content Strategy for Mobile: The Workshop
Page 208: Content Strategy for Mobile: The Workshop
Page 209: Content Strategy for Mobile: The Workshop

Thinking about where content will “live” on a “web page” is pretty 1999.

Lisa Welchman, @lwelchman

Page 210: Content Strategy for Mobile: The Workshop

Metadata is the new art direction.

Ethan Resnick, @studip101

Page 211: Content Strategy for Mobile: The Workshop

THE MARRIAGE OF CONTENT AND FORM

Page 212: Content Strategy for Mobile: The Workshop

STRUCTURE EXPRESSED THROUGH STYLING

Page 213: Content Strategy for Mobile: The Workshop
Page 214: Content Strategy for Mobile: The Workshop
Page 215: Content Strategy for Mobile: The Workshop
Page 216: Content Strategy for Mobile: The Workshop
Page 217: Content Strategy for Mobile: The Workshop
Page 218: Content Strategy for Mobile: The Workshop

Content admins hate all the fields.But the reason they hate all the fields

is the workflow is bad.

Jason Pamental, @jpamental

Page 219: Content Strategy for Mobile: The Workshop

CMS IS THE ENTERPRISE SOFTWARE THAT UX FORGOT

Page 220: Content Strategy for Mobile: The Workshop
Page 221: Content Strategy for Mobile: The Workshop
Page 222: Content Strategy for Mobile: The Workshop
Page 223: Content Strategy for Mobile: The Workshop

CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA

CONTEXTUAL INQUIRYUSER PERSONASUSER SCENARIOSTASK ANALYSISWORKFLOW MAPPINGCARD SORTINGCONTENT MODELINGITERATIVE PROTOTYPINGUSABILITY TESTINGANALYTICS DATA

Page 224: Content Strategy for Mobile: The Workshop

“The happier people are, the better their content will be, the more content they’ll produce.

—Patrick Cooper, NPR

Page 225: Content Strategy for Mobile: The Workshop

“Beautiful software, even for back-end users, is becoming an expectation.We’re moving in this direction because we now understand that better content management systems foster better content.

—Matt Thompson

Page 226: Content Strategy for Mobile: The Workshop

“Traditional publishing and content management systems bind content to display and delivery mechanisms, which forces a recycling approach for multi-platform publishing.

—Dan Willis

Page 227: Content Strategy for Mobile: The Workshop

“A [decoupled] content publishing system creates well-defined chunks of content that can be combined in whatever way is most appropriate for a particular platform. All display issues are addressed by delivery applications, rather than by a content management system earlier in the process.