With Deb Richardson’s recent posts on the evolution of the about:mozilla newsletter, I decided to try my hand at a new layout for the existing issues, in the hopes that experimenting with new designs could help shed some light on the situation.
For reference, this is how the February 24th issue looks:
One of the notable things about this layout is that there isn’t actually much useful information in the first screen: there’s a table of contents that has headlines, but the user needs to click on a headline or scroll down to learn more. The length of each line is also quite long: at over 130 characters, it can be difficult for the reader’s eye to move from the end of one line to the beginning of another.
Here’s my redesign of the same issue:
This layout takes advantage of the fact that all the articles in about:mozilla are pretty short—short enough to fit on most PC/laptop screens in a narrow column without forcing the user to scroll vertically.
Since most computer screens these days are much wider than they are tall, I thought it’d be useful to have the articles placed horizontally next to one another rather than vertically: that way the horizontal space is used efficiently, and each article remains easy to read because it’s in a column about 40 characters wide. It also places the headlines in the same visual line, so that it’s easy for readers to scan through the issue and filter out articles that they’re not interested in. The top and bottom margins of the page are black so as to focus the user’s eyes on the content (the same reason a theater’s lights are turned off during a show).
This design was inspired in part by the Swiss Grid System. In an attempt to make it somewhat resolution-independent, the CSS doesn’t use pixels as a measurement unit for anything other than borders; everything else is specified in points and ems.
I’ve also hooked up this layout to pull its content from the Atom feed for the newsletter using Google’s AJAX Feed API; if you’re interested in reading the latest issues of about:mozilla using this alternative layout, you’re welcome to use this page. Although there isn’t currently an interface for viewing back-issues, you can change the number at the end of the URL to read them if you need to.
My name is Atul Varma, and I'm the co-founder of a small Chicago company called 
I like the idea. It could do with a contents still, so you can skim over it know what you are and aren’t interested in. It looks a little simple as it is, but it looks quite promising.
Might I suggest using a vertical layout for placing articles that go beyond a horizontal screenful? The idea of putting each article in a columnar fashion is great, but it feels more natural to scroll down for more content. Having 4 columns (one for each article) and as many rows as required to fit the content might be better.
The same problem could also be solved by creating ‘Next’/'Previous’ buttons, then it doesn’t matter whether the layout is horizontal or vertical - you always show, say, 4 articles at a time (horizontally), and then just switch them with the next set of articles (maybe add a slide-in effect) when a button is pressed
I personally prefer vertical scrolling, because I like to keep my browser windows fairly narrow, at around 2/3 or my screen’s width or less. In other words, there’s more vertical space than horizontal. I could see doing something like this if the articles could be stacked, with the beginning of each article in each column, with two articles per column, or something like that, but otherwise I prefer it the way it is.
Good points, everyone… I’ve attempted to incorporate some of your suggestions here.
This layout dynamically figures out how many columns of entries to display based on the width of the user’s window, and then stacks the overflow entries vertically, so the user only ever has to scroll vertically.
I’m not sure how I feel about it yet, but comments are welcome. Oh, and please feel free to take the source code and play around with it yourself, too.
Your new version doesn’t work for me. It creates five columns, but only shows me 2 2/3, so only 2 are readable.
Don’t assume that the size of the screen is the size of the window. (And don’t think about changing the size of the window — I have other windows that I want to see in the rest of the screen.)
(For the general wide versus tall issue, there are easy ways to scroll vertically (page up and page down, and just the space key), but no easy ways to scroll horizontally.)
B.J.
It’s also important (I think) to keep in mind that some (many?) people read the about:mozilla newsletter via e-mail.
Although, the e-mail newsletter is formatted a lot more than the web page that you linked to. Perhaps that’s because it’s merely a feed, without formatting?
“In an attempt to make it somewhat resolution-independent, the CSS doesn’t use pixels as a measurement unit for anything other than borders; everything else is specified in points and ems.”
I’d note that like px, pt is an absolute unit, which should only really be used for print media. So while it might be independent on resolution, it’ll be dependent on screen/window-size (and you can’t really count on a minimum width here.)
– cers / Christian Sonne
I have javascript turned off (noscript), and I only get a completely black page. Redesigning an official mozilla newsletter in a way that makes impossible to view without javascript isn’t too nice. If you really want columns (although the disadvantages with regards to scrolling have already been pointed out), why not try something with CSS -moz-column and -webkit-column and make the site gracefully degrade in browsers that don’t support it?
The new version shows a completely white page if JS is turned off.
I think Jakob Nielsens research from back in the day is still valid for this issue - “Users hate horizontal scrolling”: http://www.useit.com/alertbox/20050711.html
It also “breaks” the spacebar as a shortcut to scroll to more content. Something I use all the time when reading long pages like: http://planet.mozilla.org/
Kim Sullivan beat me to it, but why not use -moz-column-gap and
-moz-column-width? I know of at least one mozilla blogger who uses that, and it makes his blog much more readable.
Hmm, I think I may not have been explicit enough about one of the assumptions about this design, which is that it was made to scroll horizontally rather than vertically. Some of you have made good points about how this can be more inconvenient for people, though–although I think some of them can be remedied through hackery, e.g. by capturing keypresses of the spacebar and scrolling horizontally.
@Christian: What I really meant by “resolution-independent” was that the page literally be independent of pixel resolution, because pixel resolution alone doesn’t mean anything for end-users: a character that’s 10 pixels tall could be eminently readable on one 15-inch display and microscopic on another. On the other hand, points say something very specific about the physical size of something: books on typography, whether for print or otherwise, always state that 9pt is pretty readable. So unless a reader actually has poor vision, I’d prefer for the text to appear the same size whether it’s on an iPhone or a laptop screen.
@Kim and @Dorus: I’m currently playing around with CSS3 columns, but I’m finding them very difficult to use; for one thing, the specification of -moz-column-width doesn’t appear to be accurate, as it seems impossible for me to align e.g. a visual element with the second column of a passage of text. Hmm.
Regarding the use of JS, this is just an experiment, and it’s easiest for me to use all the cutting-edge tools at my disposal. Should it ever become the “new” layout for about:mozilla, I’d definitely set things up so that the page could be easily viewed with JS turned off.
I like the second version better. But just a minor thing - you should invert the colors for the header in the second version, too.