Web Page Mistakes

Once you get your website or blog all setup with it’s layout, quality content and the right keywords/phrases implimented in the structure of the site and in it’s content you most likely will start looking at what is needed to create a link building strategy.

If you have done your market research and studied your target audience properly you will already know where they “hang out” and what sites they visit regularly.

Before sitting down to create a link builidng strategy there is some background information you need so you end up building links efficiently. We’ll start with the basics.

What is a Link?

A link, also called a hyperlink, uses the anchor set of tags to make the text they surround clickable. Once clicked you are taken to another page or document on the net.

The Anchor tag is used to link the current web document to others available on the internet e.g. another spot in the same document, to specific spot in another document, to a different page or file, to client’s email program or to break out of a frame. The default is to open the linked item in the same window.

HTML 4.01 Basics Simplified – Basic HTML 4.01 Tags – Anchor Tag Chapter

For example, to link to another website you would use:

<a href="http://www.thesitedomainname.com">Name of site you are linking to</a>

This is the same coding you would give someone else if they want to link to your site (with your website address in it instead of thesitedomainname.com).

What is Link Building?

Link building is when you work on the number of places on the net where there is a link leading to a page on your site. These links can be from other websites or blogs, directories, forums, ads you place, newsletters, articles you have submitted and anywhere else you can think of on the net including within your own site.

The way people find things on the net is through links therefore if you have links spread around the net you have more opportunities for people to find your site.

Link building is more than just leaving your link anywhere on the net. Where you are linked to from is also important. The search engines look at the site where the link is originating from and the text surrounding it. The sites that are of the same theme/niche that you are or a related niche are much more valuable than a link from a totally different topic. e.g. If you sell things for women then a link on a car site isn’t as good as a link from say a purse or shoe site if they sell things that complement what you sell. Think of it this way also, not too many who would interested in your things for women site are going to be hanging out at a car site, click the link and turn into a buyer. You would have better success getting targeted traffic from another women’s related site.

For example, Google says:

In general, webmasters can improve the rank of their sites by increasing the number of high-quality sites that link to their pages.

Ranking at Google Webmaster Central

Google also says the following about their PageRank system:

PageRank Technology: PageRank reflects our view of the importance of web pages by considering more than 500 million variables and 2 billion terms. Pages that we believe are important pages receive a higher PageRank and are more likely to appear at the top of the search results.

PageRank also considers the importance of each page that casts a vote, as votes from some pages are considered to have greater value, thus giving the linked page greater value. We have always taken a pragmatic approach to help improve search quality and create useful products, and our technology uses the collective intelligence of the web to determine a page’s importance.

Hypertext-Matching Analysis: Our search engine also analyzes page content. However, instead of simply scanning for page-based text (which can be manipulated by site publishers through meta-tags), our technology analyzes the full content of a page and factors in fonts, subdivisions and the precise location of each word. We also analyze the content of neighboring web pages to ensure the results returned are the most relevant to a user’s query.

Technology Overview- Google Corporate Information

Types of Links for Link Building

There are 4 basic types of links for your link building strategy:

• Internal – linking to different pages on your own site.
• Organic – you showed up in the search results and someone clicked the link
• Incoming – a link from somewhere on the net that points to your site. These show up in your website stats as referrals if someone clicked the link and arrived at your site.
• Outbound – you have a link on your site that links to another site.

All of these types of links are looked at by the search engines and count as part of their scoring system when determining how your indexed page fits the search term someone typed in the search box.

Why Create a Link Building Strategy?

If you don’t have a link building strategy in place then you will be wasting your time and effort (and money if you pay for links) by creating incoming links willy nilly all over the place.

The purpose of creating a link building strategy is to build high quality targeted incoming traffic. Placing or getting incoming links creates a visibility for your site and adds credibility to it also. Each of these high quality targeted links counts as a vote for your site.

Take all the information you gathered in your market research and when determining the traits of your target audience and start to create a link building strategy. Don’t get off track by worrying about the numbers at first. A well planned link building strategy will turn into hundreds of links from people you don’t know or have not thought about.

As part of your website maintenance plan monitoring whether your site is up (working) should be an ongoing task. One way to conduct website monitoring is to use a piece of software on your own computer (opposed to using a service).

