Choosing a Content Management System

Choosing a content management system is hard for someone who is not familiar with any of the aspects of web design or web development. It is a challenge to make a decision on which content management system best suits your organisation’s needs. There is no best solution available on the market, each system has it’s strengths and weaknesses. After reading this article you will be able to make a better informed decision on what content management system is best suited for your organisation’s needs.

In frustration with the number of content management systems that are available for free, for sale or through rental/lease and their tactics to sign up uninformed users for systems that just are not well constructed, not search engine friendly or portable I have listed some very basic testing points you can bring up when talking to a sales rep for the company.

First of all you have to understand the basics of how a content management system works. Once you have a handle on how the system works the selection process of a content management system will seem much easier.

Requirements of the Content Management System

Laying out the business requirements of the content management system on paper will help you assess the different content management systems available on the market and provides the vendors (if you are going to tender the development of the system) a way to quote on the type of programming and technologies required for the project.

Note:  With a number of years of tendering projects used by general consumers behind me, I strongly suggest you do your homework so you are an informed consumer and can compile a specific specification as to what is required of the project. A vague set of tender documents will result in a vague tender submission by vendors. They will catch you on any and all loop holes/incomplete specifications resulting in you paying way more than the contract price through extras.

You have been warned. I don’t want to have to say “I told you so.” End of lecture, let’s more on.

Meeting Content Management System Needs

Your specific organization may have some specific needs like minimizing legal risk, eliminating security risks or specific recordkeeping requirements.

The World Wide Web Consortium (W3C) is the body which creates the standards for web documents. They write the specifications that web designers/developers and browsers are to follow to create standardization throughout the web.

The content management system developers should have tested their product before public release for compliance with the following:

  1. Code Validation

    The site produced needs to pass the W3C validation service check. Some companies will say it doesn’t matter but it does. Coding that is done correctly and to the latest standards will migrate to future technologies better, will be cross browser compatible and with further care will be accessible.

    Insist on standards compliant coding to at least Strict compliance with the latest (X)HTML standard.

  2. Stylesheet Validation

    The stylesheet contains the coding for the presentation (look) of the website. There are standards for this also.

    The current HTML and XHTML coding standards require that all presentation attributes (formatting) be moved to an external stylesheet (separate file). Not only does this make it easier to make site wide changes (say changing the colour scheme from red to blue), it gives the website leaner coding and reduces download time of a web page.

  3. Link Validation

    Links are how people and the search engines move from page to page within the website. Links can also take one to offsite resources.

    Some navigation systems use a programming format called JavaScript. Search engines do not read JavaScript plus some people turn off scripting as a security precaution. JavaScript based navigation also creates an accessibility issue.

    Another system of navigation is to use images. Search engines and devices used to read web pages to the visually impaired cannot read images. If the navigation system is image based then there needs to be some regular text links on the page also to supplement the image navigation.

  4. Hidden Links and Redirects

    Hidden links and redirects not done properly are also a problem. Google specifically tells webmasters not to use them.

    • Avoid hidden text or hidden links.
    • Don’t employ cloaking or sneaky redirects.

    Reference:   Webmaster Help Center – Webmaster Guidelines – Quality Guidelines

  5. Accessibility Check

    Accessibility of a website is important not only from a legal point of view but also from a business point of view. If you or your web design team do not feel this is an issue then read Does Your Website Have to be Accessible? to see why this is important.

    There are accessibility guidelines in place. Each country has it’s own set of guidelines plus local government may have also adopted further guidelines.

General Website Setup Checks

Robots.txt File

Within the file system of a website there can be a robots.txt file. This file is used to give instructions to the polite search engine bots (not all search engine bots are polite) which files they are to avoid adding to their index and which folders to stay out of.

If the robots.txt file is not constructed correctly this can be harmful to the success of the website being indexed by the search engines (added to their database).

This is something you should be aware of for future reference once you have the website setup.

WWW vs Non WWW Version of Domain

In the browser address bar people can type a website address with or without www. at the front of the web address. The internet is setup so either way will take the visitor to the website. This is a problem as far as search engines are concerned. Having the www and non www versions of the website available to the search engines creates duplicate content.

If the hosting has been setup properly a permanent redirect (instructions for the search engines) will be in place to tell the search engines to go to one of the versions of the website. You have to decide which version of the website you want to promote and tell the hosting to permanently redirect the other version to the selected one. Only permanent redirects are acceptable for the search engines.

Search Engine Friendly Links

Most content management systems are database driven. The programmer who built the system may have created links that contain variables and other information to tell the database what information to fetch. The problem with this is search engines don’t really like anything that stands in it’s way of accessing a web page. Google specifically addresses this issue in their Webmaster guidelines:

