For years, we've been telling designers: the web is not print. You can't have pixel-perfect layouts. You can't determine how your site will look in every browser, on every platform, on every device. We taught designers to cede control, think in systems, embrace web standards. So why are we still letting content authors plan for where their content will "live" on a web page? Why do we give in when they demand a WYSIWYG text editor that works "just like Microsoft Word"? Worst of all, why do we waste time and money creating and recreating content instead of planning for content reuse? What worked for the desktop web simply won't work for mobile. As our design and development processes evolve, our content workflow has to keep up. Karen will talk about how we have to adapt to creating more flexible content.
3. “
Fragmenting our content across different
“device-optimized” experiences is a losing
proposition, or at least an unsustainable one.
—Ethan Marcotte, Responsive Web Design
3
5. “
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
Nimble Report, http://nimble.razorfish.com 5
20. We’re about to usher in a golden age
of PDFs on the iPad.
Paul Ford, Ftrain.com
20
21. “
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
http://www.observer.com/2011/07/scott-dadich-ipad-conde-nast/?show=all 21
22. All I see is an
entire organization screaming,
“WE WANT IT TO BE THE EIGHTIES
GODDAMMIT.”
Condé Nast Is Experiencing Technical Difficulties
22
40. “
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.
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, open sourced Android app
and HTML5 site, some of which were turned around in
a matter of weeks!
—Zach Brand, Senior Director Technology, NPR
40
42. 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.
42
43. 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 43
55. “
Traditional publishing and content management
systems bind content to display and delivery
mechanisms, which forces a recycling approach for
multi-platform publishing.
A semantic content publishing system, on the
other hand, 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.
—Dan Willis
http://dswillis.com/uxcrank/?p=378 55
56. API OWL
XML
RDF
EXIF DITA
XMP http://www.flickr.com/photos/97867906@N00/5913915289/ 56
57. IT’S NOT A TECHNOLOGY PROBLEM.
IT’S A STRATEGY PROBLEM.
WHICH MEANS IT’S A PEOPLE
PROBLEM.
57
66. CONTEXTUAL INQUIRY
USER PERSONAS
USER SCENARIOS
TASK ANALYSIS
WORKFLOW MAPPING
CARD SORTING
CONTENT MODELING
ITERATIVE PROTOTYPING
USABILITY TESTING
ANALYTICS DATA
66
67. “
The happier people are, the better their content
will be, the more content they’ll produce.
Digital newsrooms have moved from shoveling to
creating. Those two tasks require very different
environments.
—Patrick Cooper, NPR
http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/ 67
68. “
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
http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/ 68
73. Page Title
Example: Widget-o-Rama: FancyWidget No. 5
PRODUCT DESCRIPTION—ANSWERS THE QUESTION “WHAT IS IT?”
Product Name
Product Line
Short Guidelines: Two sentences. The product
description should answer the questions
Description
“What is it?” “Who is it for?” and “What does
it do?” The description must include at least
one real, actual noun besides the name of the
Example description: Widget-o-Rama’s FancyWidget product.
No. 5 is an inverse reactive current supply mechanism
used for operating nofer-trunnions and reducing
sinusoidal depleneration when used in conjunction with a
drawn reciprocating dingle arm.
PRODUCT BENEFITS—ANSWERS THE QUESTION “WHY SHOULD I BUY IT?”
Benefit/Feature Guidelines: Benefits are about the customer
Pairs and answer the question, “What will this do
for me?” Features are about the product and
answer the question, “How does the product
work?” On the Widget-o-Rama website, they
should come in pairs consisting of a very
Examples: specific benefit, followed by the feature or
Reduces maintenance costs by up to 50% by features that make it possible. Use concrete
replacing delicate gremlin studs with a robust spiral terms whenever you can.
decommutator and eliminating the need for drammock oil
after phase detractors are remissed.
Prevents side fumbling via the addition of pentametric
fan consisting of six hydrocoptic marzelvanes fitted to the
ambifacient lunar vaneshaft.
http://www.alistapart.com/articles/content-templates-to-the-rescue/ 73
74. Display
Styles
Content Input
Model Templates
74
89. This approach of using structured content
removes much of the requirement for
formatting tools in the CMS.
Rachel Andrew, Your WYSIWYG Editor Sucks 89