.....

A special thank you to Dr. Theresa Flaherty for allowing us to reproduce this page.  A significant compilation effort has gone into these design tips.  If you feel you can contribute, please contact me at mkoslosk@odu.edu.

Use the title bar effectively.  For instance, a title called "homepage" or "resume" is sufficient.  Make your title as long and descriptive as possible.  Remember, that the title is what people will see in their bookmark list when they bookmark your site.  Additionally, many search engines use the title page to find and index your site. Finally, many users decide whether or not to click on your site after a search based on how enticing your title is.  To edit your title, use the "Format/Page Colors and Properties/General" menus in Composer.

Don't forget to spell check your document before it is posted.  To much speling & grammer errers effect the percieved credability of you're cite.

Because your visitors will vary by screen size and resolution settings, it is important to keep your material in its intended proportions.  When using tables to align text and images on your page, use the "% of screen" attribute in the table properties box.  This will ensure that your table will be in the correct proportions as your visitor views your page, regardless of screen size or resolution.  However, do be aware of one caveat.  When you set your table to "% of screen," text and images will wrap from one line to the next differently for different screen sizes and resolutions settings.  This is important to note in two specific instances.  First, if your table is being used to align images and your images are spread from "end to end" in a table that is set at 100%, be aware that your image at the far right may "wrap" to the next line with small screens and lower resolution settings, resulting in an unintended appearance.  Second, and for the same reason, if you anticipate that your viewers will want to print your page, such as a printable form or class notes, you may want to set the pixels at a "safe" 640 pixels and forego the % of screen.

Do not use too many different font styles on one page. I would suggest using no more than three different fonts - unless they are VERY complementary. If you do use more than one font, ensure that they are complementary.  Arial is very complementary with Arial Black, and Arial Baltic.

Don't abbrev. words.  Remember that the internet is global in nature and not everyone understands English abbreviations.

Make sure that your active and followed link colors complement the other colors used on your page.  You can edit your link colors under the "Format/Page Colors and Properties/Colors and Background" menus in Composer.

Do not underline anything unless it is a link to somewhere else. It is deceiving because users are trained to think it's a link.  Also, do not underline entire sentences like I have just done. Only link and underline the key words since many users just browse content to get where they want to go.

Do not type your whole page in bold font.  Use bold font for emphasis only and only use capitalization when you are trying to MAKE A POINT.

Try to avoid typing your whole page in all one color, except for black. When you use one color for headings, subheadings, links, and everything else on your page it can become tiresome on the eye.  Change your color where needed for emphasis.

Ensure that your links change to a different color after people visit them (i.e., the followed/visited link color).  It helps people to know where they have been and where they still need to go.  It's a very "user friendly" thing to do to improve navigation.

Plan your navigational system by putting EVERY page on your site on an index card.  Map out a matrix of where everything should be linked.  Then put the appropriate links and cross-links on all of your pages.  To only place "return to homepage" somewhere on every page is not necessarily the most efficient navigation system.  Additionally, not every page needs to be linked to every other page on your site.  Consider how you can use the 7 +/- 2 rule in your navigational structure.

Make your home page enticing!!!!  If using the "front door" technique, put something on the homepage to inform visitors so that they are excited to see what is inside.  A simple, "Click here to Enter" doesn't cut it.

Remember that home pages need to download very fast.  Do not feel compelled to put a million things on that first page.  Do not overload your page with too many pictures and images.  It will adversely affect your download time.

Put an e-mail link on EVERY page because it helps to make your site "interactive."  Not everyone can click on an e-mail link from their computers (i.e., those on ancient systems and those working in places such as ODU computer labs).  Additionally, not everyone knows that they can find an address to a page by positioning their mouse over the link and then looking at the bottom of the page to find the e-mail address.  Therefore, you may wish to also include an e-mail link that actually has your address typed out such as this:  mkoslosk@odu.edu.  This way, people can retype it in if needed.

The command to create an e-mail link is as follows:  mailto:mkoslosk@odu.edu.  If you want to control what is written in the subject line, the command would be  mailto:mkoslosk@odu.edu?subject=Marketing.  Where you see the word "Marketing" in that previous command, type in the word(s) you want to see in your subject line.

Consider including a "date last updated" on all pages so visitors can assess how old your content is.

Ensure that you have no "lost pages" because everyone may not enter your site through your home page.

To improve navigation, use internal links for a long page or a page with many different sections (i.e., using the target/source commands).

Use the "blink" function very sparingly.

When using a horizontal line to separate sections, use the horizontal line function (i.e., H. Line) instead of typing in an actual line.  Due to different screen sizes and resolutions, typing in a horizontal line will not always cover the entire screen.  Use the "% of screen" command to determine bar width, and the bar will adjust to the visitor's screen in the intended proportions.

The correct abbreviation for electronic mail is e-mail, not email.  However, be careful to judge Internet "vocabulary correctness" too quickly.  There are a lot of "experts" and professionals that still disagree on some of the details.  For example, should "Internet" be capitalized? or can you find the definition of "e-commerce?"  *hehehe*  You will find many answers from what seems to be credible sources.  Keep in mind the vocabulary is still evolving, and industry will eventually resolve such issues.

When scanning in pictures as .gif or .jpg files, reduce the size of the picture before you save it,  to make it about the same size as it will appear on the actual web page.  Then, insert it in Composer and resize as needed.  The goal here is to get your "file size" as small as possible before you adjust the actual image size on screen.

When resizing an image in Composer, do NOT do it by dragging the image frame on the screen.  Right-click on the image and alter its dimensions through the image properties box.

Keep your image files small.  You'll learn how to do this in lesson 5.

I (Dr. T.) acknowledge that web sites are never truly done due to their dynamic nature.  However, you should never post a site that is incomplete.

To ensure that text is centered properly, use your "center alignment function" instead of the tab key or space bar.

You can manipulate certain alignments by using multiple (and invisible) different sized tables.  Make tables invisible by making the border equal to zero.  To make a standard sized table that will look good when printed out, set the table width to one pixel, then add up your column widths to ensure that they do not exceed 640 pixels.

If desired, remove borders around .gif and .jpg images by setting the border size to zero under "image properties."  These occur by default when you convert an image to a link.

When designing web pages, try and move beyond the "advertisement" and "promotion" stages (lesson 4), instead being creative and making it more "interactive" and "information rich."  For instance, on resume pages, you can create links to other pages that highlight work that you have done in classes.  You can EXPAND upon the traditional (and boring) resume format by adding more detailed descriptions of your work.  If you are listing courses that you have taken, put a link to the online syllabi (if available) to show the type of content that you learned.

Capitalize on the internet's ability to be interactive by encouraging visitors to talk to you.  For instance...

Contact Mickey Kosloski at mkoslosk@odu.edu
Contact Dave Netherton at dnethert@odu.edu