…If you decide to use dynamic pages (i.e., the URL contains a “?” character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them few….

…Allow search bots to crawl your sites without session IDs or arguments that track their path through the site. These techniques are useful for tracking individual user behavior, but the access pattern of bots is entirely different. Using these techniques may result in incomplete indexing of your site, as bots may not be able to eliminate URLs that look different but actually point to the same page…

…If your company buys a content management system, make sure that the system can export your content so that search engine spiders can crawl your site….

…Don’t use “&id=” as a parameter in your URLs, as we don’t include these pages in our index….

Reference:   Webmaster Help Center – Webmaster Guidelines

What all the above is basically saying is that a link that looks like this:

Backing up Your Website

is better than one that looks like this:

http://www.webpagemistakes.ca/category/index.jsp?categoryId=1331604

There is also a problem with a system that uses only one page to present the website content. If you click links on a page and the address in the browser address bar remains the same (e.g. index.asp) then the search engines are not going to find all the other pages on the website. To the search engine your website only has one page, index.asp.

Adjusting for Different Screen Resolutions

Website designs can be fixed width (a predetermined width set in the background coding) or liquid (fluid) design (adjusted to different screen resolutions and font settings).

For an explanation of how this works read Not Designing for Most Common Screen Resolution . The instructions on how to test a web design for different screen resolutions are also within the mentioned article.

Summary on Choosing a Content Management System

This article has covered some basic criteria that you should look for before narrowing down your selection of a content management system. This only scratches the surface of the many things to consider when selecting a content management system. Other issues include (but are not limited to):

  • Server operating system

    A system on an Apache web server can be easier to work with than a Windows server.

  • Whether each page can have it’s own web page title, keyword meta tag and description meta tag.

    Some search engines base your placement in their results on what information is in these areas. Having the same web page title, keywords and description on every page will appear as duplicate content in some search engines eyes.

  • Website design and database ownership

    With a hosted plan (content management system and hosting are one package) usually the company that provides the content management system retains ownership of the web design and the database structure. This means if you decide to move the website to another location you will have to start from scratch, you can’t take the design or database with you.

    A purchased content management system could be bound by the same rules as a hosted system so make sure you read the fine print before purchasing a system.

  • Access to the website files

    Most hosted content management systems do not allow you to have access to the files that create the website in the background. This means if you or you web designer have the knowledge to improve the background coding for search engine optimization and code validation you can’t access the necessary files.

  • Website backup

    Website backup is an issue you also need to address. What if the hosting company servers break down? How will you have a backup of the website to restore? For more information on website backup read Backing up Your Website.

After spending hours on research looking for an out of the box solution for customers I have yet to find a solution that does not require some tweaking (if you can).

To me a solution that you take ownership of the content management system either through purchasing the software or through the open source community (free solutions that you can customize with some limitations sometimes) is the most viable solution for content management. Some tweaking will be required but at least you own the website and your work to create the website is yours.

For further information or an evaluation of the content management system you are considering please contact Accrete Web Solutions.

Further Reading

Want another opinion? Other articles which also cover the complexity of choosing a content management system:

Redefining content management  Another look at the complexity of choosing a content management system.

Choosing an Accessible CMS a review of some of the more popular content management systems and how accessible they are.

14 Key Requirements For A Search Friendly CMS

How a Content Management System Works

Before selecting a content management system some basics on how a content management system works will help you to better understand what to look for when assessing the choices available. A basic content management system is comprised of templates, a programming language, a dashboard and a database.

Content Management System Templates

Content management system templates are a series of files that contain the basic layout of your website or blog. These files are used in conjunction with the selected program language and a database to produce what you and your visitors see.

A template system for the content management system can contain a number of files for different situations (slight layout changes for different circumstances), the different sections of the page (head, navigation, footer), member login (the gateway into the members only section of the website), the members only portion of the site, and the stylesheet(s) (files that contain the presentation formatting of the website).

Content Management Programming Language

A content management system uses a programming language to fetch the information stored in the database, format it and then present it to the viewer.

There are various programming languages that can be used in the background of your website. The most common for hosted, purchased and open source content management systems are PHP and ASP.NET (or ASP).

PHP Programming Language

PHP is an open source programming language bound by it’s Open Publication License. It is usually used on a web server that has Apache server software installed on it.

ASP.NET Programming Language

ASP.NET ( or ASP) are Microsoft programming languages. These programming languages have to run on a Windows based server.

Something to consider when selecting which programming language is best suited for your website is that Apache server hosting costs tend to be less than Window server hosting costs.

Content Management System Dashboard

The dashboard of the content management system is where authorized users (people authorized to make changes to the website) make changes to the website.

Depending on the business requirements of the website the number of tools available to the user is based on their level of authorization (different people can have different levels of permission to make changes). This is the area where content is added to the website, changes are made, information is manipulated and general maintenance of the website is done.

Dashboard features to watch for when selecting a content management system are:

  • Ability to enter individual page titles.

    Search engines use these when listing your web page in their results.

  • Ability to enter individual sets of keywords for each page.

    Some search engines use these when indexing web pages.

  • Ability to enter individual page descriptions.

    Search engines use these sometimes when displaying the web page in their search results.

  • Ability to access files directly.

    Some content management systems are not coded for optimal search engine results. Access to these files will enable a knowledgeable person to fine tune the background coding so it is search engine friendly.

  • Ability to add content to each page.

    A shopping catalogue feature is included with or available as an addon with some content management systems. You need to be able to add different content/descriptions for the summary pages as well as the individual product pages.

  • Ability to backup the website and all data for storage elsewhere.

    As a safe guard against human error and web hosting server breakdown the ability to backup the website and all it’s data is an important feature. Some hosts will say they backup daily but to be sure you do not loose all your work and information you should be able to backup the website to a location off of the web hosting server.

These are a few to the more critical features to look for in the dashboard of a content management system.

Content Management System Database

A content management system is usually run using a database. There are different databases available and some are only compatible with certain operating systems (online and offline). The site might also use what is called a flat file system (a text file containing database information without any program specific formatting that can be used by and manipulated by other applications).

MySQL Database

MySQL is an open source database. It is usually used in conjunction with PHP but can be used with different platforms.

Microsoft SQL Server

Microsoft SQL Server is a Microsoft product that like ASP.NET needs to be run on a Windows based server.

Flat File Database

A flat file based content management system uses a text file to store the database information. The information is sorted in lines with a delimiter (comma or space for example) between each part (or field) of information.

The ability to export the traditional database into a flat file (.csv) would be something to consider if the website information is used off line as well.

So, before selecting a content management system decide on what template design you wish to have (custom graphics or whatever comes with the system and the page layout), the programming language that best suits the organization’s needs, what dashboard features are important beyond the specifically noted ones above and which database is required.

Once you have educated yourself on the basics on how a content management system works you can may a more informed decision of which content management system best suits your organization’s needs.

Does Your Website Have to be Accessible?

Accessible websites have come to the forefront of people’s minds with legal actions being taken against websites that are not accessible. As a website owner you may think this doesn’t affect your small business, association or non profit website but it does. Let’s take a look at accessible websites beyond the buzz word accessible, the legal requirements of having an accessible website and legal repercussions if you don’t.

One thing to keep in mind when talking about an accessible website and people with afflictions that impede their life is that the subject is not limited to one particular group. There are various types of afflictions, both prominent and not so prominet, to consider. Someone who has trouble seeing due to aging or a disease would have a vision problem as well as a person who is blind. Motor skill disabilities are not limited to those who are born will motor skill problems, they could happen with age, an accident or disease also. There are also hearing, colour blindness and comprehension issues that affect any type of people.

Accessible Technology

With the advancement of technology those with afflictions that have in the past made them feel they are house bound or dependent on others have a greater access to the sense of freedom and independence than they once had. They no longer have to rely on others for the most part in their day to day life. There are still some barriers to over come but generally they learn to carry on life much like you and I. Their needs and wants are just the same as a person that does not have a disability.

Along came the Internet. What a marvellous tool for those who have some kind of disability to use! They no longer have to rely on someone else to take them shopping, to the drug store or anywhere else that has a website. They can learn at their own speed without worrying about keeping up with the rest of the class to fulfill their dreams at their own pace. No longer do they have to feel shut in, the world is only a few keystrokes away.

I spoke of some barriers still to be over come. One of those barriers is inaccessible websites. Those with disabilities still enjoy the same things as those without disabilities. They also have money to spend, just like you and me.

Can your business (or client’s business) afford to turn away any customers?

Making Your Website Accessible

Most small business websites are not that fancy and high tech that the cost to make the website accessible will be that much.

Constructing Accessible Websites

Constructing basic accessible websites is not that hard and should not be expensive. If the website coding complies with the strict version of HTML 4.01 or XHTML you’d be amazed how close to an accessible website you will be. With a few further tweaks to cover colour blindness, and navigation issues you should have a basic accessible website.

There are also the Web Accessibility Initiative (WAI) guidelines that you and/or your web designer should follow. Your specific country may have already adopted their own accessibilty laws.

Incorporating all of these into the construction of a website will not only make your website accessible it will help your business grow.

Benefits of an Accessible Website

As mentioned above, there are all types of afflictions that make accessing a website difficult for all different types of people. Visitors to websites are from all walks of life.

Having an accessible website benefits you and your visitors by:

  • having leaner background coding for the browser and technologies that assist in visiting a website to get through.
  • leaner background coding helps to improve download speed of a website.
  • the little bit of extra features added to a website to make it accessible also improves the usability of the website.
  • broadening the website visitor base to beyond the expected targeted audience.
  • using leaner coding and the techniques for accessible websites you can also improve your search engine results.
  • using a clear heading structure benefits those who use a device to read the website so they will understand how the content flows and those who can see the website can find the key areas they are looking for.
  • using image alt tags properly will assist those who have images turned off, are using a speech reader to read the web page to them and can improve the search engine optimization of the web page.

Accessible Web Design

Can your website afford not to incorporate an accessible web design? If your answer is yes then think of it this way, you may be on the other side of the fence some day because of an illness, an accident or just from getting older. How would you feel if your shopping experience or general enjoyment of the Internet was limited because you couldn’t use a website?

Accessible web design is not a new fad. It’s here to stay. As groups for those with afflictions take on accessibility issues that are not addressed on websites they will gain ground.

With accessible web design everyone benefits, you get more visitors, your website gains popularity because it works for everyone, you get more sales and those with disabilities enjoy the same benefits of the internet as those without.

Further Reading on Accessibility Issues

Accessibility for blind people  An interview with a Japanese computer programmer about accessibility for blind people. Very interesting. Explains braille display and speech readers.

Why Web Accessibility Makes Sense  An online presentation of why having an accessible website makes sense by Accessites.org. Shows the value of web accessibility, why it makes sense and why it is a must-have for any website.

Some large retailers are moving to more accessible websites:

Not Designing for Most Common Screen Resolution

As a website owner or web designer you have to take into consideration what are the most common screen resolutions for the intended target audience of the website to determine what web page width is suitable for the website.

Have you visited a website that has a web page width too wide for your monitor or browser window? You have to use the horizontal scroll to go back and forth reading and/or looking for information on the page. This makes reading the website very hard and can be very annoying if the website has some information the visitor is interested in.

First, let’s get an understanding of what screen resolution is.

Screen Resolution Explained

“resolution
hardware – the maximum number of pixels that can be displayed on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels), i.e., 1024×768. The ratio of horizontal to vertical resolution is usually 4:3, the same as that of conventional television sets….”

