New Mercurial Website

[Steve Losh]

On Nov 2, 2009, at 6:34 PM, Andrew Lentvorski wrote:

> Steve Losh wrote:
>
>> This is probably the thing I dislike *most* about the wiki design.   
>> I keep my browser window at roughly 1000 pixels wide so sites with  
>> multiple columns (brightkite, twitter, newyorktimes, etc) are  
>> usable and look good.
>> When I go to the Mercurial wiki I have to read lines of text 1000  
>> pixels long which is not fun at all.  There's a reason newspapers  
>> use very narrow columns instead of having their lines span half or  
>> all of the page -- it's easier for the humans to read shorter lines  
>> of text because with long lines your eye has to jump farther after  
>> each line.
>
> Um, you do know that you can reflow multiple column layouts.  Right?
> See: http://python.org , for example.
>

Sure, if the site developer does that.  If not, you're out of luck,  
without using some kind of site-specific userscript or something.

> I am less concerned about the behavior when the monitor is large  
> than I am when the monitor is small.
>

One way to solve it is to use ems to size the column(s) -- it will  
keep the columns at a readable line length while still allowing you to  
zoom out to avoid scrolling on small screens.  Or just use a  
reasonable center column width in the first place.

Let's say I make my browser window narrow enough so that Mercurial's  
wiki is decent to read (~100 characters per line).  It would look like  
this: http://www.flickr.com/photos/sjl7678/4069658945/

Now if I go to a site that uses multiple columns (even reflowed ones)  
like Python, it looks like this: http://www.flickr.com/photos/sjl7678/4069659467/

That looks pretty bad to me.  Let's make the window big enough to make  
Python's site look decent: http://www.flickr.com/photos/sjl7678/4069660519/

Now lets go to a site that plays more nicely with larger windows, like  
Bazaar's site: http://www.flickr.com/photos/sjl7678/4069659847/

The lines are a readable ~130 characters per line, which although it's  
a bit wide for my taste it's still not as bad as a fluid layout's  
~160-170 would be at this size.

Just for the heck of it, let's see how Bazaar's non-fluid layout looks  
in a netbook-sized browser window: http://www.flickr.com/photos/sjl7678/4069674341/

Hey, that's actually pretty good, and yet it doesn't become difficult  
to read on larger monitors.  There's a fairly happy medium you can  
find if you take the time to size out the column(s) properly.

>> A common rule of thumb is to aim for "1.5 alphabets" of characters  
>> per line, so somewhere around 40 or so.  Full lines on the wiki  
>> with my window size clock in at about 150+.  Sure, I could decrease  
>> the width of my web browser, but then if I switch to another tab  
>> that contains a site with multiple columns I get horizontal  
>> scrollbars.
>
> Rule of thumb?  From who?  Based on what research?  None of my books  
> on my bookshelf follow that rule.  Manuscript guidelines don't  
> follow that rule.  Magazines are all over on both sides of that  
> rule.  And, in fact, the newspapers only hold to that rule on their  
> front page.  If you look at deeper articles, they happily throw that  
> out.
>

OK, I was wrong, it's not ~40, it's more like ~45-80 for print media.   
"The Elements of Typographic Style" says:

 > Anything from 45 to 75 characters is widely-regarded as a  
satisfactory length
 > of line for a single-column page set in a serifed text face in a  
text size. The
 > 66-character line (counting both letters and spaces) is widely  
regarded as ideal.

That's mostly for print though.  On the web it seems studies have  
shown users are cool with ~95 character lines: http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp

Here's another study that found that no adults preferred the 132- 
characters-per-line to the alternatives they presented of 76 and 45: http://www.humanfactors.com/downloads/feb03.asp 
   I'd be very surprised if they changed their minds when presented  
with lines even longer than that.

> If you're really interested in readability/navigability, then we  
> should be using something like Amazon as the example as they do tons  
> of navigation research.  Navigation bar on left.  Reflowable middle  
> column.  Non-essential far right column.  Upper-left header conveys  
> important state information.
>
> And, by the way, newspapers didn't use narrow columns because they  
> were easier to read (they actually slow fast readers down).  They  
> used narrow columns because they were easier to reorganize suddenly  
> when you had to make last minute changes on old printing press  
> technology.

I guess my (young) age is showing -- I read a paper newspaper a couple  
times a year at most.

I'm referring to newspapers on the web, where the columns are still  
fairly narrow (at least compared to a 1,200 pixel browser window with  
flowed text).  Newyorktimes.com runs at around 100 characters per  
line, lawrence.com is a bit shorter at ~95, usatoday.com and cnn.com  
go even narrower with ~70.  *None* of them use a fluid layout.

Good technical documentation seems to stick close to this as well.   
progit.org/book and hgbook.red-bean.com both stick to ~100 characters  
per line.  It's true the hg book has some issues when viewed on an  
iphone, but that's an issue with how it's rendering whitespace and  
overflow in the code blocks, not with the fact that it has a non-fluid  
layout.

>
> -a