• Do's and Don'ts of Web Design and HTML Basics for All Viewers

    Computer Monitor SurfingDue to the fact that there are billions of pages on the Web, people are more likely to move on quickly when finding poorly designed Web pages. No one has time to waste on bad pages, even if your content is good. This doesn’t mean you have to be a professional writer or web designer, but be sure your information is presented in a clear and logical order that is easy for the user to navigate. Hopefully, this page is a shining example, but possibly not. We all make mistakes.

    The following tips will help you achieve this lofty goal with fewer errors:

    I. Designing For The Masses Or Designing For A Limited Audience


    A. Audience vs. Design ? The best position, in terms of choosing between interesting design and a wide audience, is probably a balance between the two. Always keep attractive, logical organization in mind. Also remember to build your pages to allow all users access, even those with disabilities that must use screen readers and other equipment to access your site.


    B. Design Do's and Don'ts-the basics:

    • Do keep your layout simple.
    • Always provide a link back to your home page.
    • Do use a consistent layout across all your pages.
    • Do be careful with backgrounds and colored text so that you do not make your pages flashy, but unreadable.
    • Don't concentrate on how it looks. Focus on the message and how you organize the information, then work on how it looks.
    • Don"t use background images. It will make it slow to load and annoy your visitors.
    • Don't use blinking or scrolling text.
    II. Writing for the Web

    A. Write Clearly and Concisely. (Get a copy of Strunk and White’s The Elements of Style. It’s a tiny book packed with clear and concise explanations of style rules.)


    B. Organize Your Pages for Quick Scanning. Readers start at the top and rarely read all the way to the bottom if the page is long. Chunk the information using the following tips


    1. Use headings to summarize topics.
    2. Use lists.
    3. Use link menus or bookmarks to jump down the page quickly to a specific topic.
    4. Don’t bury important information. Make your point close to the top and then support it.


    C. Spell Check and Proofread Your Pages

    1. It"s a given, but people frequently make mistakes.
    2. Buddy up with someone else creating their classroom Web pages and check each others" pages.

    III. Focus: Make Each Page Stand on Its Own

    A. Use descriptive titles.


    B. Be Careful with Emphasis- Paragraphs with a lot of boldface, italics or ALL CAPS are difficult to read. Use these features sparingly to emphasize main points. Stick with using small words in these formats or headings and subheadings.


    IV. Don"t Use Browser Specific Terminology or Features


    A. "Click Here"- Make the word or name of the page you’re linking to the hotlink (ex: say "Select Section One to begin" instead of Click here to go to Section One. What if the user is listening with a screen reader or their browser does not have a mouse?


    B. Do not refer to specific browser options such as how to save, print, move from page to page, or bookmark/add to favorites. Simply suggest that the user print or save or mark the page. The user will get confused if you tell them a different way than what works for their computer/browser.


    C. Design so that your pages can be read and navigated quickly and easily, regardless of browser type or version. Don"t leave anybody out.


    Back to Top


    V. Design and Page Layout


    A. The Basics:


    1. Keep the design simple
    2. Reduce the number of elements (images, headings, links)
    3. Make sure the readers’ eyes are drawn to the most important parts of the page first.


    B. Use Headings as Headings- Don’t use heading size fonts for important points. Use color or graphics or organizational elements to make your point.


    C. Group Related Information Visually (see notes earlier on bullets and chunking info.)


    D. Use a consistent layout- A single look and feel for each page in your Web is comforting to your readers. After the first or second page, they will know what the elements of each page are and where to find them simplifying navigation.


    VI. Links


    A. Organize your links into menus so your readings can scan their options and access info quickly

    B. Use Link Menus with short descriptive text, not the filename

    C. Use Links in Text of a phrase or sentence

    D. Avoid "Here" Syndrome because here says nothing about what the link is to- "click here" "this link" (Ex: Research about the migration habits of the sea turtle, led to several amazing discoveries.)

    VII. Images

    A. Don’t Overuse Images


    1. Web pages should load within 30 seconds as a rule, otherwise you risk losing visitors who won’t wait or get annoyed with waiting. The rule of thumb for file size including images on a page is 30K so add it all up.

    2. Some Web editors will tell you how long it takes to load with an assumption of a 14.4K or 28.8 K modem. 

    B. Use Alternatives to Images

    C. Keep Images Small (both file size and size on the page)

    1. For larger images, use thumbnails on the main page and allow the user to click on the image for the full size. Then they are making the choice to wait.

    2. Try creating the image in jpg and gif formats to see which file size is smaller, while not losing quality. Remember that photos must be .jpgs to maintain a good photo quality, but graphics can be either. Gifs use fewer colors and will likely be smaller.

    3. Crop whenever possible; get rid of any unnecessary borders and space around the edges of the image. Always use an image editing software program to make these changes prior to inserting the image into your Web page. You’ll get better results with quality and file size.


    D. Watch Out for Display Assumptions

    1. Don’t assume that everyone has screen or browser dimensions the same as yours.

    2. Don’t assume that everyone has full-color displays.


    E. Be Careful with Backgrounds and Link Colors

    1. Make sure you have enough contrast between the background and foreground (text) colors. Low contrast can be hard to read.

    2. Avoid changing link colors at all unless it looks hideous.

    3. Sometimes increasing the font size of all the text in your page can make it more readable on a background.

    4. If you’re using background patterns, make sure the pattern does not interfere with the text.

    VIII. Other Good Habits and Hints

    A. Link Back to Home and the page the user just came from if the page is a section or part of whole (see next topic).


    B. Don"t Split Topics Across Pages- If you think that one topic is becoming too large for one page, instead of splitting the page, break the content up into sub topics. That way, if someone finds your site in the middle of the topic, the content will make sense. Copy the links to each subtopic on each page. The following example would appear on every page:

    Section One
    Section Two
    Section Three

    C. Don’t Create Too Few or Too Many Pages- Too many annoys the reader when they have to sit and wait to download each page. Too few makes your pages very long and you might lose the reader.


    D. Sign Your Pages- Be sure there is identification information on each page, date of last update, contact information, and of course, the link back to home.


    E. Provide Links to Non-Hypertext Versions of Hypertext Pages (printable formats)


    D. Finally, test your page in multiple browsers and on different computers with different monitor sizes, including a laptop. Every user’s experience will be different and you want to be sure they can view and access everything on your Web pages. It’s a good idea to buddy up with someone and check each other’s work for content, spelling, grammar, working links and all graphics and functions visible and operating correctly.


    The Columbia Online MLA Style Guide is an excellent example of how to break up lots of material without losing the reader. The format of the Web site is attractive, well organized and packed with information.

    Source Reference: Lemay, Laura. Teach Yourself Web Publishing with HTML 4 in a Week, Fourth Edition. Sams.net Publishing. 1997.

    Back to Top

    Accessibility Guidelines: Learn from the experts


    Learn HTML from W3Schools.


    Note: Email the TRT with comments or questions about this page.