Free Online Dictionary of Computing

When someone refers to screen resolution they express it width x height. e.g. 1024 x 768

Let’s use a screen resolution of 1024 x 768 to explain further. The 1024 number is the width in pixels. In our example, the 768 number is the height in pixels.

You can test the screen resolutions available for your monitor on the fly.

The higher the screen resolution the more information fits on the screen.

Here are some examples:

640 x 480 Screen Resolution

640 x 480 screen resolution example

800 x 600 Screen Resolution

800 x 600 screen resolution example

1024 x 768 Screen Resolution

1024 x 768 screen resolution example

Take another look at the images. Did you notice that as I increased the screen resolution the information on the screen became greater?

The examples above are the most common screen resolutions today. As time progresses and technology advances, so will the most common screen resolutions.

So now you understand screen resolution a bit better what screen resolution should you design for?

Designing for the Most Common Screen Resolution

Designing for the most common screen resolutions is not hard if you understand the intended audience’s needs and expectations. Having done your research on the intended audience, you would also know what computer skills and type of technology they have and are comfortable with.

The W3 Schools browser statics as of this writing show that 1024 x 768 has a 57% share of the screen resolution trend as of January 2006. There is also a note that web designers should not forget about those who still use 800 x 600 screen resolution.

Looking the the information provided by Browser News (who provides statistics on the trends in browsers, colour-depths, and resolutions), their section on resolution trends says:

“Most users have 1024×768 or higher, but a large minority have 800×600. These numbers do not include those who browse using web appliances.

It is important to note that (a) the display resolution says little about the size of the browser window, and (b) users can normally resize the browser window. Consequently no particular browser window size should be assumed.”

Source: Browser Trends Resolutions – Dated January 5, 2008

You also have to consider those who have older machines, need larger fonts due to vision difficulties and other devices used to surf the web that have small screens.

There are two ways to plan the layout of a web page’s width, fixed or liquid.

Fixed Width Web Pages

As the name describes, the width of the web page is fixed. The web page will not adjust to the visitor’s browser window or screen resolution. If your website design is too wide for the visitor’s browser window a horizontal scroll bar will appear at the bottom of the browser window.

To design a fixed width web page layout you need to know what is the lowest common screen resolution for the intended audience. Once you have determined that then you have to do some research on the actual available space you have to work with in each browser. You could loose up to 100 pixels in width, depending on the browser.

Each browser has a different amount of space available when opened. Then of course there is also the problem of whether the visitor is likely to have a side panel open while surfing the internet.

There is a chart of available screen space available at AnyBrowser.com that is a bit outdated but it will give you an idea of how screen resolution relates to maximum available live space in the browser window.

Keep in mind that people with larger monitors and higher screen resolution tend to have multiple windows open at the same time and may resize the browser window so they can see everything that they have open.

If you have decided to go with a fixed width design just keep in mind that all the widths of the page elements have to add up to the width of your design. Take into consideration the spacing between elements as well as the actual element widths. Be sure to test your design at different screen resolutions to make sure the design suites the targeted audience.

Flexible (Liquid) Design

A flexible design (also known as liquid design) adjusts to the size of the browser window and different screen resolutions. All the web page elements rearrange themselves to suit the browser window or user’s screen resolution, if done correctly.

For a flexible design you use percentages as the width of the containers around the web page elements. A container can be a div or a table.

Just like a fixed width design, all your widths have to add up to the maximum width you have decided to go with. e.g. If you decided to use a flexible design that takes up 60% of the available screen space then all the elements, including spacing, have to add up to 60% of the screen space.

One thing that will ruin your flexible design is using images that are too wide. If you decided to use a 60% width and your header image is greater than that width the horizontal scroll bar will appear because the design had to adjust to accommodate the image.

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? – article at Smashing Magazine comparing the pros and cons of fixed, fluid and elastic layouts.

Testing for Most Common Screen Resolutions

