Web Page Mistakes

Whether you author a blog, own a website, are a web designer or are a web developer website testing is a must. This testing goes beyond initial testing when the blog or website is launched, it needs to be an on going maintenance task.

The website or blog does not have to be live to test it.

Static HTML Website Testing

A static HTML website can be tested from your computer by double clicking the web page file on your computer which will open the web page in your default browser.

Blog and Dynamic Website Testing

For a blog or dynamic website, you can download and install WampServer locally to run an Apache server with PHP and MySQL on a Windows machine. If your application requires a Windows server then you can install Microsoft’s IIS server locally. Note: If you are running XP Pro, the ISS server comes with this operating system, you just have to install it.

Web Space Website Testing

A third way to test the web pages is to set up a test area in your web space. You have to add instructions to your robots.txt file asking the search engine bots to stay out of this folder, so your test version is not indexed. The other alternative to robots.txt instructions is to password protect the folder.

So there you have 3 ways to conduct your website testing without launching first.

Website Testing As the Website/Blog is Built

As the website or blog is built there are various things to perfom website testing in the initial development stage:

1. HTML Code Validation

   Code validation is the task of checking the background coding of the design against the (X)HTML standard the web page is using.

   For a standard HTML website this can be done from your computer without the web page being uploaded to the web server. Just go to the W3C Validation Service and upload the page from your computer to the service, click the Check button and the validator will give you feed back complete with line number of any coding errors contained in the page.

   A blog or dynamic website can also be checked before launch by building the template as an HTML file first, validating the coding then converting this template into the programming required for the website or blog.

   Cleaning up coding errors so the web page uses standard compliant coding will make it easier for the search engine bots and those using assistive technology to surf the web to access the web page and eliminate coding issues as the cause of a cross-browser compatibility issue.

2. CSS Code Validation

   CSS (Cascading Stylesheets) are files or coding which format the look of the web page. CSS code validation is where the CSS (Cascading Stylesheets) coding is checked for errors.

   This can be done from your computer without uploading to the web.

   Go to the W3C CSS Validation Service, upload the file to the service, click Check and you will get a report back on the screen with any errors or warnings noted.

3. Screen Resolution

   What some designers forget is that not everyone has the same screen resolution. Each design needs to be tested in various screen resolutions to make sure that the web pages work in the different screen resolutions the target audience uses, not what the web designer or you use.

4. Alt Attribute

   Ensure that each image has an alt attribute. This is required if you are using XHTML coding. The alt attribute also adds to the search engine optimization of the web page, is shown when your images are taking too long to load, is shown in place of the image if the website visitor has images turned off and adds to the accessibility of the web page.

5. Correct Colour Contrast

   Using the correct colour contrast between the elements of the web page can make the difference between the website visitor staying for 2 seconds or staying and actually reading your web page. For example, if there is not enough colour contrast between the background oolour and text colour, it will be difficult to read the web page.

6. Font Size

   Selection of the correct font size for the targetted audience can be a bit challenging. Using a flexible font size will overcome this problem as the user can adjust the font size to suit their needs.

7. Uncommon Font(s)

   If you are into graphics or have an Office suite installed you may have font families that are not on every computer. There is also a difference between what fonts are installed on a Windows machine and a Mac. Limiting your font family choice to a selection that is available on most machines stops the user’s machine subsituting a differnt font when your chosen one is not available.

8. Text Alignment

   Text alignment on the web is different than in print. You have no control over how your web page will look in each browser, on each monitor nor in each operating system.

9. Heading Hierarchy

   Heading hierarchy is just as important on the web as it is in print. Proper heading structure helps your visitors scan the page, adds to the search engine optimization of the page and adds accessibility to the page.

10. Browser Specific Design

    Browser specific design is where the web page layout only works for certain browsers. Limiting your visitors to only those who use a specific browser cuts out a whole group of visitors that could spend money or improve your website’s popularity.

11. Custom Error Pages

    What happens when custom error pages are not included is that the web hosting company serves up their stock error pages. This is confusing to your site visitors because they don’t understand what happened. The 404 error page is the most used error page but you should create a custom error page for each error that might happen on your website.

12. Website Navigation

    Take a moment or two to review your website navigation system. A consistant and user friendly website navigation system will add to the usability and search engine optimization of your webiste.

