I have groups of content and I can stack them vertically in 100% width rows or horizontally (even-width columns).

Since the user for English language web sites will read left-to-right and the and users don't mind scrolling, one could argue that having vertically stacked content is easier to use:


download bmml source – Wireframes created with Balsamiq Mockups

However, if one were to stack them horizontally, the user could scan the header text without scrolling in one continuous left to right motion:


download bmml source

Is there compelling evidence that says one approach is better than the other?

  • 1
    On which devices (what size displays) will the content be viewed?
    – CJF
    Mar 18, 2013 at 19:05
  • Assume a responsive web site where horizontal stack will become vertical if the viewport shrinks, so the question is targeted to the desktop environment where there is ample room. Mar 18, 2013 at 19:06
  • Are the content blocks completely self-contained, or do they lead/link to larger bodies of content on separate pages? Basically, do you show a summary in the box, and link to the full article? Or are these more like short reviews with one or two paragraphs per block?
    – CJF
    Mar 19, 2013 at 11:54
  • It could be either, think col 1 could be "About Us" with a link to more information, col 2 could be some location/contact information that is self contained, col 3 could be a news blurb with a link or a pull quote with no link. The content is mutable depending on context. Mar 19, 2013 at 15:51

5 Answers 5


You mention reading, so I assume this is a site with content meant to be read. The following studies examined the effect of line length on reading speed and on desirability. Dyson and Kipping conclude that for reading from a computer screen, reading speed increased with line length. Readers preferred the shortest and longest lines. Their study did not examine margins.

Youngman and Scharff tested similar conditions, but studied the effect of margins. They concluded that line length does not independently affect reading speed, but that line length and margin width interact significantly. Readers were fastest with 8-inch lines with 0 margin, but hated it. They strongly preferred 4-inch lines with 0.5- to 1.5-inch margins, and read nearly as fast as with 8-inch lines.

Youngman and Scharff (1998). Text width and margin width influences on Readability of GUIs. SWPA 1998: http://www.lieb.com/Readings/Width.pdf

Dyson, M.C. & Kipping, G.J. (1998). The effects of line length and method of movement on patterns of reading from screen. Visible Language, 32, 150-181. http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp


How much content is there in the groups? Is it equal across the groups or varied?

Vertical vs Horizontal: If you have enough space to accommodate multiple groups side-by-side while still maintaining readability, it would be great. Conversely, if the line is too short it is not good for a pleasurable experience.

You can use an accordion (vertical) menu if you want the headings to be visible all the time.

  • The content could be varied, or could be a mix of paragraph content and lists of links (think navigation elements). Re: "If you have enough space to accommodate multiple groups side-by-side while still maintaining readability, it would be great" do you have any research to back that up? Mar 18, 2013 at 17:47
  • Again, depending on the content, you can go for a multicolumn dashboardish approach. example: google.com/ig
    – rk.
    Mar 18, 2013 at 17:50

For this width VS height issue, you will find that the rules of reading comfort keeps changing with amount of content, number of columns and height of rows. Given the amount of text you have provided, I would go with 1 column approach.


Evidence i've found that supports the horizontal approach over the vertical approach can be found within The Journal of Vision - "Comparing reading speed for horizontal and vertical English text". In the past this article was used to help grasp how customers look at our website content to help provide a better reading experience. However when designed properly you can use a vertical approach.

Chris Coyier's CSS-Tricks is a good example of a mixed layout using vertical and horizontal layouts. The vertical layout for Desktop and horizontal when viewed on mobile devices. The vertical layout works for this sites desktop view as each content container has enough breathing room to allow users to focus on the blurb of text they choose to read.

CSS-Tricks Desktop Vertical Layout

CSS-Tricks Desktop Vertical Layout

CSS-Tricks Mobile Horizontal Layout

CSS-Tricks Mobile Horizontal Layout

When using Mobile the horizontal approach is best due to mobile devices limited screen resolutions. Desktop has a higher screen resolution which provides more real-estate on the page which can support both horizontal and vertical approaches.

  • An important part of why this style is successful is that it offers a brief explanation of the article with a link to read more. If there was a large amount of text, a user would have to scroll through much more content to see the total amount of articles.
    – Keiwes
    Mar 19, 2013 at 14:12
  • Adding to @Keiwes depending of what type of content you have and your audience will be a deciding factor on how to present your content. I'd recommend Pattern Tap (patterntap.com) to find other example patterns of horizontal and vertical approaches other sites have used. It's a personal favorite of mine! Mar 19, 2013 at 17:11

What about placing an expand/collapse button on every article? (Pardon the very quick and dirty mockups.)

quick mockup of expand-collapse

Or, less preview is more compact: more compact

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.