don't make me scroll
TRANSCRIPT
Don’t Make Me Scroll!
Irwin Chen6.24.09
The future of magazine publishing online
Currently,
we see two predominant types ofonline magazines:
Currently,
we see two predominant types ofonline magazines:
Magablogs
Faux-Print
&
“Faux-Print”
“Faux-Print”(Think “brochure-ware” for magazines)
Some examples...
These double page spreads are artifacts of print, not relevant
on screen
Faux-Print Magazines
Faux-Print Magazines
• Print layouts exported as images or PDF
Faux-Print Magazines
• Print layouts exported as images or PDF
• Often impossible to read
Faux-Print Magazines
• Print layouts exported as images or PDF
• Often impossible to read
• SEO-unfriendly
Faux-Print Magazines
• Print layouts exported as images or PDF
• Often impossible to read
• SEO-unfriendly
• Print ads also rendered on screen
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
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
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
Faux-Print
Faux-Print
Poor reading experience
Faux-Print
Poor reading experience
+ little to no interactivity
Faux-Print
Poor reading experience
+ little to no interactivity
Low user engagement
Faux-Print
= Low value to advertisers
Poor reading experience
+ little to no interactivity
Low user engagement
“Magablogs”
“Magablogs”
(More digital-native, web-friendly,but indistinguishable from blogs)
Prototypical Magablogs
Magablogs: The Good
Magablogs: The Good
• Print content translated to web-native form
Magablogs: The Good
• Print content translated to web-native form
• Blog-like content added daily
Magablogs: The Good
• Print content translated to web-native form
• Blog-like content added daily
• Usually built with HTML/CSS and CMSs
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
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
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
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
Magablogs: The Bad
Magablogs: The Bad
• Design limited to HTML/CSS capabilities
Magablogs: The Bad
• Design limited to HTML/CSS capabilities
• Reading experience still sub-optimal (scrolling)
Magablogs: The Bad
• Design limited to HTML/CSS capabilities
• Reading experience still sub-optimal (scrolling)
• Everything looks like a blog, no differentiation
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
The reading experience
Most magablog page templates are
optimized to display as many ads as possible
before you give up trying to read the
actual content
Khoi Vinh,
Design Director, NYTimes.com,admits the idea of using blog templates
to publish magazine contentis fundamentally flawed.
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
“
”
!=
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:
We can do better than this.
is working on a new
publishing system for magazineswhich addresses these basic problems
of long-form online publishing.
introducing
introducing
key features
• No scrollbars
key features
• No scrollbars
• Keyboard-enabled UI
key features
• No scrollbars
• Keyboard-enabled UI
• Scales to fit any monitor size (even netbooks!)
key features
• No scrollbars
• Keyboard-enabled UI
• Scales to fit any monitor size (even netbooks!)
• Designer-friendly type and layout capabilites
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
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
key features
the nerdy stuff
• Customizable publishing framework built in Flex
the nerdy stuff
• Customizable publishing framework built in Flex
• Semantic content stored in WordPress-like DB
the nerdy stuff
• Customizable publishing framework built in Flex
• Semantic content stored in WordPress-like DB
• Resolution-sensitive scaling of text and pages
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
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
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)
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
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)
the nerdy stuff
For the following demo,
we used some articles and assets from the
GOOD Transportation Issue 015.
Launch the DemoFor more information, contact
Irwin Chen