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

2. i’m with lullabot.
hi. i’m @eaton!
4
we plan, design, build, and teach.

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

5. change is here
8

6. 1. Mobile users are here, now
9

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

8. 1. Mobile users are here, now
2. They want the same stuff
11

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

13. ©2012 Lyza Danger — http://flic.kr/p/cfkULL
16

14. BMW iDrive system — http://www.bmwcoop.com.
17

15. Google Glass breaks every web site’s interaction model. Sigh.
18

16. Drupal.org on my living room television. No, seriously.
19

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

19. 23
Search Social
Email
APIs
Print
FeedsWeb
Apps

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

22. there is a
solution
26

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

24. 1. Manage one pool of content
28

25. 29

26. 29

27. Create
Once
Publish
Everywhere
30
NPR COPE

28. ‣ Desktop
30
NPR COPE

29. ‣ Desktop
‣ Mobile
30
NPR COPE

30. ‣ Desktop
‣ Mobile
‣ iPhone
30
NPR COPE

31. ‣ Desktop
‣ Mobile
‣ iPhone
‣ Android
30
NPR COPE

32. ‣ Desktop
‣ Mobile
‣ iPhone
‣ Android
‣ Partner
30
NPR COPE

33. ‣ Desktop
‣ Mobile
‣ iPhone
‣ Android
‣ Partner
‣ Microsite
30
NPR COPE

34. ‣ Desktop
‣ Mobile
‣ iPhone
‣ Android
‣ Partner
‣ Microsite
‣ Youtube
30
NPR COPE

35. ‣ Desktop
‣ Mobile
‣ iPhone
‣ Android
‣ Partner
‣ Microsite
‣ Youtube
‣ Social
30
NPR COPE

36. 1. Manage one pool of content
2. Structure content for remixing
31

37. 32
Story title
subtitle
shortTitle
teaser
miniTeaser
slug
text
textWithHtml
thumbnail
storyDate
pubDate
audio
audioDuration
audioDescription
audioMp3
image
pullQuote
relatedLink
keywords
organization
listText
correction
Program
Series
Blog

38. 33
Flexible chunks beat
content blobs

39. 34

40. 35

41. 1. Manage one pool of content
2. Structure content for remixing
3. Decouple content, presentation
36

42. 37
http://api.npr.org/query?
fields=title,teasers
&format=NRML
&id=170510189
&apiKey=MDEwNzg…

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

48. 42
making it
happen

49. This man just read a case study about COPE transforming NPR’s business, but he needs to redesign a florist’s web site.
43
So. Much. Work.

50. 1. Identify your assets
44

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

52. 1. Identify your assets
2. Model meaning, not appearance
46

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