site stats
Select a School...
Select a School

Do"s and Don"t of Web Design and HTML Basics

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

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 too much 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 if you don’t have it already. 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 Oneto begin" instead of Click hereto 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:

Introduction
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 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

--------------------------------------------------------------------------------------------

HTML Basics

HTML is just a series of tags that are integrated into a text document. They"re a lot like stage directions - silently telling the browser what to do, and what props to use.

HTML tags are usually English words or abbreviations (such as "p" for paragraph or "i" for itallics), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <--p--> and the end tag for paragraph is <--/p--> (reminder: ignore the dashes).

 
Some tags dictate how the page will be formatted like the paragraph tag, and others dictate how the words appear (b makes text bold). Still others provide information - such as the title - that doesn"t appear on the page itself.

The first thing to remember about tags is that they travel in pairs. Every time you use a tag, you must also close it off with another tag For example, bold <--b-->bold<--/b--> (ignore the dashes--they are used so that the code shows up on this web page).

Note the slash / before the "b"; that"s what distinguishes a closing tag from an opening tag.

The basic HTML page also begins with the tag and ends with the closing tag . In between, the file has two sections - the header and the body. So, the code would look like this:

<--header--><--/header--> (again ignore the dashes)
Some code goes here along with key word tags so users on the Internet can find your pages.

The header - enclosed by the and tags - contains information about a page that won"t appear on the page itself, such as the title. The body - enclosed by and - is where the action is. Every thing that appears on the page is contained within these tags.

The marks the beginning of a new paragraph. A tag is one of the few tags that doesn"t need to be closed off by a corresponding, because the paragraph"s end is implied with the next formatting tag. A
is a line break tag, which forces the text to the next line while keeping the formatting for the next section of text. It allows you to make a line break where ever you choose instead of letting the browser break up the long lines of text.

Seems simple, huh? Well, it is.

Especially since you can see what HTML people have used to build any Web page you find by simply selecting View > Source. Oh, and don"t go thinking you need your own homepage to practice, either. You can save HTML documents on your local drive using Notepad or Wordpad and then open them up using the Open option under the File menu on your browser or click the Preview tab when using FrontPage.

(source: Web Monkey @ http://hotwired.lycos.com/webmonkey/teachingtool/html.html)

More HTML help from W3Schools.

Note: Email the TRT with comments about this page.