CONTENT STRATEGY
FOR MOBILE
@karenmcgrane

Could have done with less
discussion on content strategy.

WHAT YOU’RE IN FOR MOBILE
CONTENT STRATEGY INTRO 9:00–10:30 Exercise: Convince Your CEO Break 10:30–11:00 ADAPTIVE CONTENT 11:00–12:00 Exercise: State of the Mobile Web Lunch 12:00–1:30 CONTENT INVENTORY 1:30–3:00 Exercise: Select Content to Include + Exclude Break 3:00–3:30 CONTENT MODELING 3:30–5:00 Exercise 4: Create Content Packages

FOUR MOBILE TRUTHS

1.
CONTENT MATTERS ON MOBILE.

2.
STRIVE FOR CONTENT PARITY.

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

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

No one will ever need
to do that on mobile.

ADVERTISER PLACES ITS URL IN
A TV SPOT 86% say they use their smartphone while watching 79% of large television advertisers do not have a mobile site Source: Nielsen, Google

Pepsi’s annual marketing budget is
$1.7 BILLION USD

RESTAURANT WEBSITE BUILT ENTIRELY USING
FLASH 30% of searches for restaurants come from mobile Source: Google

RETAILER REALIZES THAT PEOPLE USE
THEIR MOBILES IN-STORE 66% say 33% say they they use their use their Only 37% of phones to smartphone retailers have a “pre-shop” while in-store mobile website stores Source: Google

FINANCIAL SERVICES FIRMS BALANCE TRANSACTIONS
AND INFORMATION 15% of searches for finance and insurance content are mobile Source: Google

“ 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

UNIVERSITY WANTS TO REACH PROSPECTIVE
STUDENTS 62% of people 42% of them 18–24 have a say they rarely smartphone use the desktop web. Source: Nielsen, Pew

GOVERNMENT MUST PROVIDE ACCESS TO
ALL 60% with income Low below $25,000 income have no smartphone Internet access penetration at home jumped from 20% to 35% Source: Nielsen, Pew in 2011

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

No one willalready wants Somebody
ever need to do that on mobile. to do that on mobile.

Mobile should be the “lite”
version.

Build a separate mobile site
✘ Cut features and content not core to the mobile use case ✘ Auto-redirect searches to your mobile site ✘ Send users who need more info to the desktop site ✘

SCREEN SIZE IS NOT CONTEXT

THE LONG TAIL OF CONTENT
The last 20 or so pages still drive more than 1000 page views Source: Hubspot.com

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

united club membership

SEPARATE MOBILE SITES BREAK SEARCH
http://xkcd.com/869/

SEPARATE MOBILE SITES
BREAK SOCIAL

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

Mobile should offer an Mobileequivalent
experience. should be the “lite” version.

Our current publishing process will
support mobile.

Web Mobile

MOBILE IS A FILTER, NOT
A FORK

78% of businesses plan to
deploy 47% want tablets by tools for their 2013 sales force Source: Model Metrics

NO FORKING WAY

Our current publishing process Our
editorial process, workflow, and will support mobile. governance will need to change.

DISCUSSION CONVINCE YOUR CEO Imagine
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?

WHAT YOU’RE IN FOR MOBILE
CONTENT STRATEGY INTRO 9:00–10:30 Exercise: Convince Your CEO Break 10:30–11:00 ADAPTIVE CONTENT 11:00–12:00 Exercise: State of the Mobile Web Lunch 12:00–1:30 CONTENT INVENTORY 1:30–3:00 Exercise: Select Content to Include + Exclude Break 3:00–3:30 CONTENT MODELING 3:30–5:00 Exercise 4: Create Content Packages

ADAPTIVE CONTENT What is it,
and why would I want it?

“ Fragmenting our content across
different “device-optimized” experiences is a losing proposition, or at least an unsustainable one. —Ethan Marcotte Responsive Web Design

“ 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

MOBILE WEB MOBILE WEBSITE APPS
SOCIAL TABLET MEDIA APPS CONTENT MICROSITES PRINT BLOGS EMAIL INTRANET

