Post on 12-Jul-2015
Don’t Make Me Scroll!
Irwin Chen6.24.09
The future of magazine publishing online
irwin@redubllc.com
Currently,
we see two predominant types ofonline magazines:
irwin@redubllc.com
Currently,
we see two predominant types ofonline magazines:
Magablogs
Faux-Print
&
irwin@redubllc.com
“Faux-Print”
irwin@redubllc.com
“Faux-Print”(Think “brochure-ware” for magazines)
irwin@redubllc.com
Some examples...
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
To read this you have to zoom in...
irwin@redubllc.com
irwin@redubllc.com
...but reading text set for print on a 72dpi monitor is not the same experience
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
These double page spreads are artifacts of print, not relevant
on screen
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
irwin@redubllc.com
Faux-Print Magazines
irwin@redubllc.com
Faux-Print Magazines
• Print layouts exported as images or PDF
irwin@redubllc.com
Faux-Print Magazines
• Print layouts exported as images or PDF
• Often impossible to read
irwin@redubllc.com
Faux-Print Magazines
• Print layouts exported as images or PDF
• Often impossible to read
• SEO-unfriendly
irwin@redubllc.com
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
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
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
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
Faux-Print
irwin@redubllc.com
Faux-Print
Poor reading experience
irwin@redubllc.com
Faux-Print
Poor reading experience
+ little to no interactivity
irwin@redubllc.com
Faux-Print
Poor reading experience
+ little to no interactivity
Low user engagement
irwin@redubllc.com
Faux-Print
= Low value to advertisers
Poor reading experience
+ little to no interactivity
Low user engagement
irwin@redubllc.com
“Magablogs”
irwin@redubllc.com
“Magablogs”
(More digital-native, web-friendly,but indistinguishable from blogs)
irwin@redubllc.com
Prototypical Magablogs
irwin@redubllc.com
irwin@redubllc.com
Magablogs: The Good
irwin@redubllc.com
Magablogs: The Good
• Print content translated to web-native form
irwin@redubllc.com
Magablogs: The Good
• Print content translated to web-native form
• Blog-like content added daily
irwin@redubllc.com
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
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
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
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
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
Magablogs: The Bad
irwin@redubllc.com
Magablogs: The Bad
• Design limited to HTML/CSS capabilities
irwin@redubllc.com
Magablogs: The Bad
• Design limited to HTML/CSS capabilities
• Reading experience still sub-optimal (scrolling)
irwin@redubllc.com
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
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
The reading experience
irwin@redubllc.com
irwin@redubllc.com
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
irwin@redubllc.com
Thus reading requires constant interruption in order to scroll down
page for more
irwin@redubllc.com
Khoi Vinh,
Design Director, NYTimes.com,admits the idea of using blog templates
to publish magazine contentis fundamentally flawed.
irwin@redubllc.com
irwin@redubllc.com
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
Magazines != Newspapers != Blogs
0
1500
3000
4500
6000
Blog Posts News Stories Short Magazine Piece Long Feature Article
100-250 words600 words
1000 words
6000 words
Magazines featurecurated, well-edited, longer-form content
Because reading a 250 word piece
is far different from reading a 5,000 word story.
The fact that most people will never click past the first pagehas a number of implications.
I really wanted to read this article, but I can’t possibly endure reading it like this.
Goodbye.
reader:
Nobody’s clicking past the first page! And to think, I paid $.50 per word for that long
article.
publisher:
Nobody’s clicking on my ads! I guess we’ll have to lower our CPM rates.
advertiser:
irwin@redubllc.com
We can do better than this.
irwin@redubllc.com
is working on a new
publishing system for magazineswhich addresses these basic problems
of long-form online publishing.
irwin@redubllc.com
introducing
irwin@redubllc.com
introducing
irwin@redubllc.com
key features
irwin@redubllc.com
• No scrollbars
key features
irwin@redubllc.com
• No scrollbars
• Keyboard-enabled UI
key features
irwin@redubllc.com
• No scrollbars
• Keyboard-enabled UI
• Scales to fit any monitor size (even netbooks!)
key features
irwin@redubllc.com
• No scrollbars
• Keyboard-enabled UI
• Scales to fit any monitor size (even netbooks!)
• Designer-friendly type and layout capabilites
key features
irwin@redubllc.com
• 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
key features
irwin@redubllc.com
• 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
key features
irwin@redubllc.com
the nerdy stuff
irwin@redubllc.com
• Customizable publishing framework built in Flex
the nerdy stuff
irwin@redubllc.com
• Customizable publishing framework built in Flex
• Semantic content stored in WordPress-like DB
the nerdy stuff
irwin@redubllc.com
• Customizable publishing framework built in Flex
• Semantic content stored in WordPress-like DB
• Resolution-sensitive scaling of text and pages
the nerdy stuff
irwin@redubllc.com
• 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
the nerdy stuff
irwin@redubllc.com
• 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
the nerdy stuff
irwin@redubllc.com
• 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)
the nerdy stuff
irwin@redubllc.com
• 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
the nerdy stuff
irwin@redubllc.com
• 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)
the nerdy stuff
irwin@redubllc.com
For the following demo,
we used some articles and assets from the
GOOD Transportation Issue 015.
irwin@redubllc.com
Launch the DemoFor more information, contact
Irwin Chen