Why are most websites optimized for viewing in portrait mode?

Question

I simply cannot figure this out. Almost all monitors have an aspect ratio where width is much bigger than the height and yet almost all websites are designed exactly for the other way round? I am not really a web developer and am just experimenting stuff at the moment but this madness baffles me!!!

Edit: The point is not that I would like to limit the height of a website. The point is that I'd want it to somehow fill all available space when I have my 1920x1080 in landscape mode.

Edit 2: See this to understand what I am saying

Answer 1

There's a limit to how far the eye can scan without losing track of what line is next when you get to the end of the current line. There's been a number of studies (including this one) about optimum line width and readability.

You might be able to boil it down to degrees, but in order to know what is optimal at that point requires you know how far the user is from the monitor. That's why most recommendations are for measurements in ems, characters, or words. The size in pixels is then dependent on the size of the font, but the general consensus still works.

I personally would have a very hard time reading an article if it was formatted to use the full width of a 1080p screen. I'm sure you would as well. Our current conventions are derived from print layout design guidelines, and the layout guidelines haven't materially changed. The only difference is that we can interact with the page in a browser.

Additional commentary: (from question posed in comments)

There are limitations to what HTML can do for you on a screen. For one thing, there are no pages. Only scroll bars. Designing a reasonable behavior for how a browser should display markup is a very difficult proposition. The CSS3 properties for multi-column layout haven't made it out of candidate recommendation stage yet. There are hacks to play with it described in this article at a list apart. However, it's just not quite ready for prime time on most sites yet.

As long as your content doesn't require scrolling you should be OK. As soon as it does, the multi-column approach can present some challenges on how the user interacts with the site.

Commentary on the Current De Facto Standard:

To address the way you reworded your question, and the example you provided, understand that web design has to balance a number of potentially conflicting requirements--and still keep the website looking professional. In order to balance the needs of the designers and the clients, most development houses design for one resolution. That resolution is based on data that can be readily available. They can also be based off of historical web traffic records, or knowledge of the target environment.

The most common screen widths (1024, 1280, 1366) are close enough so that if you design for the smallest (1024p) and center the design on the page, it will still look nice on the other slightly larger horizontal dimensions. It is very difficult to get everything aligned right in any format, much less have to support multiple formats depending on the screen width. 1080p users are growing in number, but still make up a very small percentage of everyone they have to support.

In case you are interested, I highly recommend perusing some of the design articles at "A List Apart". You'll start to get the idea that doing what you want is more difficult than it looks. When I posted a question about designing for 1080p, the first initial responses amounted to "Make everything bigger". It's something that just hasn't been on the radar for most web designers yet.

Answer 2

Most websites are Taller then they are wide because you can scroll down naturally to read more content. I personally HATE horizontal Scroll bars. They should be abolished!

Website are still portrait, the site extends be beyond the bottom of the screen. There is No limit to how tall a site can be.

There are now infinitely long web pages (Thank you, AJAX), What would you do if you saw an infinitely Wide page? (I would hunt down and Kill the designer, clicking away from the page is not good enough, the designer must die.)

Scrolling across then back for each line will drive one to suicide. This is why people make fancy book like, page turning apps, so you don't have to scroll across.

Answer 3

After reading the previous answers, I notice that several points are missing, so I'll try to describe those.

Difficult columns implementation

When you talk about large-width pages, I imagine that you're talking about text columns, like what you see in a "physical" newspaper. There are two problems with that.

First, actual HTML 4 and XHTML 1.0/1.1 are not intended to display text in columns. There are hacks for Firefox (and maybe other normal browsers), but it will not work in Internet Explhorror.

Second, in actual Firefox implementation or in future HTML 5, if the text must be displayed in columns, you must specify the width of the column and the number of columns. It is not possible to specify the height (to, for example, the height of the page, minus the height of the header and the height of the footer), and let the browser adjust the number of columns.

It makes it practically impossible to have an usable layout in columns with only horizontal scroll-bar, without the vertical one.

No 100% height

Actual HTML/XHTML is intended to adjust the size of the elements according to the width of the page. It's very difficult to use the page height for metrics.

This means that you will have to use JavaScript hacks to display the content correctly. In other words, for people who don't have JavaScript enabled, your website will be completely unusable.

Browsing with half-screen page

With large 16:9/16:10 screens, it is not unusual to work with two windows side by side (Win + ← / Win + → in Windows Seven). This means that the browser window will have a small width and a big height.

Fixed vs. dynamic width

Your assumption that most websites are optimized for viewing in portrait mode may be wrong.

First, most websites are not optimized at all and are written by people who don't know anything or little about web development in general.

Second, there is a difference between websites with fixed width and websites with the width which is equal to a percentage of the width of the browser window.

In the first case, you may notice that most websites are not optimized neither for portrait, nor for landscape mode. Usually, the width is fixed to 1024, 800 or less, which doesn't make any sense when viewing them on a 24 inch screen with 1920×1080 resolution.