Web Page Mistakes uses a flexible design. You can adjust the browser window until the available screen size is about 420 pixels wide before the top images start to overlap (the menu jumps down below the content of the page when you get below 600 pixels. To have the menu on the left still appear the browser window in it’s intended spot (on the left) the available screen space would be 600 pixels. This site was designed to suit down to 640 x 480 screen resolution. To see how it adjusts to suit your browser window, put your mouse over the bottom right corner of the browser window and drag the corner up and over to the left. Watch as the content adjusts as you change the browser window size.

There are various ways to test how your web page design will look at different screen resolutions. You could adjust the browser window manually as described above, change your screen resolution on the fly, use a toolbar that resizes the browser window for you or use an online tool.

Now, what if the user decides to change the font size for the page themselves (View, Text size, select a size in Internet Explorer or on a Windows machine they can press Ctrl while rolling the scroll wheel in the mouse). Does your design fall apart?

Best Viewed

When Netscape and Internet Explorer were just about the only graphical browsers around web designers would put “Best Viewed with Netscape” or “Best Viewed with Internet Explorer” because at the time there was a major browser war going on and Netscape and Microsoft figured this would be a good marketing ploy. You still see “Best Viewed with…” statements but now the battle is mostly between Internet Explorer and Firefox. Some designers also state the screen resolution the site is “Best Viewed at…”.

If you have researched your target audience and designing for a specific browser or screen resolution works for that audience then you might want to do that. But, what about all the other potential visitors and customers. Can your business afford to loose visitors and sales because your website breaks in their chosen browser and/or screen resolution? Probably not, this is a decision only you, as the website owner, can make.

Viewable in Any Browser and at Any Screen Resolution

To have a website viewable in any browser and at any screen resolution:

  1. Determine the website’s target audience and their expectations.
  2. Decide on a web page width (either fixed of fluid) to suit the target audience’s most common screen resolution.
  3. Use only standards compliant valid coding.
  4. Test the website in different browsers.
  5. Test the website at different screen resolutions.

Having a website that is viewable at any screen resolution and in any browser will only help your business grow.

Further Reading on Designing for Most Common Resolution

Well known Usability expert, Jakob Nielsen, addressed this issue in his Alertbox, July 31, 2006 Screen Resolution and Page Layout. Although his article is about designing fo 1024 x 768 resolution he also reccommends using a flexible design that will adjust for resolutions from 800 x 600 to 1280 x 1024. Mr. Nielsen also stresses knowing your target audience and accommodating for the future.

From Smashing Magazine, a blog related to web design:

“Don’t optimize your web designs for your personal convenience. Don’t guess blindly; instead try to estimate the profile of your visitors and leverage your design accordingly. In most cases you can improve the user experience by keeping the width of your layout at most 1000px. Design for your visitors, even if it means that your design looks terrible on your high-resolution wide-screen laptop.”

Screen Resolutions and Better User Experience

Another Smashing Magazine articles related to screen resolution, fixed layout and flexible layout:

“You never really know who is going to visit your web-site next. You have no idea which configuration will be used, what browser will be installed, which screen resolution will be in use. However, since you’d like to comfort most of your web users, you need to know their habits and the profile of your average visitor — to adapt the design and layout to your users’ needs.”

Who Is Your Visitor? An Average Profile

“…Why should a user adapt his viewing preferences to a web-site? Shouldn’t a web-site rather adapt itself to the viewing preferences of its users? If you think about it for a second, you have the same situation as in a cloth store where you are offered cloth only in some very specific size. If the size doesn’t fit to you, it’s your problem, not store’s owner. And if you want to you can take a needle, some fabric and create the cloth of its own choice for free. That is not user-friendly….”

Flexible Layouts: Challenge For The Future

Should we design for 800 x 600 screens? – A discussion at the Web Standards Group on whether one should design for 800 x 600 resolution.

Screen Resolution: Should You Give a Damn? – Post at Closed Loop Marketing, June 23, 2008.

“…Many designers seem to design without giving any thought to the visible width and height of the end users’ display….I will concede that it’s much safer now to design web pages and landing pages bigger, but look at the statistics, decide where your target audience most likely falls, and then be sure to test your designs before launch….”

Browser Sizes Revisited

“…the size of people’s screens doesn’t correspond to the size of the browser. In 2006 I found that as the screens get bigger, the size of the browser stays pretty much the same …”

Further Reading on Page Dimensions

Webstyle Guide has some information on page dimensions where they explain what to consider when deciding on web page dimensions, how to decide on the suitable web page width and a discussion of most common screen resolution.

Compare Web Safe Area – Designers Toolbox has a page showing different resolutions and the web safe area available in different browsers.

What is Duplicate Content

In our previous article, Website Duplicate Content we talked about the webmaster guidelines of the three major search engines, Google, Yahoo! and MSN. In this article we will explore a little further what is duplicate content.

Reading this article will give a better understanding about duplicate content issues and duplicate content penalities.

Duplicate Content Websites

Duplicate websites are 2 or more websites that have the exact same content (or basically the same).

Now you could have intentionally done this, are in the process of moving your website or you may not realize that you have duplicate content websites. Whatever the reason, your website could be subject to a duplicate content penalty from the search engines.

WWW vs Non WWW Versions of Website

You may not realize you have duplicate content in the search engines’ eyes because your web hosting has not been set up properly. When your website hosting was setup the web hosting company should have set things up so the www.yourwebsitename.com and yourwebsitename.com versions of your domain name should point (go to) the same content. Try it yourself, type your domain name with www. in front and note what the address is in the address bar of the browser after the first page loads. Now type it again without the www. . Both versions should show the same address in the address bar of your browser. If they don’t, then the search engines think this is duplicate content.

When your website’s non www version and www version are not resolving to the same address then you need to get a hold of your web hosting company or webmaster and have this corrected. Pick one version, have the web hosting setup to resolve to this version and use this version to promote your website.

Moving Website

If you are in the process of moving your website to a new web host or building a new website to replace the old one it is possible the search engines will find the new location all by themselves, without you promoting the new location. To understand how search engines work, see the How Web Crawlers, Search Engine Robots or Search Engine Spiders Work article at HTML Basic Tutor.

When in the process of moving your website to another web hosting company or in the process of rebuilding the website at another location you have two choices, either take down the old site (remove it) and have the domain name servers changed to point to the new web hosting (domain name servers that 12 to 48 hours to catch up on any changes so you want to put a 301 permanent redirect at the old hosting until the domain name servers catch up) or at the new web hosting put your website in a test folder while you rebuild the website and edit the robots.txt file to tell the search engines not to go into that folder. Once the new website location is set up and the new site is ready, move it to the main folder of the webspace, change the domain name servers for your domain name, take down the old website and put a permanent 301 redirect at the old location.

Affiliate Websites

When you sign up for an affiliate program they may provide you with a website/web page or some stock advertising material to use. Now you may think this is great, no work required, WRONG. Everyone else that has signed up for that affiliate program is thinking the same thing. The search engines (and people who use the search engines) see tons of web pages with the same content. Not only will the person who did the search just read the first listing and skip the rest, the search engines will see all those sites as duplicate content.

To solve the dupliate content problem and duplicate content penaltities for affilate programs you have to come up with your own original content, there’s no way around it. If you are serious about promoting the program, sit down, write articles about the product and create an original web page/website to promote the product.

Representing Manufacturer’s Products

Representing a manufacturer’s product is no different than promoting an affiliate program. Ever searched for a product and get a zillion results with the same information? Annoying, isn’t it. So, be different. Just like affiliate programs, create your own original content about the product. Include product reviews, how to use the product, anything more interesting than the rest of the people who are also selling that product. You’ll get more interested visitors and the search engines won’t ding you for duplicate content.

Free Articles

There are sites where authors submit articles for you to reuse on your website. Although this may seem like a great idea to save yourself some work or if the article is so well written that you couldn’t write something like that you have to consider the implications of including the article on your website. You and other people who think the article is a valuable addition to their website will be partaking in duplicate content.

If there is an article you have found that would be valuable to your visitors, write your own review of the article and include the web address for it or write at least, an introduction to the article, in your own words, and reference the article.

RSS Feeds

With the advent of RSS Feeds there is also a problem of duplicate content. If you wish to include a RSS Feed from a site, try and find the type of feed that just serves up an introduction or portion of the article. If you use the type of RSS Feed that serves up the whole article you will have duplicate content of the original article (and so will everyone else that has done the same thing).

Search Engines Know Duplicate Content

The search engines know when you have duplicate content. If you read How Web Crawlers, Search Engine Robots or Search Engine Spiders Work then you will understand how the search engines file your website information.

Search engines also know who had the content first. They just have to check their archives to find out who they found wrote the material first.

Here’s a graphical representation of how a search engine determines duplicate content.

My post mentioned that “we’re evaluating multiple changes that should help drive spam levels even lower, including one change that primarily affects sites that copy others’ content and sites with low levels of original content.” That change was approved at our weekly quality launch meeting last Thursday and launched earlier this week.

Algorithm change launched

– Matt Cutts, Google Spam Dept., January 28, 2011

If you are the victum of stolen content, you can report the websites that have stolen your content to the search engines. Once you have proven you are the original author of the material the search engines will remove the thief’s website from their index.

Solution for Duplicate Content

So, did you notice a common solution to duplicate content issues and duplicate content penalities?

Write your own original content for your website!

Yes, it’s a lot of work, especially when you are trying to run your business as well, but it will be worth it in the end. Your visitors will appreciate it and you will be found in the search engine results.

Website Duplicate Content

Duplicate content is such a hard concept to convey to people who want a website. For some reason just because other people do it they just don’t understand why they cannot.

Duplicate content:

  1. Is illegal! If you have copied someone else’s work.
  2. Will get you banned from the search engines.
  3. Is against the Terms of Service for you web hosting company and domain registration company.
  4. Will not set you apart from your competitors.

To better understand duplicate content issues and duplicate content penalities you need to understand what duplicate content is and how to avoid getting a duplicate content penalty from the search engines.

First we’ll look at the definition of duplicate content then examine the webmaster guidelines of the major search engines and duplicate content, why duplicate content is illegal, your web hosting company, domain registration company and duplicate content and duplicate content issues for Web Designers.

Definitions of Duplicate Content on the Web

Let’s start with looking at some definitions of duplicate content.

“It is a strategy by which varying domains use the same or near same website to serve the user. Also if contents of one page on the internet are same or similar to another, it is considered duplicate content. Duplicate content is considered spamming by Search Engines and therefore should be avoided.”

Reference: www.optymise.co.nz/resources/glossary.asp

Here is another one:

“separate web pages with substantially the same content, which may attract a penalty from search engines.”

Reference: www.abelgraphics.co.uk/glossary.php

Three important points are common to both of these definitions of duplicate content:

  • “if contents of one page on the internet are same or similar to another, it is considered duplicate content”
  • “Duplicate content is considered spamming by Search Engines”
  • “may attract a penalty from search engines”

Webmaster Guidelines and Duplicate Content

Each search engine has a set of guidelines for Webmasters and Website Owners to follow if they wish their website to be included in that particular search engine’s index. Seeing the topic of this article is duplicate content let’s look at the Webmaster Guidelines for the major players in the search engine market, Google, Yahoo! and MSN.

Google Webmaster Guidelines Regarding Duplicate Content

“…Don’t create multiple pages, subdomains, or domains with substantially duplicate content. ..

…If your site participates in an affiliate program, make sure that your site adds value. Provide unique and relevant content that gives users a reason to visit your site first. ..

…If a site doesn’t meet our quality guidelines, it may be blocked from the index.”

Reference: Webmaster Help Center – What are Google’s quality guidelines?

Update December 18, 2006:
Google has further addressed/clarified duplicate content with their Deftly dealing with duplicate content post on the Official Google Webmaster Central Blog.

Update September 11, 2007:
Another update on duplicate content from Official Google Webmaster Central Blog. This time the duplicate content caused by URL parameters is discussed.

Update September 12, 2008:
Google tries to clear up myths about duplicate content penalties, Demystifying the “duplicate content penalty”.

Update May 26, 2009:
Video by Matt Cutts, head of Google’s Webspam team – Can product descriptions be considered duplicate content?

My post mentioned that “we’re evaluating multiple changes that should help drive spam levels even lower, including one change that primarily affects sites that copy others’ content and sites with low levels of original content.” That change was approved at our weekly quality launch meeting last Thursday and launched earlier this week.

Algorithm change launched

– Matt Cutts, Google Spam Dept., January 28, 2011

Yahoo! Webmaster Guidelines and Duplicate Content

“What Yahoo! Considers Unwanted

…Pages that have substantially the same content as other pages …

…Multiple sites offering the same content…

…YST’s Content Quality Guidelines are designed to ensure that poor-quality pages do not degrade the user experience in any way. As with Yahoo!’s other guidelines, Yahoo! reserves the right, at its sole discretion, to take any and all action it deems appropriate to insure the quality of its index. “

Reference: Yahoo! Help – Search

Note: The file name of this referenced page is deletions-05.html.

MSN Website Owner Guidelines and Duplicate Content

“…The Digital Millennium Copyright Act of 1998 (DMCA), limits the use of copyright-protected content on the Internet. Users and site owners should be aware of the following provisions that govern MSN Search:

  • The DMCA limits the liability of Internet service providers (ISPs) such as MSN Search for providing access to and publishing content that infringes on a copyright.
  • When ISPs, including MSN Search, are notified that content infringes on a copyright, they must remove the content to preserve their protection under the DMCA.

MSN Search notifies you when relevant search results are blocked because of a complaint regarding copyright infringement.”

Reference: Site Owner Help: About the Digital Millennium Copyright Act

Ok, do you get the idea that search engines do not like duplicate content?

Duplicate Content is Illegal

Did you notice above that MSN specifically referenced The Digital Millennium Copyright Act of 1998 (DMCA)?

So what you say, that’s a USA document. News flash! All the major search engines are in the USA so they have to abide by this legislation.

If you are in Canada then you should read through the Copyright Board of Canada website.

A British source of copyright information is UK Copyright Service.

Now you are going to say you have gone through the proper channels to use some copyrighted content on your website. This brings up another issue, originality.

Original Website Content

Did you notice in all of the quotes from the search engines that they want to see original quality content?

Think of it this way, if you are a person looking for a service or information on a subject and the search engine results all show the same description, how is that person going to decide which site to visit? Once they read the first result they are not going to waste their time reading the rest of the results with the same description in the search engine results list, would you?

I know it is difficult to come up with original content when you are an affiliate or a supplier of a product that a number of other people also provide but you have to come up with your own original content!

If not for the sake of avoiding being banned from the search engines because of a duplicate content penalty, (well, guess duplicate content won’t be an issue, because no one is going to find you if you are banned) think of your potential visitors and customers. You have to make your website stand out from the rest and the only way to do that is to provide quality original content.

Duplicate content also applies to articles that are available for use on your website. A zillion other people are using those articles too. You need original content! If you feel an article is of value to your visitors and customers you could quote a small portion of the article and provide a link to the rest of it.

Your Web Hosting Company, Domain Registration Company and Duplicate Content

Just like the search engines, your domain registration company and your web hosting company are bound by The Digital Millennium Copyright Act of 1998 and all the other copyright laws around the world. If they receive a complaint that you have plagiarized content from a website (or anything else for that matter) the owner of the copyrighted material can have your site shut down, no questions asked. Do you really want to risk that?

If you do not believe me, review the Terms of Service for the company you used to register your domain name and the company you are using as a web host.

Web Designers and Duplicate Content

Web designers should also keep in mind that they can be named in a lawsuit if they take part in the duplication of copyrighted content. The person who has been violated will go after everyone they can to reap revenge.

As a website owner, if you have hired a reputable web designer, you should find a clause in the contract that they will not upload copyrighted content and if they find out you provided copyrighted content they will remove it.

Summary About Duplicate Content

Hopefully this article has convinced you that duplicate content is not good. Your website’s success is hampered by the use of duplicate content.

Let’s review the duplicate content issues and their repurcussions:

  • Search engines don’t like duplicate content. They will issue a duplicate content penalty against the website and will/may ban your website from their index.
  • You are breaking the law.
  • You are going to loose potential visitors and customers due to lack of originality on your website.
  • Your website can be shut down by your domain registration company and/or your web hosting company.
  • You and your web designer can loose everything if you are sued.

If you want a successful website, do not use duplicate content of any type and be understanding when a knowledgeable web designer refuses to produce a website that contains duplicate content. Actually, read your contract with your web designer, there is most likely a clause in there that they refuse to partake in the use of duplicate content.

Can your business/website afford duplicate content issues resulting in duplicate content penalities? Only you can decide.

More Reading About Duplicate Content

How to Find Your Website Duplicate Content Issues.

Pagination and Duplicate Content Issues

Backing up Your Website

I have noticed that some of you are working "live" all or most of the time when working on your website. This is a dangerous situation. What if the server isn’t backed up properly on the hosting end of things? What if you are working "live" and do something to break your site?

Having a backup copy of your work on your website is important whether you are experienced or not. Accidents do happen and all your hard work will be gone or ruined. I recommend working from your computer then uploading the finished product to the webspace.

When building a website I have 3 copies:

  • the working copy on my computer
  • the "live" copy at the web host
  • a backup copy on a removable disk should either my computer or host crash or if I’m experimenting with something and break the site

If you are just learning to do something you might even want to consider 2 working copies, a folder with working perfectly pages and a folder for still experimenting with pages. I’m speaking from experience here. When learning something new you are bound to make mistakes. If you have 2 working copies at least you have a point to go back to where everything worked correctly.

Here’s an example of what I do:

  1. On my computer

    I create a folder for the project on my hard drive. Let’s call it My Site.

    Inside that folder I create other folders:

    • Working Files
      • where I keep all my graphic building files, information collected, any other notes for the website.
      • all my "testing" files until they are the way I want them.
    • A backup copy of my "Live" website
      • just in case I make a mistake and have to redo a page.
      • as a precaution, in case the web hosting goes down and looses my website files.
    • Mysite
      • where I put a copy of all the files that are ready to publish to the web.
    • SEO Research
      • where I keep all my SEO research for this website.

      If you are using a HTML Editor with site management features you could still have a folder set up as above.

  2. "Live" Version

    This is the area where you each will have a different way to do this, depending on how you create your site. Your HTML editor may have a feature for uploading (publishing) your website, your host may permit you to use a FTP software program or if you may have to do this from the web.

  3. On a removable disk

    If this is your first time getting setup you may want to backup your actual website if you already have a live site.

    1. Copy the My Site folder to the removable disk.
    2. Copy the "Live" Version backup to the removable disk.
    3. Label the disk.
    4. Keep it in a safe place.

More Info

Back Up Your Computer

How to Choose a FTP Program

How to Download Files with an FTP Program

How to Upload Files to Another Computer with an FTP Program

FrontPage 2002 Tutorials – How to Backup FrontPage

cPanel User Manual

GZip (.gz) File Information

This tutorial was originally written for the free SEO Training by GNC Web Creations class.

Revised: November 11, 2006

Image Alt Tag – Image Alt Attribute

Image alt tag - Image alt attribute example

Do you use the image alt attribute (mistakenly called the alt tag by some) properly on your website?

By not using the image alt attribute (image alt tag) you are missing out servicing the visitors to your website that have images turned off, those who use assistive technology to surf the Net and the search engine optimization benefits of the image alt attribute.

Image Alt Tag vs Image Alt Attribute

If you do a Google search on the phrase image alt tag you will see about 421,000 results are returned which include some search engine optimization articles, marketing articles and well used HTML coding websites.

Doing the same search using image alt attribute you will see about 188,000 results returned which include Official Google Webmaster Central Blog: Using ALT attributes smartly and the W3C (World Wide Consortium) Objects, Images, and Applets in HTML documents (the W3C is the organization who writes the specifications for HTML coding and other Internet related specifications).

Which is the right phrase to use?

An image has an alt attribute, not an alt tag.

If you look up the img tag (which is really called img element) in the HTML specifications you will see that alt is listed as an attribute.

The image alt attribute is defined as:

“Attribute definitions

alt = text [CS]

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.

…let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc….

Reference: 13.8 How to specify alternate text

This reference was accessed by going to the Index of Attributes, a part of the W3C Recommenations.

This article uses image alt tag in it’s title so those who incorrectly use this phrase will still find our article and learn the correct way to use the image alt attribute.

Using the Image Alt Attribute

When used, the image alt attribute displays a tooltip in Internet Explorer with the words contained in the image alt attribute for the website visitors when they place the mouse over the image. Not only is this helpful to your website visitors who use Internet Explorer, it is helpful for the visitors who have images turned off and it makes your site accessible. The words in the alt attribute are displayed in the place where the image is placed for those with images turned off and is read out to those who use assistive technology to read web pages.

IE 8 does not display alt text in a tooltip – IE 9 doesn’t either.

A lot of websites do not use the image alt attribute or use it incorrectly. So how do you use the image alt attribute properly?

The image alt attribute is to be used to supply information about the image.

“Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.”

Reference: HTML 4.01 Specification – Objects, Images, and Applets in HTML documents

Provide Alt Attribute for Images

Update: HTML5 and WCAG 2.0

It is no longer a WCAG 2.0 conformance failure to have an <img> without an alt attribute, as long as the img element has an accessible name provided using another method such as aria-label.

It is still a conformance error in HTML to have an <img> without an alt attribute (unless the img has a caption provided using the figure and figcaption elements)

Short note on alt in HTML

The correct way to insert an image in your web page when coding in HTML 4.01 is:

<img src="imagename.gif" width="10" height="10" alt="Image Description">

Reference: HTML 4.01 Basics Simplified

To insert an image when using XHTML coding it would be:

<img src="imagename.gif" width="10" height="10" alt="Image Description" />

where:

src="imagename.gif" is the path to the image on your web server
width="10" is the width of the image
height="10" is the height of the image
alt="Image Description" is the image description

Image Alt Attribute Description

The image alt attribute description should be a meaningful description of the image. The description needs to make it clear what is in the image.

What the Image Alt Attribute (a.k.a. Image Alt Tag) is Not

What the image alt attribute is not, is a place to stuff keywords!

Not only is this useless information to your visitors who have images turned off, it is useless to those visitors who are using another means to access your website.

Search engines also frown upon keyword stuffing.

Alt Attribute and SEO

Reading articles about search engine optimization (SEO) you will see recommendations to use the alt attribute (alt tag) to improve the SEO of your web pages/blog.

SEOmoz published an article October 22, 2009 showing that using the alt attribute does benefit your search engine optimization program.

“…consistent suggestion to use images with good alt text that employ your keyword term/phrase….”

Explaining (Some of) Google’s Algorithm with Pretty Charts & Math Stuff

But this article doesn’t clarify that while the alt attribute does improve your on page search engine optimization, the text in the alt attribute needs to be also useful to your users.

“…while using keywords in alt attributes may help your web site rank, it can also result in a significantly less accessible web site, if applied poorly….

Best practices: keywords in alt attributes

Be a Responsible Website Owner

Be a responsible website owner and have your images include the image alt attribute. Insist on it if you are having someone else build your website.

Note: the alt attribute should be blank for decorative images. e.g. an image as part of your web page’s visual design. Some will use this alt attribute to “keyword stuff” which is useless to those who cannot see the image and can cause you to be penaltized by the search engines for keyword stuffing. Check your web design for this issue.

Use the image alt attribute the way it was ment to be used, to provide useful information to your website visitors no matter how they access your website.

Remember that the correct way to refer to the alternate text provided for an image is referred to as the image alt attribute, not image alt tag.

As pointed out above, your alt attribute text can contain keywords as part of your on page SEO program but also make sure that the description is useful to those who cannot see the image.

Image Alt Attribute Additional Reading

Five kinds of ‘alt’ text

Text alternatives for images: a decision tree.

Alt text and form buttons set as images – “…using the alt attribute when coding your input type=”image” elements in your forms….”

The alt and title attributes – “…alt attributes (popularly and incorrectly referred to as “alt tags”)…The alt attribute (yes, it’s an attribute, not a tag)…”

HTML <img /> tag – “…Firefox uses the alt attribute the way it’s meant to be used, like an alternative text if the image won’t load, not as a mouse-over text….”

Matt video: ALT attributes for images – “…“IMG” is a tag, but “ALT” and “TITLE” are attributes of the IMG tag….”

Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities – 75 Best Practices for Design of Websites and Intranets, Based on Usability Studies with People Who Use Assistive Technology by Kara Pernice and Jakob Nielsen.

Heading Structure – Heading Tag

Heading Tag examples

Heading structure is important not only to present a clear structure to the web page but also in consideration of those using text readers and the search engines.

First let’s go over what Heading tags are.

Heading Tags

Heading tags are used to define the headings in your page. There are 6 available, h1 set of heading tags being the biggest and boldest and the h6 set being the smallest.

You should use them as you would if you were writing a book or article and not to highlight text in your page.

The size, colour and other presentation attributes of these tags can be changed in your stylesheet just as you would change your text.

When you use the heading tag it will automatically add space above and below the text within the heading tags and automatically start your text on the next available line.

Also consider:

  • those who use text readers to read your site will become confused if you do not use heading tags in descending order as they were intended.
  • All browsers support heading tags and each displays the headings in slightly different sizes.
  • A visitor may have changed the default fonts of their browser and chosen to over ride your stylesheet so the sizes and font may different than you intended.

Now onto building your Heading Structure.

Heading Structure

  1. Heading Tags Used for Headings Only
    • Check that heading tags have only been used for headings and not as a way to format other content.
    • If you did, remove the headings tags from areas that are not actual headings and use classes to format these areas.
  2. Check the structure of your headings.
    • First heading of the page is heading 1
    • Subsequent headings are in decending order
    • Sub-subsequent headings are in decending order

Note: If your page is coded using HTML5 structure and uses the <section> and </section> tags in the body of your document the HTML5 specification as it stands July 2013 reads:

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

4.4 Sections – HTML5

Also note that, just because the theme/template of your site or blog uses the HTML5 DOCTYPE declaration that doesn’t mean it is actually following the structure of a HTML5 document.

The heading order still has to make sense within the HTML5 element you are using if you are using more than one heading within the opening and closing tags of that element.

Below is an image showing the heading structure for documents written using (X)HTML standards prior to HTML5. It can still be used as a guide for headings within your section, article, etc. when using HTML5.

Example of heading structure

Below is an example of how the heading tags are related to each other. Notice that as the heading tag number is increased, it becomes an additional sub level of the heading above it.

Example of how heading tags are nested

If you download and install the Web Assessibility toolbar it has a Headings tool and a Heading Structure tool under the Structure section where you can check:

  • where you have used heading tags
  • the heading structure of the page

Heading Structure and Search Engine Optimization

Heading structure also plays an important part of search engine optimization.

The search engine spider checks for heading tags as it looks at your web page. Each search engine spider will prioritize the importance of the headings in a different way.

Heading structure and search engine optimization article.

Heading Structure and Readibility

When proper heading structure is implimented it adds to the readability of the web page.

People who surf the net tend to skim the information on a web page looking for points of interest to them.

If a web page uses heading tags properly to create a proper heading structure the visitor will be able to see the highlights or topics of the page quickly and focus on the points they are interested in. If the topics covered interest them they will either just read the particular section they are interested in or take the time to read the whole web page or article.

As you can see, the heading structure of a web page is important to the readability for the average visitor and those using text editors and search engines. A properly structured heading system is one of those things you have to spend time thinking about when designing your web page.

Correct the web page mistake of using heading tags incorrectly and improve your website’s readability and make it search engine friendly.

Heading Structure and Accessibility

Have a look at the following video to learn how heading structure is used by those using screen readers.

“An Introduction to Screen Readers”

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

Flash Based Websites – Flash Movies

Flash is a technology by Macromedia that creates animations, interactive websites and other fancy features that can be embedded into a web page.

The Flash file is called a movie file. Once the file has been downloaded it will “play”.

You probably have already encountered websites containing Flash movies. Some designers use Flash to create an introduction movie (also known as a splash page) or will create the whole website in Flash.

Pros and Cons of Using Flash on a Website

Using Flash on a website has it’s pros and cons.

The Cons of Using Flash on Websites

Visitors to the site will have to have special software installed on their machine to view Flash movies. People who are not comfortable with making changes to their computer will not install the Flash Player if requested to install it.

Visitors that use special software to read web pages will not be able to use your website.

Sites built totally in Flash are not search engine friendly. Some search engines cannot read any content in the site.

“As many of you already know, Flash is inherently a visual medium, and Googlebot doesn’t have eyes. Googlebot can typically read Flash files and extract the text and links in them, but the structure and context are missing. Moreover, textual contents are sometimes stored in Flash as graphics, and since Googlebot doesn’t currently have the algorithmic eyes needed to read these graphics, these important keywords can be missed entirely. All of this means that even if your Flash content is in our index, it might be missing some text, content, or links. Worse, while Googlebot can understand some Flash files, not all Internet spiders can.”

Source: Official Google Webmaster Central Blog: Best uses of Flash
Thursday, July 05, 2007

Update June 30, 2008

“Google has been developing a new algorithm for indexing textual content in Flash files of all kinds, from Flash menus, buttons and banners, to self-contained Flash websites. Recently, we’ve improved the performance of this Flash indexing algorithm by integrating Adobe’s Flash Player technology….”

Google learns to crawl Flash

Also see, “What are the current technical limitations of Google’s ability to index Flash?” at Improved Flash indexing post at Google Webmaster Central Blog which answers some of the questions about this new indexing capability.

“…Content owners and developers do not have to do anything to the millions of deployed SWF files to make them more searchable. Existing SWF content is now searchable using Google search, and in the future Yahoo! Search, dramatically improving the relevance of RIAs and rich media experiences that run in Adobe Flash Player. As with HTML content, best practices will emerge over time for creating SWF content that is more optimized for search engine rankings….”

SWF searchability FAQ at Adobe.

“…Our major issue with the recent Flash announcement was with designers who now feel it is okay to tell users that this Flash update is the answer to their ranking problems. These Flash designers simply either do not get it or they are out to scam end users….”

Bruceclay.com – Bruce’s Guide to Appropriate Use of Flash

“…Flash content is fundamentally different from HTML on webpage URLs and being able to parse links in the Flash code and text snippets does not make Flash search-engine friendly. I think it’s great that Google’s digging deeper into Flash, but I don’t believe web developers should be any less wary than they’ve been in the past about Flash-based websites or Flash-embedded content….”

Flash and SEO – Compelling Reasons Why Search Engines & Flash Still Don’t Mix

Read the entire article quoted above for reasons why Flash still won’t be search engine friendly.

“…With this latest innovation in crawling Flash, Google can more easily access the text in Flash, but they still can’t process it quite as well as it can HTML text because they aren’t extracting any meta data about that text. As I mentioned earlier, search engines are now storing all kinds of meta data based on the structure of the text in HTML, like if it’s in a title tag, or an H1 and so on. So Flash-based text has that disadvantage….”

Search-Friendly Flash?

Keep in mind, this update is for Google and Yahoo only, don’t forget about the other search engines and directories who find your website which are not fed information by either of these.

Designers who build sites in Flash have a tendency to do really fancy sites. Hence the file is very large and takes a long time to download to the visitor’s computer before playing. This could be a problem if the website visitor is using a dialup connection. Even on ADSL some Flash based sites take a long time to load.

Building something in Flash will take time. If you are going to do this yourself there is quite a learning curve to be able to use the program properly and be able to insert the programming features of the program. Hiring a professional could be expensive.

There are some good times to use Flash if you keep in mind the visitor has to have special software to view Flash files.

The Pros of Using Flash on Websites

If you are sure that the website visitors will have the latest greatest machine, software and internet connection then downloading a Flash movie wouldn’t be a problem to that audience.

Flash is good for creating a presentation movie. If you have a promotional presentation you wish to show on the website then provide a link to it. The visitor then can make the choice to view it or not.

Instructional videos could be done in Flash.

Animated graphics can be done in Flash.

Flash files are vector graphics which means when resized they do not loose their quality or clarity.

Flash files are browser independent. (the user still needs a plugin to view files though)

In this article we have shown the pros and cons to having a Flash based website and Flash graphics.

Now you will have to determine whether your target audience will appreciate the use of Flash movies on your site or find it an hindrance or deterrent.

Website Graphics

Web Page Graphics

Web graphics play an important part in the presentation of a website.

Using the correct type of web graphic which has been optimized for optimum download speed and web hosting space conservation will affect the performance of the website. Sites containing lots of images will be slow to load and require more web hosting space.

Web Graphics

Web graphics have traditional been in 2 formats, JPEG (.jpg or .jpeg) or GIF (.gif). More recently a third type has come into play, PNG (.png). To display an image on a website it must be one of these types.

Some General Notes About Using Web Graphics

When using graphics within a web page there are some considerations:

Web Hosting Space

Graphics use up a lot of web hosting space. If your site will have a lot of graphics like photographs then a larger web hosting package maybe required as the site grows.

Download Speed

Pages that load slowly will drive visitors away. You may have experienced this yourself. Visited a site that took too long to load into the browser and just left because you didn’t want to wait any longer?

A way to make it appear that the page is loading faster than it actually is is to include the width and height attributes of the image. The browser will “save” a spot for the image and continue loading the rest of the page. You still need well optimized images.

Use images that are the size you actually need. If you resize the image using the page coding the browser will still download the original image file.

Limit the number of graphics per page. A lot of people are still using dial up connections. If your page has too many graphics it will take a long time for the page to load in their browser.

Remember, a page stored locally on your computer will load quicker than once it is on the Internet. You have 7-10 seconds to keep the visitor’s attention before they will move on. Check the download speed of the total page before you upload to your web space.

Correct Image Type

Build your graphic in a graphics program and save the original in a safe place. Make a copy of the original file to experiment with or alter. Always have a copy of the original to go back to. You may decide another version of the image is more suitable.

Use gif or png format for navigation bars, logos, buttons and another drawing type graphic.

Complex diagrams and illustrations should be first drawn in a vector based graphic program. Vector graphics use lines and mathematical formulas and equations to build the graphic. If you are building graphics that will be used for printed material also, build them in a vector based program like Adobe Illustrator, Macromedia Freehand or AutoCAD. Vector based artwork is more suitable for the printing industry so you would save on artwork fees. The artwork can then be saved in a format suitable for the web.

Use jpeg format for photographs.

Free Graphics

There are places on the Internet that advertise “free” photos, clip art etc. Although the site says the images are free it doesn’t mean they have the authorization to distribute the images. If you are going to use images from the Internet then make sure the images are from the original creator’s site and they have posted the images as free. Also, as with other free stuff, there may be some rules about using their images like linking back to their site or stating where the image came from. A safer thing to do would be to create your own images from scratch or contact the artist if there’s the perfect image somewhere and get their permission in writing to use the image or pay them for it.

All work on the Internet is copyrighted, even if they don’t specifically state a copyright notice. If you didn’t create it or pay the original artist for it, don’t use it.

Cross – Browser Compatibility

How does your site look in any of the major browsers? Not everyone is using Internet Explorer to surf the Internet these days or even their desktop computer.

Are you prepared to loose visitors because your site uses proprietory coding or just doesn’t render properly in all browsers? Can you afford the lost sales?

Is Your Site Cross-Browser Compatible?

Definition of cross-browser compatible:

Cross-browser compatible
Compatible with all major browsers available

Major Desktop Browsers Available

These are the major desktop browsers available:

How does your site look in any of the browsers listed above? What about mobile devices?

Battle of the Browsers

The battle of the browsers has gone on since the start of the internet. We use to have just Internet Explorer and Netscape to contend with now there tonnes of ways one can access your site.

If you take a look at Browser News’ Statistics page you will see the current statistics in browser trends.

See this note on Browser News’ site:

Caution : browser stats are of limited use to designers. First, stats will vary from site to site, so it is only the stats for your sites which matter. Second, stats can be skewed by many factors, so the true numbers may be higher or lower than the numbers reported. Third, and most important, browser stats are really only useful to designers when deciding which browsers are so little used that they need no longer be supported: it may be entertaining to know, for example, how well Chrome, Firefox, and Safari are competing with Internet Explorer, but so long as the numbers are large enough that the browsers must be supported, the exact numbers are irrelevant to the design.

In case you missed it: it is only the stats for your sites which matter.

You can surf the net looking for stats on which browser(s) are popular but keep in mind that these stats are based on the site’s own visitors plus the sites where you find these stats tend to be visited by tech savvy people, not your average computer user.

Browser News Recommendations are:

“A good way to ensure that sites will work for as many users as possible is to (a) design sites to the HTML, CSS, DOM, and other standards, (b) to test sites with common browsers that implement these standards well, and (c) to tweak the sites so that they work well enough for antique browsers still in common use.”

Reference: Browser News – Browser Trends

So what this means is:

  1. Design your website to the standards.

    The web standards are created by the World Wide Web Consortium (W3C)

  2. Test your website in multiple browsers.

    See the list at the beginning of this post.

  3. Build your website so it degrades well.

    Build the website so if someone with one of the older browsers visits the website is not broken.

Read more about building a Cross-Browser Compatibility site or blog.

Some Designers Do Not Believe in Cross-Browser Compatibility

There are designers and developers out there that have a real hate on for Internet Explorer. They put coding in their pages that send up messages to the users of IE like “get a modern browser”.

If your designer/developer is one of those, put your foot down that the site/blog must be cross-browser compatible. Why? Because not everyone is a techy person. They don’t keep up with the trends. a) they don’t care and b) they could be scared to upgrade for fear of breaking their machine and c) their chosen browser works just fine thank you very much for what they do on the net.

