1. 2
preparing for
the mobilacalypse
why mobile sites are doomed,
why the future is made of structured content,
and how to build without breaking the bank
3. mo·bil·ac·a·lypse (n)
1) The tipping point that occurs when building for one
channel locks out a majority of users, but building for
many bankrupts you.
6
4. you might want to
leave now if…
7
‣ You don’t manage or publish content
‣ You have infinite budget, unlimited staff
‣ You’re retiring in 2014
‣ Otherwise? Stick around, tweet to #postmobile
7. 10
‣88%of U.S. adults have cell phones
‣47%use their phone for browsing
‣15%use their phone for most browsing
‣25%of teens & minorities, 45% of girls
9. 12
‣75%of mobile usage is home or office
‣90%split tasks between devices
‣65%shopped on phone, purchased on PC
‣68%avoid desktop if mobile doesn’t satisfy
‣15%of U.S. adults are “mostly mobile”
10. 1. Mobile users are here, now
2. They want the same stuff
3. Building separate sites kills
13
11. Karen McGrane: A Separate Mobile Site? No Forking Way
“The challenge for most organisations in the long
run won’t be maintaining multiple sets of
frontend code or different templates. It will be
maintaining variations of duplicate content.
14
12. 1. Mobile users are here, now
2. They want the same stuff
3. Building separate sites kills
4. Responsive design is overtaxed
15
17. Drupal.org on my living room television. No, seriously.
46m on XBox Live
25
50
75
100
Time Warner Dish DirecTV Comcast XBox Live PlayStation
19
18. 1. Mobile users are here, now
2. They want the same stuff
3. Building separate sites kills
4. Responsive design is overtaxed
5. New channels keep coming
20
20. Karen McGrane, A List Apart
24
“People don't want different content or less
content. They imagine that their devices are
different windows on the same content, not
entirely different containers.
21. mo·bil·ac·a·lypse (n)
1) The tipping point that occurs when having for one
channel locks out a majority of users, but building for
many bankrupts you.
2) The revelation of a new way to publish content
25
23. Whitehouse.gov, Digital Government Blueprint
“Rather than thinking primarily about the final
presentation — publishing web pages, mobile
applications or brochures — an information-
centric approach focuses on ensuring our data
and content are accurate, available, and secure.
27
43. 38
<story id="161551774">
<link type="html">http://www.npr.org/2012/09/21/16…</link>
<link type="api">http://api.npr.org/query?id=161551774</link>
<link type="short">http://n.pr/Sc6mZV</link>
<title>Printing Solar Panels In The Backyard</title>
<teaser>
With crowd-sourced funding through Kickstarter, a team of
inventors are building a Solar Pocket Factory: a machine
designed to print micro solar panels. Co-inventor Shawn
Frayne stopped by Flora Lichtman's backyard with a few
pieces of the prototype to explain how the machine works.
</teaser>
<miniTeaser>
A Kickstarter-funded project aims to build a machine to print
micro solar panels.
</miniTeaser>
</story>
44. 38
<story id="161551774">
<link type="html">http://www.npr.org/2012/09/21/16…</link>
<link type="api">http://api.npr.org/query?id=161551774</link>
<link type="short">http://n.pr/Sc6mZV</link>
<title>Printing Solar Panels In The Backyard</title>
<teaser>
With crowd-sourced funding through Kickstarter, a team of
inventors are building a Solar Pocket Factory: a machine
designed to print micro solar panels. Co-inventor Shawn
Frayne stopped by Flora Lichtman's backyard with a few
pieces of the prototype to explain how the machine works.
</teaser>
<miniTeaser>
A Kickstarter-funded project aims to build a machine to print
micro solar panels.
</miniTeaser>
</story>
45. ‣With multichannel, WYSIWYG isn’t.
‣“Dreamweaver fields” kill reuse
‣Limit allowed tags, watch for abuse
‣Aim for rich text, not full HTML
39
is this the scheduled
WYSIWYG rant? yes.
46. 1. Manage one pool of content
2. Structure content for remixing
3. Decouple content, presentation
4. Payoff?
40
47. NPR, What We Did Wrong: NPR Improves Its API Architecture
“Having an API allows us to be highly efficient at
building new platforms. We build the
presentation, and the ‘data’ is already ready to
go. In 12 months we doubled our online
audience and launched 11 products, including a
site redesign, with limited dev resources.
41
51. 45
Assets
The stuff people
want when they
visit your site
Structure
The elements you
use to group and
organize assets
Presentation
Ephemeral stuff
driven by channel
design needs
53. ‣Learn from DBAs & CSS purists
‣Ask, why does this field exist?
‣Store priority, not position
‣Capture emphasis, not appearance
47
what you have vs.
how it’s presented
54. 1. Identify your assets
2. Model meaning, not appearance
3. Expose and use content feeds
48
55. ‣RSS, JSON, etc.(Views RSS, Views Datasource)
‣Web Services(Services, RestWS…)
‣Consume, too!(Feeds, Client-side scripts…)
‣Drupal 8(Web Services Initiative, Twig…)
49
content APIs don’t
have to be crazy
56. 1. Identify your assets
2. Model meaning, not appearance
3. Expose and use content feeds
4. Care for your content editors
50
57. ‣Identify tasks and workflows
‣Plan for content maintenance
‣Tailor and refine content tools
‣Be cautious with WYSIWYG
51
editors are the most
important users
58. ‣Reuse, don’t fork, your content
‣Put purpose and structure first
‣Separate assets from presentation
‣Expose feeds to drive new channels
52
preparing for the
mobilacalypse
59. 53
read these books now.
Content EverywhereContent Strategy for Mobile APIs, A Strategy Guide
60. read these links, too.
54
Luke W
Karen McGrane
MIT Technology Review
Subcompact Publishing
Future Friendly Design
Baby Got Backend
10 Commandments of
mobile design
These slides
www.lukew.com/ff/
karenmcgrane.com/
www.technologyreview.com/businessreport/mobile-
computing-in-question/
craigmod.com/journal/subcompact_publishing/
speakerdeck.com/lukebrooker/future-friendly-
design
speakerdeck.com/eaton/baby-got-backend-the-
sequel
www.lullabot.com/articles/10-commandments-
modern-web-design
lb.cm/post-mobile