REUSABLE CONTENT STRUCTURED CONTENT PRESENTATION-INDEPENDENT
CONTENT MEANINGFUL METADATA USABLE CMS

MULTIPLE VERSIONS
ALTERNATIVE FALLBACKS

REUSABLE CONTENT STRUCTURED CONTENT PRESENTATION-INDEPENDENT
CONTENT MEANINGFUL METADATA USABLE CMS

CHUNKS, NOT BLOBS

REUSABLE CONTENT STRUCTURED CONTENT PRESENTATION-INDEPENDENT
CONTENT MEANINGFUL METADATA USABLE CMS

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

REUSABLE CONTENT STRUCTURED CONTENT PRESENTATION-INDEPENDENT
CONTENT MEANINGFUL METADATA USABLE CMS

Metadata is a love note
to the future. Jason Scott, @textfiles

REUSABLE CONTENT STRUCTURED CONTENT PRESENTATION-INDEPENDENT
CONTENT MEANINGFUL METADATA USABLE CMS

Content admins hate all the
fields. But the reason they hate all the fields is the workflow is bad. Jason Pamental, @jpamental

Most CMSs were designed to
provide an interface to a data model rather than a user experience that helps content creators complete their tasks. Jeff Eaton, @eaton

TASKS ARE MORE IMPORTANT THAN
THE DATA MODEL.

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

“ 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

EXERCISE STATE OF THE MOBILE
WEB Compare 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?

MOBILE CONTENT STRATEGY PROCESS What
do you need to do?

WHAT YOU’RE IN FOR MOBILE
CONTENT STRATEGY INTRO 9:00–10:30 Exercise: Convince Your CEO Break 10:30–11:00 ADAPTIVE CONTENT 11:00–12:00 Exercise: State of the Mobile Web Lunch 12:00–1:30 CONTENT INVENTORY 1:30–3:00 Exercise: Select Content to Include + Exclude Break 3:00–3:30 CONTENT MODELING 3:30–5:00 Exercise 4: Create Content Packages

Paypal Business Nav Paypal Payments
Standard Accept credit cards wherever _Choosing which content to include you do business. Get everything you need to accept credit cards from your customers. Online sales, invoicing, in-person and exclude payments… this solution securely handles them all. Get Started _Using headings as navigation labels Call: 1-888-818-3922 _Truncating body copy for summaries Watch a Demo Accept credit cards and PayPal on your _Resizing images website. (formerly Website Payments Standard) Start selling on your website with our secure payment buttons. You can set up your button in about 1... _Ensuring appropriate file formats Swipe credit cards with your free card reader. PayPal Here is a simple way to accept credit and _Presenting appropriate next steps debit cards, PayPal and even checks—anywhere you... Email your invoices for faster payment. Use your computer, smartphone or tablet to email professional looking invoices to your customers. Ad... Access your money quickly. 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. 88

INVENTORY YOUR CONTENT SELECT CONTENT
TO INCLUDE + EXCLUDE MODEL YOUR CONTENT DEFINE CONTENT PACKAGES

TYPICAL CONTENT INVENTORY Inventories 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

