Five Big Web Tips

Working with the web? Here are five things to keep in mind when creating and maintaining web pages.

1. Run Spell Check

Nothing makes a web site lose credibility faster than misspelled words and other typos. Thankfully, it's an easy thing to remedy. Dreamweaver has a built-in spell checker — from the Text menu, choose Check Spelling and follow the prompts. If your content is coming from Word, you can run the spelling check (and perhaps a grammar check, too) from there before moving the content to the web.

2. File Names

When saving a document, whether it's a web page, PDF, graphic or image, or anything else going on the web, it's name must follow certain rules. Those rules include:

• Home pages are named index.html
• When naming anything and everything else:
  • DO use letters, numbers, hyphens, underscores
  • DO end with the correct file extension (e.g., .html, .doc, .xls, .jpg, .gif, .pdf)
  • DON'T use spaces
  • DON'T use "special characters" like ! @ & % $ # ( ) + ^ ~ ` / ? \ [ ] { }

The one rule most broken is the "DON'T use spaces" rule. It's important to not use spaces in file names as it will cause problems, perhaps not immediately, but the problems will surface.

Another thing to keep in mind is the case of the letters in a file name. MyPage.html and mypage.html are two different files. If you are sending a postcard or e-mail that includes a URL, be sure that you aren't including one when the file is named the other.

3. Image Sizes

When adding images to web pages, check the image properties in Dreamweaver. (Click on the image once and the properties of that image appear in the Properties panel, part of which is shown here.)

Make sure that your image file size isn't larger than 75K.

In the image above, the size is shown in the area shaded green. 4K is certainly within the size limit. You should never see an image listed with an M (1M, 2M, 7M, 20M) listed there. 1M equals 1000K, definitely bigger than appropriate.

In the pink-shaded area, you can also see the width and height of the image you are adding to a page. For most pages, the height isn't that important, but the width can be problematic. When using the St. Olaf templates, it's important to keep the image width within the bounds of the various columns. Depending on which template, that width changes, but you can find out the maximum size at http://www.stolaf.edu/aboutthissite/tools/templates.html

If your images are too big (either too wide or file size is too big), you should use an image-editing program, such as Photoshop Elements, iPhoto, GIMP, Microsoft Photo Editor, or any one of the many image-editing programs available, to resize the image to fit appropriately on your web page.

4. Colors

The web can display the whole spectrum of colors, but they shouldn't all be used on one page.

There is a lot of truth to the statement Less is more. The more colors you have on a page, the harder it is for the viewer to determine what they need to look at or look at first. Most of your colors probably come from images and photos, so there isn't a need for a lot of colored text.

Colored text is appropriate to highlight a heading, a few words, or something of particular importance. Keep contrast in mind. The more contrast, the better. Keep dark colors on light backgrounds and vice versa. Don't use colors that are too similar as they can appear to be the same (e.g., dark blue and dark green).

Use the color red sparingly. True (or basic) red grabs the eye, but too much of it gives the viewer a headache because true red generally pulsates on a computer monitor.

5. Fonts

It's best to not change the fonts in which your web pages are displayed. The college web site templates specify particular fonts to be used for pages and it gives the site the same look and feel from page to page without forcing the user to adapt to different fonts.

The web, as a whole, has a fairly limited number of common fonts available for pages. The college web site is standardized on a family of fonts (Verdana, Arial, Helvetica, sans-serif) that allows the pages to be consistently when viewed by a variety of browsers and computer platforms. Likewise, when a page is printed, the font family is changed (Times New Roman, Times, serif) so that the text is easier to read on paper. Different fonts are better for on-screen vs. printed and the college web site templates adjust between the different media.

If you have any questions about any of the topics above or need assistance in choosing colors, resizing images, etc., please contact webmaster@stolaf.edu.