Web-Friend 
 
html Webmaster Tips..
home > help > articles > HTML hints 

Webmaster HTML Tips:

Beginner:
Fonts, lay-out(scroll, tables and graphics), colors, other users.		 Intermediate:
Important things first , Spelling, Navigation, load speed, frames		 Advanced:
SEO , plug-ins, meta-tags, graphic speed.

Some of these tips, tricks and common sense things many webmasters already know.  Some of these tutorial items may be things you've forgotten over the years, or some may be html tips that you haven't considered before.  This page assumes that the reader has a very basic understanding of "How" to create a web page, either with a text editor, or with a WYSIWYG (What you see is what you get) program like Front Page or Dreamweaver.
Note: This page is still being edited, please check back in a couple days for the completed project.

When you are creating a web site, you want folks to see it, and you want them to come back.  You want your site to look clean, and easy to read.  A good webmaster who has more than one page also wants to have the site easy to navigate.  You want folks to be able to find your pages once you've created them.  If you are going to take the time to create a web page, take the time to make it nice, readable, and a place folks want to visit.

Beginners.

First, let's cover fonts.  The text you use for your web page. 

Types of fonts:  For the most part there are 2 basic types of fonts.  Serif, and Sans Serif.  The difference is the way the letters are printed out.  Serif is a font that has little curly items at the end or beginning of each letter.  This is supposed to naturally lead the readers eye toward the next letter, and word.  Examples of Serif fonts would be: Times, Georgia, Times New Roman, serif.  Sans (A french word meaning "without") is just the opposite.  Sans Serif fonts are usually used for Headlines.  These letters are block letters that don't have any curly things on the ends of the letters.  Examples of sans serif fonts would be: Veranda, Arial, Helvetica, sans-serif

Samples:  The letters "L, l T, t, R, r, S, s, F, f, G, g, J, j, Q, q, and Y, y" are good examples.

Serif:
Times New Roman: "L, l T, t, R, r, S, s, F, f, G, g, J, j, Q, q, and Y, y" are good examples.

Sans Serif:
Arial: "L, l T, t, R, r, S, s, F, f, G, g, J, j, Q, q, and Y, y" are good examples.

Notice how the sans serif fonts end abruptly, where the serif font letters have fancy little curly things on the edges of the letters.

You will find other type of font styles mentioned if you research the subject, things like mono-spaced, decorative, or 3d fonts may be mentioned, but for the most part a font is either 'serif' or 'sans serif'

Tip: Remember to place an alternative or two in your font tag to cover users of other types of computers who may not have the font you mentioned. 
Example: <font face="Arial, Helvetica, sans-serif">

Do: Stick to a few simple basic fonts.  Not every computer out there has all the same fonts you do, so stick with the basics. 
Do: If you have a special decorative font you want folks to see the way you intended it, consider putting it in a graphic rather than text content. 
Do: Offer a choice when you use fonts.  Remember, folks who use the Apples or Macs, may not have Arial, but they do have a comparable font called Helvetica.
Don't: mix a large number of fonts on the same page.  It's ok to use 2 or sometimes even 3 different fonts for various headings, or special notations, but too much mixing makes the page difficult to read.

Next, let's cover layout. 

For the most part, web pages scroll down.  There are exceptions to this, perhaps items such as a liner timeline.  But for the most part, design your pages so that they will look good in several different sizes.  By this I mean look at your page in several screen "resolutions".  The most common resolutions are 800 X 600, and 1024 X 768, however there are still a large number of people who have older 14" monitors that may be using the 640 X 400, and the newer 21" and higher monitors may be running monitors up to 1600 X 1200.  What do all these numbers mean?  Simply the number of 'dots' used to make the picture on a monitor.  Example: 800X600 means there are 800 dots of light across on the monitor, and 600 dots running up and down the monitor.  Each dot is a different color, and all together they make up the picture on the screen. 

