Why most Web pages are formatted in portrait orientation?

Why most Web pages are formatted in portrait orientation? Last time I checked most PC monitors were 4:3 wide. Browsing gets even worse with new 16:9 displays. Some sites do resize with the browser window, but good chunk of them doesn’t. I guess one might say ‘what if user wants to print it’? I don’t honestly know how often typical Web user prints pages, but I personally do it very infrequently compared to how many pages I read.

Is there a reason or is it simply a tradition?

Comments (16)

  1. Because most web sites are designed by people used to doing magazine layouts? Just a thought 🙂

  2. One thing that dictates the layout of a page is the influence of the text line length on the readability. It’s a fact that above a certain line length reading (and comprehending) texts becomes more and more difficult. So if you don’t want to (or cannot) use a multi-column layout for your body text, there’s a certain limit on the width of your web page.

    It’s funny that I never thought this (page layout vs. monitor layout) to be a problem — maybe it’s because I use only few programs in full screen mode (e.g. IDEs).

  3. Luc Cluitmans says:

    Roland already pointed out the real issue: readability. There is a ratio between line spacing and line length beyond which your eyes will have troubles finding the start of the next line, and reading becomes much harder. This can be fixed by increasing the vertical distance between lines (either by increasing the line spacing or by increasing the font size) or by restricting the width of the lines. That is why printed media normally is printed in columns.

    In addition to this readability issue, for me personally, there is also the simple fact that I want to leave some space on my desktop for other programs than my browser, and making my browser window narrower is the most natural way to do so…

  4. Marcus says:

    With the advent of CSS stylesheets, it’s easily possible to create a print stylesheet which prints out portrait and a view stylesheet which displays landscape. Oh, and this was possible about 3-4 years ago (IE5/Moz 0.x)!

    Unfortunately the takeup on CSS was very slow to begin with. Thankfully it’s getting better now.


  5. Jerry Pisk says:

    While I agree that long lines are difficult to read I also don’t like web developers forcing their line length on me. I mean, I’m not a moron who can’t size IE windows, and I prefer to have the choice of line length (or desktop space for other apps). Take the weblogs.asp.net home page – if I want to read it full screen I can. If that’s too difficult to read or if I need to open other windows at the same time (and see them) I can size the browser window to whatever suits me and the text will just wrap to fit my width. The worst thing one can do is to force a fixed layout (MSN home page for example, that’s one of the worst pages I’ve seen as far as accessibility and readability go).

  6. Yes, it is right you can print landscape via css.

    The main reason of the layout is readability folks have already pointed that. Another point is that at the beginning of web era it was in common to create menu on the left side, so you have your content narrowed. Now the fashion is somewhat different. It is common to place menu on the top. But one can say that the pull down menu hiddens content this way, so the pull down menus also become somewhat pull-down-line menus.

  7. Everybody made their stab. I guess it’s time to summarize and really answer the question 🙂

    There is no such thing as portrait orientation of a Web site, as there is no such thing as landscape orientation.

    The most intuitive principle of reading an electronic document has always been "you read horizontally and scroll vertically" (unless you are a navigational weirdo like creators of http://www.korg.com/).

    Thus, the horizontal size (width) of the page is typically dictated by the size of your output device (monitor), whereas the vertical size (height) is not constrained and depends on the size of the content.

    Ideally, this should mean that on wider output devices you would see more content horizontally and scroll less.

    Unfortunately, building a "liquid" HTML template that will stretch correctly and still deliver an enjoyable reading experience is rather tricky.

    That is why a lot of Web site designers forego the liquid stretching thing altogether. At this point, they fix the width of their template at some lowest denominator, so that all of the content is visible horizontally on most people’s monitors.

    Today, the magic number is 762px or so, to accommodate the 800×600 resolution.

    Naturally, when you look at a page this wide on one of those larger monitors that we developers covet so much, the layout will appear as portrait.

  8. Jeff says:

    Roland took my answer. 🙂

  9. 15Seconds says:

    Look at newspaper print. Narrower columns are easier to scan and read.

    Hey, Web pages on a whole can conform to monitor size, no problem, but text on the page should conform to what’s easiest to read.

  10. Michael Cook says:

    Dimitri hit the nail on the head.

  11. Mikhail Arkhipov (MSFT) says:

    I tend to disagree. Too often I see sites that ‘accomodate 800×600 resolution’ AND include ads at the left (20%) and at the right (50%). Total reading space: 30% of 800 px or 240 px. C’mon, this is PDA display I am facing staring at 1280×1024 monitor! 🙂 Oh, and it is very pleasant to read 240×1024 column 😉

    I would agree with newspaper columns issue if Web site would behave like newspaper. I.e. when I resize browser window, second and then third column would appear like it happens when you unfold the newspaper.

  12. Mikhail,

    I am not quite sure whom you are disagreeing with here, but the scenario that you are describing fits perfectly into the explanation that I provided.

    To clarify my previous comment a little more, I don’t believe that readability is the primary reason the fixed layout is used. The primary reason is to solve the problem of fitting all of the content horizontally without scrolling.

    Fixing the width provides a simple and consistent solution to that problem.

    By the way, I have experimented with "unfolding newspaper columns" idea for a while, but was unable to provide an implementation that didn’t suffer from some sort of accessibility issue.

    International Herald Tribune (http://iht.com) is a decent approximation of the idea. Go to one of the articles and click on "A+" button at the bottom until three columns would turn into one. This illustrates the fact that the columns are built dynamically on the client.

    On the downside, if you try to browse this article with JAWS, you will discover that the entire text of the article is read to you 3 times (or current # columns on the page). This happens because the developers trick us into believing that they are splitting the text into columns, while they are merely triplicating the content in divs of smaller width and adjust the scrollHeight to create the illusion of the columns.

  13. Bob Riemersma says:

    Basically the web was designed to display documents, primarily reports and whitepapers and other prose.

    Simply think of a word processing document. Nearly all are "portrait" because the target is the printed page. The web was meant as a retrieval mechanism for such documents.

    It wasn’t for displaying artwork, or newspapers, or magazines. There were no left or right margins full of ads.

    Don’t forget the display resolutions typically available back then. Consider the default type sizes for paragraphs, headers, etc. There just wasn’t the real-estate to think of the screen as a "page" of information. It was always a "window" on a "page" of text and vertical scrolling or paging was the only way to go.

    I agree that expanding/collapsing multi-column formatting would be great. There are some headaches in implementing such a thing though.

  14. Will says:

    Seems to me that the css solution doesn’t work as well as it should if at all sometimes (re: printing in landscape mode) … cross browser support for such a stylesheet seems to be limited from my experience.

    I’m still looking for a nice clean way to print large tables cross browser in css. Maybe I’ll be looking for some time to come…

  15. Chaz says:

    "By the way, I have experimented with ‘unfolding newspaper columns’ idea for a while, but was unable to provide an implementation that didn’t suffer from some sort of accessibility issue.?"

    I stumbled across this:


    Which uses flash to paginate long text and seems pretty slick.