HTML Design Tips
There are a few things that you should put on your main (home) page regardless:
- Navigation links (and be sure to provide navigation links on the second and third level pages as well! Think of them as a bread crumb trail for visitors)
- Contact information (address, phone, email in an obvious location)
Take a look at my index.html file to see all of this in action.
Notice that I made the update information at the bottom a smaller font size? This is common practice when you are adding "small print" text -- it isn't the most important information on the web page, so you make it smaller. People's eyes are attracted to the larger text first.
Notice that the update information is sitting to the right of the graphic? It would look better flush to the left. To do that, you need to learn an attribute for the BR (line break) tag:
Now here's a list of things to avoid:
- Huge graphics! Your web page should load quickly--if it takes too long, nobody will ever visit it. The content should be what matters--don't let a big graphic take space away from the important information on your web page.
- Flashy tricks like blinking or scrolling text or too many animated GIFs. A little bit goes a long way with this sort of stuff and after the first few seconds this sort of stuff just annoys people. Basic rule: keep it simple!
- Weird background or text colors. You want people to be able to actually read the contents of your page. If the background is too loud or the text too light, you will not get many repeat visitors.
- Too many font faces. While it may be fun to changes font faces a lot, it is very distracting when trying to read a page. So keep the font changes to about two per page--and it is also good, if you're going to use a font, to keep the them going throughout your site's pages.
- Long pages. If people have to scroll very far to read your page studies have shown that they often give up and click off--go to another website. For instance: if, say, you have a library web page and the first page has all sorts of textual information about the history of the library, library services, and library circulation policies all on one long, wordy page, it is too long. it would make more sense to have four pages:This will keep people from being inundated with text right off the bat.
- The main page with hypertext links to the other pages
- A page about the history of the library
- A page about library services
- A page about circulation policies
- View the source of web pages you like. Imitation is, after all, the sincerest form of flattery. And viewing HTML source code is the best way I know of to pick up new ideas and learn new HTML tricks. We've done it several times in this tutorial, but as a refresher: With your web browser displaying the page you like, open the View menu, then select Source. Voila! You will see the source code.
- A note on email addresses: You can add a mailto link on your web page so people can click on your email address and open a mail program (see: http://webmonkey.com/webmonkey/teachingtool/mailto.html), but this is one of the easiest ways spammers (junk emailers) have of "harvesting" (or gathering) email addrresses. Better to just put you email address on the web page and let people copy and paste it into the email program of their choice. You can read more about spam and how to protect yourself here: http://www.netmechanic.com/news/vol4/design_no21.htm.
Next: HTML Validators