Don't Make Me Scroll
•
21 j'aime•1,994 vues
A critique of current design approaches to online magazines, and a demo of a new approach to digital magazine publishing by Redub LLC.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Don't Make Me Scroll
Similaire à Don't Make Me Scroll (20)
Dernier
Dernier (20)
Don't Make Me Scroll
- 1. Don’t Make Me Scroll! The future of magazine publishing online Irwin Chen 6.24.09
- 2. Currently, we see two predominant types of online magazines: irwin@redubllc.com
- 3. Currently, we see two predominant types of online magazines: Faux-Print & Magablogs irwin@redubllc.com
- 5. “Faux-Print” (Think “brochure-ware” for magazines) irwin@redubllc.com
- 9. To read this you have to zoom in... irwin@redubllc.com
- 11. ...but reading text set for print on a 72dpi monitor is not the same experience irwin@redubllc.com
- 14. These double page spreads are artifacts of print, not relevant on screen irwin@redubllc.com
- 21. Faux-Print Magazines • Print layouts exported as images or PDF irwin@redubllc.com
- 22. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read irwin@redubllc.com
- 23. Faux-Print Magazines • Print layouts exported as images or PDF • Often impossible to read • SEO-unfriendly irwin@redubllc.com
- 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. 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. 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. 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
- 29. Faux-Print Poor reading experience irwin@redubllc.com
- 30. Faux-Print Poor reading experience + little to no interactivity irwin@redubllc.com
- 31. Faux-Print Poor reading experience + little to no interactivity Low user engagement irwin@redubllc.com
- 32. Faux-Print Poor reading experience + little to no interactivity Low user engagement = Low value to advertisers irwin@redubllc.com
- 34. “Magablogs” (More digital-native, web-friendly, but indistinguishable from blogs) irwin@redubllc.com
- 38. Magablogs: The Good • Print content translated to web-native form irwin@redubllc.com
- 39. Magablogs: The Good • Print content translated to web-native form • Blog-like content added daily irwin@redubllc.com
- 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. 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. 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. 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. 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
- 46. Magablogs: The Bad • Design limited to HTML/CSS capabilities irwin@redubllc.com
- 47. Magablogs: The Bad • Design limited to HTML/CSS capabilities • Reading experience still sub-optimal (scrolling) irwin@redubllc.com
- 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. 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
- 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
- 54. Thus reading requires constant interruption in order to scroll down page for more irwin@redubllc.com
- 55. Khoi Vinh, Design Director, NYTimes.com, admits the idea of using blog templates to publish magazine content is fundamentally flawed. irwin@redubllc.com
- 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. Magazines != Newspapers != Blogs irwin@redubllc.com
- 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. Because reading a 250 word piece is far different from reading a 5,000 word story.
- 61. The fact that most people will never click past the first page has a number of implications.
- 62. reader: I really wanted to read this article, but I can’t possibly endure reading it like this. Goodbye.
- 63. publisher: Nobody’s clicking past the first page! And to think, I paid $.50 per word for that long article.
- 64. advertiser: Nobody’s clicking on my ads! I guess we’ll have to lower our CPM rates.
- 65. We can do better than this. irwin@redubllc.com
- 66. is working on a new publishing system for magazines which addresses these basic problems of long-form online publishing. irwin@redubllc.com
- 70. key features • No scrollbars irwin@redubllc.com
- 71. key features • No scrollbars • Keyboard-enabled UI irwin@redubllc.com
- 72. key features • No scrollbars • Keyboard-enabled UI • Scales to fit any monitor size (even netbooks!) irwin@redubllc.com
- 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. 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. 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
- 77. the nerdy stuff • Customizable publishing framework built in Flex irwin@redubllc.com
- 78. the nerdy stuff • Customizable publishing framework built in Flex • Semantic content stored in WordPress-like DB irwin@redubllc.com
- 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. 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. 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. 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. 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. 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. For the following demo, we used some articles and assets from the GOOD Transportation Issue 015. irwin@redubllc.com
- 86. Launch the Demo For more information, contact irwin@redubllc.com Irwin Chen