In the second case, if you are viewing the page in full-screen mode on a 24 inch screen, there are chances that this website will be displayed correctly in portrait as well as in landscape mode.

Example : imagine a website with a gallery of photos. On a page there are thumbnails, and when you click on a thumbnail, you see a full-scale photo. If the thumbnails are float-lefted, with a dynamic width of a page, it will display nicely in landscape mode. It will be especially nice to see the full-scale photos.

Answer 4

Why are modern monitors oriented in landscape mode?

1. Video format. HD video will scale better for landscape oriented displays.
2. Reading. Whether left to right or right to left, its easier to read large blocks of complete lines without any scrolling when oriented in landscape mode.

EDIT: After reviewing your comment, and reframing the intent of your original question, it seems you are sort of aiming for some reason for the two and three column layout that is most common today. For this a brief, little summary of website history:

Why are websites optimized for viewing in portrait mode?

I don't think they are optimized for it at all. It's often a compromise between having certain aspects always available, certain aspects often available, and certain aspects available only within a certain context. At best, you could it an call optimal compromise.

Being able to place core, expected navigation and secondary content in each page alongside context specific content is why two and three column layouts are as pervasive as they are. In the earlier days of web, many sites experimented with layouts which offered what attempted to appear as single column layouts, using dynamic navigational lists (or menus, however you want to see them), that would hide themselves and expand the reading area for the main content. But it was a two part challenge: a) technical challenges in lack of cross browser compatability; b) usability: it was often viewed by users, even if (a big if) the technical challenge was overcome, as unintuitive or an unncessary game of hunt (for navigation) and destroy (experience satisfaction because some solutions modified the default context behavior of mouse clicks).

To overcome this, most sites have adopted a defacto standard, and accepted the consequences. Either two columns displaying navigation in one and content in the other, or a third column is added so secondary, non core navigational content can always be displayed (whether its context related help, notes, or advertising, or more recently communication streams showing live person activity related to the site or context). The actual content of the context is stuck in the middle.

Answer 5

This is called fixed width layout. There are full width layouts or also called as fluid. There is a reason why fixed width used. One is that resolution of your monitor affects usability. If you have a huge monitor like I do at 27" the site would look horrendous. All the text, pictures and everything would be so spread out, it would be hard for me to get a grasp of the layout or site. A fixed layout allows for beautiful design. Fluid layout is used mostly in listing or data type of sites. For example eBay uses fluid layout in its listings because it provides for a better experience. Forums could also benefit from fluid layout. But blogs, creative, photo, or business sites benefit much better from fixed width sites.

Answer 6

I suppose that in general it is discouraged to post an answer in thread that has not seen activity for a long time. I feel, however, that there are some relevant things that have not been mentioned yet.

First, let me mention the following Firefox extension that I discovered several months ago: Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Why do we scroll vertically?

For comparison: consider a language that is written in vertical columns. For a language like that the current wide-screen monitors are ideal. So that is how it works out: you scroll perpendicular to the direction of your lines. Book pages are in portrait format because our lines are horizontal.

As has been pointed out in earlier answers: the reflow capabilities of our browser's layout engines are tuned to reflowing vertically.

multi-column capability

The development team of a browser may opt to add multi-column capability in the following way: First render the entire page as a single column, then cut that into strips with the pixel height of the available window space, and display those strips side-by-side. But how wide do you make the columns? Even when very little width is used for actual text, often the page codes for a particular background color for the entire width of the available window space.
Then the rendering engine must play safe, and allocate the entire horizontal space to a single column.

Is it possible for webdesigners to implement a reflowing multi-column layout?
That would run into severe difficulities. You have to obtain the height and width of the available windows space, and do the cutting and arranging of strips into columns in Javascript. Then you must decide what to do with images that are cut in two pieces.

Dealing with that sort of thing is what a layout engine does. To try and create a Javascript library that facilitates reflowing multi-column layout is to create a rendering engine in Javascript. That's creating a platform-in-a-platform.

Monitor size

I find it frustrating that in effect computer monitors have shrunk the last couple of years. Large monitors had 1200 pixels of height, nowadays only 1050. Yes, they're wider, but for text that space cannot be utilized.

Also, in portrait orientation those monitors are too narrow.
I have a dual monitor setup, with both monitors in portrait orientation, both monitors are 1200x1600px. For me those 1200 pixels are a minimum.

A conditional statement in CSS

A remark about fixed width layouts.

I love the CSS command that allows the web-designer to accommodate a large range of widths while avoiding scrollbars and maintaining readability: "max-width". (There are four commands like that: min-width, max-width, min-height, max-height). For a div containing text specify a max-width of, say, 65em.

You get an if/else.
If the available space is less than 65em then the text is reflowed accordingly: no horizontal scrollbar If the available space is more than 65em then the containing div is set at 65em.

Answer 7

