Unfortunately that study has very limited use for general web design. The reason for this is that it has only studied paginated text with short pages of fixed size and no scrolling, whereas a web page is much more likely to have longer passages of variable size that do require scrolling. And I’m willing to bet large sums of kudos that as soon as you introduce vertical scrolling into the mix, the reading time and comprehension for multi-column layouts will plummet compared with a single column.
this is a Sign of the Upcoming Zombpocalypse! Raise your hand if that looked totally excellent and bodacious. If your Inner Designer is salivating at that, give it a good kick.
My Inner Designer took one look at that page and jumped off a cliff…
Seriously, how can one of the biggest and most well known news organisations in the whole entire world produce something that looks so utterly, utterly awful?
Seriously, how can one of the biggest and most well known news organisations in the whole entire world produce something that looks so utterly, utterly awful?
They asked a front-end professional to do it, and they were like, no way dudes, and so then they got a $nephew with a copy of {%WYSIWYG%} to do it for them. They got what they wanted. Everyone happy.
I don’t have any problems or issues with NY Times website.
For me, the layout is very similar to reading a paper newspaper. I don’t mind scrolling down to read content, especially when I know it can’t be avoided.
But if I ever have to scroll sideways to see all the content, then that really cheeses me off 
exactamondo :agree:
and that is why we have such a wide variety of opinions on how things should be done and no-one having the authority to say “Right, this is how it will be done” - which partly explains the wide variety in the quality of layout and code in web pages floating around on the www.
if it looks like a duck, and shîts like a duck…
stevie d, how can one of the biggest and most well known news organisations in the whole entire world produce something that looks so utterly, utterly awful?
the artsy-fartsy types are in charge, that’s how
a wise person once told me
opnions are like anal orifices - everybody’s got one 
and I cleaned up the quote a bit to 
Good God, people?! (26 responses and I haven’t even had time to read the first response!) 
Debbie
I was wondering if there was an easy way to make your content “snake” around from column to column.
Back in the old days - where I used PageMaker - you could create X number of “Newspaper Columns” and then when yous started typing text, it would keep expanding down the first column and when it got to the end it would snake around to the top of the next column and so on.
In an “ideal” world, my solution would determine how high your monitor is (e.g. 600 pixels), then it would set up the # of columns and finally it would receive content and when the content got to the bottom of the user’s monitor it would snake around to the next column.
(Probably sounds pretty fancy, but I bet that it can be done using HTML and CSS and maybe a little JavaScript.)
Debbie
Yes it is.
I saw your post over there.
And I responded wondering if I should even do stuff before that.
Debbie
[QUOTE=donboe;4753847]This is actually an interesting question, because I think DoubleDee is referring to dynamic output from top to bottom:
1 5 9
2 6 10
3 7 11
4 8 12
instead of the usual
1 2 3
4 5 6
7 8 9
10 11 12
Donboe, you “hit the nail on the head”!! 
Now the question is HOW to do that? (I’m pretty sure it can be done using tradition Web Design tools/approaches (versus Flash, etc).
@Kalon: I know how to create that in Coldfusion, but I was wondering if you know of any Javascript that can do that as well?
If I could do it without JavaScript that would be the best!
Debbie
Pretty strong fightin’ words from a database guy…
Care to elaborate why you think hundreds of years of Page/Print Layout is wrong?
Having to read text 800 pixels wide is what is “user-hostile”. (Check out what the NY Times is doing to bring the web back to traditional layouts. It KICKS *SS!!!)
Debbie
See my earlier responses.
Who said anything about scrolling?! 
Articles online should continue in one direction only, so that people don’t have to keep going backwards and forwards.
Um, articles (on the web) should read the way they do on paper since it is better to read narrow columns that wrap within your viewfinder than to read horribly long lines that span your monitor entire width.
Trying to emulate ‘print look-and-feel’ on the web is often going to lead to a poor user experience. On-screen reading is different from print reading, and your design should make the most of that, and play to the strengths of the online medium, rather than trying to slavishly reproduce a design strategy from the print medium that doesn’t work as well online.
The NY Times figured it out…
Debbie
Nice article!!! :tup:
But so then, when DOES opinion come in? Here: this is a Sign of the Upcoming Zombpocalypse! Raise your hand if that looked totally excellent and bodacious. If your Inner Designer is salivating at that, give it a good kick.
The NY Times and LA Times r.o.c.k.!!!
Debbie
yes there is. I posted one way of doing it back in post #5
and you would need php and sql to get the content out of the database.
but I wouldn’t do it your “ideal” because say your database had 10 articles to display on a page and the browser window height determined you need 10 columns to display all the articles without vertical scrolling then the final width of each of those ten columns will most likely make the content unreadable or at best difficult to read unless the user had a super wide monitor.
see post #5 for what imho is a better option.
first i have to install some Adobe software? and likely also register my username etc.? just to read text?
no thanks
i will do what i do to other sites that are user-hostile – bail, and go somewhere else
you want fancy-schmancy, fine, that’s your privilege
just realize you are turning away visitors
There are ways of doing this as described in some of the posts. I, peronally use Coldfusion, and although I use PHP at times, it’s not my strongest point. So if you are using Coldfusion or are able to use Colfusion, I’m more than willing to help you out. If it needs to be PHP, I’m afraid you have to turn to someone else. Reading the posts so far, Kalon would be a good bet I guess
There is a way that’s been a part of css3 since 1999. Firefox supported it as early as v.1.5 iirc. Right now, only Safari/Chrome and Firefox (Gecko) support the multi-column layout model.
Like others, I’ll express my dislike of flowed columns for the web, in the general case. If used very carefully, the layout can be put to good use. To emulate newspaper paste-ups is silly. The well designed newspaper will not have columns cross the fold. My local paper, the Dallas Morning News is not well designed, and is getting worse at every turn. Recently they have been doing just that to the effect of making the paper more difficult to read. Unlike with newspapers, the web designers have no way of knowing where the user’s ‘fold’ lies. To cross that fold means the reader must scroll down to read the bottom of column, then back up to read the start of the next. That is a massive design failure.
Here’s an example of flowed columns. It works in Firefox and Safari/Chrome, and fails gracefully in Opera and IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test document</title>
<style type="text/css">
#wrapper {
width:80%;
margin: 0 auto;
}
div {
-moz-column-width: 10em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid lightgray;
-webkit-column-width: 10em;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid lightgray;
-o-column-width: 10em;
-o-column-gap: 2em;
-o-column-rule: 1px solid lightgray;
-ms-column-width: 10em;
-ms-column-gap: 2em;
-ms-column-rule: 1px solid lightgray;
column-width: 10em;
column-gap: 2em;
column-rule: 1px solid lightgray;
padding: 5px;
}
</style>
</head>
<body>
<h1>Flowing columns</h1>
<div>
<h2>First paragraph</h2>
<p>Integer id libero a ante placerat venenatis. Duis tincidunt
velit at magna eleifend sollicitudin. Nulla in urna diam. Cras
pharetra leo nec odio fringilla sodales! Nunc consectetur
pellentesque ullamcorper. Fusce magna massa, malesuada vitae
dictum ac, ornare a nisi. Mauris ut ante a enim ultricies molestie
nec sit amet dolor? Mauris eu lacus pellentesque turpis
ullamcorper condimentum. Fusce non lectus vel diam euismod cursus
et vel erat. Ut in nunc vel lacus vulputate condimentum blandit
sit amet nisi. Aliquam semper, sem sit amet dictum blandit, ligula
augue vestibulum velit, vel semper dolor turpis porta
ipsum. Pellentesque vestibulum, purus sed pulvinar viverra, mi
purus mollis dui, aliquam ullamcorper libero neque a est. Sed in
orci sed dui tristique malesuada. Morbi nec odio magna, ornare
cursus ipsum! Praesent sed consectetur ipsum. Integer et turpis
nibh. Duis quis urna nibh, eget commodo tellus. Curabitur laoreet
urna sit amet magna tempor eget bibendum purus adipiscing. Vivamus
et nisi rhoncus elit fringilla commodo.</p>
<h2>Second paragraph</h2>
<p>Quisque mattis enim bibendum diam tincidunt vitae commodo nisl
posuere. Fusce dapibus purus pulvinar diam auctor scelerisque!
Phasellus lectus ante, pretium ut facilisis a, ultricies nec
tortor. Pellentesque purus tellus, rutrum tincidunt convallis
aliquam, consequat at velit. In hac habitasse platea
dictumst. Nullam ut tortor metus. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Cras
lacinia sem non metus sollicitudin at adipiscing lacus
pretium. Proin dolor risus, interdum at porta vitae, sollicitudin
molestie tellus. Curabitur quis leo urna, at tempus mi. Sed sit
amet consectetur mauris. Praesent egestas ultrices tellus, id
consequat nunc egestas eget. Donec sem eros, volutpat eu
sollicitudin eu, varius et lectus. Nullam ultrices vulputate nisl,
tempor adipiscing urna vulputate non.</p>
<h2>Third and fourth paragraphs</h2>
<p>Aliquam sed sapien eu sem elementum aliquam. Vestibulum
lobortis, dui at aliquam mollis, dolor odio sodales ante, vitae
dignissim eros eros vel dolor. Integer dignissim elit sit amet
ipsum tempor luctus. Integer ultricies nunc aliquam felis
imperdiet consectetur. Duis elementum, nisi sit amet dapibus
elementum, ante massa eleifend nunc, eget accumsan felis neque
sollicitudin ligula. Aliquam non urna vitae eros cursus
rhoncus. Fusce viverra egestas odio, nec iaculis elit consequat
ac. Duis pretium, odio nec auctor ullamcorper, arcu metus
ullamcorper velit, a sollicitudin mi justo et nisi. Pellentesque
sed posuere est. Duis ornare elementum augue id tincidunt. Quisque
dictum luctus nisl quis elementum. Integer rutrum rutrum nisi, in
dictum sapien pulvinar in. Cras sit amet pharetra lacus.</p>
<p>Nulla sem odio, auctor in pretium sed, adipiscing at
velit. Praesent faucibus urna eget nisl semper eu cursus arcu
fermentum. In eget tempus eros. Nam id purus sapien. Vestibulum
dignissim urna in nisi dapibus vitae vehicula metus mattis. Morbi
augue nisi, tristique sit amet bibendum pellentesque, egestas eu
ligula. Nunc fringilla orci at orci ornare interdum dictum augue
accumsan. Cras euismod quam nisi! Etiam vestibulum condimentum
dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac dolor lectus. Mauris id lectus velit, at
consectetur ipsum. Nunc ac neque leo, at cursus nulla? Donec
commodo vulputate leo in tempus! Sed ornare dui sit amet magna
dignissim posuere! Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nulla sapien dui,
elementum sit amet viverra id; blandit et massa. Suspendisse
potenti. Cras pretium dui orci, a adipiscing elit. Praesent
convallis interdum porttitor.</p>
<h2>Last paragraph</h2>
<p>Curabitur vitae velit vel purus placerat eleifend. Duis
pellentesque aliquet mauris non suscipit. Integer auctor imperdiet
libero sit amet suscipit. Sed quis sapien ut ligula elementum
sagittis. Fusce tempus arcu id quam fringilla gravida! Vestibulum
mattis consequat sem, id ultricies mauris vehicula et. Nulla
lobortis semper mauris, a auctor orci accumsan in. Mauris sit amet
metus sem, vel tincidunt diam. Donec lacus arcu, lobortis sit amet
consequat.</p>
</div>
</body>
</html>
cheers,
gary
I’m not saying they are wrong, I’m saying that it’s a different situation, that needs different strategies.
For hundreds of years, stories had been written down as text, maybe with a few pictures. Then along came television, a new medium through which the same stories could be told. Did broadcasters simply display the manuscript as words on the screen? No, that would hardly be playing to the strengths of the new medium. Instead, they took a radically new approach that worked well on television but would not have been effective in print - a high-speed slide show.
It’s the same here. Just because something works well at 360dpi print in a broadsheet newspaper doesn’t mean it will work well on a 1024×768px screen.
I mentioned scrolling because it is eminently relevant. You have three choices with your multi-columned article.
- Write a really, really short article that will fit on a single screen
- Write a normal length article that is too tall for a single screen, meaning people will need to scroll.
- Write a normal length article then paginate it to people’s screen sizes by adding so much scripting and processor overhead that the latency gives them time to go and get a cup of coffee while it’s clunking away, and that then irritates the heck out of them when their normal reading strategies don’t work.
If you don’t understand why none of those - not even the third one - are a good idea for a web page, think about this. People are used to scrolling through pages that go on for longer than one screenful. They use a variety of methods to do that - some roll the scroll-wheel on their mouse or use the hotspot on their trackpad; some press the space bar; some us the Page Down key; some use the down arrow key; some click on or drag the scroll bar. How many of those strategies are going to work with your custom design paginated view? I’m guessing none. That means that no-one is going to be able to read it the way they normally read online, and everyone is going to have to learn a new technique. Remember Neilsen’s Law - people spend 99% of their time on other websites. And the Corollary for the Hard of Thinking - if your site doesn’t work like 99% of other websites and they have to learn something new in order to use it, most of them won’t bother, and will clear off to a site that works in a way they can understand and cope with.
And with your fancy-pants paginated article, what if people want to highlight and copy the text? Or print it? How will you make it fully accessible?
I agree that excessively long lines are hard to read. That’s why I would always advise designers to set a max-width on the content area to ensure that lines of text don’t get too long to be read comfortably. That doesn’t mean that you have to throw away every established web design technique and build a new one that is horrible to use just to avoid long lines.