spacer

Web Design title

My Own Approach

- I've been hand-coding my pages with Notepad since I built my first page, back in 1994. I continue to do so today, because I believe I get much better quality that way. Automated tools generally produce code that is at least one generation behind the current coding style, and nearly always include unnecessary tags. If you are using a WYSIWYG tool to make your pages for you, I highly recommend examining the source and learning the HTML for yourself.

This page was written in late 1998, when I designed this personal site. I am slowly adding more links, and all of the links here were unbroken as of October 2001. Eventually I will have current information here, as I get to it.

I try to follow several usability standards for my pages:

  1. Always use ALT tags and WIDTH and HEIGHT tags in the <IMG> tag. The ALT tag allows those who have graphics turned off (or browsers that don't support graphics, or disabilities) to know what the graphic is. The WIDTH and HEIGHT tags allow the browser to lay out the text of the page around the space the graphic will take, allowing the visitor to read your text while the graphics on the page load.
  2. Specify a BGCOLOR as close as possible to the background graphic so that text is readable before the graphic loads, and so that when the graphic finishes loading it fades in gently.
  3. As much as possible, maintain consistency with the standard link colors of blue for a link, red for the link just clicked, and purple for a link already visited. I use a color picker tool (Color Tester by James Kuhns) to select variants of blue, red and purple which harmonize with the background. You want to be careful... some colors are so wrong that they seem to glow against the background, and this effect makes the text very difficult to read.
  4. On pages that I anticipate visitors will probably wish to print, select a light-colored background, and make the text color black or a color very close to black. It is extremely annoying (and futile) to try to print a page which is white text on a black background.
  5. Load the page and view it in both Internet Explorer and Netscape. Check it at 640x480, 800x600 and 1024x768 resolutions.
  6. Check my pages with Bobby to be sure they are accessible, and to be sure I haven't made any inadvertant syntax errors.

In addition, I put some thought into navigation through my site, and documented this in a site map page. The first three pages (index.html, resume.htm, portfolio.htm) are designed to meet the needs of someone who might want to hire me. The information which used to appear in my top-level page pertaining to my interests and hobbies was moved to the "non-professional home page", personal.htm, which I've called my Catalogue of Oddnesses. This page is an index to at least the top-level page for all the various opinion and hobby pages on my site.

You'll notice that I've gone to the trouble to set the <TITLE> tag in the <HEAD> portion of my pages. I want to make it as easy as possible for people to bookmark my site and then use the bookmark later. In the <HEAD> section, I've been setting the <META> tags as well.

At the bottom of each page are links for email, my top-level home page, my personal-level home page, and my summary web rings page. Below that is my copyright declaration and date the page was last updated. At the very bottom of the page are credits for the graphics used on the site, and links back to the sites where they came from. Failing to acknowledge the content provided by someone else is lying, pure and simple. It's telling people that you did the work, when in fact you did not.

Page Design Guidance

* Vincent Flanders' Web Pages That Suck
Learn good design by looking at bad design
* Jakob Nielsen
Advocate of Usability Uber Alles
* WebsiteTips.com
Shirley Kaiser has created a huge index of informative sites on all aspects of web design. Highly recommended.
* Colin MacKenzie's Web Design Tips
* Contentious
webzine by Amy Gahran specializing in online content (writing)
* Yale C/AIM Web Style Guide
* Writing for the Web
A research project about how users read on the web and how authors should write their web pages, done by John Morkes and Jakob Nielsen.
* User Interface Engineering
I saw a presentation at a conference by Jared Spool from this firm. Learn the results of their usability studies.
* Resources for Web Page Design
A collection of articles and design guides.
* Joe Barta's Tutorials
* State of Entropy WebGraphics
Tutorials for Paint Shop Pro

bar

Graphics Sources

* The S.S. Studio at Ann-S-Thesia.Com
Over 100 unbelievable environments (including the one on this page).
* Moyra's Web Jewels
Dozens and dozens of fabulous sets, grouped into Cultural Metaphors, Stoneweb, Nature, Reality and Astrology, Abstracted, Vibrant, Discreet, and Interface Gems.
* Jaguarwoman
Whimsical Children's Themes, Seasonal Delights, Manly Metallica, Historic and Ethnic Extravaganzas, and Bejewelled Indulgences.
* 7Rings
Kelly's Art Nouveau inspired sets (lots of cultural influences done in a nouveau interpretation). These are breathtaking.
* FullMoon Graphics
Peace, MizKitty! These graphics range from funky to cartoony to artsy. Lots of groovy hippie stuff. Totally unique and wonderfully done.
* Dana's Designs
Really excellent examples of what I think of as kaleidofractal designs. Her free gold freestanding elements are quite useful as well.
* Nerissa's Cosmos
She has 28 sets divided into Nature Essence, Eclectic Other, Melting the Pot (Cultural), Pop Culture (Cartoon), and Star Night (Aliens/New Age).
* Graphica Medii Aevi
Medieval Theme Graphic Sets... a subsite of Enchanted Backgrounds. Coordinated sets made from original renderings from a variety of medieval art scans. The Teri's Treasures site, by the same artist, has a selection of jewelled sets.
* EcleticCollection by Robyn A
Nice cultural and sci-fi sets. There is another site with Mystic and Healing themed web sets. Love the use of color
* Kelly's Web Graphics
Her Secret Garden set is particularly enchanting.

bar

Font Sources

* fontastic!

bar

Tools

* Bobby
Bobby is a web-based public service offered by CAST that analyzes web pages for their accessibility to people with disabilities as well as their compatibility with various browsers.
* Graphic Optimizer Tools
* GifWizard
An online tool. GIF Wizard SiteScan Website Analysis - Test for bloated graphics and broken links on your website
* HTML PowerTools for Windows
Shareware package including HTML Image Scanner, HTML to Text Converter, HTML Date Stamper, HTML Meta Manager, HTML PowerSearch, HTML PowerAnalyzer, HTML Rulebase Editor and HTML PowerSpell

bar

This Notepad Ring site is owned by Joan Cole.
Click for the [ Next Page | Skip It | Next 5 ]
Want to join the ring? Click here for info.


Notepad Web Ring Image Map

Notepad Web Ring Home Next Notepad Webring Page

bar

E-Mail - Home - Personal

Copyright © 1994-1999 Joan Schraith Cole.
Updated January 22, 1999
Site Map

Graphic Environment from Ann-S-Thesia CD