Edtech Home About Classrooms Classes Lessons and FAQs
Educational Technologies Center for Life Sciences

Web Page Design Tips

Browser Watch

Check your document's appearance with different web browsers. Remember, it's the local browser that determines type face, size, leading (line spacing) and indents. Be aware that browsers might differ in how they interpret some HTML codes. If you check your documents on the latest versions of Netscape, Internet Explorer and Mozilla on both Mac and Windows, you'll have covered most of the bases, though AOL and WebTV present some interesting twists.

Go easy on the images

There are still plenty of users out there with slow connections who may deliberately turn off graphics to speed their browsing, or the visually impaired my be using text to speech recognition. So if you're relying heavily on those way-cool image maps, there are a number of people who won't be able to understand your page at all and others who will leave within seconds if they find it slow going.

Avoid slow loading graphics. In fact, keep graphics to a minimum unless absolutely necessary to your subject matter. See General Information and Hints on Using Graphics

Control the page display to avoid horizontal scroll bars

Window width will vary with the reader's screen resolution. Figure for an 800 wide by 600 high pixel resolution for the average browser, and design your tables and graphics so to avoid horizontal scrolling.

For mainly text pages, put the content in a fixed with table of 640 pixels or less. This will narrow the column and make it easier to read.


Concentrate on Ease of Navigation

While designing your site, always try to answer three questions that your readers will have - " Where am I? Where have I been? Where can I go?"

Avoid dead-end pages. ALWAYS provide a link back to your home page, as you'll never be able to control just how the reader enters your web space. Search engines will point the reader to your site by keywording the pages, and as a result, a searcher might very well end up somewhere on a page far removed from your home page or main menu. It's frustrating to find something useful and have no idea where it's from. Also indicate where in the world you are located. Even University of Illinois Champaign-Urbana may not mean anything to a browser in Tasmania.

Every site should have some indication somewhere about who created it and is responsible for maintaining it.

Avoid "click here" links. Construct the anchor text so that it provides some meaningful information about what the user might expect it to do. Is it an image? A BIG image? If that's the case tell them the file size. A site? What kind? Is it an external site? Is it going to lead to a download or will it require a plug-in? Let people know so they can decide if they want to go there or do that.

Think hard about the navigation system most suited to your content. Remember that textual hierarchies, relative size, color, contrast, and grouping provide visual ques to readers to help find their way around. Keep any system you design consist ant from page to page.

Make a site map

A text based site map is well worth the effort if you have a complex site. There should be a link to it on every page, so viewers can go there if they get lost and also so that search engines have a reliable way of crawling all your pages.

Don't go overboard with special effects and plugins

Speaking of plug-ins - be certain before you add that movie, Shockwave animation or sound that the viewer you want to reach will appreciate it too. On the one hand, it's your site to do with as you please, but on the other, people may not care to have to stop what they're doing to go locate and install Quicktime or update their Javascript version. Unless you really need the content or don't care - it's probably not be worth it.

The most important information should be first

Describe what your most important point is and try to get that on the first screen the viewer sees. People surf fast, and it you don't pique their interest, they are unlikely to scroll down very far, if at all. Another reason is that search engines rank content appearing toward the top of the file more heavily than content buried way down toward the end.

A word on PDFs

PDF (Portable Document Format) is rampant on the web for delivering downloadable, uneditable, structured documents. It's swell, but don't make the mistake of thinking it'll get you out of writing HTML code by putting everything in PDF format. The important points you want to get across should be immediately visible on your web pages. Don't expect people to take the time to download your program description, resume, etc. if it's not clearly visible. They probably won't.

Search Engine Strategies

Your page title is the single most important sentence in the document, so give it some thought. Give every page a meaningful title that can be understood out of context. When pages are bookmarked, it's the title that's saved in the Bookmarks file. Also, some search engines search only the page titles, and most of them tend to weight the title more heavily when rendering search results.

© 2004 - E. Barbara Meyer - EdTech Center - Life Sciences - University of Illinois - Urbana, IL USA