You want your site to work for your target audience. If they are not the tech type, the latest greatest “features” of the net may not work for them. Sometimes those of us on the net forget about what it was like way back when we too were new to the net and scared to do stuff or experiment.

Improving Download Speed

Improving download speed of webpages is important to the success of a website.

Internet users are impatient with slow websites and will move on if the webpage takes too long to render (also known as download).

There are a few things you can do to improve download speed of your web pages which include implementing techniques to optimize website performance. This article will suggest some ideas on how optimize website performance and improve website download speed.

Optimize Website – Improving Download Speed

Topics covered:

  • Improving Download Speed of Images
  • Improving Download Speed of Multimedia Features
  • Improving Download Speed – Reduce Extra Coding
  • Improving Download Speed of Tables

Improving Download Speed continued

Additional Reading on Improving Dowload Speed

Some simple improvements from Google’s Page Speed

Uncommon Fonts

Using uncommon fonts in your web page or website can be a problem.

Windows based and Mac based computers come with different fonts installed by default.

One problem web designers have is that they forget that the average computer user may not have the same fonts installed on their machine.

Once you add a program such as a word processing program or graphics program to your machine it will most likely add additional fonts to your computer also.

So, you happily design your web page/website with the fonts available on your computer. You upload the site then go over to your friend’s house or client’s office to show off what you have done. Disaster! The page looks nothing like you intended. Why? Because you have used a font that is not available on the other person’s machine. The other machine either does not have the same font installed or it is running a different operating system (back to the Windows vs Mac issue).

