Style

The internet abounds with opinions on style. I'm not going to say that my approach is correct, the best, or even better than anyone else's approach. That being said, I'm going to discuss some of my approach to web style.

My Number One rule when developing a web site is this: always develop according to standards first. The corollary to this rule being, never, *ever* design a web site to be platform-specific. That being said, keep in mind that, in order for the myriad web surfers to be able to view your web site, you may have to apply various "fixes" - this practice is known as developing for cross-browser compatibility, and it is a royal pain in the butt. It so happens that, at the time of writing, Internet Explorer 5 is the most standards-compliant, stable, free browser. Netscape 6 is very standards-compliant, but is a memory hog, and is still very unstable. Another option is Opera, but why *pay* for a browser when so many are free?

Another consideration of cross-browser development is that the two major browsers - and for all intents and purposes, the *only* two browsers - look at the DOM (Document Object Model) in different ways. This difference only matters if a web site uses any kind of script that interacts with the web page at all. In other words, for any useful script to be compatible, some sort of cross-browser compatibility consideration has to be made. I accomplish this differentiation by using a script file that I link into the head of all of my web pages, that determines browser platform and version, and sets a number of variables that I use later in other scripts. I'm actually still learning about this aggrivating problem, as is evident when viewing my web site with Netscape (especially NS4).

First, let me say that, putting this rant here is pointless, since anyone using NS4 cannot view this page, thus will never read what I'm about to say. However, it will make me feel better, and it's my web site. If you don't want to read it, move along to Rule Number Two below. That said, I will now say to anyone still using Netscape version 4 - that horribly sorry excuse for a web browser - Stop It! At Once! NS4 was good in its day; however, its day passed a long time ago. NS4 has poor (at best) support for CSS, yet supports a bunch of deprecated HTML and other proprietary tags (can you say "blink" and "layers"?). That Microsoft blew past Netscape in the "Browser Wars" with IE5.0 is evident in IE's 84% market share. From my own experience, IE has at least a 75% share, or a 3-to-1 advantage over Netscape. In fairness, NS6.0 is at least standards-compliant, and when a more stable (and less memory-hogging) version is released, Netscape will again have a very competitive browser. If you must use Netscape (I know many people despise "Micro$oft" or just prefer Netscape), do yourself a huge favor and get the latest version.

My Number Two rule when developing a web site is this: resort to graphics only after exhausting all other options. So much can be accomplished through using simple HTML, CSS, JavaScript (and the combination of these three, dynamic HTML, or dHTML), that often, using graphics is unnecessary. Graphics significantly increase page load time, especially for those of us on slower dialup connections (oh, how I miss my T3 at Rose-Hulman!). I've seen many gratuituous uses of graphics - from link rollovers to entire menu bars made of graphics, to the dreaded image map. Often, the graphic is used to provide a fancy effect (rollovers), or to make site maintenance easier (menu bars / image maps). but often, the same result can be accomplished without using graphics. For instance, a link rollover effect can be done quite effectively using JavaScript. (See two different implementations of JS/dHTML on my own sites - this web site, and the Alpha Chi Sigma NCD Web Site, linked to the left.) Also, using Active Server Pages (.asp) or even a JavaScript include, can be used to ease site maintenance. In this case, a menu graphic is linked on each page, so that, whenever the menu is changed, the graphic is simply updated once, and all the pages reflect the change. However, I achieve this effect by making my menu a JavaScript (.js) file, and linking that file in each page on the web site. Whenever my menu changes, I change the menu.js file once, upload it, and all the pages on the site reflect the change.

The addendum to Rule Number Two is this: be smart with use of graphics. You'll notice that, on my site, the more graphic-intense pages still download relatively quickly. For one, I keep the size fairly small (around 40 kB). I also include height and width (in pixels) in the src tag, which allows the browser to render the rest of the page more efficiently. While this web site is not very graphic-intense, the Alpha Chi Sigma NCD web site has a very graphic-intense section. There, I make copious use of thumbnails - miniaturized versions of the larger, higher-resolution graphics. Thumbnails load much more quickly, and allow the viewer to get a glimplse of the image, and *choose* whether or not to view the larger version.

My Number Three Rule is based on the true intent of HTML: use HTML to specify the form, or *layout* of your web site, and use CSS to specify the *style* of your web site. To get an example of this rule, copy one of the pages from my site, and view it locally on your computer (without also downloading my linked style sheet). You will see just how little style code resides in the HTML file itself. What you should notice is that the HTML document does nothing but specify the layout and content of the web page. Following this rule has two inherent advantages. First, HTML was never intended as a means for developers to specify style (the User Agent, or browser, is supposed to apply style), so by separating form from style, you will be coding inherently better web pages. Second, by separating style from form, you will make your life *much* easier, in terms of maintaining and updating the style elements of your web site.

My Number Four Rule is this: be consistent. This rule applies first to site layout, and also to the site navigation scheme. You should notice on this site, that I have chosen to have my menu bar at the top of the page (and also at the bottom). Visitors to my site know that as they go from page to page, the menu will always be safely located where they know they can find it, and also, that the menu selections are constant on every page. Also, you should notice that the main content of each page is indluded in a three-column layout. The left column content never changes. Visitors will have a constant reminder of my picture (on second thought, maybe I should replace it with a picture of Erica...), my contact information, and the various other sites that I maintain. The center column provides the main content and information for each section of the web site. The right column provides supplementary information, and external links related to the content of each particular section. This consistent navigation makes my web site inherently easier to view and navigate. Also notice (again, through the use of style sheets) that colors, fonts, headers, and all other stylistic details are consistent for each column, across all sections of the web site.

My Number Five Rule is this: know your style. While many style "rules" on the web are simply a matter of someone's opinion, some style "rules" are derived from long-standing typographical conventions. For instance, consider a printed newspaper. The contrast between text and the background is stark. The width of text columns is limited. Consider these two conventions to be canon in terms of style rules for your web site. The contrast on your web page, between your text and your background, should be stark. A perfectly fine combination would be black text on a white background. Should you decide to use a background image, consider carefully the contrast within the image itself, in addition to the overall contrast of the image to your text. It is virtually impossible to find a well-contrasted text color if your background image itself has high contrast. Also, you should limit the width of text columns on your web site. Your web site should never, *ever* force users to scroll horizontally to read columns of text. (Inherent in this consideration is the screen resolution for which you design your web site. Some people can view resolutions up to 1600x1200, but consider that some poor folks still use 640x480... and don't forget PDA's, which have even smaller resolutions.)

Finally, my conventions - first, I prefer to use sans-serif typefaces.which, in my opinion, are much easier to read on-screen. Second, in terms of contrast, I prefer dark text on a light background. Our eyes are more accustomed to viewing text in this contrast scheme, and in my opinion, darker backgrounds create a "glow" effect of the text, that is unpleasing on the eyes when viewed for any length of time. While many sites use a simple white background, I prefer to use silver, which is much less harsh on the eyes, while still providing a high level of contrast. Further, this scheme allows me to draw attention to the areas where I do employ a white background. In terms of text column width, I limit my text to around 400-500 pixels. Currently, my center column is fixed at 450 pixels, which keeps the text within a width that is more comfortable to read, as the eyes can move without strain, and without needed head/neck movement. I also prefer to keep my text at a size of 10 points. I find this size much more comfortable to read than the larger font sizes of which Internet Explorer is so fond.