I have spent the last 15 years writing basically butt-ugly web pages. I have always been proud that my pages have a certain Joie d’Ordure. I think it has been the absolute lack of aesthetic values that have made my web pages stand out. They are memorable in their butt-ugliness. I have received countless complaints from sensitive web surfers about how my pages hurt their eyes or their sensibilities. These same self same surfers continually return to my pages because I offer something that is hard to find on the internet – good content.

So, when I was asked to teach a course in web page design, I thought it was a joke. Sure, I know how to make a web page. I am up on all the latest CSS tricks and techniques. I am not, however an artist, just a poor mechanic who can cobble together a working page in a matter of minutes.

Last week I finished teaching Art 144 – Web page Design, for the second time, and I have been looking at the student projects and some of them are damn fine. I tried to give the kids in my class all the tools that they could use to make a web page, but little guidance as to what makes a good web page. We discussed it in class, but I limited my comments on design to a saying borrowed from my wife’s aviation career. Any landing that you can walk away from is a good landing – translated to web pages – Any web page you can read is a good web page.

The last four class periods, I banged into their pointed little heads a three-column template. I wanted them to be able to make a top banner, left and right floating columns for ads and menus, and a footer at the bottom of the page. This is very easy to do with CSS, but I wanted them to be able to understand what they were doing so they did not need a template or a cheat sheet. I wanted them to be able to do it in notepad if needed. The CSS is very simple. I wanted them to use DIV tags instead of tables. At least four times each class I started with a blank screen and built the three columns. I had different students try it on the screen and I got it so some of them could call out “Float Left!” when I came to the right place in the style section. The class took this and ran with it.

I suppose I yelled out things like “Don’t use too many fonts”, “Don’t use color unless it really means something”, “Don’t use the marquee tag or the blink tag”, “KISS (keep it simple stupid)”, “Use white space to separate ideas” and so on for the whole three hours. Something must have stuck, because the class projects were very good.

I recently have been faced with declining ad revenue from my harmonica sites. I make up for this with the FreeNameAStar site, but I wanted to do a rewrite on one the harmonica sites to make it more search engine friendly. Using the three column design that I forced on my class, I began to rewrite the site template.

I made the template as simple as I possibly could. I have a top banner 60 pixels high by 100% wide. Above the banner, I have a thin ad link bar. Under the banner, I have a thin strip with a search box and an email contact. The left column is 120 pixels wide and has one ad tower. The right side is 200 pixels wide and has links to my related sites, a drop down box with the archive files, and then links to articles that I’ve written over the years.

The bottom banner has the WebRing code (one of the lost secrets of driving traffic.) It also has the hard coded links to all the articles on the site. I hard coded them in the bottom banner because the rightmost menu is done in JavaScript. Spiders won’t crawl inside of JavaScript so I wanted to make sure that the web spiders find all of my pages, that’s why I link everywhere in the bottom banner area. This bottom banner is a server side include and has the MyBlogLog code and other scripts to help me with the web stats.

I made the right column menu JavaScript to keep the real content nearer to the top of the page. On the old web page, there was so much crap that the spiders didn’t get to the important content until 5K into the html. This hurts me in the search engine rankings.

The context ads on the left hand side are subtly colored, while the rest of the site is starkly black and white. This makes the ads, situated in the “hot spot”, sparkle just a little more.

The site looks a little Web 2.0-ish. I am not fond of that style, but I have to admit that it is easier to read and it loads much faster than it used to.

The results are that in two days of running the new site, I have tripled my eCPM (measure of how many people click ads). The old ads were at the top of the page and on the right hand side after some menus. Now the ads are on the left only (except for the link bars) and are right up against content. The content has more space between entries and some white space padding. The ads are very readable and difficult to ignore. The context ads for my harmonica site are all about harmonica amplifiers, harp amps, and microphones, giving surfers a real reason to click the ads.

I will see if my search engine hits go up as the new page is spidered. This takes months sometimes, as the search engines don’t rebuild their indexes every day. There is always the danger that I took something off the site that will lower my search traffic. 85% of my traffic comes from searches and the rest comes from my die hard fans. I’ll report in a few weeks how my search engine traffic is holding up.

I only applied these changes to the blog part of my pages. Now I have to rewrite all of the other pages. Some are technically in violation of the search engine Terms of service, so I have to get to it. I can apply the new template to every page on the site and if I am lucky, I might double my income.