13. Search Engine Friendly Design

    Does the website template use a search engine friendly design? Are the search engine bots going to see the important content on the web page first? or a bunch of links?

So we have ended up with quite a list of things to check when performing your website testing. If your site includes any programming (e.g. an ecommerce site) this should also be tested extensively

Maintenance Website Testing

Once the website is up and running you need to do website testing as part of your maintenance program.

1. Link Checking

   Over time some of the links you have included in your web page content may change or become what are called dead links.

   Link checking consists of checking all the links within your website/blog. This includes the links within your website as well as any external links you have. Each broken link needs to be corrected.

As you can see from reading this article, website testing is an on going task. It is not just limited to the development and launch stage, you have to continually perform website testing to keep your website/blog in tip top shape.

If you have done any research/studing of search engine optimization you will have heard of keywords and the keywords meta tag. There’s lots of information and opinions on how to use this meta tag. Some of this is hear say some is backed up by facts. Here we’ll present the facts.

What is the Keywords Meta Tag?

Before getting into the facts, for the benefit of those of you who are new to SEO (search engine optimization), the keywords tag is a meta tag located in the head of your web page/blog post.

When examining your web page source code, you will see a line similar to this:


<meta name="Keywords" content="Your set of keywords for the page">

Where it says “Your set of keywords of the page” above is where you are to put keywords/phrases your target audience would type in the search box when looking for the subject of your web page. Putting keywords not included in the page is considered keyword stuffing (see next section).

Keywords Meta Tag Abuse

In the beginning the keywords meta tag was abused by marketers. They would do what is called “keyword stuffing” to try and manipulate the search engine results. Keyword stuffing is when the list of keywords/key phrases are not related to the actual content within the web page. The major search engines and directories figured this out and adjusted their indexing methods to compensate for this trickery.

Google Doesn’t Use the Keywords Meta Tag in Web Search

On September 22, 2009 Google officially stated on their Official Google Webmaster Central Blog that Google does not use the meta keywords data in your web pages for their web search anaylis.

“…we received some questions about how Google uses (or more accurately, doesn’t use) the “keywords” meta tag in ranking web search results….

…At least for Google’s web search results currently (September 2009), the answer is no. Google doesn’t use the “keywords” meta tag in our web search ranking….”

Google does not use the keywords meta tag in web ranking

Note the reference web search ranking. They don’t say they don’t use the keyword meta tag for everything.

Why doesn’t Google use the keywords meta tag?

“About a decade ago, search engines judged pages only on the content of web pages, not any so-called “off-page” factors such as the links pointing to a web page. In those days, keyword meta tags quickly became an area where someone could stuff often-irrelevant keywords without typical visitors ever seeing those keywords. Because the keywords meta tag was so often abused, many years ago Google began disregarding the keywords meta tag.”

Google does not use the keywords meta tag in web ranking under the questions section

Does this mean that Google will always ignore the keywords meta tag?

“It’s possible that Google could use this information in the future, but it’s unlikely. Google has ignored the keywords meta tag for years and currently we see no need to change that policy.”

Google does not use the keywords meta tag in web ranking under the questions section

Note the phrase above It’s possible that Google could use this information in the future. They are leaving the door open to change their mind.

Why Did Google Officially Make this Statement?

Matt Cutts, Search Quality Team clears this up:

“…To this day, you still see courts mistakenly believe that meta tags occupy a pivotal role in search rankings. We wanted to debunk that misconception, at least as it regards to Google….

Google doesn’t use the keywords meta tag in web search – on Matt Cutt’s blog.

How Does the Keyword Meta Tag Affect Other Seach Engines and Directories?

There are other search engines and directories that use the keyword meta tag. For example, Yahoo! uses it:

“Use a “keyword” meta-tag to list key words for the document. Use a distinct list of keywords that relate to the specific page on your site instead of using one broad set of keywords for every page.”

How do I improve the ranking of my web site in the search results? at Yahoo!

There are software applications that also use the keywords meta tag. e.g. Site search software

Should I use the Keyword Meta Tag or Not?

Just because Google has made a statement that the keywords meta tag is not considered in their search analysis for web search results doesn’t mean you should ignore this meta tag.

It may not affect your search results in the Google search engine results but it can affect your results in the “other” search engine and directory results.

