Jeff Eaton   Karen McGrane@eaton       @karenmcgrane                             1
Hi, I’m Jeff Eaton  from Lullabot      @eaton                     2
Hi, I’m Karen McGranefrom Bond Art + Science     @karenmcgrane                          3
WEB STANDARDS ISYOUR NEW BICYCLE                   5
7
iPad                                           768x1024                                       iPhone 4                    ...
TIME TO PRIORITIZE!                      9
“When you are working with a 320x480 pixelscreen, 80% of the screen space you had at1024x768 is gone.That means 80% of the...
11
THERE IS NO MOBILE CONTEXT                             12
13
14
16
17
THERE IS NO MOBILE VERSION                             18
“Fragmenting our content across different “device-optimized” experiences is a losing proposition, orat least an unsustaina...
SO, NOW WHAT?                20
BUILD FOR FLEXIBILITY,NOT FOR THE LATEST TREND                           21
REUSABLE CONTENT STORE                                            _ Does our CMS support         EMAIL                   H...
SEPARATION OF CONTENT FROMFORM.(FOR REAL THIS TIME.)                         23
WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING                    25
RESPONSIVE DESIGN?_Solves at the design level, not the content level_Design adapts to device capabilities_Means you have O...
27
RESPONSIVE DESIGN CAVEATS_Still have to prioritize_Easy to overwhelm mobile browsers_Bandwidth considerations still import...
ARE APPS THE ANSWER?_Great for tools and regular tasks_Total control over design (within OS guidelines)_Access to device c...
30
31
APP CAVEATS_App as revenue source looks grim (at least for high- profile publications)_iOS and Android are the new Netscap...
TRANSITION TO AN API?(AND OTHER PERPLEXING ACRONYMS)                              33
TRANSITION TO AN API?(AND OTHER PERPLEXING ACRONYMS)_COPE: Create once, publish everywhere_Never seen anyone regret having...
Website   Tablet App   Phone App                       Phone Website                                       35
Website   iOS Integration   Mobile Website          iPad App                                             36
API CAVEATS_Easy to disappear down rabbit holes_Technical side (as communicated through acronyms) doesn’t matter as much a...
WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING                    38
HOW DO YOU PRIORITIZE?                         39
NAVIGATIONSEARCHRELATED ARTICLESSAVED SEARCHESTOOLSGRAPHICSADVERTISING
41
42
42
44
TASKS VS. TAXONOMY                     45
WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING                    46
http://culturalsemanticweb.files.wordpress.com/2006/10/pic_fivea.JPG   47
WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING                    48
REUSABLE CONTENT STORE                                            _ Will our current analytics         EMAIL              ...
50
WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING                    51
Website   Tablet App   Phone App                       Phone Website                                       52
Website   Tablet App   Phone App                       Phone Website                                       53
Website   Tablet App   Phone App                       Phone Website                                       53
54
BUILD FOR FLEXIBILITY,TO SUPPORT MORESPECIALIZATION                         55
Thanks!@eaton & @karenmcgrane                         56
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Making the most of mobile
Upcoming SlideShare
Loading in...5
×

Making the most of mobile

2,187

Published on

