Skip navigation
BLOG  |  JULY, 2010

What's Lost (and Gained) From Print to Web to Tablet

July 13, 2010 at 9:00 am
by

In this month's newsletter, I made a few passing references to how a simplified user interface can enable better concentration on written content. I've been thinking a lot about how reading and writing are being shaped by technology—an idea I generally categorize in my mind as "digital literacy." I'm encouraged by trends I'm seeing toward simplifying page templates and functionality while improving the legibility and flexibility of the display. I do think we're making some great progress, but we do have ways to go. As you'll see in this post, doing a direct comparison between an article in its print format to how it translates to the web, and then a web page and how it translates to a tablet, we're still stumbling along...

 

From Printed Page to Webpage

In this example, I took one picture of a very brief article I liked from the January issue of GOOD magazine, called Slow Down. In the printed version, the entire left page is occupied by a beautiful illustration of a slowly elapsing moment (which, by the way, I removed from the magazine and have framed on my office wall). On the right side is the introduction to this particular issue, on the notion of intentionally doing things more slowly. The type is large and the column narrower than the page, making it very easy to read.

On the web version of this same article, things are very different. The first thing that's made obvious by shrinking the article page down to only 200 pixels wide (as shown to the left) is how lost the article content is among all the other information crammed on the page. What a shame. It bothers me that they didn't take advantage of the full width of the content column and include a larger version of the illustration. You can click the image to see it in full size.

 

Here's another example. Again, from the January issue of GOOD, this article, titled If You Build It, They Will Walk, occupies only two printed pages. On the left, a large photograph. On the right, a few paragraphs and some smaller photographs. The layout of the right page even evokes the architectural spaces its article discusses. Where as the "Slow Down" article's layout made it easy for the reader to slowly read a small portion of text, this layout encourages exploration, offering multiple points of entry and a pace that evokes walking through an unpredictably structured space. Pretty clever!

Speaking of predictable, on the left is the same article as translated for GOOD's website. Like the first example, the article itself is lost within all the normal junk you'd find on a webpage. At least this time, the web editors used the full width of the content column to feature the photographs. But the website's structure reduces every page to the same level of importance. A one-page print article becomes one webpage, in the same way that a three-page print article will likely become one webpage. When you flip through a magazine, considering the number of pages for various content types gives you a sense of priority and definition within the entire publication. Not so on a website.

...Sure, we have web pagination, but I can't wait for that UI convention to go away forever.

|
|
|
|
|
|
|
V

Again, if you'd like to see this monstrosity in action, click here.

 

From Webpage to Tablet

The collective disappointment with how content intended for readers translated from print to web surely had something to do with the creation of the tablet—it's just a shame that all of us Trekkies had to wait so long ;-) So far, content optimized for the iPad has been in part successful, but also in part disappointing.

Below is a pretty low-fi animated GIF representation of an article from WIRED magazine's May issue by Nicholas Carr on how the web shatters focus and rewires brains. As soon as I'd downloaded the iPad version of this issue, I began reading this article. I really liked the way I could move instantly from one page to another with a slight movement of my thumb, as opposed to web-pagination that tends to be located at the top or bottom of pages and requires that you wait for a full page to load after clicking. It was so easy!

 

But I was also disappointed in how the iPad tended to more often preserve layout conventions of the printed page rather than taking advantage of new ones unique to the tablet's screen. For instance, the two-column layout was actually more difficult to read than had the article been set in one column that spanned the full width of the screen. Sure, the pullquotes and illustrations give much more visual interest to the page, but when you have difficulty reading the thing, those matter much less. It was also disappointing to realize I couldn't adjust the text size like I can using iBooks.

I ended up loading the web version of this same article (which, by the way, you can read at no cost on the iPad, compared with $3.99 per iPad-optimized issue) and using the pinch gesture to zoom in on only the content column. Reading this way was, sadly, much easier and more satisfying than the version that WIRED and Adobe had labored over for the iPad.

Incientally, on the topic of length, looking at the screenshot to the left brings the word "long" to mind. But what does that really mean on the screen? Is it a matter of how many "screens" an article occupies—how many times I have to scroll to continue reading? Or is it a matter of how long it takes me to read it?

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
V

One last thought: Clearly, the tablet realm of content is a work in progress. We'll definitely get better at it, and in the meantime, I have iBooks to validate the expense (it's very good). But one thing that is an immediate benefit to reading—even, perhaps, with the hard-to-read WIRED app—is the way that it enables focus. When I'm reading a book, or from an app, there is no toolbar around the content, no sidebar widgets, no tabs—no distractions.

