Your SlideShare is downloading. ×
0
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Prepare for the Mobilacalypse
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prepare for the Mobilacalypse

499

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
499
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2preparing forthe mobilacalypsewhy 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!4we plan, design, build, and teach.
  • 3. mo·bil·ac·a·lypse (n)1) The tipping point that occurs when building for onechannel locks out a majority of users, but building formany bankrupts you.6
  • 4. you might want toleave 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 here8
  • 6. 1. Mobile users are here, now9
  • 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, now2. They want the same stuff11
  • 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, now2. They want the same stuff3. Building separate sites kills13
  • 11. Karen McGrane: A Separate Mobile Site? No Forking Way“The challenge for most organisations in the longrun won’t be maintaining multiple sets offrontend code or different templates. It will bemaintaining variations of duplicate content.14
  • 12. 1. Mobile users are here, now2. They want the same stuff3. Building separate sites kills4. Responsive design is overtaxed15
  • 13. ©2012 Lyza Danger — http://flic.kr/p/cfkULL16
  • 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 Live255075100Time Warner Dish DirecTV Comcast XBox Live PlayStation19
  • 18. 1. Mobile users are here, now2. They want the same stuff3. Building separate sites kills4. Responsive design is overtaxed5. New channels keep coming20
  • 19. 23Search SocialEmailAPIsPrintFeedsWebApps
  • 20. Karen McGrane, A List Apart24“People dont want different content or lesscontent. They imagine that their devices aredifferent windows on the same content, notentirely different containers.
  • 21. mo·bil·ac·a·lypse (n)1) The tipping point that occurs when having for onechannel locks out a majority of users, but building formany bankrupts you.2) The revelation of a new way to publish content25
  • 22. there is asolution26
  • 23. Whitehouse.gov, Digital Government Blueprint“Rather than thinking primarily about the finalpresentation — publishing web pages, mobileapplications or brochures — an information-centric approach focuses on ensuring our dataand content are accurate, available, and secure.27
  • 24. 1. Manage one pool of content28
  • 25. 29
  • 26. 29
  • 27. CreateOncePublishEverywhere30NPR COPE
  • 28. ‣ Desktop30NPR COPE
  • 29. ‣ Desktop‣ Mobile30NPR COPE
  • 30. ‣ Desktop‣ Mobile‣ iPhone30NPR COPE
  • 31. ‣ Desktop‣ Mobile‣ iPhone‣ Android30NPR COPE
  • 32. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner30NPR COPE
  • 33. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite30NPR COPE
  • 34. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite‣ Youtube30NPR COPE
  • 35. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite‣ Youtube‣ Social30NPR COPE
  • 36. 1. Manage one pool of content2. Structure content for remixing31
  • 37. 32Story titlesubtitleshortTitleteaserminiTeaserslugtexttextWithHtmlthumbnailstoryDatepubDateaudioaudioDurationaudioDescriptionaudioMp3imagepullQuoterelatedLinkkeywordsorganizationlistTextcorrectionProgramSeriesBlog
  • 38. 33Flexible chunks beatcontent blobs
  • 39. 34
  • 40. 35
  • 41. 1. Manage one pool of content2. Structure content for remixing3. Decouple content, presentation36
  • 42. 37http://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 ofinventors are building a Solar Pocket Factory: a machinedesigned to print micro solar panels. Co-inventor ShawnFrayne stopped by Flora Lichtmans backyard with a fewpieces of the prototype to explain how the machine works.</teaser><miniTeaser>A Kickstarter-funded project aims to build a machine to printmicro 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 ofinventors are building a Solar Pocket Factory: a machinedesigned to print micro solar panels. Co-inventor ShawnFrayne stopped by Flora Lichtmans backyard with a fewpieces of the prototype to explain how the machine works.</teaser><miniTeaser>A Kickstarter-funded project aims to build a machine to printmicro 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 HTML39is this the scheduledWYSIWYG rant? yes.
  • 46. 1. Manage one pool of content2. Structure content for remixing3. Decouple content, presentation4. Payoff?40
  • 47. NPR, What We Did Wrong: NPR Improves Its API Architecture“Having an API allows us to be highly efficient atbuilding new platforms. We build thepresentation, and the ‘data’ is already ready togo. In 12 months we doubled our onlineaudience and launched 11 products, including asite redesign, with limited dev resources.41
  • 48. 42making ithappen
  • 49. This man just read a case study about COPE transforming NPR’s business, but he needs to redesign a florist’s web site.43So. Much. Work.
  • 50. 1. Identify your assets44
  • 51. 45AssetsThe stuff peoplewant when theyvisit your siteStructureThe elements youuse to group andorganize assetsPresentationEphemeral stuffdriven by channeldesign needs
  • 52. 1. Identify your assets2. Model meaning, not appearance46
  • 53. ‣Learn from DBAs & CSS purists‣Ask, why does this field exist?‣Store priority, not position‣Capture emphasis, not appearance47what you have vs.how it’s presented
  • 54. 1. Identify your assets2. Model meaning, not appearance3. Expose and use content feeds48
  • 55. ‣RSS, JSON, etc.(Views RSS, Views Datasource)‣Web Services(Services, RestWS…)‣Consume, too!(Feeds, Client-side scripts…)‣Drupal 8(Web Services Initiative, Twig…)49content APIs don’thave to be crazy
  • 56. 1. Identify your assets2. Model meaning, not appearance3. Expose and use content feeds4. Care for your content editors50
  • 57. ‣Identify tasks and workflows‣Plan for content maintenance‣Tailor and refine content tools‣Be cautious with WYSIWYG51editors are the mostimportant users
  • 58. ‣Reuse, don’t fork, your content‣Put purpose and structure first‣Separate assets from presentation‣Expose feeds to drive new channels52preparing for themobilacalypse
  • 59. 53read these books now.Content EverywhereContent Strategy for Mobile APIs, A Strategy Guide
  • 60. read these links, too.54Luke WKaren McGraneMIT Technology ReviewSubcompact PublishingFuture Friendly DesignBaby Got Backend10 Commandments ofmobile designThese slideswww.lukew.com/ff/karenmcgrane.com/www.technologyreview.com/businessreport/mobile-computing-in-question/craigmod.com/journal/subcompact_publishing/speakerdeck.com/lukebrooker/future-friendly-designspeakerdeck.com/eaton/baby-got-backend-the-sequelwww.lullabot.com/articles/10-commandments-modern-web-designlb.cm/post-mobile

×