Questions, Answers and Tips

Why does one use .SHTML extensions?

Files names ending in .shtml allow the processing of Server Side Includes. SSI's are little programs that run on the server and can be used for counters, generating text, etc. The advantage of a SSI for generating, for example a menu that appears on all your pages, is that you can change the menu on all pages by editing a single file.

Do I need to organize my website in folders?

When you start a website you only have a few pages and graphics, so it's not that important. However, if you expect you website to grow over time you should give some consideration to its structure. I recommend putting pages with lots of pictures in their own folders (along with all the graphics that appear on the page). Over time as a website grows, you may find it easier if you have two levels of folders. For example, one structure that works well on many sites is to have top level folders for each year and folders under that for each graphics page and its pictures. In a few years you will find this makes your life much easier.

How should I name pages and graphics?

First and most important is I recommend never putting spaces in file names ... they will cause you nothing but trouble. If you need a visual separator, put a hyphen (minus sign) in the name. My next recommendation is to avoid uppercase characters in names. On my own computer I use names like BoatParade or ChristmasInJuly because the uppercase letters help your mind parse the name, but most website servers are case sensitive (which your Windows machine isn't) and things which work on your machine don't work once they're uploaded to the server. To avoid these problems, I recommend avoiding uppercase in names. I also recommend avoiding really long names ... shorter names allow more names to fit in a window when listing the contents of a folder. Basic rule of thumb is that if you can't see everything in a folder without scrolling, it's time to reorganize and break up the contents into multiple folders.

What size graphics should I use?

There is no simple answer to this question. The most important factors to consider are the screen resolutions of your potential customers and how good a job the compression program you use does at creating files that download quickly ... although lots of people have high speed internet connections a large percentage don't (not just because of cost, but because they are not available). Let's consider screen resolution first, and then come back to this question.

What size screen should I design for?

I believe it is important to design pages that look good on all size screens. Many people never change their screen resolution, they just use it the way it came. Old Windows machines came set at 640 by 480. Then machines came set at 800 by 600. People with poorer eyesight may still reset their resolution to 640 by 480 so you have to still consider them. A lot of newer machines come set at 1024 by 768 or higher. For example, some of the new wide screen laptops default to 1680 by 1050. My desktop machine has a wide screen monitor which I run at 1920 by 1200.

One of my big complaints with some of the WYSIWYG web page editors is that the pages they make don't adjust well to different monitor resolutions. The pages look great on your screen ... just the way you want them to look, but what someone else sees is a totally different story.

After you design a web page, reset your monitor to various resolutions and see how it looks with each. Also try looking at it using several different browsers and experiment with different "text size" setting in each. Some browsers have scale settings that apply only to text, others scale the graphics as well. The important thing to remember is that just because a page looks good on your screen ... it may not look the same at all on your customer's screen.

Back to the size of Graphics:

What looks like at big graphic on a low resolution screen will seem much smaller on a high resolution screen. For most websites having big, bold pictures makes whatever you're showing look better. If you're trying to sell something, or excite your customer, big pictures are important. The problem is that big pictures take too long to download on a dial-up line and are a real problem if the entire picture doesn't fit on your customer's screen.

Another part of the equation is the aspect ratio of your pictures (ratio of the width to height of pictures taken by your camera). Many cameras are 4 to 3 (the ratio of regular monitors), while others are more like 3 to 2 (closer to the ratio of wide screen monitors). The reason this is important is that often it is the vertical height that limits how big a picture you can display, even for landscape (as opposed to portrait shaped) pictures. This is because most of the space taken up by the browser at the top and bottom of the screen. By the way, because of this problem you want to use landscape shaped pictures whenever possible.

If you think your customers are likely to have at least 800 by 600 screens, and you only want to deal with one size picture, I would probably recommend 600 by 450 (or 600 by 400 depending on your aspect ratio). Once nice thing about browsers is that can scale pictures for you ... if big, bold pictures are important you might want to consider using higher resolution pictures and let your customer choose which size to view (requires some more work because you either need two versions of the page).

Only do this if you have a really good compression program, otherwise it's too painful on a dial-up line. With pictures which have a 3 to 2 aspect ratio I have been posting roughly 800x533 pictures and letting the person viewing them choose between the full size images and smaller ones. Using NoteTab Pro, you can even build a Clip which creates the second page automatically (as long as you always crop your pictures to the same aspect ratio).

If you're more concerned about how long it takes to download the pictures on a dial-up line, then you might want to consider some sort of thumbnails. The problem with thumbnails is that the person looking at them has to click on each one they want to view bigger, and then wait for it to download. Another possibility is to consider fairly big thumbnails (say 400 by 300) which may be big enough for the person with the smaller screen ... they would be about one fourth the size of a 800 by 600 file which would make life easier for your dial-up users. They would only have to click one pictures they really wanted to view bigger.

What about META tags?

These are HTML tags that appear in within the HEAD section of the page, between the <HEAD> and </HEAD> tags. They are not displayed as part of the page. For the most part they look like:

<META NAME="xyz" CONTENT="...">

Where xyz is replaced by one of the recognized META tag names and the ellipsis is replaced by information appropriate to that name. The two META tags you really should know about are the keywords and description tags, both of which are used by search engines. For more information on how to optimize the chance of a good search engine ranking also see:

Keywords META tag:

This is a list of keywords people might use when searching for your page, separated by commas. My recommendation is to make them all lowercase. Usually you want to separate each word by a comma, but if there is a phrase that everyone might use when searching for your page your might want to include the phrase as a single keyword (i.e., without the commas in between) as well as including the individual words of the phrase separated by commas. Google does not use these keywords, but most search engines do.

Description META tag:

This is a brief, summary description of your page. Many search engines will display this description (or at least the start of it) when your page comes up in a search. Therefore, make sure it is something that will encourage the reader to click through to your site.

The TITLE tag:

This is not a META tag, but does appear in the header section. Most browsers display this text in the bar at the top of the window, and use it for bookmarks. Therefore, I recommending starting with a couple of words that will make a useful bookmark. I usually start with the Domain name (so the bookmarks will sort together) followed by a couple word description of the page. Then since some search engines use the words in the TITLE tag like they were keywords, follow this by important keywords, but these need not be separated by commas unless it makes the title more readable.



Back to HTML Resources
Visits since September 7, 2005:  5344