Don't Make Me Scroll

8,008 views
7,848 views

Published on

A critique of current design approaches to online magazines, and a demo of a new approach to digital magazine publishing by Redub LLC.

Published in: Business, News & Politics, Design
4 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
8,008
On SlideShare
0
From Embeds
0
Number of Embeds
2,687
Actions
Shares
0
Downloads
313
Comments
4
Likes
22
Embeds 0
No embeds

No notes for slide

Don't Make Me Scroll

  1. 1. Don’t Make Me Scroll! The future of magazine publishing online Irwin Chen 6.24.09
  2. 2. Currently, we see two predominant types of online magazines: irwin@redubllc.com
  3. 3. Currently, we see two predominant types of online magazines: Faux-Print & Magablogs irwin@redubllc.com
  4. 4. “Faux-Print” irwin@redubllc.com
  5. 5. “Faux-Print” (Think “brochure-ware” for magazines) irwin@redubllc.com
  6. 6. Some examples... irwin@redubllc.com
  7. 7. irwin@redubllc.com
  8. 8. irwin@redubllc.com
  9. 9. To read this you have to zoom in... irwin@redubllc.com
  10. 10. irwin@redubllc.com
  11. 11. ...but reading text set for print on a 72dpi monitor is not the same experience irwin@redubllc.com
  12. 12. irwin@redubllc.com
  13. 13. irwin@redubllc.com
  14. 14. These double page spreads are artifacts of print, not relevant on screen irwin@redubllc.com
  15. 15. irwin@redubllc.com
  16. 16. irwin@redubllc.com
  17. 17. irwin@redubllc.com
  18. 18. irwin@redubllc.com
  19. 19. irwin@redubllc.com
  20. 20. Faux-Print Magazines irwin@redubllc.com
  21. 21. Faux-Print Magazines • Print layouts exported as images or PDF irwin@redubllc.com
  22. 22. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read irwin@redubllc.com
  23. 23. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly irwin@redubllc.com
  24. 24. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly • Print ads also rendered on screen irwin@redubllc.com
  25. 25. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly • Print ads also rendered on screen • No new content, difficult to hyperlink irwin@redubllc.com
  26. 26. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly • Print ads also rendered on screen • No new content, difficult to hyperlink • Some multimedia capabilities, rarely used irwin@redubllc.com
  27. 27. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly • Print ads also rendered on screen • No new content, difficult to hyperlink • Some multimedia capabilities, rarely used • Round hole, square peg irwin@redubllc.com
  28. 28. Faux-Print irwin@redubllc.com
  29. 29. Faux-Print Poor reading experience irwin@redubllc.com
  30. 30. Faux-Print Poor reading experience + little to no interactivity irwin@redubllc.com
  31. 31. Faux-Print Poor reading experience + little to no interactivity Low user engagement irwin@redubllc.com
  32. 32. Faux-Print Poor reading experience + little to no interactivity Low user engagement = Low value to advertisers irwin@redubllc.com
  33. 33. “Magablogs” irwin@redubllc.com
  34. 34. “Magablogs” (More digital-native, web-friendly, but indistinguishable from blogs) irwin@redubllc.com
  35. 35. Prototypical Magablogs irwin@redubllc.com
  36. 36. irwin@redubllc.com
  37. 37. Magablogs: The Good irwin@redubllc.com
  38. 38. Magablogs: The Good • Print content translated to web-native form irwin@redubllc.com
  39. 39. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily irwin@redubllc.com
  40. 40. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily • Usually built with HTML/CSS and CMSs irwin@redubllc.com
  41. 41. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily • Usually built with HTML/CSS and CMSs • Allow linking and, therefore, are SEO-friendly irwin@redubllc.com
  42. 42. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily • Usually built with HTML/CSS and CMSs • Allow linking and, therefore, are SEO-friendly • Leverage IAB-based ad networks irwin@redubllc.com
  43. 43. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily • Usually built with HTML/CSS and CMSs • Allow linking and, therefore, are SEO-friendly • Leverage IAB-based ad networks • Allow for commenting and user-interactivity irwin@redubllc.com
  44. 44. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily • Usually built with HTML/CSS and CMSs • Allow linking and, therefore, are SEO-friendly • Leverage IAB-based ad networks • Allow for commenting and user-interactivity • Limited (inline) multimedia capabilities irwin@redubllc.com
  45. 45. Magablogs: The Bad irwin@redubllc.com
  46. 46. Magablogs: The Bad • Design limited to HTML/CSS capabilities irwin@redubllc.com
  47. 47. Magablogs: The Bad • Design limited to HTML/CSS capabilities • Reading experience still sub-optimal (scrolling) irwin@redubllc.com
  48. 48. Magablogs: The Bad • Design limited to HTML/CSS capabilities • Reading experience still sub-optimal (scrolling) • Everything looks like a blog, no differentiation irwin@redubllc.com
  49. 49. Magablogs: The Bad • Design limited to HTML/CSS capabilities • Reading experience still sub-optimal (scrolling) • Everything looks like a blog, no differentiation • Ad placements less valuable than print irwin@redubllc.com
  50. 50. The reading experience irwin@redubllc.com
  51. 51. irwin@redubllc.com
  52. 52. Most magablog page templates are optimized to display as many ads as possible before you give up trying to read the actual content irwin@redubllc.com
  53. 53. irwin@redubllc.com
  54. 54. Thus reading requires constant interruption in order to scroll down page for more irwin@redubllc.com
  55. 55. Khoi Vinh, Design Director, NYTimes.com, admits the idea of using blog templates to publish magazine content is fundamentally flawed. irwin@redubllc.com
  56. 56. irwin@redubllc.com
  57. 57. != “ This is one of many instances in which our Web version u erly fails the presentation of the content. The online article, while put together with care by one of our online edit staffers ... just doesn’t have the visual panache of its printed counterpart. ” Khoi Vinh, “Graphic Design at 70 M.P.H.” h p://www.subtraction.com/2007/08/13/graphic-desi irwin@redubllc.com
  58. 58. Magazines != Newspapers != Blogs irwin@redubllc.com
  59. 59. Magazines feature curated, well-edited, longer-form content 6000 words 6000 4500 3000 1500 1000 words 600 words 100-250 words 0 Blog Posts News Stories Short Magazine Piece Long Feature Article
  60. 60. Because reading a 250 word piece is far different from reading a 5,000 word story.
  61. 61. The fact that most people will never click past the first page has a number of implications.
  62. 62. reader: I really wanted to read this article, but I can’t possibly endure reading it like this. Goodbye.
  63. 63. publisher: Nobody’s clicking past the first page! And to think, I paid $.50 per word for that long article.
  64. 64. advertiser: Nobody’s clicking on my ads! I guess we’ll have to lower our CPM rates.
  65. 65. We can do better than this. irwin@redubllc.com
  66. 66. is working on a new publishing system for magazines which addresses these basic problems of long-form online publishing. irwin@redubllc.com
  67. 67. introducing irwin@redubllc.com
  68. 68. introducing irwin@redubllc.com
  69. 69. key features irwin@redubllc.com
  70. 70. key features • No scrollbars irwin@redubllc.com
  71. 71. key features • No scrollbars • Keyboard-enabled UI irwin@redubllc.com
  72. 72. key features • No scrollbars • Keyboard-enabled UI • Scales to fit any monitor size (even netbooks!) irwin@redubllc.com
  73. 73. key features • No scrollbars • Keyboard-enabled UI • Scales to fit any monitor size (even netbooks!) • Designer-friendly type and layout capabilites irwin@redubllc.com
  74. 74. key features • No scrollbars • Keyboard-enabled UI • Scales to fit any monitor size (even netbooks!) • Designer-friendly type and layout capabilites • Save your place and sharing functionality irwin@redubllc.com
  75. 75. key features • No scrollbars • Keyboard-enabled UI • Scales to fit any monitor size (even netbooks!) • Designer-friendly type and layout capabilites • Save your place and sharing functionality • Optimal for display advertising irwin@redubllc.com
  76. 76. the nerdy stuff irwin@redubllc.com
  77. 77. the nerdy stuff • Customizable publishing framework built in Flex irwin@redubllc.com
  78. 78. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB irwin@redubllc.com
  79. 79. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages irwin@redubllc.com
  80. 80. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages • Dynamic templates and text-flow engine irwin@redubllc.com
  81. 81. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages • Dynamic templates and text-flow engine • Easily incorporates video, interactive SWFs irwin@redubllc.com
  82. 82. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages • Dynamic templates and text-flow engine • Easily incorporates video, interactive SWFs • Supports IAB ad sizes (and custom SWFs) irwin@redubllc.com
  83. 83. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages • Dynamic templates and text-flow engine • Easily incorporates video, interactive SWFs • Supports IAB ad sizes (and custom SWFs) • User event tracking built-in irwin@redubllc.com
  84. 84. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB • Resolution-sensitive scaling of text and pages • Dynamic templates and text-flow engine • Easily incorporates video, interactive SWFs • Supports IAB ad sizes (and custom SWFs) • User event tracking built-in • Commenting/annotation (in development) irwin@redubllc.com
  85. 85. For the following demo, we used some articles and assets from the GOOD Transportation Issue 015. irwin@redubllc.com
  86. 86. Launch the Demo For more information, contact irwin@redubllc.com Irwin Chen

×