Do: check your page in other browsers and resolutions
Do: keep your tables under 100% of the width of the page
Don't: Use graphics over 600 x 400 unless there is a reason to do so (such as wallpaper)
Don't: Run the text of your web page to the very edge of the screen, leave a little space (often called a gutter).  While there may be a rare occasion to do this (such as a copyright or page update statement), for the most part it makes the page harder to read.

Next, let's cover colors. 

A simple matter really, but all too often I see a page that forgets this.  If you use a dark colored background, then your font should be a lighter color.  If you use a light colored background, then the color of your font should be darker.  Use colors that compliment each other.  While Red and Green may be great colors for Christmas, using that mix on a web page can make it difficult to read (depending on the shades).  Stick to 2 or 3 basic colors for a page, don't throw all 256 colors on one page just because you can.

Samples:

Making a page with these kinds of colors can be very hard on the eyes.  If you take the time to write something, then you want someone else to take the time to read it.  If it is hard to read, the surfer will move on and not read what you wrote.

On the other hand, if you choose colors that blend well together, a person who happens to find your site is more likely to continue reading

And you don't really want to stick a whole bunch of colors into the body of your text either.  Forcing a persons eyes to adjust every few seconds just makes it hard for them to stay interested.

Do: pay attention to how the color of your text shows up against your background color.
Do: try to use colors that work well together and have a good contrast.
Don't: try to throw too many colors into one web page.

Next, Remember your audience. 

Remember that not everyone has the same computer you do.  Try to stick to the basics, leave space around your text, and test your page in other environments.  At the very least, keep your home page down to the basics, then if you want to have things like java, dhtml, shockwave flash, IE 6 enhancements, etc - then you can post a link to those pages.  Not everyone has all the newest plug-ins, the latest browsers, or a high-speed Internet connection.  Your site may be geared toward a demographics section that tends to have the latest technology, but you don't want to lose those other either.  If you figure that 75% of the Internet is up to speed so to speak, that's fine, but still - 25% of several "BILLION" people is a LOT of people to lose if you don't have something fast and basic for them to view.

If you are marketing a site about the latest hip-hop music, then bright colors, loud music, and more "techno" goodies may go over very well.  However, If you trying to create a site about World War II, then you may want to stick to more standard colors, and sound effects more geared toward that audience.  If you are creating a site about Interior decorating, then pale pastel colors work great, but background music from Metallica may not go over too well.  Consider who you are trying to talk to when you create a page or site, and gear your design around that group of people.

Intermediate.

First, The important stuff first.

For the most part people are lazy.  When you design a web page, you want to grab their attention as soon as you can.  They will not scroll down your page if the first part doesn't interest them.  Use that very first 600 by 400 (or at most the first 800 by 600) pixels of screen real estate to get your point across quickly.  Although you don't want to go over-board with the Bold, Italics, and Heading types of formats for the text on your page, you do want to get their attention.  Tell them what the page is about right away.  Some webmasters have even adopted a practice of making the web page fit entirely on that first 800 by 600 pixels, and then use links rather than scrolling to provide the additional information they want to get across.  In some ways that's good, but it can also come back to hurt a webmaster in the search engines (more on that in the Advanced section).

Do: make it obvious what the page is about right away
Don't: waste the first part of your page with a bunch of filler that leads into the topic of your page.

Next, Spelling.

I admit, this is my biggest weakness.  All too often in a rush to get a page posted to the web, webmasters forget to check their spelling.  With the advanced computer programs out there (or even the very basic ones) it's not that hard to check your spelling.  When folks who have had some schooling come to your site, one thing that will jump out at them in a very bad way is ms-spelled words.  It will downright irritate some folks.  It's a simple matter, but much more important than you may think.  Remember this as well, the way you spell it on your page is the way the search engines will list it. 

Next, Navigation.

