How to Optimize Your Website For Better Visitor Experience and More Traffic
- Date: 2007-11-28 - Word Count: 1764
Share This!
This article describes in simple terms, practical and effective tactics used to optimize your website that will result in a more enjoyable visitors experience and traffic. At the end of this article there is a Reference and Resources section where you can find supportive information and services related to each topic.
Compatibility With Web Browsers
It isn't a surprised for website owners, webmasters and others who are involved in their websites optimization, to see how different the web pages are displayed in various web browsers or between different web browsers version. Web pages might not even be visible in some web browsers.
Displaying differences it's the result of how the various available web browsers (Mozilla Firefox, Internet Explorer, Netscape, etc.), or their versions, handle HTML code, HTML errors or computer screen resolution used. Because of the above reasons, I highly recommend to look at your web pages through at least three of the most widely used web browser platforms: Internet Explorer, Netscape and Firefox. Alternatively, you could use the available web based service found in the References and Resources section at the end of this article. (See Anybrowser viewer and Firefox below).
Title and Meta Tags
Meta tags are information inserted into the ‹HEAD›‹/HEAD› section of the HTML code of any web page. There are many type of meta tags. We will be considering only two of them and the ‹TITLE› tag.
From the visitor's point of view, the only tag visible within the head section is the title tag, which is not a meta tag itself, but a stand alone tag found in the head section of the web page. The title tag is responsible of the wording displayed at the top right hand corner of the web browser window. You should always include this tag in order to name your web pages. Think of the title tag as the subject of an email message.
The two most important meta tags are the keyword and description tags which are invisible to the visitor's eyes but should be also included if you want your page information (title and description) to be properly displayed on the search engine result page (SERP) listing. Specially important is the meta description tag.
In the early days of the Internet, one could influence the search result by including keywords within the meta keyword and meta description tags you wanted the search engine (SE) to classify your page for, today you cannot influence the result of the SE by just adding desirable keywords anymore due to the level of complexity the SEs have achieved which are able to analyze your page, decide what is it all about and give it the position in the SERP based on those findings and other external factors, which are beyond the scope of this article. You could do just fine without including a meta keyword tag, but including them won't hurt, on the contrary, I think it would rather do more good than harm.
Keyword tag should contain between 5 and 10 keywords that appear on the body of your page. You should never include keywords in the tag that do not appear on that page. It is worth to say that some SE will penalized your website doing otherwise. Also do not repeat the same keyword to avoid SE penalization. (See meta tags generator below).
The Importance of ALT Tags
Many web surfer and visually challenged people browse the Internet with the image viewing option of their web browser turn off or using text readers respectively. When one of these surfer visits your site containing lot of images, and it happen to be that those images contain most of the content your website is about, they won't be able to read the content of your pages if the images do not contain the ALT="your image description" tags. The same situation applies to the search engines since SEs do not index images, they won't index any text your web site has in image format. ALT tags are essentially image descriptions that always should be added to your images to make sure your visitors and search engines can respectively read and recognize all the content on your website.
Browser Safe Color Palettes
Computer platforms handle color differently, and the web browser limits colors significantly. In order to move through the digital world with consistency, the web page designer must be well aware of this fact.
While in the real world all colors are the result of some subtractive combination of three primaries colors: red, yellow, and blue. In the digital world all colors are the result of additive color synthesis or combination of three primary colors: red, green, and blue, referred to as RGB for short. Additive color is unlike the tangible world's subtractive color.
RGB values are derived from a method that numerically determines how much red, green, and blue make up the color in question. Each color contains a percentage of red, green, and blue.
A safe color palette is a palette containing 216 RGB colors that are going to remain as stable as possible from one browser to another, between platforms, and at different monitor capacities and resolutions. If colors outside the safe palette are used, many web site visitors will see the color the computer has available instead of the color you have called for. In this case if you have asked for a soft, pale blue outside the safe palette, you might end up having visitors who see that color as bright neon. (See web safe color chart below).
Check For Broken Links
Broken links are links that lead to nowhere, and clicking on the link will show you a 404 error code page.
It is said that about 5% to 7% of all links on the Internet are broken. A site that contains broken links, including missing links to images, gives a very bad impression to potential visitors and it is a frequent cause of lost visitors. Also, the search engines and directories might not list your Web page if it has broken links. (See links checker and Netmechanic tools below).
Check Web Pages Load Time
Many Web surfers today browse the Internet through a high speed broadband connection, it is fair to say that those visitors won't have any problem accessing a heavy loaded page document, but a significant percentage of those Web surfers still use slow speed dial up connection to access the Web.
Surfers are known for having a very short attention span and will leave your site before the page finishes loading. You'll lose many visitors and sales this way if you do not pay attention to the loading time of your pages. Generally speaking, the maximum accepted time for a page to load is about 10 seconds, and it is recommended that your page to be around 25Kb in size.
One easy way to calculate the net size of your web page is by using Windows Explorer to find the file of your HTML and any graphic it contains and looking to the size value for each file involved then adding those numbers to get the size of the page in question.
Decreasing the loading time of a web page can be easily achieved by both, compressing or shrinking the size of your images, and reducing the size of your HTML code. You will lose some sharpness after compressing the image more than 40% but you'll gain in speed. Below you'll find more practical ways to further decrease page loading time, keep reading. (See load time checker and image cruncher below).
HTML Code Optimizer
An HTML Optimizer removes all blank spaces in your HTML code, and this is another way to make your page load faster. The result is shorter downloading time. Pages will be shown in a client's browser in exactly the same way, but the file size will be smaller.
Please make sure that the HTML optimizer you use does not compress embedded script codes within your page, which might be rendered unusable if they get optimized this way. (See code optimizer below).
BORDER, HEIGHT and WIDTH Attributes
The attributes used with the ‹IMG› tag to specify an image width and height are the WIDTH and HEIGHT attributes indicating the exact size of your image in pixels. The other attribute that influences the way an image is rendered on the user's screen is the BORDER attribute, which should be set to zero if you don't want your hyperlinked image to show a blue border around it. There is not need to specify BORDER="0" for a normal, non-hyperlinked, image since no border appears around an image unless that image is a link.
One interesting advantage to adding the height and width attributes to an image tag is that when you do specify the image size for all of your images, browsers take a lot less time to render your page because the browser can determine the layout of the page without having to retrieve each image separately to find out what size it is. To find out the width and height of an image, just open it with any image editor and look for its property.
Validate Your HTML Code
Just as texts in a natural language can include spelling or grammar errors, documents using markup languages like HTML may, for numerous reasons, not be following these rules. The process of verifying whether a Web document actually follows the rules for the language it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid and complies with a specific set of rules.
Different browsers, or versions of the same browser, will make different guesses about the same illegal code; even worse, if your HTML code is really bad, the browser could get confused and produce a mangled display mess, or even crash. Validating your HTML will help ensure that it displays properly on most browsers. Always check the validity of your HTML code.
Look for a very versatile validator tool in the References and Resources section at the end of this article, which is able to analyze your web pages directly from your server, by file upload, and direct document code input. (See validation service below).
References and Resources:
ANYBROWSER VIEWER: http://www.anybrowser.com/siteviewer.html
FIREFOX BROWSER: http://www.mozilla.com/en-US/firefox/
IWEBTOOLS METATAGS GENERATOR: http://www.iwebtool.com/metatags_generator/
WEB SAFE COLORS CHART: http://www.virtualpromote.com/tools/colorchart/
IWEBTOOLS LINK CHECKER: http://www.iwebtool.com/broken_link_checker/
NET MECHANIC TOOLS: http://www.netmechanic.com/products/maintain.shtml
NETMECHANIC LOAD TIME CHECKER: http://www.netmechanic.com/cobrands/FutureQuest/load_check.htm
SPINWAVE IMAGE CRUNCHER: http://www.spinwave.com/crunchers.html
HTML CODE OPTIMIZER: http://www.iwebtool.com/html_optimizer/
W3C VALIDATION SERVICE: http://validator.w3.org/
About the author: Javier A. Garcia is a successful internet marketing expert and editor in chief of more than half a dozen websites targeted to people interested to work from home and in online business resources. With years of experience in online marketing, website optimization and promotion.
Compatibility With Web Browsers
It isn't a surprised for website owners, webmasters and others who are involved in their websites optimization, to see how different the web pages are displayed in various web browsers or between different web browsers version. Web pages might not even be visible in some web browsers.
Displaying differences it's the result of how the various available web browsers (Mozilla Firefox, Internet Explorer, Netscape, etc.), or their versions, handle HTML code, HTML errors or computer screen resolution used. Because of the above reasons, I highly recommend to look at your web pages through at least three of the most widely used web browser platforms: Internet Explorer, Netscape and Firefox. Alternatively, you could use the available web based service found in the References and Resources section at the end of this article. (See Anybrowser viewer and Firefox below).
Title and Meta Tags
Meta tags are information inserted into the ‹HEAD›‹/HEAD› section of the HTML code of any web page. There are many type of meta tags. We will be considering only two of them and the ‹TITLE› tag.
From the visitor's point of view, the only tag visible within the head section is the title tag, which is not a meta tag itself, but a stand alone tag found in the head section of the web page. The title tag is responsible of the wording displayed at the top right hand corner of the web browser window. You should always include this tag in order to name your web pages. Think of the title tag as the subject of an email message.
The two most important meta tags are the keyword and description tags which are invisible to the visitor's eyes but should be also included if you want your page information (title and description) to be properly displayed on the search engine result page (SERP) listing. Specially important is the meta description tag.
In the early days of the Internet, one could influence the search result by including keywords within the meta keyword and meta description tags you wanted the search engine (SE) to classify your page for, today you cannot influence the result of the SE by just adding desirable keywords anymore due to the level of complexity the SEs have achieved which are able to analyze your page, decide what is it all about and give it the position in the SERP based on those findings and other external factors, which are beyond the scope of this article. You could do just fine without including a meta keyword tag, but including them won't hurt, on the contrary, I think it would rather do more good than harm.
Keyword tag should contain between 5 and 10 keywords that appear on the body of your page. You should never include keywords in the tag that do not appear on that page. It is worth to say that some SE will penalized your website doing otherwise. Also do not repeat the same keyword to avoid SE penalization. (See meta tags generator below).
The Importance of ALT Tags
Many web surfer and visually challenged people browse the Internet with the image viewing option of their web browser turn off or using text readers respectively. When one of these surfer visits your site containing lot of images, and it happen to be that those images contain most of the content your website is about, they won't be able to read the content of your pages if the images do not contain the ALT="your image description" tags. The same situation applies to the search engines since SEs do not index images, they won't index any text your web site has in image format. ALT tags are essentially image descriptions that always should be added to your images to make sure your visitors and search engines can respectively read and recognize all the content on your website.
Browser Safe Color Palettes
Computer platforms handle color differently, and the web browser limits colors significantly. In order to move through the digital world with consistency, the web page designer must be well aware of this fact.
While in the real world all colors are the result of some subtractive combination of three primaries colors: red, yellow, and blue. In the digital world all colors are the result of additive color synthesis or combination of three primary colors: red, green, and blue, referred to as RGB for short. Additive color is unlike the tangible world's subtractive color.
RGB values are derived from a method that numerically determines how much red, green, and blue make up the color in question. Each color contains a percentage of red, green, and blue.
A safe color palette is a palette containing 216 RGB colors that are going to remain as stable as possible from one browser to another, between platforms, and at different monitor capacities and resolutions. If colors outside the safe palette are used, many web site visitors will see the color the computer has available instead of the color you have called for. In this case if you have asked for a soft, pale blue outside the safe palette, you might end up having visitors who see that color as bright neon. (See web safe color chart below).
Check For Broken Links
Broken links are links that lead to nowhere, and clicking on the link will show you a 404 error code page.
It is said that about 5% to 7% of all links on the Internet are broken. A site that contains broken links, including missing links to images, gives a very bad impression to potential visitors and it is a frequent cause of lost visitors. Also, the search engines and directories might not list your Web page if it has broken links. (See links checker and Netmechanic tools below).
Check Web Pages Load Time
Many Web surfers today browse the Internet through a high speed broadband connection, it is fair to say that those visitors won't have any problem accessing a heavy loaded page document, but a significant percentage of those Web surfers still use slow speed dial up connection to access the Web.
Surfers are known for having a very short attention span and will leave your site before the page finishes loading. You'll lose many visitors and sales this way if you do not pay attention to the loading time of your pages. Generally speaking, the maximum accepted time for a page to load is about 10 seconds, and it is recommended that your page to be around 25Kb in size.
One easy way to calculate the net size of your web page is by using Windows Explorer to find the file of your HTML and any graphic it contains and looking to the size value for each file involved then adding those numbers to get the size of the page in question.
Decreasing the loading time of a web page can be easily achieved by both, compressing or shrinking the size of your images, and reducing the size of your HTML code. You will lose some sharpness after compressing the image more than 40% but you'll gain in speed. Below you'll find more practical ways to further decrease page loading time, keep reading. (See load time checker and image cruncher below).
HTML Code Optimizer
An HTML Optimizer removes all blank spaces in your HTML code, and this is another way to make your page load faster. The result is shorter downloading time. Pages will be shown in a client's browser in exactly the same way, but the file size will be smaller.
Please make sure that the HTML optimizer you use does not compress embedded script codes within your page, which might be rendered unusable if they get optimized this way. (See code optimizer below).
BORDER, HEIGHT and WIDTH Attributes
The attributes used with the ‹IMG› tag to specify an image width and height are the WIDTH and HEIGHT attributes indicating the exact size of your image in pixels. The other attribute that influences the way an image is rendered on the user's screen is the BORDER attribute, which should be set to zero if you don't want your hyperlinked image to show a blue border around it. There is not need to specify BORDER="0" for a normal, non-hyperlinked, image since no border appears around an image unless that image is a link.
One interesting advantage to adding the height and width attributes to an image tag is that when you do specify the image size for all of your images, browsers take a lot less time to render your page because the browser can determine the layout of the page without having to retrieve each image separately to find out what size it is. To find out the width and height of an image, just open it with any image editor and look for its property.
Validate Your HTML Code
Just as texts in a natural language can include spelling or grammar errors, documents using markup languages like HTML may, for numerous reasons, not be following these rules. The process of verifying whether a Web document actually follows the rules for the language it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid and complies with a specific set of rules.
Different browsers, or versions of the same browser, will make different guesses about the same illegal code; even worse, if your HTML code is really bad, the browser could get confused and produce a mangled display mess, or even crash. Validating your HTML will help ensure that it displays properly on most browsers. Always check the validity of your HTML code.
Look for a very versatile validator tool in the References and Resources section at the end of this article, which is able to analyze your web pages directly from your server, by file upload, and direct document code input. (See validation service below).
References and Resources:
ANYBROWSER VIEWER: http://www.anybrowser.com/siteviewer.html
FIREFOX BROWSER: http://www.mozilla.com/en-US/firefox/
IWEBTOOLS METATAGS GENERATOR: http://www.iwebtool.com/metatags_generator/
WEB SAFE COLORS CHART: http://www.virtualpromote.com/tools/colorchart/
IWEBTOOLS LINK CHECKER: http://www.iwebtool.com/broken_link_checker/
NET MECHANIC TOOLS: http://www.netmechanic.com/products/maintain.shtml
NETMECHANIC LOAD TIME CHECKER: http://www.netmechanic.com/cobrands/FutureQuest/load_check.htm
SPINWAVE IMAGE CRUNCHER: http://www.spinwave.com/crunchers.html
HTML CODE OPTIMIZER: http://www.iwebtool.com/html_optimizer/
W3C VALIDATION SERVICE: http://validator.w3.org/
About the author: Javier A. Garcia is a successful internet marketing expert and editor in chief of more than half a dozen websites targeted to people interested to work from home and in online business resources. With years of experience in online marketing, website optimization and promotion.
Related Tags: internet marketing, online business, website optimization
Your Article Search Directory : Find in Articles
Recent articles in this category:
- How to Capitalize on Free Content From Podcasts
One of the major challenges for every website owner is generating compelling content that will - Looking for a Niche? 40 Keyword Suggestions
One of the most important steps foraffiliate marketing and Internet marketing is finding a go - 5 Benefits Of Having Your Own Home Business
There is no secret to why millions of people are flocking to the internet to start their own h - Optimized Articles Drive Traffic to Websites
Benefits of SEO ArticlesSEO Articles can help move websites up in the search engines and are o - Why You Should Be Using an Online Backup Service
Online BackupOnline backup services are relatively new but they are gaining popularity at the - FREEDOM1-PACKAGE.COM/ YOUR TOP MONEY ONLINE BUSINESSES Presents:
FREEDOM1-PACKAGE.COM/ YOUR TOP MONEY ONLINE BUSINESSES!Presents:Evaluating Your Website Traffi - 3 Bonuses To Success University's Already Stellar Program
It is not very often that you will come across a program to the likes of Success University. - Do You Like Being On Top? A Global Domains International Position.
If you like to be on top then you are just like millions of other web site owners trying to po - Internet Marketer's Dream: 8 Productivity Tips for Firefox Browser Users
Here are 8 productivity tips specifically for Mozilla Firefox users:1) SearchStatus. Set your - Why use contact forms?
For an easy communication form, individuals and businesses, use contact forms for their guests
Most viewed articles in this category:
- The Webmaster's Assistant
There are many tools available to a webmaster to analyse website traffic allowing them to monitor th - Free Webmaster Resources
The overall importance of Quality Web Development or Web Design Tools is a factor among webmast - Webmaster Staff Leasing
Some of you might be wondering what webmaster staffing means? So just to make it clear for everyone - Web Analytics - Getting It Right
Understanding and using web analytics.In recent years, website marketers were concerned with increas - 6 Steps to a More Successful Website in 2006
Another year has passed and a new one has dawned. It's an exciting time to have an online business. - Easy Content Management with Server Side Includes (part 1)
I honestly see very few websites that can really say they don’t need some sort of Content Mana - HTML Editors
If you're the typical non professional user then you are probably familiar with the more popular one - Want Your Website Visitors to Return?
If your like me you have searched on every search engine any possible way to advertise your website. - 4 Nearly FREE Ways for a Web Designer to Establish a Local Presence
Everyone seems to be a web designer these days. From your uncle’s neighbor’s nephe - Reasons why you should have a Weblogger installed on your web site.
Radhika Venkata (c).I don't know about you, but when I built my first web site threeyears back I don