How do you solve the problem of uncommon fonts?

Windows Based vs Mac Based Default Fonts

By default, a Windows based computer will have a different set of fonts from a Mac computer.

Least Complicated Solution to Uncommon Fonts

When setting the font family for the web page or website you need to list a Windows font, a Mac font and an optional font.

If you take a look at Common fonts to all versions of Windows & Mac equivalents there is a list of the default fonts installed on Windows and Mac computers.

Let’s take a look at an example from that list.

Verdana, Verdana, Geneva, sans-serif

From this example you can see that Verdana is available on both Windows and Mac based computers so that would be a safe choice of font.

Including Geneva in the font family setting of your stylesheet would cover Mac machines that do not have Verdana. Likewise, including sans-serif takes care of machines that do not have Verdana or Geneva fonts.

Setting Font Family in Stylesheet

In the stylesheet for the web page/website set the font family as follows (substitute your chosen font names):

FONT-FAMILY: Verdana, Geneva, sans-serif

If you wish to have the same font all the way through the web page/website then you would set the font family within the body tag style. This way you only have to specify it once as the font family is to cascade down the document.

To set the font to be different for specific tag, say the paragraph tag, then you would set the font family within the paragraph tag style.

There are other ways to over come the uncommon font issue which are more complicated for the beginner web designer but we’ll leave that for another post.

