Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

The Holmes Page WEB PAGE MAKEOVERS

Web Design Design Tips Programming Tricks Web Page Makeovers



BACK TO
WEB DESIGN

The Web is a dynamic place. It will always be. Technologies and techniques constantly change. Anyone (and everyone!) can create a Web page. 
Below are some pages that I visited in my virtual travels. Various things caught my eye, and I asked myself: Is that the best way to do that? How would I have done it? I have learned by trying to answering these questions. 
You can open the links below in a new window so that my commentary is still available. There will be a small "toolbar" at the top of the browser window which you can use to switch to the "after" and "before" versions of the page, as well as to return here. The new page will be visible first. The pages are stored on my Web server so I could capture the site at a point in time, but a link to the real site is given at the end of each commentary. The real site has probably changed in the meantime. That's the nature of the Web! 
Standard disclaimer: These comments have nothing to say about the content of the sites, only the presentation. Also, there is no desire to infringe on any copyrights, but rather to explore what works on the Web -- or perhaps what works better. These "makeovers" are presented only for educational purposes.

But first, a little background...

I have always felt that statements like "This page looks best at 800x600" or "This page looks best with Internet Explorer" are an indication of the shortcomings or lack of experience of the Web page designer. It is as if the designer is saying "If you can't view these pages on a hot machine with a big monitor like I do, then too bad -- we don't want your type around here. Go get a real computer, loser!" I don't think that this is the impression that you should give your guests... 
Web browsers have the ability to flow the content into the browser window whatever size it is, if the page is designed properly. Whether the window is "wide" or "tall" does not matter; the same information will fit anyway. Early usability studies found that users didn't like to scroll vertically, but later studies showed that finding to be false. However, horizontal scrolling is still extremely annoying because it can occur on every line of text, and especially since it can be avoided so easily. 
When I visit a site, I don't like having to choose from several different versions of a Web site, such as text-only, graphics, or high-bandwidth. It makes me feel as if I might be missing something if I choose the wrong one, so I end up trying each one. That's another "optimization" of the user interface that wastes my time in an effort to save it. 
As a consultant, I have always tried to be aware of the realities of what users experience, knowing that they don't run on the newest - fastest - biggest hardware, nor should they have to. Web pages should "degrade gracefully", until the day when we can guarantee that everyone is using the latest browser version. Will that day ever come?

The most successful sites are those that adapt to the user, rather than forcing the user to adapt to them.



American Woodworker [1998/06/08]   This site's main problem is that the pages are too wide for many browsers. This is becoming very common, as developers are creating pages on high-resolution monitors and forgetting that not everyone runs their browser that way.
The topmost elements on the original page are defined with:
<TABLE WIDTH="735" BORDER="0" CELLSPACING="0" CELLPADDING="0">
This controls the header of the page, containing the "American Woodworker Online" logo and the two advertisements. Clearly this sets the page width as 735 pixels, which is wider than standard browser windows.
Additionally, right below the header is an image which contains the text "Your #1 Source for Woodworking Information!". This image is also 735 pixels wide.
As a programmer and Web developer, I often switch my screen resolution between 640x480, 800x600, and 1024x768 pixels. I test Web pages in Internet Explorer version 2 and 3, and Netscape Navigator version 2 and 3, since those platforms are by far the most common on the Web today (although version 4 browsers are on the rise). In any case, I usually keep my browser window set to 640 pixels wide, even if my screen is set to 1024 pixels wide. This way I can be sure that my pages "work" on the widest range of user environments.
WebTV has a fixed content area of 544x376 pixels, with no way of scrolling horizontally. The original American Woodworker pages would be unusable in that environment.
My changes to the AW main page mostly involved getting rid of those elements which imposed a minumum browser width. Notice that the advertisements have been moved down so that the title is left alone. The title was also enlarged 33%, although this was only done with HTML scaling, rather than by re-creating the image in an image editor (which would have been better). The spacing of elements was adjusted, and the font sizes were made a bit more consistent.
I would prefer to have the ads slightly smaller, and both the same size, but there may be certain legal or contractual issues to deal with there. I don't know.
In general, all of the images could be tuned a bit to reduce their size, but even without that my changes reduced the load size of the page from around 90 kilobytes down to about 60k. I estimate a further 10k could be removed with image optimization.
Note that this was not a "complete redesign", but just a bit of shifting around while keeping the same general style of the page.
Go visit the site at http://www.americanwoodworker.com/.


Northeast Sailplane Products [1998/04/27]   This page uses a fixed-width table to provide the layout, which unfortunately does not allow the page to fill large browser windows. At the same time, it is too wide for a standard window! Another problem is the use of images for some of the text elements, which impacts performance and hurts the page in search engines.
My version still looks pretty much the same as the original because the changes were made mostly for efficiency. The total load size dropped from about 172k to 67k -- one third of the original size!
The original page background looked like a dull rainy day, so I lightened it up a bit. The logo needed a bit of punch and some cleaning up to remove stray pixels. Still, it could be better.
The very dominant menu on the right is an interesting problem. It is a nice bold element on the page, but at the same time it tends to overpower the slightly soft company logo. In the original page, the menu is created with a single large image with an image MAP to control the links. The colors don't have any particular meaning, and the ordering of the choices could be improved. My version is implemented with a table that uses background colors. This is not ideal, for two reasons. First, some browsers may not support background colors. Second, only the bullet to the left of the text is now the hyperlink. This was done in order to keep the white and black text colors. For various reasons, it would probably be better to completely rethink the menu, perhaps eliminating the colors entirely.
As of 1998/07/16, the site still uses lots of bitmaps, and the menu image is even larger, although the items have been rearranged. Many of the images overlap, making the page impossible to use on a standard size browser window. Because of the large images, all contained in a single table, it was over a minute before anything appeared in my browser.
Visit the site at http://www.nesail.com/.


Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

Site Map Send comments about this site to Greg at gregh@ghservices.com
All pages copyright © 1996-1999 GH Services™   Created 1998/04/01   Last updated 1999/09/30
All trademarks contained herein are the property of their respective owners