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
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
ïŹrst sentence, or in some cases the ïŹrst 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
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?â
BeneïŹt/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