Related Reading About Fonts

Firefox 3: Fonts and text – more information about fonts in general, not just related to Firefox.

Knowing About Web Safe Fonts – a further explaination of the problems of using uncommon fonts and a list of web safe fonts.

Web Safe Font Cheat Sheet v.2 – Including Google Font API | Devon Web Design and Development | MightyMeta

Website Design Mistakes

Have you ever visited a site and just left?

What caused you to leave?

Ok, I think you get the idea.

So, if all of the above items (and this certainly isn’t an exhaustive list) are annoying when you visit a website why do people build websites like this? Lack of knowledge? Limited budget? They let their creative juices get the better of them?

Web Design Mistakes

Dr Dave Chaffey, author of E-consultancy’s Best Practice Guides, offers useful web design tips and discusses some common pitfalls to avoid.

Legibility

Legibility involves font types, font size and colour schemes along with content layout.

Choosing the correct font type that suits the theme of the website and that are available to the average website visitor is one of the first steps to legibility. Fancy fonts can be difficult to read and may not be available on the visitor’s computer. More on Uncommon Fonts…

Font size plays an important part of legibility. When a website uses font that is too small to read and that does not resize this can be a deterrent for the visitor to stay.

Colour scheme also plays an part in the issue of legibility. If the colours used for the text and background do not have enough contrast it is difficult for the average person to read, never mind a visitor that has a vision problem.

