Prepare for the Mobilacalypse

1,066 views

Published on

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

No Downloads
Views
Total views
1,066
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
4
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Prepare for the Mobilacalypse

  1. 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. 2. i’m with lullabot.hi. i’m @eaton!4we plan, design, build, and teach.
  3. 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. 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. 5. change is here8
  6. 6. 1. Mobile users are here, now9
  7. 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. 8. 1. Mobile users are here, now2. They want the same stuff11
  9. 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. 10. 1. Mobile users are here, now2. They want the same stuff3. Building separate sites kills13
  11. 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. 12. 1. Mobile users are here, now2. They want the same stuff3. Building separate sites kills4. Responsive design is overtaxed15
  13. 13. ©2012 Lyza Danger — http://flic.kr/p/cfkULL16
  14. 14. BMW iDrive system — http://www.bmwcoop.com.17
  15. 15. Google Glass breaks every web site’s interaction model. Sigh.18
  16. 16. Drupal.org on my living room television. No, seriously.19
  17. 17. Drupal.org on my living room television. No, seriously.46m on XBox Live255075100Time Warner Dish DirecTV Comcast XBox Live PlayStation19
  18. 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. 19. 23Search SocialEmailAPIsPrintFeedsWebApps
  20. 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. 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. 22. there is asolution26
  23. 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. 24. 1. Manage one pool of content28
  25. 25. 29
  26. 26. 29
  27. 27. CreateOncePublishEverywhere30NPR COPE
  28. 28. ‣ Desktop30NPR COPE
  29. 29. ‣ Desktop‣ Mobile30NPR COPE
  30. 30. ‣ Desktop‣ Mobile‣ iPhone30NPR COPE
  31. 31. ‣ Desktop‣ Mobile‣ iPhone‣ Android30NPR COPE
  32. 32. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner30NPR COPE
  33. 33. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite30NPR COPE
  34. 34. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite‣ Youtube30NPR COPE
  35. 35. ‣ Desktop‣ Mobile‣ iPhone‣ Android‣ Partner‣ Microsite‣ Youtube‣ Social30NPR COPE
  36. 36. 1. Manage one pool of content2. Structure content for remixing31
  37. 37. 32Story titlesubtitleshortTitleteaserminiTeaserslugtexttextWithHtmlthumbnailstoryDatepubDateaudioaudioDurationaudioDescriptionaudioMp3imagepullQuoterelatedLinkkeywordsorganizationlistTextcorrectionProgramSeriesBlog
  38. 38. 33Flexible chunks beatcontent blobs
  39. 39. 34
  40. 40. 35
  41. 41. 1. Manage one pool of content2. Structure content for remixing3. Decouple content, presentation36
  42. 42. 37http://api.npr.org/query?fields=title,teasers&format=NRML&id=170510189&apiKey=MDEwNzg…
  43. 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. 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. 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. 46. 1. Manage one pool of content2. Structure content for remixing3. Decouple content, presentation4. Payoff?40
  47. 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. 48. 42making ithappen
  49. 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. 50. 1. Identify your assets44
  51. 51. 45AssetsThe stuff peoplewant when theyvisit your siteStructureThe elements youuse to group andorganize assetsPresentationEphemeral stuffdriven by channeldesign needs
  52. 52. 1. Identify your assets2. Model meaning, not appearance46
  53. 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. 54. 1. Identify your assets2. Model meaning, not appearance3. Expose and use content feeds48
  55. 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. 56. 1. Identify your assets2. Model meaning, not appearance3. Expose and use content feeds4. Care for your content editors50
  57. 57. ‣Identify tasks and workflows‣Plan for content maintenance‣Tailor and refine content tools‣Be cautious with WYSIWYG51editors are the mostimportant users
  58. 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. 59. 53read these books now.Content EverywhereContent Strategy for Mobile APIs, A Strategy Guide
  60. 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

×