I redesigned my personal web page at http://people.emich.edu/lholt3/eng328/ using concepts found in two website style guides. "Spiderpro: Styleguide: 100 Do's and Don'ts in Web Design" by Jan Kampherbeek is a collection of rules to help web designers and authors create well-designed websites. The rules cover topics including content, navigation, design, and compatibility. Another resource, "Web Style Guide, 2nd Edition" by Patrick Lynch and Sarah Horton, details design and style techniques to improve the readability and flow of material on websites.
I have designed websites for many years, but there were several gems in these guides to help me along the way. SpiderPro offered advice on content presentation. One rule, "Do use the first screen," suggests that important information and navigation should be presented on the page without the user requiring to scroll down. It says "Be sure to put important text on the first part of your page, the part that will show up first on a screen." (SpiderPro) I contemplated this rule for a bit. I've typically designed sites with the popular screen resolution in mind. However, I had not thought about modern surfing habits. People view websites on cellular phones, set top boxes, game consoles like the Nintendo Wii and Sega Dreamcast, laptops and desktops. Each of these devices uses different screen resolutions. The "Web Style Guide" suggests in their dimension section, "Even on small computer screens it is possible to display graphics that are too wide to print well on common letter-size, legal-size, or A4 paper widths." So pages can be too large for printers and screen viewing. I decided to keep the layout simple and compact to help with printing and onscreen viewing. Essay pages could be easily reformatted for printing by the web browser.
In light of the first screen advice, I decided to place as much navigation at the top of the screen as possible. Most pages include a navigation box at the top, left corner of the screen to get to critical portions on the site. SpiderPro also has another rule, "Do use navigational aids at the top and the bottom." My top navigation aid offers adequate navigation. Pagers are very short so bottom navigation seemed to clutter the page. I will keep it in mind if page sizes increase. I also followed the advice with my navigation scheme offered by SpiderPro, "Do keep menu items related." My navigation is broken up into three groups, general, English 328, and English 444. General includes information about me, my interests, and a link to my site home. The other two categories are course specific information. My navigation system should be simple and easy to use.
The next task was designing the look and feel of my website. I wanted to create a very simple design for the vast majority of pages. Visitors to my website would be other students who may want to read essays and other course work. Complex backgrounds and formatting would just add unnecessary complexity. SpiderPro's first design tip is "Do use a consistent look and feel." I limited my site design to two general styles. Another course requires me to create a targeted site. That site is also part of my larger work. As it is a Jewel fan site, I had a dilemma. I wanted that site and my course work site to feel integrated, but they also had different audiences. To solve the problem, I created two style sheets. The first style is designed for my Jewel website with bright colors for headings, white background and rich formatting. The second style sheet imports the first, but adds a few changes to improve legibility of course work. I maintained consistent color choices and font families to maintain a look and feel consistent with the Jewel site and yet subtly different. The "Web Style Guide" suggests, "Whether you develop your site on your own or hire a professional Web developer, you should develop page templates for your new Web site. It's much easier to add new pages if you can start from a page that already has the basic navigation and site graphics in place." Using this advice, I created a template for all Jewel pages and one for all other course work. I simply need to duplicate that file to create a new page. The template for course material is very simple as I make use of cascading style sheets for formatting.
I needed to compare my new template designs to my existing site. My course sites were in different colors, with different formatting styles on each page. Text had different flow, and I had chaotic alignment of elements. The new templates offered a consistent look and feel, universal navigation with home links, and the print preview was slightly better in my browser. As President Bush once said, "Mission Accomplished." There is still more to do, but I have a great start with the tips in the guides.
Works Cited
"Spiderpro: Styleguide: 100 Do's and Don'ts in Web Design" Jan Kampherbeek
<http://www.spiderpro.com/pr/prstgm001.html> 13 June 2007
"Web Style Guide" Patrick Lynch and Sarah Horton
<http://www.webstyleguide.com/> 13 June 2007