5.1 Page layout and a splash of color

The question of how to size a web page is one of the most vital and simultaneously annoying issues I have come across to date. Some people declare any scrolling down the page to be off limits and propose that pages be designed as fixed size along the width and height, fitting nicely into most browsers with background space occupying the remainder of the scene. I disagree with the never-scroll-downward rule and I believe most other people do as well — at least based on the amount of scrolling I do on web pages everyday. As long as the important information (especially navigation) hits "above the fold" as MacDonald, Beaird, and the authors of the previously mentioned Web Style Guide all point out, scrolling for the rest of the content is fine. Horizontal scrolling, on the other hand, is ridiculous. Given that, I like MacDonald's guidelines for creating fixed-width pages that are set at 1000 pixels, or a size that fills the browser window for at least half the browsing public. His cautions about proportional sizing make sense and I must admit that I am too much of a control freak to let elements appear squashed out of place or elongated, while trusting users to resize their window if something looks "off." His example of how to create a fixed-width page that doesn't truncate a block of content is ingenious. The New York Times (and obviously many other sites) have the content of an article fit squarely within a 600-pixel wide section of the page so that smaller browser windows can display the full text without the need for horizontal scrolling. The remainder of the page (fully visible at 1024 x 786) has additional content, but that content doesn't affect a user's ability to view that main chunk of text; users can finish reading down the page and then scroll right to view the extra material. What a fantastically simple workaround for catering to multiple users!

Beyond sizing, MacDonald covers the use and creation of tables, noting the effective uses as well as cautionary notes about trying to use them for substantial layout — namely, that they are somewhat outdated. I can see the purpose for lining up elements (such as buttons in the navigation bar) but styles have sort of eclipsed more extensive uses. Divs are just more flexible for layout. The use of frames is also covered in chapter 10, mainly as a relic of web history. The notable disadvantages, such as the URL remaining the same on each page, are enough to write it out of good design practice. At first this may seem like a minor issue, however with the importance of personal and social bookmarking the inability to put a placeholder on a particular page is an extremely unpleasant hallmark of frames; users are getting increasingly impatient with unnecessary clicks and forcing them to navigate through a homepage to reach specific content is a pretty good way to drive them elsewhere.

There is obviously an arsenal of layout tools out there, but the best for maintaining design consistency is definitely the use of templates. Fortunately it is easy enough to either download a free one, or better yet, maybe create one in Dreamweaver. The point is that any sweeping changes are applied to all the pages based on the template, so changing a page element is not really a big deal. The only thing is, as MacDonald mentions, they can be fragile. I have definitely lost some content on selected pages when updating a template, and I am still not entirely sure why. Did I make sure to save a copy before updating? Of course not; I apparently like to learn things the hard way. That said, templates are great as an organizational tool.

Moving on — or back — to color, I have another website to talk about this week that generates color schemes. Colors on the Web combines some interesting features, including information on color theory and psychology, a description of hexadecimal numbers and how screens display colors, and a tool to help design color schemes. One of the simplest and yet most useful features here is the list of color names. Each name has several associated swatches, as well as a hex code for each. The question posed at the top of the page, "Do you know what color royal blue is? Or hunter green?" is a great lead-in to this list. The fact of the matter is that people rarely speak the same color language, and antique white or navy blue mean different shades to different people. This list is a great compilation of variants that could be consulted and displayed to make sure that everyone involved in a web project is on the same page. For individuals, it is just a great reminder of the names of some of those colors you can't quite accurately describe.

There are a couple of tools available on this website that help to pick color schemes. First, "spin the color wheel" is just plain fun; it randomly generates a set of background, secondary, and text colors with each spin. A more useful tool, however, is the color wizard. It has a "randomize" feature that allows a haphazard color selection, but unlike the color wheel tool it generates color schemes, such as monochromatic, triadic, and complementary, using a single selected color as the base. This generates a more harmonious selection of colors than the color wheel tool, which presents potentially garish random combinations. Additionally, you can enter a hex code to base the color schemes off a specific color; this really tailors the scheme to a desired look and proves more likely to be useful for most people. I suppose, though, that the random feature could be a good source of inspiration if your mind really is empty with regards to the desired look of a website.

This is an example of a hex code I added for a puce color and the subsequent triadic scheme that was generated with the color wizard:

The color wizard also provides a selection of tints and shades for my starting color. The combination that was generated, including the additional color values, would create a very calm and sophisticated palette for a website. Moreover, a triadic color scheme is not one that I would often turn to on my own, so the color wizard and other similar tools can be a great resource for expanding on a basic color selection.

The Colors on the Web site is in itself nicely designed. The dark and medium gray background looks sleek and creates a neutral stage for the display of all those colors. The background behind the main page is a nice gradient of canvas-textured stripes in vibrant colors. These stripes enhance the message of the website in that it is obvious as soon as the page loads that it will contain information about color. The diagonal direction of the stripes also creates a nice sense of movement in an otherwise low-key design. The colored background, so as not to be too far removed from the main page, is repeated in a narrow strip at the bottom of the page; to further integrate the background and main areas the header section is translucent to allow a muted view of the colorful stripes.

A couple of minor issues with the site include the use of home and contact buttons above the main web page area. Mainly the issue is that the home button is visible, however it is more likely that users will click the logo text on the left first (I did). This is a common home link, and not having it work as such is annoying. Another issue that is actually quite significant is that upon clicking "color basics," every one of the drop-down menu color selections yields the infamous 404 message. Presumably these options are meant to link to basics about the feelings invoked by certain colors, and this is an area that would really round out the contents of this site. (Seemingly the W3C link validator is desperately needed here!) Although it can be hard to control these links (assuming they point to outside sources), periodic verification is essential to maintain the credibility of the site; right now that error message appears 11 times and I believe that is enough to drive a good portion of the site traffic elsewhere.

Beyond the flaws mentioned, Colors on the Web is still well worth checking out:
http://colorsontheweb.com/default.asp