I don't know for sure, but my guess is that most "documents" that are printed are designed to be printed in portrait-orientation, and many people still designe websites as "documents" - this might be a cultural thing? Another possible explanation is that monitor-width varies more than monitor height...

Answer 8

Widescreen monitors have really only taken off in the last 2 years -- they used to be the more expensive options.

Design-wise, it has always been viewed that having a web page (document) go long so that a user had to scroll down is vastly superior to making someone scroll across for a few reasons. First, this is the way most computer documents tend to work, so it is a more "normal" pattern; you have a page down key but not a page across key. Second is we've got nearly ubiquitous mouse wheels these days, so scrolling up/down is a very easy activity, vastly easier than scrolling across.

Finally, how do you pick what widescreen resolution you'd like to hit -- my desktop is 1920x1080; my laptop is 1440x900. Which one do you design for?

Answer 9

While its true that most monitors are landscape in orientation that are being sold today you also must take into account that when you design a website you have no way of knowing exactly what screen resolution the viewer will be using. There's still 15% of internet users who are operating on a screen resolution of 1024 in width or less. This doesn't leave a lot of room for horizontal expansion before you have to scroll to see the information. Plus some users don't surf the internet in a fully maximized window. The only solution to this problem is to develop a design that is dynamic based on the size of the browser window. If you have ever attempted to do this you would be very hesitant to attempt it again unless absolutely needed as its a royal pain. There are many other reasons to have a smaller width as have been already mention.

Answer 10

There are a number of reasons:

• Documents of mostly text are traditionally portrait ratio, so the web preserves that.

• It is easier to read shorter lines of text. I don't have a cite, but it is a very common piece of design advice, to the point of being a standard more than a guideline.

• A design that favors narrow is more flexible. I like to window my browser to only half of my wide screen monitor's full screen, and put something else (usually a text editor or another browser window) beside it. Just because I can have a web page be 1920 pixels across doesn't mean I always want it to be. Its actually a bit presumptuous of a web designer to make any assumptions about how I will (or should) view their page. Gives me bad flashbacks to "This page is best viewed in 800x600 on IE6."

• A better choice would be a liquid design that scales to any width, and CSS makes that work well for text (most of the time, in most modern browsers, maybe). But images, embedded video, flash, and other modern embedded objects always screw up that kind of design without a lot of work. Given the choice between a flexible scaling design that takes a long time to get right vs a tried and true narrow fixed width design, quite a few people would opt for the easier (cheaper) path.

• The most flexible choice is something like iGoogle, a user-adjustable web part canvas. Then your text can be as wide or narrow as you want, with blocks of text and images arranged how you'd like. Now I'd like you to imagine the nightmare of every site you visit requiring customization before it's readable.

Answer 11

For now the web design standard for sites is to develop in 960px wide to accomodate screen resolution of 1024px and up (without horizontal scrollbar). This is the minimal requirement since not everyone uses a shinny new 24 inches monitor. (think of tablets and netbooks which are new hardware with small resolutions)

You should keep in mind that the resolution of a web site desing is impacted by the targetted audiance and should be adapted accordingly.

Also in term of usability the lines of text should be around 11 to 14 words wide (can be more if you adapt the line-height) so not all website can handle fluid design.

At best if you don't want to give your visitors the feeling that the page outside the content zone is not empty you can add texture/color strippes that extends beyond and that adapt to the size of the user's screen. (like on http://www.cnn.com/ which only applies to the header, but you could make it for the whole page)

Answer 12

Why are most websites optimized for viewing in portrait mode?

Why do we print paper in portrait mode when landscape is a perfectly viable option as well?

As many people have said, it is easier to read a larger number of short lines than it is to read two or three long lines.

Aside from that, if you were to fill 1280*x pixels with content, the webpage would be cluttered and nobody would know what needs to be addressed. A webpage should perform a specific task, not EVERY task.

Web 2.0 trends teach us to put less information on a page, and make the call-to-action clear and concise. This commonly accepted design philosophy is the exact opposite of what you're suggesting.

There are MANY reasons to develop for a 1024 resolution, but I think the clutter factor is one of the more important ones.

Answer 13

I've noticed that you're using what looks to be Windows 7, so the answer is: Win + ←

On a serious note though: The primary reason websites are optimized vertically is that it's easier to code a static-width layout in CSS and have it look correct cross-browser on multiple platforms. Fluid widths are used occasionally, but they don't lend themselves to readability.

When watching a movie or playing a game, it's great to use up all your horizontal space with stuff, but with reading, you really only want a small column of text so that the eyes can scan naturally without needing to turn the head. Adding more crap on the left and right of a webpage will tend to distract from the primary content of the page, so many designers just leave it blank to have attractive white-space.

Additionally, just because you have a nice monitor doesn't mean that the majority of people have a nice wide-screen monitor. A great resource to check layout sizes on is google's browsersize.

Answer 14

Your monitor is oriented incorrectly. A programmer's monitor should be higher than it is wide, in portrait rather than landscape.