Especially important if you have a site that has more than 4 or 5 pages.  You want your site to be easy to get around, and once someone comes to your site, you want them to stick around long enough to see what you offer.  Make your links obvious, and easy to find.  Have a logical flow to your site, and make it as easy as possible to get from point A to point G quickly.  Some folks may want to skip over points C,D,E, and F - let them.  If you have dozens or even hundreds of pages, then you probably need a sitemap.  You don't want to fill every page you have with a 50 or 60 links to the other pages of your site.  My personal tip for navigation is to have links at both the top and the bottom of the page that allow users who aren't interested in that topic to quickly jump to another, and the users who have read through what you had to say can move on without having to go back up to the top.

Tip: If you post links to other sites as well as links to other pages on YOUR site, try to differentiate between the two types of links.  It's very easy to lose a surfer if they click on a link to a site outside your domain because it's a logical page to visit, but very often they may not return.  One possible option it to make external links open a new page, although this is something you do NOT want to overdue.

Do: make your links a different color than the rest of your text to that the navigation stands out from your content.
Do: make it easy to get back to your home page and/or sitemap.
Don't: forget to have a link back "somewhere" on EVERY page (yep, I've done that a time or two)

Next, Load Speed.

I won't go into a great deal of detail here, but remember that not everyone has cable, dsl, or other high speed Internet access.  A LOT of folks still use old fashioned dial-up.  With that in mind, you don't want to lose folks because your page takes too long to load.  There will be times in every webmasters work where a page is going to take longer than you wish to load, sometimes that can't be helped.  For the most part though, keep graphics to a minimum, both in the number of graphics you use on a page, and the size of the graphics themselves.  Put some text at the top of the page to introduce it if you are using large tables or a lot of tables.  Browsers read text first, then go back and read tables.

Tip: If you have a few dozen graphics you like, load them early, and then re-use them on following pages.  Once a graphic has been loaded, it will be in cache, so the browser won't have to go back and download the same graphic again.

Tip 2: If you use a repeating graphic as a background for a page, a table or a cell, then keep the repeating pattern as small as possible.  If a 20x20 graphic will do the same thing, then using a 120x120 graphic is a waste of download time.

Do: keep the size of the graphics as small (in file size, not necessarily physical size) as small as possible.
Don't: reduce the graphic so much that it is blurry, or unclear.

Next, Frames.

I won't go into a great deal of detail here, but every webmaster should be aware of the pitfalls that plague "frames"  Framed pages can be a great navigational tool, but they have 2 stark problems.  One, the are not easily read by the search engines, and two, it's very easy to get frames inside of frames inside of frames until you have an awful looking mess on your screen.  What I mean by search engines having a problem with frame pages is this:  A frame page is actually more than one page.   If you have one frame that has your navigational menu, and another page that has your content, then that page alone is actually 3 Three pages.   One pages that defines what to do.  Page 1 is the definition page, it says get page 2 (the menu) and get page 3 (the content).   If you are going to use frames, take care in how you lay them out, test them thoroughly, and remember to put something in the "noframes" tag so that older browsers can still read it.  Also, if you are using frames, one possible tip would be to have a non-framed page with links to the various internal frame pages so that users have a choice to navigate without the frames if they so wish.

tip: Do NOT use a framed page as your home page (index.html or whatever it is).  If you want to use the idea of frames on your site, then make the home page a simple single html page.  THEN, on that single page, my suggestion would be to have two separate"enter" links, one that says frames, and one that says no frames.

Next, Font Size.

Pay attention to your font size.  What looks readable on one monitor at one resolution may be so small it is difficult to read at another resolution.  Remember your audience too, what demographics are you trying to reach.  If your site is about the latest Gameboy or Playstation technology, then the majority of your readers will be younger, and their eyes a little better.  On the other hand, if your site is about the medical advances in heart attack treatments, then the majority of your readers will most likely be a bit older, and that means their eyes may not be as good as they used to be.  You may want to consider using a little larger font.

Advanced.

First, SEO. (Search Engine Optimization)