Section Page Name Page Template
URL Owner Last Update Keywords Page Rank Notes 0.0 Home Homepage Homepage 4/17/2012 1.0 Our Products Our Products Landing Page Landing page 6/18/2011 1.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/2011 1.3 Our Products Acme Glue Mousetrap Product page 6/18/2011 1.4 Our Products Acme Mouse Poison Product page 6/18/2011 1.5 Our Products Acme Live-Catch Mousetrap Product page 6/18/2011 1.6 Our Products Acme Bucket Trap Product page 6/18/2011 2.0 Our Services Our Services Landing Page Landing page 2.1 Our Services In-home Consultation Landing page 2.2.0 Our Services Rodent Control Services Landing page 2.2.1 Our Services Trap Setting and Removal Article Page 2.2.2 Our Services Rodenticide Sprays Article Page 2.2.3 Our Services Mouse Contraceptives Article Page 2.2.4 Our Services Varmint Hunting Article Page 2.2.5 Our Services Cat Rental Article Page 2.3 Our Services Request a Brochure Form Sends to Excel 3.0 News and Insights News and Insights Landing Editorially controlled page 4/17/2012 Page 3.1.0 News and Insights Pest Control Perspectives Listing Page 4/17/2012 3.1.1 News and Insights New Developments in Individual Whitepaper 4/1/2012 Possum Monitoring 3.1.2 News and Insights Improving Pest Management Individual Whitepaper 3/1/2012 and Reducing Pesticide Risks in Schools and Parks 3.1.3 News and Insights Is Pest Control for the Birds? Individual Whitepaper 2/1/2012 3.1.4 News and Insights Selling a Cheaper Individual Whitepaper 11/1/2011 Mousetrap: Entry and Competition in the Retail Sector 3.1.5 News and Insights Mouse control: Are Individual Whitepaper 10/1/2007

CONTENT INVENTORY FOR MOBILE Mobile
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

CONTENT INVENTORY IN THE CMS
Mobile 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?

EXERCISE CONTENT INVENTORY Select 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 ID Section Page Name
URL Owner First Published Last Updated Item ID Content Element Format Size Owner Include/Exclude Notes

INVENTORY YOUR CONTENT SELECT CONTENT
TO INCLUDE + EXCLUDE MODEL YOUR CONTENT DEFINE CONTENT PACKAGES

RESPONSIVE VS. ADAPTIVE

“ 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

RESPONSIVE DESIGN + CONTENT Must
use exactly the same content as on the desktop Different front-end code supports different visual styles Can choose to exclude content, but... Dumb devices often still wind up downloading the full set of content

“ 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

ADAPTIVE DESIGN + CONTENT In
most cases, you still want to use the exact same content as on the desktop Can serve different content as needed, but... Your CMS has to support targeting content with business rules You have to maintain multiple instances

NOT EITHER/OR
BOTH + AND

THE SIMPLEST POSSIBLE SOLUTION WHAT
TO INCLUDE + EXCLUDE Include Exclude _Headers — especially to _Most illustrative thumbnail serve as navigation labels images (unless it’s required, _Body copy — if it’s short say for retail) enough to act as a teaser _Media in unsupported _Call to action links formats (Flash videos, complex infographics) _Header image _Large tables or charts You can change the way it looks, but you cannot change what it is.

EXERCISE SELECT CONTENT TO INCLUDE
For 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?

WHAT YOU’RE IN FOR MOBILE
CONTENT STRATEGY INTRO 9:00–10:30 Exercise: Convince Your CEO Break 10:30–11:00 ADAPTIVE CONTENT 11:00–12:00 Exercise: State of the Mobile Web Lunch 12:00–1:30 CONTENT INVENTORY 1:30–3:00 Exercise: Select Content to Include + Exclude Break 3:00–3:30 CONTENT MODELING 3:30–5:00 Exercise 4: Create Content Packages

INVENTORY YOUR CONTENT SELECT CONTENT
TO INCLUDE + EXCLUDE MODEL YOUR CONTENT DEFINE CONTENT PACKAGES

Content precedes design. Design in
the absence of content is not design, it’s decoration. Jeffrey Zeldman, @zeldman

CONTENT FIRST!

“ 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

“ 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?

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...

EXERCISE CONTENT MODELING You 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?

INVENTORY YOUR CONTENT SELECT CONTENT
TO INCLUDE + EXCLUDE MODEL YOUR CONTENT DEFINE CONTENT PACKAGES

DON’T CREATE CONTENT FOR A
SPECIFIC CONTEXT

A PACKAGE OF IMAGE CROPS

HEADLINES

ARTICLE TITLE ARTICLE SIDEBAR SEO
FACEBOOK TWITTER IPHONE ANDROID

LENGTH 60 characters, 100 characters,
200 characters TONE + STYLE SEO-optimized, Colloqiual SUPERHEADS + SUBHEADS Combo packages

