Hey all, I'm very excited to show off what I've been working for what feels like forever.
I'm very passionate about improving the state of reading online. It's amazing how many sites are actively user-hostile, it's like they are daring you to try and read the entire article by splitting it up across pages or throwing tons of annoying, flashing ads on the page.
How would this deal with ads? I'm supposing they'd want the ads on even the smallest screens. Would the publisher have to provide a range of different ad sizes?
I wrote a JS library that lays out text and images in pages and columns. Wrapped that into some decent UI for reading easily, and we're helping clients use that in order to create better digital publications.
I think that is a lot better. Maybe it is just me, but I find it confusing when people say create content when they are really just talking about creating another interface to display the same content. I see this a lot from non-developers and was surprised to see it here.
CSS column support is fairly primitive: You can't do columns with different heights, or have images that span columns. Also, there's no native way of doing pagination, so which cripples columns in most cases (you'd have to scroll down to the end of one column, then scroll back up to the start of the other).
Curious, since the content has to re-flow based on the available space is it possible to reference locations within the content without needed to manually page to the content?
nice product! Does the content producer have to determine in advance what counts as important content, i.e. what content stays on screen when space is limited?
> Does the content producer have to determine in advance what counts as important content, i.e. what content stays on screen when space is limited?
Currently, there's a way to specify that content is optional, or has alternate representations that can be used at other sizes (e.g. multiple image crops)
My initial reaction was 'awesome', very cool, and just what the publishing industry needs. I hate the idea that each publisher is going to try to create their own 'app' and we'd end up with huge images and inconsistent layouts, etc.
However, is a column/page based layout really the best we can do with modern UIs? Pages between different sites/articles makes sense, but within a single article, I always found it to be a sacred cow. Same with columns. I know columns are faster to skim, but isn't there something better?
Maybe this is just a way to get a foot in the door with publishers so you are giving them something familiar, but I think a new standard will be introduced into the publishing world to better fit the technology now that we are no longer bound by the limitations of paper.
> However, is a column/page based layout really the best we can do with modern UIs?
This is a great question, with no clear answer yet (requires more experimentation in my opinion).
One issue I've run into when designing for this is that, without columns, it's hard to use the full width on wide screens. You're left with a ton of blank space on either side of your content.
Once you flow text into columns, you end up needing to page, because scrolling and columns don't mix (you'd have to scroll down to the end of the first column, then scroll back up to the beginning of the next -- it's terrible).
From the parent: Maybe this is just a way to get a foot in the door with publishers so you are giving them something familiar
I think this is an important point. If you can get your foot in the door by making them comfortable, you can drive a new UI with their help: private beta, asking for feedback, etc.
> I hate the idea that each publisher is going to try to create their own 'app' and we'd end up with huge images and inconsistent layouts, etc.
This variety is exactly what is amazing about books, magazines and all media: imagine if wired looked like the new yorker. The whole point of 'new media' is not abandoning design, otherwise we'd just read our blogs and websites in w3m.
The point of treesaver (from what i glean) is not to abandon design, but merely to provide a basis for creating a more sensible ui for engaging with rich media that adapts to the viewport.
Very interesting. Are you also planning to go after the eBook market?
On the technical side: are things like hyphenation and justification also on your todo/feature list? I've been thinking about putting my work on justification and hyphenation [1, 2] to good use, as the "rendering engine" of a HTML/JS based eBook reader. I haven't given much thought to page layout and scrolling, but I like the direction you are taking it for mobile and iPad users. I would personally prefer a different layout for reading on my desktop machine though (granted I prefer reading on my Kindle.)
21 comments
[ 3.1 ms ] story [ 77.5 ms ] threadI'm very passionate about improving the state of reading online. It's amazing how many sites are actively user-hostile, it's like they are daring you to try and read the entire article by splitting it up across pages or throwing tons of annoying, flashing ads on the page.
This is my attempt to make things better :)
The NYT article is about our first publicly announced publication, Nomad Editions: http://www.nytimes.com/2010/08/11/business/media/11nomad.htm...
Quick video demo of resizing: http://www.youtube.com/watch?v=Pt2iJZGqMpw
I'm happy to answer any questions.
Ah, that explains it then. Seriously, what is it?
I wrote a JS library that lays out text and images in pages and columns. Wrapped that into some decent UI for reading easily, and we're helping clients use that in order to create better digital publications.
Is that any better?
So, basically using a developed version of media="screen, mobile"?
If so that's pretty brilliant marketing.
CSS column support is fairly primitive: You can't do columns with different heights, or have images that span columns. Also, there's no native way of doing pagination, so which cripples columns in most cases (you'd have to scroll down to the end of one column, then scroll back up to the start of the other).
nice product! Does the content producer have to determine in advance what counts as important content, i.e. what content stays on screen when space is limited?
Currently, there's a way to specify that content is optional, or has alternate representations that can be used at other sizes (e.g. multiple image crops)
However, is a column/page based layout really the best we can do with modern UIs? Pages between different sites/articles makes sense, but within a single article, I always found it to be a sacred cow. Same with columns. I know columns are faster to skim, but isn't there something better?
Maybe this is just a way to get a foot in the door with publishers so you are giving them something familiar, but I think a new standard will be introduced into the publishing world to better fit the technology now that we are no longer bound by the limitations of paper.
This is a great question, with no clear answer yet (requires more experimentation in my opinion).
One issue I've run into when designing for this is that, without columns, it's hard to use the full width on wide screens. You're left with a ton of blank space on either side of your content.
Once you flow text into columns, you end up needing to page, because scrolling and columns don't mix (you'd have to scroll down to the end of the first column, then scroll back up to the beginning of the next -- it's terrible).
I think this is an important point. If you can get your foot in the door by making them comfortable, you can drive a new UI with their help: private beta, asking for feedback, etc.
This variety is exactly what is amazing about books, magazines and all media: imagine if wired looked like the new yorker. The whole point of 'new media' is not abandoning design, otherwise we'd just read our blogs and websites in w3m.
The point of treesaver (from what i glean) is not to abandon design, but merely to provide a basis for creating a more sensible ui for engaging with rich media that adapts to the viewport.
The revelation that this design offers is adapting multiple variations of the design based on the current viewport size. (as a dynamic version of http://www.alistapart.com/articles/responsive-web-design/)
I wrote about this but without a generic demo a while back here: http://nsfmc.tumblr.com/post/647010330/pages-the-fold-and-me... and also here http://nsfmc.tumblr.com/post/468243524/revisiting-newspaper-...
good work, and if people run with this sort of usability and create multiple, good looking apps, all the better.
http://tumblr.com/xxcfidizt
On the technical side: are things like hyphenation and justification also on your todo/feature list? I've been thinking about putting my work on justification and hyphenation [1, 2] to good use, as the "rendering engine" of a HTML/JS based eBook reader. I haven't given much thought to page layout and scrolling, but I like the direction you are taking it for mobile and iPad users. I would personally prefer a different layout for reading on my desktop machine though (granted I prefer reading on my Kindle.)
[1] http://www.bramstein.com/projects/typeset/flatland/ [2] http://www.bramstein.com/projects/typeset/