Website Monitoring with SiteUp

SiteUp is a freeware website availability monitoring program. Just install the program, allow it to be added to the list of programs which load when your computer is started and you are set.

SiteUp monitors your web sites and warns you when any become unreachable (e.g. when a server crashes). Because it checks page content it can even detect when the server is OK, but a site or page is unavailable.

There is no limit to the number of sites that can be monitored, including secure sites, and the checking frequency can be anywhere between once a minute and once a day. When a site goes down the system tray icon will change to an animated alarm and optionally you are displayed a warning message. When a site becomes available again you can view a log to determine how long the site has been down. Free!

Xequte Software site

Setting Up SiteUp to Monitor Your Site(s)

Setting up SiteUp is pretty easy. When you open the program, a monitoring of Google.com is already there by default. This program monitors your site based on being able to read certain text on the site. If your site is not accessible, the text cannot be read therefore SiteUp logs the outage and notifies you in the System tray (those icons over on the right of your taskbar). Keep in mind, your computer has to be on if you want to monitor your sites. i.e. If you turn the computer off when not in use, then there is no access to the internet for the program to do it’s job.

On to setting up SiteUp:

1. Start the program (if not started already) by double clicking the icon it installed on your desktop.

   Activates it in your System tray.

2. Double left click the SiteUp icon in your System tray to open the program.

   Opens showing you a list of sites you have set up already.

3. Left click the Add Site button on the right.

   Opens the Edit Site screen.

4. Enter the site information
   1. The name of the site you are going to monitor.
   2. The url (website address) of the site.
   3. The text to monitor.

      Pick a piece of text that is not going to change. e.g. If you have a blog, a phrase in a post would not be a good choice because the post isn’t always going to be on the home page if that is the url you chose to monitor.

      Left click the Check site for text button on the right. If the site is reachable and you typed the text properly you will get a message confirming the site was reachable.

5. Left click the Ok button at the bottom of the screen and you are done!

Setting the Monitoring in SiteUp

Once you have setup the site(s) you wish to monitor you are taken back to the first screen. Here is where you can adjust the default settings.

1. Check site status is the first item in the Monitoring Options section. The default is to check the sites every 10 mins.

   Use the up and down arrows to the right of the box to adjust the frequencey with which to check the sites.

2. Check unavailable sites is set to 3 times by default.

   Adjust how many times to check a down site using the up and down arrows on the right of the box.

3. When a site is down you get a warning message by default.

   Left clicking the arrow on the right of the default message choice gives you the options of seeing a balloon message or have the SiteUp icon flash in the System tray.

4. Under the above 3 monitoring options are checkboxes with futher monitoring options:
   • Display a message when an unreachable site becomes available.
   • Display the log file when an unreachable site becomes available.
   • Automatically start SiteUp with Windows – should be checked
   • Always check for an active internet connection.

   Check or uncheck the items you wish to use (or not use)

Completing the SiteUp Setup

When you initially setup SiteUp it needs to check the sites in your list. Left click the Check Sites Now button down at the bottom of the screen. All your sites should have a green check mark in front of their names now (if they are up).

The last thing to do is to click the Close and Start Monitoring button in the bottom right corner of the screen.

Monitor Websites

Now that you have SiteUp setup it will run in the background checking your sites. The only time you are going to be reminded you have it running is when there is a problem connecting to the site(s).

There is a log kept so you have a record of downtime. If you notice that the site is down a lot or for extended periods of time then you have a record to present to your web hosting when asking why.

SiteUp is one way to monitor your website’s availability. If your site is down (not working) then your visitors and the search bots can’t see your site. This is a problem. You loose money, visitors and an opportunity for the search bots to index your pages.

Get SiteUp setup today. It’s free!

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

Website Speed Testing

Website loading speed has always been an important factor. If your site loads slowly the visitor isn’t going to wait, they will just move on.

Your website load speed is even more important as of April 9, 2010:

You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

Official Google Webmaster Central Blog: Using site speed in web search ranking April 9, 2010

Although this announcement is regarding general search, site speed has been a factor for AdWords clients for some time. Google has had this on their Web Performance Best Practices page for some time also.

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 analysis.

“…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 text 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