SUMMARIES

TRUNCATION IS NOT A CONTENT
STRATE...

PROGRESSIVE DISCLOSURE

In its purest format, progressive
disclosure means offering a good teaser.

CALL-TO-ACTION LINKS

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

BODY FIELDS AND PAGE BREAKS

SCROLLING
IS OKAY!

ANCHOR
LINKS

SHOW/
HIDE

EXERCISE CONTENT PACKAGES Design 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?

TEN SIMPLE STEPS

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

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.

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.

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.

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.

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

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.

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.

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.

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

THANKS! @karenmcgrane karen@bondartscience.com www.bondartscience.com +1
(917) 887-8149

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

I’M BORED Pocket Robot. Entertain
me!

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

Bored Bored Bored Infoseeking Infoseeking
Local Infoseeking Bored 25% 31% Local Local Local Bored Infoseeking Infoseeking 44% Infoseeking Infoseeking Local Infoseeking Infoseeking

EXERCISE WHAT ARE YOU SEARCHING
FOR?

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

We’re about to usher in
a golden age of PDFs on the iPad. Paul Ford, @ftrain

“ 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

All I see is an
entire organization screaming, “WE WANT IT TO BE THE EIGHTIES DAMMIT.” Condé Nast Is Experiencing Technical Difficulties

COPE: CREATE ONCE, PUBLISH EVERYWHERE
COPE: Create Once, Publish Everywhere

C O N T E
N T P R O V I D E R S M U S I C P A R T N E R S NPR, Open Content and API’s, O’Reilly Oscon 175

NPR.ORG NPR Digital Media Examples
NPR, OpenCOPE and API’s, O’Reilly Oscon of Content

NPR.ORG PLAYER NPR Digital Media
Examples of COPE

NPR NEWS
iPHONE APP

NPR MOBILE
WEB SITE

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

NPR ON THE PUBLIC RADIO
PLAYER

NPR ON
WBUR

NPR ON
MPR

NPR ON
iGOOGLE

NPR IN
iTUNES

NPR’S
CMS

NPR’S API

BUSINESS VALUE?

31,000 2010 iPAD ISSUE SALES
22,000 13,000 11,000 10,500 8,700 4,300 2,775 Sept. Nov. Sept. Nov. Sept. Nov. Sept. Nov.

NPR PAGE VIEWS 88 Million
43 Million

“ 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

“ 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!

Intelligent Flexible Structured Nimble Agile
Adaptive Atomized Semantic

WHY ARE NEWS ORGANIZATIONS THE
INNOVATORS?

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. •Nut graf Lede: Lead, as in leading paragraph, usually the first sentence, or in some cases the first two Captions are photo headlines •Nutshell paragraph sentences, ideally 20-25 words in length. An Cutlines are the words (under the effective lead is a brief, sharp statement of the caption, if there is one) describing the •Summarizes the story's essential facts. photograph or illustration. story's content •Often bullet- Lorem ipsum dolor sit amet, consectetuer pointed adipiscing elit, sed diam nonummy nibh euismod •Sometimes set tincidunt ut laoreet dolore magna aliquam erat off in a box 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.

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

THE PRIMARY PLATFORM

Thinking about where content will
“live” on a “web page” is pretty 1999. Lisa Welchman, @lwelchman

Metadata is the new art
direction. Ethan Resnick, @studip101

THE MARRIAGE OF CONTENT AND
FORM

STRUCTURE EXPRESSED
THROUGH STYLING

Content admins hate all the
fields. But the reason they hate all the fields is the workflow is bad. Jason Pamental, @jpamental

CMS IS THE ENTERPRISE SOFTWARE
THAT UX FORGOT

CONTEXTUAL INQUIRY USER PERSONAS USER
SCENARIOS TASK ANALYSIS WORKFLOW MAPPING CARD SORTING CONTENT MODELING ITERATIVE PROTOTYPING USABILITY TESTING ANALYTICS DATA

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

“ 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

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

“ 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.