With the economy the way it is right now, new entrenpenurs are looking for ways to save money in their startup costs. Every one seems to be looking for free web hosting but they really don’t understand the cost to their business by doing this. If you are reading this after the recession of 2008-2009, the following information is still relevant as it relates to building a reputable online presence for your business. Let’s look at the cost to your business if you go with free web hosting.

Professional Appearance of Business

When you use free web hosting, your URL (the web link for you website) will look something like this:

http://website-checklist.blogspot.com/

In the example above blogspot.com is the company providing the free hosting.

If this is a business blog or website, it doesn’t give the appearance that you are serious about your business.

For a more professional image of your business, it would be prudent of you to invest in a domain name and some professional hosting.

Outgrowing Your Free Web Hosting

At some point your website/blog will outgrow the features offered by free web hosting providers.

If you move from free web hosting to your own domain with paid web hosting you don’t have the capability to upload a .htaccess file to redirect the search engines and visitors to your new web hosting space. To let the search engines know you have moved you use instructions in the .htaccess file to 301 permanently redirect them to your new location.

Also, you cannot use a .htaccess instruction to permanently redirect your visitors and search engines when you delete a page within your site.

After years of building your website/blog on free web hosting, your efforts will be lost and you will have to start over, from scratch.

Some will say you can include coding in the existing pages to redirect the visitors and search engines to the new location. But these methods do not provide a 301 permanant redirect instruction, which the search engines need.

…Use a 301 Redirect to permanently redirect all pages on your old site to your new site. This tells search engines and users that your site has permanently moved. ….

…Don’t do a single redirect directing all traffic from your old site to your new home page….

…To prevent confusion, it’s best to retain control of your old site domain for at least 180 days…

Moving your site – Webmasters/Site Owners Help at Google

Custom Error Pages

Another problem with free web hosting is that you will not be able to use custom error pages. Error pages are used by the web server to show the visitor there has been an error. For example, a 404 error is shown when a page is not found within the webspace. On a free web hosting space the visitor will be shown the web hosting company’s stock error page and give no direction as to how to find what it was they were looking for. A confused visitor will just leave.

With the right paid web hosting account, you can provide a custom error page for each type of error. This gives the visitor comfort that they are not lost (especially if they are a novice web surfer) when the error page is formatted to match your site and provides help on how what happened and how to find what it is they are looking for.

Free Isn’t Free

How do you suppose a company that offers free web hosting makes any money to run their operation? Answer: Through advertising.

Free web hosting companies need to make money somehow. They do this by inserting advertising into your page. You have no control over what advertising is shown. What if a competitor’s ad is shown or an ad inappropriate for your target audience is shown?

E.g.

Advertising

To support the service we may occasionally show Google text ads on your blog, however we do this very rarely. You can remove ads from your blog for a low yearly fee. In the future you’ll be able to show your own ads and make money from your blog.