For a SEO and SEM tutorial, try the "How to get your web site found in the search engines" page.  This page will cover a great deal on Search Engine Optimization, and Management.  If you want your site and pages to be read, then you have to let folks know that they exist.  The best way to do this is through the Internet search engines.  80% of the people surfing the web today find the sites they visit through search engines, so SEO and SEM is just too valuable to ignore.

Next, plugins. (Java, Flash, and other goodies)

This section will cover things like Flash, Java applications, javascripts and other little goodies.  To keep it simple, ... keep it simple.  Flash, Java, and other little html goodies are great little tools and additions to a web page.  But, not everyone has these items enabled, or downloaded.  Flash is a fantastic addition to any webmasters toolbox, but remember, search engines don't read flash files very well.  Another problem with Flash is that the files tend to get very large, that means slow load time.  Javascript can do wonderful things for a web page, and being a part of html, there's no special tools needed to use it.  The problem is, more and more folks are turning off their javascript due to security issues.  The second issue is with search engines.  They don't like to read through line after line of javascript to see what your page content is.  So here's what I suggest.

tips: If you are going to use Flash, don't make it the only thing on your home page, if you need to add it there, keep it small, and make it a small part inside a table cell to show what you can do, then have the rest of the page display normal html content.  Better yet, offer 2 different entrances from a very basic html page, one for a flash presentation, and one for the folks who don't have flash capabilities.  If you are going to use an elaborate javascript code, consider the little trick of moving the code out of the html file, making it a .js file, then calling it like the following:
<script language="javascript" type="text/javascript">  Then call it where you want it like this.
<script type="text/javascript" language="JavaScript" src="yourfile.js"></script>

Next, meta-tags. (How much time should you spend on them?)

This section will cover the basics of meta-tags.  With many of the meta tags finding themselves obsolete by some of the top search engines, many webmasters are doing away with them all togeather, don't make that mistake.  Many engines still do use them.  If you want to take the time to load up your page with all the meta tags you can find like author, copyright, cache, classification, etc, there's nothing wrong with that.  It won't hurt you in the search engine world.  Just remember to get the really important ones.

Tips: If you change the content of a page frequently, use the revisit-after meta tag, and set it to a resonable number like 30 days.  That way you won't have to worry about re-submitting it to a search engine, the 'bot' or 'spider' will come back and check it out automatically.

Do: use the keywords meta tag
Do: use the Description meta tag
Do: use the Title meta tag
Don't: abuse or stuff the keywords
Don't: lose sleep over meta tags, concentrate on content.

Next, Graphics and Speed. (Get that page loaded ASAP)

Pay attention to how quickly your pages load.  Especially on your home page.  If you are going to use graphics, keep them small.  If you want a background, set your page properties to a background color that is close to what your graphic is.  The reason for this is simple, your page can be read right away by the surfer, even while the page is waiting to load the background graphic.  If you are going to use some mouse-over effects on graphics, then remember to use some sort of pre-loading script so it doesn't look like your page is choking on the 'mouse over'.  There is nothing wrong with having some fairly large pages on your site, in fact if they are pages filled with content, then it can help you in the long run with search keywords.  But keep your introduction pages short, to the point, and make sure they load quickly.  Not everyone has a high speed Internet connection, you don't want to lose visitors because they got impatient and moved on to another site.

Some webmaster have gone to the extreme of making pages that will fit in an 800x600 screen and no more.  They know that many people are just too lazy to scroll, and prefer to click their way through the web sites.  This can be a good practice for some things such as a small business that is only posting a few pages such as: About, Location, Contact, Services, and such.  However, more search engines are looking at content, so if you have a page that spans 2 or 3 screens, and it's filled with a lot of valuable content - that can be a good thing too.

 

Well folks, that's all I have for now.  I hope this has been a help.  Best of luck with your html pages, sites, and domains.  Feel free to contact me with any questions you may have, and I'll try to respond to them as time permits.

 top

 updated: 07.07.03
html_tips.html
 
 
 Copyright© Charles H. Davis
 All rights reserved