Web Page Content

The content of a web page would include the actual typed words on the web page, the images, the ads, the fancy images (animated gifs, Flash) and navigation system. Anything on the web page the visitor will see.

Word Content

You have probably heard a million times “search engines love content”. The web page content this refers to is the actual written words on the web page. The search engines don’t read images and they don’t read scripts. They look for actual words on the web page. More on What Search Engines See…

Breaking up the written content on the web page with headings and subheadings not only adds to the legibility, it makes the web page scanable (the visitor can quickly scan the web page for what they are looking for) and search engine friendly if actual heading tags are used (instead of images as headings).

Web Graphics

Web page graphics are all the images on the page. Photos, logos, animated gifs, banner ads and Flash movies are all web page graphics.

Having too many web graphics on a web page can make the page slow to load if there are too many or if they have not been optimized properly.

Too many graphics can also make the page too busy and cluttered also. You want to have a great looking site without going overboard with the graphics.

Special graphics like Flash would require the visitor to have Flash on their machine or download it to view the image. Some people are very wary about downloading and installing things on demand (especially if they don’t really understand why).

Website Navigation

Most people learn from repetition. If your navigation system is consistent throughout the website then they will “learn” where to look for the navigation links and how they work.

The website navigation system needs to clear and easy to understand. Having the visitor guess where you have stored information is not going to get them to stay on the site or bookmark it for a return visit.

That’s it for today.

Check the categories to the left for different areas of web page and website mistakes and how to fix them.