Wordpress.com Features (way down at the bottom of the page.

Using paid web hosting you don’t have this problem.

Free Web Hosting Doesn’t Last Forever

When using a free web hosting service there is no guarantee that they will stick around. A some point, even large providers of free hosting decide to pack it in.

Case in point: Yahoo! has decided to close their 360 service on July 13, 2009. They have also decided to close GeoCities free web hosting service.

Ok, paid web hosting companies don’t last forever either but, if you have a web hosting account where you are able to download your whole site, then you are covered. You have a backup of your site that you can upload to a new hosting company and get back up and running quickly. You should backup your website each time you make a change anyways.

ISP Web Hosting

Usually when you signup for internet access with an Internet Service Provider (ISP) your package includes a small, free web hosting space. When using this type of web hosting your URL will be similar to those provided with free web hosting accounts.

Web hosting at your ISP has the same problems as described above for free web hosting.

Something else people don’t realize is that when you cancel your internet service with your ISP you loose the web hosting space (and your email address, which is a whole other problem if you have used mybusiness@yourisp.com as your business email address).

Limited Features with Free Web Hosting

Free web hosting accounts have limits on what you can and cannot do. You are limited to the features provided by the service.

Some paid web hosting accounts have limits too. If you create a checklist before signing up for the account then you will be aware of the limits of the plan. These limitations are generally less confining that those at free web hosting service providers.

Official Google Webmaster Central Blog: Recommendations for webmaster friendly freehosts has some points you should ask your free hosting company before signing up.

You Can’t Take Your Website Template With You

Free web hosting accounts are attractive to new business owners because they generally include free website templates and other website related features.

Some paid web hosting providers also provide free website templates and features.

The problem with the free website templates, graphics, ecommerce software, etc. is that you can’t take it with you. Read the terms of service from the hosting providers. Somewhere in there it will say you cannot use their materials elsewhere.

You are better off paying for either a website template you own or hiring a professional web designer to design your website. Both of which can be tweaked to provide a search engine friendly design, improved website navigation, and personalized feel for your busines or blog.

Free Web Hosting Is a Misconception of Economizing

Those that consider free web hosting is a good way to economize for their business/blog are not seeing the bigger picture.

Yes, initially we all have to save our pennies when starting a business but to economize on web hosting, domain name registration and web design at the start of your business is going to cost you money in the long run:

• Not a way to give a professional appearance to your business
• Problems moving the site/blog when you get bigger
• Lost incoming links from those who have added your site to theirs
• Having to redesign the site if you move to paid hosting.

Give your new business/blog a good start by investing in a domain name, paid web hosting and purchased web design. In the long run it will be worth it.

Creating a browser specific design which uses browser specific tags, scripts and stylesheet selectors will create problems for your visitors who are not using the “right” browser.

Today we have Internet Explorer, Firefox, Safari and the new kid on the block, Google Chrome all fighting to be the most popular browser used by Internet users. This “Browser War” is similar to the early years of the Internet when Internet Explorer and Netscape were battling to do the same thing. The current battle of the browsers requires understanding how each browser interprets the HTML elements of a web page. In the past, it was a battle over using browser specific tags (elements) to create a more exciting browser.

These browser specific design techniques still are present on the Net. Whether it is a web page that uses browser specific tags, scripts or stylesheets or the web designer favours one browser over the other.

Where Did Browser Specific Tags Come From?

In the early days of the Internet there were two main browsers battling it out, Internet Explorer and Netscape. You may still see on older sites images saying:

Best viewed with Internet Explorer

or

Best viewed with Netscape

During this particular “Battle of the Browsers” each browser decided to create HTML tags (elements) that only work in their browser. This was an attempt to sway browser users over to their browser because of the special features it had. At that particular time, web designers either used a browser specific design or they had to do everything twice (Internet Explorer version and Netscape version) and use a script to determine which browser the visitor was using.

Even today you can find HTML tutorials, HTML editors and online HTML editors that still use these browser specific design techniques.

Today you can still find “Best Viewed With …” notes on web pages but now it is Firefox verses Internet Explorer.

What are Browser Specific Tags?

Browser specific tags (elements) are HTML elements that only work in a specific browser. For example, the marque set of HTML tags is specific to Internet Explorer. If a web page uses this set of tags, the marque text will not show when the visitor is using Netscape, Firefox or any other browser other than Internet Explorer.

Likewise, the Netscape blink set of tags only work in Netscape.

Netscape is gone now so if your web page design uses Netscape specific tags, those elements won’t work.

Here’s some lists of browser specific design elements:

• Netscape specific tags
• Internet Explorer specific tags

An even better way to determine if the HTML elements you are using are cross-browser compatible is to check the list of HTML elements in the HTML specification. Note: If you are coding for XHTML you can still use these references as HTML 4.01 forms part of the XHTML specification.

Browser Specific Scripts

Browser specific scripts have the same problem as browser specific tags, they don’t work in the “other” browsers.

You can tell if the script you selected to use is browser specific by testing the web page in different browsers. If it does not work in all browsers, then it was written for a specific browser.

There is something called the Document Object Model (DOM) in play here. It’s a complicated subject to cover in this article but surfice it to say, Internet Explorer has it’s own DOM that the other browsers do not understand. If the script you choose uses the objects not listed in the Document Object Model (DOM) Specifications then it’s probably written using Internet Explorer specific DOM.

Browser Specific CSS (Cascading Stylesheet)

Just like browser specific tags and scripts, using browser specific CSS will cause problems in other browsers.

Over the years, there have been various Internet Explorer CSS workarounds (a.k.a. IE hacks) used.

These workarounds came about because Internet Explorer hasn’t always followed the W3C specifications. Now, Internet Explorer is coming closer to following these specifications so over time, these workaround hopefully won’t be required.

You do need to be careful when using these workarounds. As Internet Explorer works closer to being standards compliant, those workarounds you are using just might not work in the future. Example: There were a lot of workarounds used while IE6 was around. When IE 7 came out, there were a lot of web pages broken because of the hacks included to manipulate IE6.

Browser Specific Design Problems

If the web designer chooses to use a browser specific design:

1. It just might not work in the other browsers
2. You stand the chance of annoying potential customers if they can not use your website.
3. There is a higher maintenance cost involved as the browsers change.

To combat browser specific design problems, test your website in a many browsers as possible, old and new. Running each web page through the W3C’s HTML validator and CSS validator will help find browser specific elements and CSS techniques. While you are testing the web pages, and if they have scripts on them, you can also test for scripting errors.

The font size set for a web page can make it readable, usable and accessible, or not.

“A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per “page” for actual content, sometimes results in the use of unreasonably small font sizes.

Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.”

Care With Font Size – W3C Quality Assurance Tips for Webmasters

Setting Font Size

Older HTML editors set font size using the font pair of tags. These tags have been deprecated. The correct way now is to set the font size for your web pages in the stylesheet.

To set the general font size for your web pages you set the size in the body selector of the stylesheet. e.g.:


body {
  font-size: 100%
}


Size: respect the users’ preferences, avoid small size for content

As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user’s preference. Use this as a basis for your font sizes, and avoid setting a smaller base font size
Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of “fine print.”

Care With Font Size – W3C Quality Assurance Tips for Webmasters

This same article goes on to explain that setting the font size to a fixed size is not advisable for screen display (the browser). With a fixed sized font:

• The user cannot adjust the size of the font within the browser to suit their needs.
• A fixed font size can make the web page content inaccessbile and/or unusable to the visitor.

Once you have set the base font size in the body selector, other HTML element font sizes can be adjusted using:

• a percentage. This will take (or increase) the font size for the new element setting based on the original size set in the body selector.
• Using absolute sizes as defined by the CSS specification. These include xx-small, x-small, small, medium, large, x-large, and xx-large.
• Using relative sizes, larger and smaller.

Don’t Set the Font Size Too Small!

Even if you follow the guidelines set out above, don’t set the base font size of your web documents too small. Website visitors are impatient. If they can’t read your web page on arrival, they will just move on to another website.

This point isn’t just about making your website accessible, people with perfectly good vision will leave the website also.

With so many different sized monitors around and different resolution settings available, there’s just no way you can guarantee that a visitor will have the same set up as you (or your web designer). Making the font size adjustable based on the visitor’s settings is one way to keep the visitor.

Adjusting Font Size

In your browser, you can adjust the font size of a web page if the font size is set as an adjustable size.

In Internet Explorer, left click View, Text Size in the menu bar to see the choices you have for increasing or decreasing the font size on a page.

With other browsers (e.g. Firefox) the user can do the same thing only in smaller increments.

If your font size is adjustable, those visitors who find your web page text a bit too small have to opportunity to use these tools to adjust the text size.

Also with adjustable font size, the size is relative to the user’s settings, meaning if they have a vision problem, they have already adjusted their screen resolution and/or browser settings to suit thier needs. Problem solved, they can read the page when they arrive.

Now you are going to say, but Internet Explorer now has the zoom tool down in the bottom right of the browser window. My reply: What about those who do not have IE7 or newer? What about those who don’t use Internet Explorer? What about those who use mobile devices to surf the web? What about those who have to use assistive technology to read your website?

Don’t you want everyone to be able to view your website?

Further Reading on Font Size

5 Simple Ways to Improve Web Typography

Font Resizing Guidance

Which text alignment do you use on your website? Left, right, center or justified? Did you know that text alignment can affect how easy it is to read a web page?

Text Alignment

Text alignment refers to how the lines of text on the page line up. There are four basic ways to align text on the web:

1. Left
   • Default setting when text alignment or the direction of text is not set on a web page.
   • Default setting for languages read top to bottom, and left to right.
   • Each line of text is even with the left margin.
   • The right edges of left aligned text are jagged.
2. Right
   • Default setting if the direction of the language used on the web page is right to left.
   • Each line of text is aligned with the right margin.
   • The left edge of right aligned text is jagged.
3. Center
   • As the name implies, the text is centered on the web page.
4. Justified
   • Both the left and right edges of text in a line are even against the left and right margins.
   • The words are spaced out to fill the line of text.
   • Most commonly used in newspapers and other printed media.

One more note about test alignment on a web page:

The text-align property is inherited. All block-level elements inside a div container, for example, will inherit the alignment set for the block-level element. e.g.


<div class="centered">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis
nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
<p><img src="images/picture.jpg" width="100" height="100" alt="My picture alt text" /></p>
</div>


Will all be centered in the div container.

Alignment on the Web vs Other Mediums

Text alignment and spacing on the web is not as precise as it can be in other mediums, e.g. print

Unlike print and other mediums, having absolute control over how a web page looks in every browser and on every computer is not possible. You can make a web page not break and look acceptable in the different browsers but you can’t be as precise as you can with print and other mediums.

On the web, you have no control over what browser or computer a visitor will be using.

Setting Text Alignment

The most familiar way to align text is the old way of including align=your setting in an HTML element tag. This old method has 2 problems:

1. If you try to validate your HTML coding using a Strict DOCTYPE declaration or Transitional DOCTYPE declaration when using XHTML, you will not pass. The align=your setting attribute was eliminated in HTML 4.01.
   

   “align = left|center|right|justify [CI]
   Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context.”

   Alignment, font styles, and horizontal rules in HTML documents – 15.1.2 Alignment of the HTML 4.01 Specification

2. Using this method will not let you format the text in other ways without adding a bunch of additional coding.

To set text alignment for an HTML element, you use a style in your stylesheet.


.centered {
  text-align: center;
}


In your HTML element you specify the style:


<p class="centered">Text in paragraph</p>


Which Text Alignment to Use?

Text which is centered is hard to read. Your eye has to find the beginning of the next line. A whole page or section of a web page with centered text is considered not a professional looking layout.

Some will use left aligned text with centered headings. This is also hard to read as it forces the reader to look for where the heading(s) start.

Justifed text is not implemented on the web in the same way software for printed material adjusts the text. On the web, additional spaces are added between the words to force the line to fill to the left and right margins. Web pages do not add hyphens like other software will to break up the text more evenly.

The best text alignment for the web is left aligned. This makes the web page easy to scan (which people do on the web), is easier to read and the words are spaced evenly.

More Reading on Text Alignment

Alignment at Web Style Guide.

Text/Typographical Layout at WebAIM

How often have you gone to a website, clicked a link and it is broken?

There various tools available to find broken links on your own website. Some are free, some are browser plugins and some are part of a paid software package.

What are Broken Links?

Broken links are hyperlinks in a web page that lead to a non existant page or website. If the website still exists, you will end up at a 404 error page. If the website does not have custom error pages, then you will see a web server error page. When the website does not exist any more, you will see a browser error page.

Why is it Important to Find Broken Links?

It is important to find broken links on your website to:

• Stop loosing visitors or sales because they cannot get to other pages on your website.
• Become a reliable resource for additional information on your product or subject.
• Get all your pages listed in the search engines.

How Do I Find Broken Links?

To find broken links on your website you need to use a link checker. There are various ones available, but we’ll explain the free W3C Link Checker.

To use the W3C Link Checker your website needs to be on a web server.

Once you enter the URL (web address) of your website, you have the choice to just check one page or a number of pages. To check a number of pages, put a check in the box in front of “Check linked documents recursively” and then enter the depth of the website to check.

It may take a while to see the complete results, but when finished there will be a list of links checked and which ones are broken. The W3C Link Checker shows you which page the broken link is on, make a note of it.

The list of broken links could be links to pages that do not exist anymore, websites that do not exist anymore or links you have coded incorrectly.

Fix Broken Links

Once you have a list of broken links, you need to fix these. How you fix the broken links will depend on how your website was built. A regular static web page can be fixed using a plain text editor or the HTML editor that was used to create the page. A dynamic website (one that uses a database) might be a little harder to fix, depending where the link is stored.

How Often Should I Find Broken Links?

As a regular website maintenance task, this should be done once a month. It doesn’t take long to do if you keep it up. You should also test a new page you have just added to the website for errors.

Taking the time to find broken links will improve your website visitor’s experience and improve your results in the search engines.

Further Reading on Find Broken Links

Google Webmaster Tools has added a feature where it shows you broken incoming links. You can use this information to correct your own mistakes and see incorrect links others are using to link to your website.

Using the information provided by the Google Webmaster Tools feature, instead of the visitors arriving to a 404 error page served up by your web server, you can use your custom error pages to avoid loosing the visitor or a 301 permanent redirect and get free links to your site.

Heading hierarchy on a web page is little hard for some to understand. In this article, we’ll try to clear up the confusion by comparing heading hierarchy in a web document with how you use headings in a printed document.

In web page coding there are heading tags H1 through H6 available to format the headings in the web page. H1 is the largest, H6 is the smallest. Just like an article printed on a piece of paper, the default size of the heading represents the importance of the heading. These sets of HTML tags are meant to define headings in the page, not to format just any text on the page.

Let’s take a different approach to understanding the heading hierarchy in a web page. People usually use a book as an example, but we’ll use a one or two page document you are writing for, say, a school assignment or a report at work.

Web Heading Hierarchy vs Print Heading Hierarchy

If you open up Word and start a new document you will see that the default blank document has some formatting already in place. Click the arrow beside where it says Normal in the toolbar and you will see some heading formatting already set up. Notice how the font size gets smaller as you move from heading 1 to heading 2 to heading 3. This creates a heading hierarchy within the Word document. The heading tags on a web page also decend in size by default, H1 is the largest, H6 is the smallest.

Heading 1

Because we are writing an article, the title of the article would use heading 1.

Heading 2

Each main section of the article would use heading 2.

Heading 3

Now if you had sub sections within the main sections the first one would be heading 3.

Heading 4, 5 and 6

If your sub section required further headings, then the first one after heading 3 would be heading 4. The next heading within this sub section would be heading 5. The next would be heading 6.

Headings in Descending Order of Importance

When you write an article to be printed on paper, the reader expects some kind of organization (hierarchy) of headings to break up the article and show how the headings relate to one another.

If all the headings look the same by giving them the same heading formatting, wouldn’t you find it confusing where one section of discussion ends and another starts and how each section relates to another?

It would be much easier to read an article that has definite heading differences showing how they relate to the heading above.

Courses which teach you how to study better tell you to look at the headings in the table of contents and within each chapter of your textbook to get a feel for what each chapter is about.

It is ok to mix up heading levels, as long as they show the hierarchy of the document. One main section may just have heading 2, the next main section might need heading 2, 3 and 4 to clarify the subsections. That’s ok.

What makes it difficult to read something is when you go from heading 2 and it’s subsection uses heading 4. The reader will wonder what happened to heading 3.

If you were to take out all the words and just leave the headings, does the resulting table of contents type layout make sense? This is the goal of using heading hierarchy properly. When you take the words away, can the reader get a sense of what is covered.

Heading Hierarchy on the Web

Heading hierarchy works the same way on the web as it does in print. Web users are generally in a hurry so they look for headings to see if they want to stop and take the time to read the whole web page. Web users also skim in search of what they specifically are looking for. Having a heading hierarchy will help them find what it is they are looking for.

The heading tags available in HTML should not be used as a means to format something that is not a heading. This messes up the heading hierarchy for the search engines and those who use technology to read web pages to them.

The default format of heading tags might not match the style of your web page. This can be altered by using the heading selector in your stylesheet and setting the formatting to match the look of your web page. Using a class (e.g. .heading1) in the stylesheet does not set the heading hierarchy correctly. You need to format the actual heading selector (h1 for example) in the stylesheet to retain the web page heading hierarchy.

Proper Heading Hierarchy

Using the proper heading heirarchy on your web pages adds to the legibility of the web page, improves your search engine optimization and adds to the accessibility of the page.

According to a survey by WebAIM of over 1100 screen reader users, 52% navigate by using the headings.

From the WebAIM survey:

The responses to this question provided one of the greatest surprises to us. It is clear that providing a heading structure is important to screen reader users with 76% always or often navigating by headings when they are available. Use of heading navigation increased with screen reader proficiency with them being used always or often by 90.7% of expert users, 79.3% of advanced users, 69.9% of intermediate users, and 55.4% of beginners.

Further Reading on Heading Heirarchy

Video: Importance of HTML Headings for Accessibility – from a blind person’s point of view.

Heading Structure – Heading Tag

Have you ever clicked a link to only end up at a page that says that the page does not exist? This is a 404 error which means the link you clicked (or typed) is incorrect, the website was revised/renovated and no redirects were put in place or that the website owner has deleted the page without redirecting you to another page.

If your website hosting has not been set up with a custom error page, the visitor will be sent to a generic web host error page. This is very confusing for the visitor as they won’t know what to do next.

404 Error and Search Engines

If you have a bad link to a non existant page on your website (from another website or the search engine results) this can be bad news for potential visitors who have found you in the search engine results. The search engines find the link(s) in their index from visiting websites who have linked to your website or crawling your own web pages.

404 Error – Google

The Official Google Webmaster blog decided to help webmasters out by explaining 404 errors through the week of August 11, 2008. Here’s a list of the posts as of this writing:

• It’s 404 week at Webmaster Central – the announcement of Google’s 404 error series. This initial post covers how error response codes work.
• Farewell to soft 404s – explains soft 404 errors (when your web hosting error page is served up on error) and returning a 404 response code (showing your custom error page when there is a 404 error).
• More on 404 – Answers to questions Google receives about the 404 error.
• Make Your 404 Pages More Useful – Explaination of Google’s Enhance 404 Pages web page widget available through Google’s Webmaster Tools.

The posts at Google Webmaster Central blog include pictures to help you understand how 404 errors work. Check out all their posts on crawling and indexing.

404 Error – Yahoo!

Page Not Found Error Handling – Information from Yahoo! on handling 404 errors in Yahoo! Stores.

“You’re still crawling URLs that I removed ages ago.” – information from Yahoo! Search Help on handling a 404 error.

404 Error – Live Search

Live Search Releases Web Page Error Toolkit – this is an asp.net application for IIS servers.

Customize your 404 error pages with the Web Page Error Toolkit – more information on the Live Search Web Page Error Toolkit.

Bing

Fixing 404 File Not Found frustrations (SEM 101)

If you have done any research on social networking, podcasting or the use of videos to attract readers to your website or blog, you will find that podcasting and inserting videos into the web page/post is highly recommended as a marketing tool.

Today in Glenda Hyatt Watson’s Accessibility 100 series she brings up a very valid point: Using Transcripts to Increase Your Audience.

Marketers tell you to use podcasts and videos to attract visitors to your website or blog, right? So why don’t they suggest including a transcript of the podcast or video to accommodate those who cannot listen to your podcast/video or see it? You are missing out on a whole section of the internet users.

The Internet has opened the lines of communication to so many people with disabilities or who are otherwise shut in. Why not make it so your podcasts and videos are reaching all audiences?

As an example of what can be done, Darrell of Enabling Abilities to Appear explains using a podcast how to create a transcript and then provides the transcript, How to Create a Transcript for Podcasts.

What a great way to cover your bases! Using podcasts, videos and transcripts to reach all audiences. Not only do you provide accessibility to your website or blog, there’s a copy of your presentation for those who prefer to read your presentation. Great marketing solution!

This isn’t a new idea. UIE Brain Sparks also provide transcripts for their podcasts.

From Google Videos:

“Users will be able to find your video more easily if you add a transcript to each video file you’ve uploaded via your Video Status page. …”

Google Video Submitting Transcripts

Video Search Engine Optimization Tips and Techniques also suggests that you provide a transcript for your visitors and the search engines.

“Many videos on the net simply aren’t seen because they cant get discovered. This can be due to lack of promotion, search engine optimization or effort on the part of the creator. But adding closed captions to a video may be one way in which to get some additional traffic to it as well as make the video accessible to those without sound-capable PCs (e.g. many office workers) or those with hearing impairments. Using translation techniques to provide multiple language captions can also drive additional traffic to your content from non-English speakers….”

Video Accessibility, Closed Captions, & Video SEO

This is yet another demonstration of how easy it is to make a website or blog accessible which also improves the usability and search engine optimization of your website or blog.