Web Design Troubleshooting Guide
| Category: Website Design and Development | Date: 2003-10-30 |
Getting your web site to look right can sometimes be a hair-pulling experience. Even for professional web designers! I can only imagine how frustrated many newbies can get.
Let me share with you some of the common problems in designing a well-functioning web site. If you havent made these mistakes yet - trust me: you will! Keep this troubleshooting guide handy for when you need it.
1. MISSING IMAGES ON THE PAGE
2. IMAGE LOADS VERY SLOWLY
3. IMAGE LOOKS DISTORTED
4. BROKEN LINKS
5. TEXT IS MISSING ON THE PAGE
6. VISITORS CANT SEE YOUR FANCY FONTS
7. TOO MUCH HORIZONTAL SCROLLING REQUIRED
8. THE TABLE IS WIDER THAN SPECIFIED
9. WEB PAGE DISPLAYS OLD LINKS AND IMAGES
10. BACKGROUND DOESNT SHOW
11. CANT ACCESS YOUR HOME PAGE
======================================
1. PROBLEM: MISSING IMAGES ON THE PAGE
======================================
SOLUTION: there are three things that might cause this problem. You have either forgotten to upload the image to your web server, didnt link to it correctly, or the graphic is in invalid format.
1) Remember, you need to upload all the graphics that you are using on your web page, just like any other file. So if you have a "services.html" page that contains "staff.jpg" graphic, you need to upload both "services.html" and "staff.jpg" to your web server.
2) You also need to reference that image correctly. For this, you need to understand a little bit about files, folders, and directories. Basically, a file is a document. A folder (or a directory) is a collection of files.
You might have a directory on your web site called "images". Inside it you might have the "staff.jpg", "logo.jpg", and other files.
Now, here is the trick: if your HTML file is located in the same folder with the graphic it contains, then here is how you refer to that image:
img src="graphic.jpg"
*Please, note that I am leaving the tag brackets out so you could see the HTML code.
So far, simple, right?
But lets say that your HTML file is located in the main directory, while the graphic file is located in the sub-directory. For example, "services.html" is located in the root directory of your web site so that if you type www.yoursite.com/services.html in your browser location bar, you will see it.
And lets say that you placed a graphic used on that page into a sub-directory called "images", so that when you type www.yoursite.com/images/graphic.jpg into your browser location bar, you will see that image.
So how do you refer to that graphic from your "services.html" page? Here is how:
img src="images/graphic.jpg"
All I did was put the sub-directory (or folder) name followed by a forward slash before the graphic name.
Finally, what if you put an HTML page into a sub-directory, but leave the image in the main (root) directory? For example, your "services.html" is located in a sub-directory called "pages". And the graphic used on it, "staff.jpg", is placed in the main directory, so that when you type this address into your browser location bar, you will see it:
www.yoursite.com/staff.jpg
How do you refer to this graphic on your "services.html" page? You use the "previous directory" notation like this:
img src="../staff.jpg"
The browser will then know, that in order to find that graphic it needs to look in one directory below.
If you are having trouble understanding the above notation, use absolute image references. For example:
img src="http://www.yoursite.com/staff.jpg"
Make sure you know where you placed your graphic (which folder) and refer to it as if you were accessing it from your web browser. Thats it!
3) And finally, if you are not using graphics with the "JPG" or "GIF" extension, they will not appear on your web page. Use PaintShop Pro or any other graphic editor download.com) to convert your graphic from any format to "JPG" or "GIF".
Broken images may also happen even if they have the right extension. Thats because they have been created in a not-for-web format. When a graphic artist designs your logo, remind her to save it as "RGB" (which stands for "red-green-blue") or "Indexed Color" and not any other color mode (such as "CMYK").
For more information, see "Choosing the right format for your images" at http://tech.irt.org/articles/js206/index.htm
======================================
2. PROBLEM: IMAGE LOADS VERY SLOWLY
======================================
SOLUTION: you must do your best to reduce the graphic to its minimum good-looking format. Use GIFBot to do this: http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Some new webmasters use a large graphic and specify a smaller size in the HTML code. That is absolutely unnecessary and will slow down your web page three times or more!
For example, if you have a graphic that is 200x200 in size (pixels), and insert it into your web page like this:
img src="graphic.jpg" width=100 height=100
...you are actually doing yourself disservice. Why not reduce the graphic in your image editor first, then place it on your web site? Doing this will speed up your site and will not distort your graphic.
======================================
3. PROBLEM: IMAGE LOOKS DISTORTED
======================================
SOLUTION: you probably specified incorrect size of this graphic on your web page. To find out the correct size of a graphic, right-click on it and choose "Properties" from the menu. You should see the image size (something like 110 x 200) then put the same numbers in the IMG tag:
img src="graphic.jpg" width=110 height=200
If you want to change the size of the image, do so in a graphic editor instead of right on your web page, to avoid distortion or a pixelated look.
======================================
4. PROBLEM: BROKEN LINK
======================================
SOLUTION: you must fix your link so it takes your visitors to a page that exists. Links can be relative or absolute. Here is an example of a relative link (remember, I am omitting the tag brackets so you could see the actual code):
a href="welcome.html"
This link refers to a page that is located on YOUR web site, and not someone elses. Now, here is an example of an absolute link:
a href="http://www.yoursite.com/welcome.html"
Notice that this link will take you to the exact same page that the first one will. This is just a different way to build your links.
You can also link to someone elses web site using absolute links:
a href="http://www.yourfriendsite.com/hello.html"
Can you use relative links to refer to an outside web site? No. Only absolute links can do that. And remember to use the "http://" in each absolute link tag.
======================================
5. PROBLEM: TEXT IS MISSING ON THE PAGE
======================================
SOLUTION: this can happen for different reasons, but all of them have to do with closing tags:
1) When a closing table tag is missing, the entire table content might be missing, too. So remember to close all your TABLE, TR and TD tags.
2) You forgot to close a comment and the browser "thinks" that the rest of the text has also been commented out. Make sure you close every comment that you open.
3) You forgot to close a quotation mark in a tag. For example, if you use quotes in a IMG SRC or A HREF tags, you must close them:
IMG SRC="picture.jpg" width=100 height=300
The above code will cause the page to display incorrectly. Fix it by adding a closing quotation after the graphic name.
4) If you using TEXTAREA in forms, make sure you close it with a /TEXTAREA tag.
=============================================
6. PROBLEM: VISITORS CANT SEE YOUR FANCY FONTS
=============================================
SOLUTION: do not use your fancy fonts. There are only a handful of fonts that every computer user has installed. They are: Verdana, Arial, Courier, & Times New Roman. If you try to use some other font such as Impact or FreeStyle Script, and your visitors dont have them installed, they will see your text in whatever font their browser is set to.
If you REALLY want your visitors to see your handsome fonts, then turn some of your text into graphics. Your graphics will be displayed the same on every computer, and your visitors will be able to see the fonts you meant for them to see.
================================================
7. PROBLEM: TOO MUCH HORIZONTAL SCROLLING REQUIRED
================================================
SOLUTION: put your text into a table and make it no more than 85% in width and centered. This way, regardless of how large or small their monitors are, your visitors will always see your text centered with no horizontal scrolling necessary.
Also check for links that may be too long, or images that are too wide. Both will make a web page wider than the screen may allow to view.
===========================================
8. PROBLEM: THE TABLE IS WIDER THAN SPECIFIED
===========================================
SOLUTION: sometimes even you specify table width as 500 pixels, it might still stretch to all 700. There are two reasons for that.
1) You have a graphic in that table that is wider than the table itself. Reduce its size and the table will shrink as well.
2) You are using a long URL somewhere in the table text. Shorten it or remove it and you will see the table shrink to its specified size.
================================================
9. PROBLEM: WEB PAGE DISPLAYS OLD LINKS AND IMAGES
================================================
SOLUTION: refresh (or reload) the page by clicking the button on the toolbar of your browser. Sometimes the graphics are still not being refreshed in which case you need to do this:
- right-click on the graphic - choose "view image" or "open image" - click "Refresh" when the graphic is displayed by itself
Now come back to your web page and press "refresh" button one more time. You should now see the updated images.
Also, if you are using an FTP program to upload your files, remember to click "Refresh" in the FTP window before uploading new files. Otherwise, you will simply upload the old versions.
======================================
10. PROBLEM: BACKGROUND DOESNT SHOW
======================================
SOLUTION: make sure to upload your background image along with the other files. Also, make sure you upload it into the right directory (see "missing image on the page" above for more information)
======================================
11. PROBLEM: CANT ACCESS YOUR HOME PAGE
======================================
SOLUTION: if you get an "access denied" error or a list of files when you are trying to access your web site, make sure you named your home page correctly.
Every hosting company has it set up so that the very first page of your site must be named "index.html". Sometimes, though, they will require your first file to be called "welcome.html", "default.html", "home.html", or "default.htm".
There is only one way to find out: ask them! Or visit their web site to see if they specify the default file name in their tech support section.
Notice that "default.html" and "default.htm" are two different files. You can name your files either way, but only one of them will be accepted as a default one.
Copyright © 2002 Milana Leshinsky
About the Author
Milana Leshinsky is a full time web developer and the author of two e-books: "Create Your First Busines Web Site in 10 days" and "65 Instant Web Design Answers".WORD COUNT: 1,782 PUBLISHING: May be published free with the resource box intact. Courtesy e-mail will be greatly appreciated.
milana@mycoachingwebsite.com
http://www.mycoachingwebsite.com
Let me share with you some of the common problems in designing a well-functioning web site. If you havent made these mistakes yet - trust me: you will! Keep this troubleshooting guide handy for when you need it.
1. MISSING IMAGES ON THE PAGE
2. IMAGE LOADS VERY SLOWLY
3. IMAGE LOOKS DISTORTED
4. BROKEN LINKS
5. TEXT IS MISSING ON THE PAGE
6. VISITORS CANT SEE YOUR FANCY FONTS
7. TOO MUCH HORIZONTAL SCROLLING REQUIRED
8. THE TABLE IS WIDER THAN SPECIFIED
9. WEB PAGE DISPLAYS OLD LINKS AND IMAGES
10. BACKGROUND DOESNT SHOW
11. CANT ACCESS YOUR HOME PAGE
======================================
1. PROBLEM: MISSING IMAGES ON THE PAGE
======================================
SOLUTION: there are three things that might cause this problem. You have either forgotten to upload the image to your web server, didnt link to it correctly, or the graphic is in invalid format.
1) Remember, you need to upload all the graphics that you are using on your web page, just like any other file. So if you have a "services.html" page that contains "staff.jpg" graphic, you need to upload both "services.html" and "staff.jpg" to your web server.
2) You also need to reference that image correctly. For this, you need to understand a little bit about files, folders, and directories. Basically, a file is a document. A folder (or a directory) is a collection of files.
You might have a directory on your web site called "images". Inside it you might have the "staff.jpg", "logo.jpg", and other files.
Now, here is the trick: if your HTML file is located in the same folder with the graphic it contains, then here is how you refer to that image:
img src="graphic.jpg"
*Please, note that I am leaving the tag brackets out so you could see the HTML code.
So far, simple, right?
But lets say that your HTML file is located in the main directory, while the graphic file is located in the sub-directory. For example, "services.html" is located in the root directory of your web site so that if you type www.yoursite.com/services.html in your browser location bar, you will see it.
And lets say that you placed a graphic used on that page into a sub-directory called "images", so that when you type www.yoursite.com/images/graphic.jpg into your browser location bar, you will see that image.
So how do you refer to that graphic from your "services.html" page? Here is how:
img src="images/graphic.jpg"
All I did was put the sub-directory (or folder) name followed by a forward slash before the graphic name.
Finally, what if you put an HTML page into a sub-directory, but leave the image in the main (root) directory? For example, your "services.html" is located in a sub-directory called "pages". And the graphic used on it, "staff.jpg", is placed in the main directory, so that when you type this address into your browser location bar, you will see it:
www.yoursite.com/staff.jpg
How do you refer to this graphic on your "services.html" page? You use the "previous directory" notation like this:
img src="../staff.jpg"
The browser will then know, that in order to find that graphic it needs to look in one directory below.
If you are having trouble understanding the above notation, use absolute image references. For example:
img src="http://www.yoursite.com/staff.jpg"
Make sure you know where you placed your graphic (which folder) and refer to it as if you were accessing it from your web browser. Thats it!
3) And finally, if you are not using graphics with the "JPG" or "GIF" extension, they will not appear on your web page. Use PaintShop Pro or any other graphic editor download.com) to convert your graphic from any format to "JPG" or "GIF".
Broken images may also happen even if they have the right extension. Thats because they have been created in a not-for-web format. When a graphic artist designs your logo, remind her to save it as "RGB" (which stands for "red-green-blue") or "Indexed Color" and not any other color mode (such as "CMYK").
For more information, see "Choosing the right format for your images" at http://tech.irt.org/articles/js206/index.htm
======================================
2. PROBLEM: IMAGE LOADS VERY SLOWLY
======================================
SOLUTION: you must do your best to reduce the graphic to its minimum good-looking format. Use GIFBot to do this: http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Some new webmasters use a large graphic and specify a smaller size in the HTML code. That is absolutely unnecessary and will slow down your web page three times or more!
For example, if you have a graphic that is 200x200 in size (pixels), and insert it into your web page like this:
img src="graphic.jpg" width=100 height=100
...you are actually doing yourself disservice. Why not reduce the graphic in your image editor first, then place it on your web site? Doing this will speed up your site and will not distort your graphic.
======================================
3. PROBLEM: IMAGE LOOKS DISTORTED
======================================
SOLUTION: you probably specified incorrect size of this graphic on your web page. To find out the correct size of a graphic, right-click on it and choose "Properties" from the menu. You should see the image size (something like 110 x 200) then put the same numbers in the IMG tag:
img src="graphic.jpg" width=110 height=200
If you want to change the size of the image, do so in a graphic editor instead of right on your web page, to avoid distortion or a pixelated look.
======================================
4. PROBLEM: BROKEN LINK
======================================
SOLUTION: you must fix your link so it takes your visitors to a page that exists. Links can be relative or absolute. Here is an example of a relative link (remember, I am omitting the tag brackets so you could see the actual code):
a href="welcome.html"
This link refers to a page that is located on YOUR web site, and not someone elses. Now, here is an example of an absolute link:
a href="http://www.yoursite.com/welcome.html"
Notice that this link will take you to the exact same page that the first one will. This is just a different way to build your links.
You can also link to someone elses web site using absolute links:
a href="http://www.yourfriendsite.com/hello.html"
Can you use relative links to refer to an outside web site? No. Only absolute links can do that. And remember to use the "http://" in each absolute link tag.
======================================
5. PROBLEM: TEXT IS MISSING ON THE PAGE
======================================
SOLUTION: this can happen for different reasons, but all of them have to do with closing tags:
1) When a closing table tag is missing, the entire table content might be missing, too. So remember to close all your TABLE, TR and TD tags.
2) You forgot to close a comment and the browser "thinks" that the rest of the text has also been commented out. Make sure you close every comment that you open.
3) You forgot to close a quotation mark in a tag. For example, if you use quotes in a IMG SRC or A HREF tags, you must close them:
IMG SRC="picture.jpg" width=100 height=300
The above code will cause the page to display incorrectly. Fix it by adding a closing quotation after the graphic name.
4) If you using TEXTAREA in forms, make sure you close it with a /TEXTAREA tag.
=============================================
6. PROBLEM: VISITORS CANT SEE YOUR FANCY FONTS
=============================================
SOLUTION: do not use your fancy fonts. There are only a handful of fonts that every computer user has installed. They are: Verdana, Arial, Courier, & Times New Roman. If you try to use some other font such as Impact or FreeStyle Script, and your visitors dont have them installed, they will see your text in whatever font their browser is set to.
If you REALLY want your visitors to see your handsome fonts, then turn some of your text into graphics. Your graphics will be displayed the same on every computer, and your visitors will be able to see the fonts you meant for them to see.
================================================
7. PROBLEM: TOO MUCH HORIZONTAL SCROLLING REQUIRED
================================================
SOLUTION: put your text into a table and make it no more than 85% in width and centered. This way, regardless of how large or small their monitors are, your visitors will always see your text centered with no horizontal scrolling necessary.
Also check for links that may be too long, or images that are too wide. Both will make a web page wider than the screen may allow to view.
===========================================
8. PROBLEM: THE TABLE IS WIDER THAN SPECIFIED
===========================================
SOLUTION: sometimes even you specify table width as 500 pixels, it might still stretch to all 700. There are two reasons for that.
1) You have a graphic in that table that is wider than the table itself. Reduce its size and the table will shrink as well.
2) You are using a long URL somewhere in the table text. Shorten it or remove it and you will see the table shrink to its specified size.
================================================
9. PROBLEM: WEB PAGE DISPLAYS OLD LINKS AND IMAGES
================================================
SOLUTION: refresh (or reload) the page by clicking the button on the toolbar of your browser. Sometimes the graphics are still not being refreshed in which case you need to do this:
- right-click on the graphic - choose "view image" or "open image" - click "Refresh" when the graphic is displayed by itself
Now come back to your web page and press "refresh" button one more time. You should now see the updated images.
Also, if you are using an FTP program to upload your files, remember to click "Refresh" in the FTP window before uploading new files. Otherwise, you will simply upload the old versions.
======================================
10. PROBLEM: BACKGROUND DOESNT SHOW
======================================
SOLUTION: make sure to upload your background image along with the other files. Also, make sure you upload it into the right directory (see "missing image on the page" above for more information)
======================================
11. PROBLEM: CANT ACCESS YOUR HOME PAGE
======================================
SOLUTION: if you get an "access denied" error or a list of files when you are trying to access your web site, make sure you named your home page correctly.
Every hosting company has it set up so that the very first page of your site must be named "index.html". Sometimes, though, they will require your first file to be called "welcome.html", "default.html", "home.html", or "default.htm".
There is only one way to find out: ask them! Or visit their web site to see if they specify the default file name in their tech support section.
Notice that "default.html" and "default.htm" are two different files. You can name your files either way, but only one of them will be accepted as a default one.
Copyright © 2002 Milana Leshinsky
About the Author
Milana Leshinsky is a full time web developer and the author of two e-books: "Create Your First Busines Web Site in 10 days" and "65 Instant Web Design Answers".WORD COUNT: 1,782 PUBLISHING: May be published free with the resource box intact. Courtesy e-mail will be greatly appreciated.
milana@mycoachingwebsite.com
http://www.mycoachingwebsite.com
Copyright © 2005-2006 Powered by Custom PHP Programming