Original REM State Site Layout
General Design
The general layout of the site follows a standard, fluid, three-column design. Such a layout is, at this point, old as dirt—it’s simply a matter of having five <div> blocks:
- The header (
clear: both) - The left navigation (
float: left) - The secondary content (
float: right) - The primary content
- The footer
Naturally, the first thing I do in my CSS is to set the padding and margins of (almost) all of the HTML elements to 0. This helps to ensure that I don’t depend on the default spacing that my browser happens to use, and (hopefully) improves the fidelity of the layout across a wider range of browsers.
Overall Layout
Note that the <body> element is set to have a constrained width, causing all of the content to sort of “float” in the center of the browser. How much space there is between the body and the edges of the window is determined by two things: the width of the window, and the size of the text. Ideally, lines are around 52-78 characters—making them fall into this length range optimizes the readability of the text. Thus, in order to make the content as readable as possible, I should set the width of the body block to roughly 90 ex: about 13 characters for the navigation area, 61 characters for the main body text, and 17 characters for the ad area. However, in the case where a user has adjusted their font size to be very large, having 90 characters per line could easily overflow the length of the screen. Therefore, the width needs to be capped at some value—I have arbitrarily chosen 80% to be the maximum amount of screen space that the body should occupy.
In a perfect world, I could simply set these sizes up the way they should be: 90 ex as the width, with 80% of the screen being the maximum size that the body is allowed to occupy. CSS even allows for this, with the width and max-width properties, respectively. Unfortunately, Internet Explorer does not honor the max-width or min-width properties. Thus, I have to make a choice: should width be set to 80%, or 90 ex? In the former case, the body will always be guaranteed to fit on the screen, but the number of characters on each line could be very high if the font size is small. In the latter case, the characters per line would always be within the targeted range, but a large font size could cause the text to scroll off the side of the screen. Between these two choices, I feel that taking up too much physical space is the greater offense: having to scroll the site side-to-side makes the site almost completely unusable, whereas reading long lines just makes things unpleasant. Thus, the width is set to 80%, and the max-width is set to 90 ex.
Navigation Areas
Another issue that comes into play is width of the navigation areas. I have decided to make the links at the top and left of the page to not break—even if you make the text size huge, or squish the window down to a tiny size. This might be a bit rude (especially since I have a screen with a wide aspect ratio), but I feel that wrapped navigation is just hideous. This isn’t to say that the alternatives aren’t hideous, but they are certainly less so (at least in my opinion).
First and foremost, in order to make the link text not break, it is critical to have no spaces except explicit non-breaking spaces ( ). This makes the actual HTML a bit awkward, because the tags can’t have intervening spaces—such spaces would show up in the output as regular, breaking spaces, and that’s exactly what I’m trying to avoid. Once all the implicit breaking spaces are removed (and any explicit non-breaking spaces added), there isn’t much more to be done. In the case of the horizontal navigation bar, I initially used CSS-generated non-breaking spaces to break the text apart. However, since IE doesn’t support CSS-generated content, I had to abandon this approach and instead use margins to space the links apart—fortunately, the net result seems to be the same.
Another problem with the navigation is the fact that, once it is made to not wrap, Bad Things still happen when you make the window small. Most notably, the content will overflow its bounding box, causing it to run outside of its intended background, and in the case of the left navigation text, into the contents of the page. The lack of min-width support in IE means that the easy fix (declaring a minimum width that will always be wide enough to keep the navigation text from overflowing) isn’t available. Thus, IE users have to deal with the less optimal solution: overflow: auto. This isn’t as nice as min-width, because it causes scrollbars to be added to the navigation areas when the screen becomes too narrow. While this isn’t pretty, it does work, and is still (in my opinion, anyway) more attractive than wrapped navigation links.
The Footer
The footer was fairly straightforward, compared to the other sections. I opted for a simple look for each of the links—smallish text, with bars on either side of every link. The navigation is allowed to break in this case, mostly because it’s not particularly large or critical. Additionally, it doesn’t look too bad when it wraps—although I am considering making each link itself non-breaking (e.g., so that “XHTML 1.0” is always on a single line).
