All my web pages have the following in common:
- A master style sheet is used for all pages. The title on each page begins with my name and description of what each page is about (e.g Keith Gormezano: About the Design of This Site). Meta names (content and description, content and keywords) are used on the home page and selected pages to facilitate indexing by search engines.
- The first line of the header begins with my name and a the same description used in the title. Font size of this first line is +2 greater than that of the base font (3, normal, 12 point). The next line is only increased +1. Tables with a specified width and alignment are used on most pages.
- The amount of time spent waiting for a page to load is minimalized. With the exception of the individual picture pages (see photos.htm) and the photos.htm, all files are designed to load using a 14.4 modem in under 30 seconds.
- I use <H4>, <font size=4>, or <font size=+1> (the base font is 3) in a serif type face (a type face with little feet and extensions) such as Times New Roman or Times (the words "About the Design of This Site" in the title above are an example of this typeface :
- For visually impaired and older persons;
- Be easier on the eyes for people who sit at a terminal much of the day; and
- Allow more than one person to read it at a terminal.
- Use tables (with width set for 75-80%, alignment=center, and cellpadding set for 25) rather than frames to allow for users of America Off Line, Lynx (a free text only browser), and visually impaired users of OCR software to easily "read" the text.
- All images (see photos.htm) are described in complete detail, not just a brief description for the same reason. Graphics are also minimalized by limiting them to less than 3 per page and under 50K per image by using small gif or compressed jpeg files as a a background.
- Pages are colored differently depending on where you are located in the directory.
- First level pages (home and all pages listed on the main or home page) use a marbled or rough texture or some unique format such as the spiral bound notebook paper in the poetry list.
- Second level pages use a light colored background.
If I change the color of the text, I try to make it a higher contrast than black text on white background to facilitate reading.
- Third level and beyond pages use a combination background. This makes it easier for the reader to gauge where they are (located) in the (table of contents, so to speak) of the web page.
- I deliberately insert extra paragraphs (e.g <P>)
- Anytime a paragraph is more than 5 lines;
- To make the text more readible; and
- Create more white space for better design.
- Include a border around images of at least a 1/4" or 36 pixels (144 pixels to an inch, 72 to a half inch, 36 to a quarter inch).
- Try not to go more than 3 levels of navigation (movement up or down) within the web site.
- Include a text only navigation area at the bottom of each page so users can jump to any of the sub main documents listed on the home page.
For those of you who want further information about web page design, I recommend the following:
- Great Place to Learn About Basic Web Design.
We share a similar philosophy.
- Dave Siegel Home Page
- Creating Killer Web Sites, book, David Siegel
- Web Site Design, Linda Wyman
- Creating Your Own Web Page, Shafran
- Interactive Web Sites, Sather
- Web Design Templates, Schmeiser
- HTML and CGI Unleashed, Decembre
- HTML 3.0 How To
- Creating Cool Web Pages With HTML
- Hot Dog Professional Program, Release 4.5, Sausage Software(6 MB, takes several hours to load, 30 day trial period to evaluate).Still has a few bugs in it. Front Page Express and PageMill are also two good software programs.
Other Sites I have worked on:
Society for Design Administration – Seattle (dynamic database design and also served as Webmaster or should I say Webmistress as 99% of the members were female, smile)
Stuart Silk Architects (meta tags only between title and the beginning body of the text)
|