What do you think? Are you sticking with printed magazines? Websites? Or are you fully converted to all-tablet reading?

P.S. After reviewing what I'd written, I should probably re-emphasize that I'm looking at all of these issues from the point of view of reading and the challenges posed by technology on concentration. But there are other obvious benefits of web-based content, such as being able to search for and within it, as well as being able to synthesize information from it and reorganize or share it as you like. Just wanted to cover that counterpoint.


Comments
Pak-Kei | July 13, 2010 5:15 PM

It comes down to two ways of organizing overflowing content: pagination or scrolling.

The advantage of pagination is that you can have your cursor in the same spot, and keep clicking to go to next pages. (e.g. Kindle, Page Down button on a PC) The disadvantage

The advantage of scrolling is that you can keep flicking or moving the scroll wheel, and content will come out continuously with no abrupt changes. The disadvantage is that sometimes you lost track where you are reading in the motion.

However, I noticed that web sites always does the worst: the combination of both. For example, in Gmail and Google Search, you have scroll down and then click page next. Flickr, meanwhile, has become more intelligent, and will always try to fit the page in your screen, thus reducing the need to use two different gestures just to see more content.

Annoyances aside, I think Craig Mod explained the issue very well in this article:
http://craigmod.com/journal/ipad_and_books/

It's about content with form versus content without form. It's time to rethink blogs and magazines - A lot of times we see content being sacrificed for the sake of a standard layout (e.g. GOOD Magazine above), and we shall ask ourselves - is it necessary? Shouldn't we put more editorial and design effort into the web (if we can finally monetize it with micropayments)? There are already blogs, e.g. Boing Boing, doing special layout for special articles they wrote. This way, we can be flexible. Content that requires form can get a special layout treatment, while the otherwise can use a standard layout.
Pak-Kei | July 13, 2010 5:16 PM

*Typo: "The disadvantage of pagination is that it can be cumbersome and unnecessary for short articles."
awesomerobot | July 14, 2010 3:41 PM

I think a major problem with Wired is that they're trying a bit too much to be like the magazine and not enough like a website. I love Wired's design - but as you stated - two columns just doesn't really work that well on a screen when you're reading large amounts of content.

The issue of focus is what I think will successfully separate the free content from the subscription model. If I could browse a certain version of a site or periodical that I frequent without any additional ads and in a custom-designed format (much like the Wired app) I'd have no problem paying a little bit for it.
Chris Butler | July 15, 2010 8:57 AM

Pak-Kei: I agree with your point about content with/without form. Ideally, we could create content in a way that would conform to its context, so that it is just as usable within a web browser on a laptop as it is on a smaller tablet screen or even smaller on a smartphone. Currently, we seem to be in an awkward in-between phase in which we're more likely to create alternate content templates for specific devices due to an absence of device-type standards (i.e. iPad, specific vs. tablet, general)

awesomerobot: I think your frustration speaks right to the point that Pak-Kei mentioned: whether content should be flexible to context or whether we partition content by device. I think that the ideal scenario is to have content that is created to be flexible within multiple context standards (computer/tablet/phone).
Pak-Kei | July 17, 2010 9:50 PM

My question would be... is all content conform-able? It's a constant struggle between whether there should be more authentic experience or more convenience - I tend to side with the former.

There are certain printed books that scale and its relationship to the human hand does matter. I had a gigantic book at home called Astronomica, which shows planets in very crisp details. I'm sure they can resize Jupiter to size of my phone's screen, but would it have the same 'wow' as a Jupiter bigger than my face?

And obviously, certain painting (drawing ;-) would not make sense if it's tiny in your hand - all its power would be lost with the loss of scale, as we had already seen due to limitation of books.

Most ideally, we will have a e-book machine which can resize itself to any size. (I have no idea how that is technically feasible... flexible screens? holographic display?) Imagine maps that can be folded out infinitely, e-readers that can be as big as newspaper, or as small as a pocketbook... oh my :)
Mag | July 22, 2010 3:35 PM

I have to agree with you. I think that we all move too fast and do not take the time to stop and smell the roses. I am thinking that in the future, we will no longer do anymore writing, we will be speaking what we use to write. I hate to think about all of that though. Nice article, it really makes you think.