From WebContent 2011 in Chicago, with Jeff Eaton

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,187
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • Early days of the web, browser wars, costly custom code to make sites work across browsers and platforms\nThis started with dialup BBS, moved to online services, should you develop for web or AOL?\n
  • Eventually the browser wars settled down, web standards arose, and businesses became able to develop more consistently \nThis was a solution FOR FRONT END DEVELOPERS. Solved the code problem, not the content problem.\n\nAny time you put yourself in a position of building for two different platforms, you are back in that world.\n
  • On the content side, still have clunky, static content management. \nInformation that used to be locked up in print documents is now locked up in “web pages” or PDFs\nContent creators still think about text as documents, in pages\n
  • crazy diversity of screen sizes, platforms, OSes\nhaving the same arguments all over again\n“most users on AOL” “but if we do it on the web, everyone can see it”\ndifferent input styles\n
  • Diverse screen sizes is a problem that is not going to go away. It is going to get worse.\nDifferent device capabilities across OSes\n
  • \n
  • \n
  • One way people talk about how to prioritize is by talking about what people want to do when they’re “mobile”\n
  • Mobile supports different contexts, not just 'on the go or in your office.'\nMobile supports contemplative, thoughtful interactions as much as it does fast-paced, on the go\n\n
  • iPad on the couch\n\n
  • Laptop on crap hotel wifi\n\n
  • TV browsing (via Xbox, for example)\nThis, perplexingly, also needs to be thought about under the guise of “mobile”\n
  • Smartphone on the train\n\n
  • \n
  • There is no mobile version\n•Thinking about a "mobile version" of your website is already outmoded\n•Always going to be a new device, platform, new behaviors, interactions\n•Just like adding a few "share" links to your news site is not a solution to a fundamentally non-interactive model\n•Building "a mobile site" or "a mobile app" isn't going to help if you're not thinking about you content as a store to deliver in different ways\n•You need to treat your content as a pool that a given design or app can draw on, rather than puzzle pieces that fit into the 'blank spots' in a fixed design or designs.\n\n
  • \n
  • Three things\n
  • Every generation thinks that its problems are the big ones\nEvery generation on the web thinks that its transformation is THE BIG ONE\n
  • \n
  • Separation of content and form. For real this time.\n•Breaking down what you have and decoupling it from the design is the way you avoid desperate rebuilding when a new device or a new use model emerges\n•If you don't do the groundwork, design/app decisions and maintenance will be punishing. Like publishing another tiny little magazine\n•Isolate slices of content that make sense for a given use case. Local recipe guide? Martha Stewart? They have a huuuuuge archive of content in the form of recipes, stuff, etc. Spin uses their most popular content in the iPad app.\n\n
  • Web standards don’t protect you from yourself, like pasting a Dreamweaver page into your content input form\n“We just want to copy a document in from Word with all the formatting intact”\nYou can use web standards to make something that will break as soon as you try to redeploy it in another channel\n
  • \n
  • Lives at the design level, not your content\nEthan Marcotte’s book, Responsive Web Design, comes out tomorrow\n
  • \n
  • \n
  • ▼❑1Are apps the answer?\n•❑1.1Is it primarily content? Or actions/behaviors?\n•❑1.2hard to share, takes a lot of investment\n•❑1.3But... it's also easier if you're really device agnostic and serving data\n\n
  • \n
  • \n
  • More like an ad buy than selling the publication\n
  • What the who now?\nCMS vs. API - Why doesn’t it do that already?\nMost CMSs manage and present, an API exposes your content before the ‘present’ part.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Editorial issues\n•Shift from "pages" to "reusable content chunks" is difficult for people to grasp, even people who use the CMS\n•Metadata, taxonomy, content model — snooze\n•How do we educate content creators about what it means to have different atomic chunks of content\n
  • \n
  • \n
  • \n
  • \n
  • Ad sizes, formats across different devices\nAlready not making enough online\nMobile is worse\n
  • Ad sizes, formats across different devices\nAlready not making enough online\nMobile is worse\n
  • \n
  • \n
  • \n
  • Making the most of mobile

    1. 1. Jeff Eaton Karen McGrane@eaton @karenmcgrane 1
    2. 2. Hi, I’m Jeff Eaton from Lullabot @eaton 2
    3. 3. Hi, I’m Karen McGranefrom Bond Art + Science @karenmcgrane 3
    4. 4. WEB STANDARDS ISYOUR NEW BICYCLE 5
    5. 5. 7
    6. 6. iPad 768x1024 iPhone 4 640x960 Motorola Droid 480x854 Samsung Moment 320x480LG Incite CT810 240x400 8
    7. 7. TIME TO PRIORITIZE! 9
    8. 8. “When you are working with a 320x480 pixelscreen, 80% of the screen space you had at1024x768 is gone.That means 80% of the content, navigation,promotions, and interactions needs to go. —Luke Wroblewski http://www.lukew.com/ff/entry.asp?1117 10
    9. 9. 11
    10. 10. THERE IS NO MOBILE CONTEXT 12
    11. 11. 13
    12. 12. 14
    13. 13. 16
    14. 14. 17
    15. 15. THERE IS NO MOBILE VERSION 18
    16. 16. “Fragmenting our content across different “device-optimized” experiences is a losing proposition, orat least an unsustainable one. —Ethan Marcotte, Responsive Web Design 19
    17. 17. SO, NOW WHAT? 20
    18. 18. BUILD FOR FLEXIBILITY,NOT FOR THE LATEST TREND 21
    19. 19. REUSABLE CONTENT STORE _ Does our CMS support EMAIL HANDSETS creating reusable content chunks that can be TABLETS displayed across channels? _ How will our approvalSOCIALMEDIA processes and governance models need to change? CONTENT PRINTMICROSITES .COM SITE INTRANET 22
    20. 20. SEPARATION OF CONTENT FROMFORM.(FOR REAL THIS TIME.) 23
    21. 21. WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING 25
    22. 22. RESPONSIVE DESIGN?_Solves at the design level, not the content level_Design adapts to device capabilities_Means you have ONE website 26
    23. 23. 27
    24. 24. RESPONSIVE DESIGN CAVEATS_Still have to prioritize_Easy to overwhelm mobile browsers_Bandwidth considerations still important_Complex designs don’t get easier (they get harder!) 28
    25. 25. ARE APPS THE ANSWER?_Great for tools and regular tasks_Total control over design (within OS guidelines)_Access to device capabilities (geolocation, address book, maps, camera)_Better for offline use_All the cool kids are doing it 29
    26. 26. 30
    27. 27. 31
    28. 28. APP CAVEATS_App as revenue source looks grim (at least for high- profile publications)_iOS and Android are the new Netscape and IE_Findability in app stores is a nightmare (most apps are shared by word of mouth) 32
    29. 29. TRANSITION TO AN API?(AND OTHER PERPLEXING ACRONYMS) 33
    30. 30. TRANSITION TO AN API?(AND OTHER PERPLEXING ACRONYMS)_COPE: Create once, publish everywhere_Never seen anyone regret having flexibility in how they deploy content_May help solve problems you already have_Like a force multiplier for the effectiveness of all your other decisions_Democratize innovation with your content: put it into the hands of your users 34
    31. 31. Website Tablet App Phone App Phone Website 35
    32. 32. Website iOS Integration Mobile Website iPad App 36
    33. 33. API CAVEATS_Easy to disappear down rabbit holes_Technical side (as communicated through acronyms) doesn’t matter as much as strategy_Is this an experiment or your foundation?_Is it for your staff, partners, the public?_How will you measure value? 37
    34. 34. WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING 38
    35. 35. HOW DO YOU PRIORITIZE? 39
    36. 36. NAVIGATIONSEARCHRELATED ARTICLESSAVED SEARCHESTOOLSGRAPHICSADVERTISING
    37. 37. 41
    38. 38. 42
    39. 39. 42
    40. 40. 44
    41. 41. TASKS VS. TAXONOMY 45
    42. 42. WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING 46
    43. 43. http://culturalsemanticweb.files.wordpress.com/2006/10/pic_fivea.JPG 47
    44. 44. WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING 48
    45. 45. REUSABLE CONTENT STORE _ Will our current analytics EMAIL HANDSETS tools allow us to evaluate our content, wherever it TABLETS appears?SOCIALMEDIA CONTENT PRINTMICROSITES .COM SITE INTRANET 49
    46. 46. 50
    47. 47. WE’VE GOT ISSUES._TECHNOLOGY_CONTENT_GOVERNANCE_ANALYTICS_ADVERTISING 51
    48. 48. Website Tablet App Phone App Phone Website 52
    49. 49. Website Tablet App Phone App Phone Website 53
    50. 50. Website Tablet App Phone App Phone Website 53
    51. 51. 54
    52. 52. BUILD FOR FLEXIBILITY,TO SUPPORT MORESPECIALIZATION 55
    53. 53. Thanks!@eaton & @karenmcgrane 56
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×