Web Design Tips
What do you do when making a web site? Well, your web site's first impression is important, as the look of the first page sets the tone. Your color choice could affect a visitor's mood and you'd like visitors to stay a while, so place something on the first page that captures their interest.
The same look should be carried into every page on the site. This makes it easy to recognize that you are still within the site. Navigation should be consistent across the entire site, making it easy to move around within the site, and giving the visitor clues about where they are so they don't get lost. The top page should contain links to the most useful information available and be a good place to start a search.
Here are a few more things I recommend when you are building a web site:
- don't use frames, they're more complicated and difficult to navigate or bookmark
- simplify your writing, keeping it clear and concise is just as important as in any other medium
- make your pages small, less than 50k for all text and images, which keeps it loading rapidly
- make your layout fluid, so that it doesn't depend upon the size of the visitor's window or screen resolution
- avoid animation, since many spinning and rotating things on the same page can make people nauseous
- be consistent, using the same writing and spelling conventions throughout your site
- create original content, give search engines a reason to direct traffic to your site
- validate your HTML, make sure that your HTML is correct. You can use the excellent Firefox HTML Validator extension
Case Study: Bay Area Orienteering Club
Near the end of 2003, I took over as webmaster of the Bay Area Orienteering Club website in late 2003 and made sweeping changes. The club has over 500 members and the site gets almost 1000 visitors a day, so I allowed for two weeks of feedback on the design before actually putting the changes in effect.
I designed a new navigation system, layout, and color scheme. Behind the scenes I also worked hard to modernize the site and make it easier to maintain. To make this web site out of the ordinary, I created an image rotation system (at the time, I realize this sort of thing is more common now). The club has many great photographs on its web site, but few were being seen on a regular basis. Now when you visit, you see different selection of photos every time.
Features of the BAOC Design:
- Colors: the background colors are lighter and paler shades, using two colors, green and brown, to differentiate between the navigation and content areas. Lighter colors provide better readability for the dark brown text. Link colors are green for unvisited links and a pale green-gray-blue for links that have already been visited.
- Banner: a new banner complements the color scheme, bringing in a new font and incorporating the traditional orienteering bag image behind the O in the club name. This allows the use of orange and white in the banner without coming on too strongly.
- Search Box: the box in the upper right corner allows you to use Google's excellent search engine to look for anything on the site that you might have trouble finding otherwise. If you put your own name in there, for example, you can get a page full of links to all the BAOC events you've ever attended.
- Navigation menu: on the left side of every page, this menu helps you understand where you are and where you can go. The current area of the website you are visiting will always be marked by the large orienteering bag icon.
- Content Area: in center stage, the content area, with the light brown background, contains everything of specific interest in a page, changing with each page you visit. The format of items in this part of the page may vary greatly.
- Stripes: a few additional cosmetic changes, such as the BAOC team color stripes at the bottom right hand corner of the content area, round out the design. They need not be the last cosmetic changes ever made, because this design will be easy to evolve (see Cascading Style Sheets and Templates below).
- Standards: the implementation of the new design complies with the latest web design standards for XHTML 1.0 and Cascading Style Sheets from the World Wide Web Consortium. The logos at the bottom right signify this compliance. Using XHTML 1.0 helps insure a consistent look within different web browsers and prepares this website for future browsers.
- Cascading Style Sheets: the benefits of using Cascading Style Sheets are two-fold: 1) one or two files define the look of all pages, i.e. one change updates the look of the site everywhere at once, and 2) the size of the files on the site are reduced by about half, making the textual part of each page download faster (it doesn't do anything for the download times of the images, however).
- Templates: you may have noticed that the filenames of new pages end with .php instead of .html. Files whose names end in .php are custom-assembled by the web server right when you ask for them. This is, incidentally, how you get different images every time you visit the home page. The web server puts together the page from standard template files (for header, menu, and footer sections). This allows the webmaster to make corrections to anything in these outer sections in just one place, without having to change every file on the site. This will make it much simpler in the future to change or add to the design.
I hope you found these thoughts useful, good luck with your site, may you have oodles of visitors!