Web design theory
Since I was asked about certain details in the footnote, I decided to give my spiel regarding web design.
Any Wikipedia can tell you that web pages come in two flavours: fixed width (like most news sites) and fluid width (like Wikipedia and this page when viewed in IE). A fixed-width site is one that is set with a certain width. This width is fixed and, barring changing the CSS and/or HTML client-side, the page will always display at that width. A fluid-width site is one whose width is not defined to be a certain value, but is decided by the size of the client window viewing the web page.
Though you may have your own ideas about which is better at this point, I would like you to clear your mind of those ideas and try to understand the problems behind the different design ideals.
We'll start with fixed-width design. Usually, fixed-width websites are so because their creators like to maintain full control over how the webpage looks. No matter how wide a client's screen is, the site will always have the same width and therefore look the same. This kind of design is objectively good in situations where width needs to be controlled, say on a print-preview page. One important drawback of fixed-width design is if your page's width is too big or too small for the average browser window, then your page will look stupid. According to the W3C, 14% of Internet users use a screen resolution of 800x600. Therefore, a webpage whose width is defined to be greater than 800 pixels will effectively be pushing away 14% of Internet users. On the other side of the coin, a webpage with a width of 800 pixels will waste a lot of horizontal space on a very large screen. Generally most websites target the 1024x768 audience nowadays, working under the assumption that most people browse maximized (which is a terrible assumption — but more on that later).
Fluid-width design eschews the problem of choosing the right width by not choosing a width at all. A page without a width defined will take up all available horizontal space, so it can be viewed no matter the resolution of the client (within reason — typically there is a minimum width at which point the page is no longer readable). On larger screens, however, a new problem emerges. It has been shown that the longer a line of text gets, the harder it is to read. This is likely due to extra work the eyes and head have to do to get from the start of the line to the end, and to the start of the next line. Ideally, there should be something between 40 and 70 characters per line; however fluid-width design has no mechanism for preserving that statistic. Therefore when someone with a large screen views such a page maximized, it is very difficult to read.
And that brings me to my first point: in either case, browsing maximized on larger screens is a bad idea. Either you waste a lot of horizontal space, or you have ridiculously long and hard-to-read lines of text. This is why that line is included in the footnote.
There is a semi-happy medium which this website implements. Using a property called max-width, this website behaves like a fluid-width site on smaller screens, and like a fixed-width site on larger screens (as long as you're not using IE, since IE does not support this feature). What happens is when the screen is smaller than a certain size, the page will take up all available horizontal space (like a fluid-width page). When the screen is larger than this size, the page will only take up that size and leave some horizontal space blank. (Note that this still looks stupid on larger screens — it's merely easier on the eyes.)
So this website has its max-width specified at "60em", meaning 60 characters in width, relative to the size of the font used. If someone has a very large default font size, then the maximum page width will be very large. Likewise with smaller font sizes.
This brings me to my second point, the three most important rules of web design, in order of decreasing importance:
- Use relative font sizes to allow all users to see the text if they are visually impared or for any reason like to have non-standard font sizes.
- Use a fluid-width design but with a reasonable maximum limit to make sure those unenlightened who browse maximized don't hurt their eyes.
The objective of web technology is to enable all people from all over the world using different client applications to see the same content. Any design that runs contrary to this goal is obviously doomed to fail.