Put simply, website accessibility is the practice of making websites available to handicapped visitors. These handicap visitors will have disabilities that range from visual (people who are blind or color blind or have poor vision) to auditory (people who are deaf or are hearing impaired) to motor (people who don’t have muscle control) as well as people who suffer from seizures and intellectual or learning disabilities. Oftentimes when discussing website accessibility with someone the initial reaction is, Well, that’s such a minority group why should we bother. To that we counter that there are nearly 32 million people in the United States alone who are affected by one of these disabilities, which accounts for over 12 percent of the entire population. That’s an awfully big group to not be accommodating on your website.

Web Content Accessibility Guidelines (WCAG) have been established by the Web Accessibility Initiative (WAI), which is a part of World Wide Web Consortium (W3C), the organization that oversees the internet.

WCAG 1.0 / Section 508

WCAG 1.0 was the first effort to establish guidelines for website accessibility. WCAG 1.0 offers 14 guidelines that are broken into priority levels (Priority 1, Priority 2, Priority 3) with Priority 1 being items that must be addressed, Priority 2 being items that should be addressed and Priority 3 being items that may be addressed. Sound a bit technical? Well, it is and we are not going to delve much further than this as we want to focus more on practical hands on advice. However, if you’d like to learn more go to the Web Content Accessibility Guidelines 1.0 website.

We would be remiss if we didn’t also mention Section 508 guidelines here. Section 508 guidelines were created by the federal government and are closely tied to the WCAG 1.0 guidelines. The United States government already enforces these guidelines on all government websites (meaning that they are already mandating website accessibility standards). For more on Section 508 you can also visit the Section 508 website.

WCAG 2.0

In 2006 WCAG 2.0 was released and it shifted away from concrete guidelines to more nebulous concepts that websites should follow. If you think WCAG 1.0 sounded technical, well WCAG 2.0 is more so. Again, we are not going to go into specific details so we can focus more on practical advice, but if you would like to learn more go to the Web Content Accessibility Guidelines 2.0 website.

One last point about website accessibility. While there are visual elements (how a website looks) that are considered with website accessibility, most all of the guidelines deal with how a website is built and that is hard to convey to people who don’t regularly work with websites and think of websites merely as something they look at online. We make that point because realistically you can have two identical looking websites and one may meet website accessibility guidelines and the other may fail badly. It’s all about how a website is coded and programmed that makes the difference when we talk about website accessibility.

Practical advice to make your website accessible

OK, enough about the history and guidelines … What do I need to do to make my website accessible? We are glad you asked. Here is a list of items to consider when building a website. We should also mention at this point that website accessibility should be considered right from the beginning of any website project. It’s not something that you can easily retro fit down the road. We will say that building a website with website standards will get you very close to meeting website accessibility guidelines as there is definite overlap between the two. In fact the first item on the list is taken right from web standards guidelines. Having said that here is the list:

• Separate presentation (HTML) design (CSS) and function (JavaScript) – Sound familiar? Yes, these is the same approach a standards based website uses. You’re website should be built using this principle of separation. Not only is it good for accessibility, it is good for easier maintenance and better search engine results.
• Validate HTML and use semantic markup – Disabled visitors take cues from HTML code. For example if something is a paragraph mark it with an HTML paragraphs tag. If something is a headline use an HTML headline tag. Not doing so disconnects disabled visitors from content and makes understanding your website difficult.
• Allow for increasing text size – Make sure your website text can be increased or decreased using the browser. Visually impaired visitors rely heavily on this functionality. Do not set font sizes in pixels (it will prevent resizing in some browsers) but rather use a relative measure such as ems or percentages.
• Consider color contrast and don’t rely on color to convey meaning – Black text on a gray background is difficult for anyone to read. Imagine how trying this will be for someone with vision difficulties. Make sure you provide sufficient color contrast between website elements.
• Use supplemental navigation – Adding access navigation at the top of every page that jumps directly to content or navigation will be greatly appreciated by a blind user as they will be able to easily navigate your website (as opposed to having a lot of text read to them before they hit the navigation or content).
• Use access keys for navigation – People with motor function issues cannot control a mouse. Adding access keys to your main navigation will give them an easy alternative (a push of a button) to navigate your website.
• Use labels, fieldsets, legends and tab indexes on forms – Forms are often a pitfall for impaired visitors to your website. Take care to ensure that these visitors will have a good user experience and be able to complete your website forms by utilizing these HTML elements.
• With tables use captions and summary – Both of these HTML elements provide additional data about the table’s content. While these HTML elements are not visible to non-impaired visitors they are elements that impaired visitors rely on.
• Add alt text and title tags on all images – Alt and title are two HTML elements that convey additional semantic meaning about an image used on your website. A blind person will not see an image an only these tags will tell them what it is.
• Provide alternate content to multimedia – Flash files and the like are similar to images in that a blind person cannot see them. Make sure you provide alternate content for these files so they can understand your message.
• Use subtitles for video – Video is becoming more popular on websites and by right readable subtitles should be used to accommodate hearing impaired visitors.
• Underline links – If someone is color blind the color of your link text may look no different from the rest of your text. Underlines help set your links apart.

This list should give you a good idea of the direction a website should move towards to be accessible. There are also other resources available online that offer similar lists. One that we like a lot is Aaron Cannon’s web accessibility checklist and we recommend you review his list as well.

Testing for website accessibility

So by now you may be asking yourself, ‘How the heck do I know if I did all of this right?’ and that’s an excellent question. We will be the first to admit that website accessibility tends towards the technical side of website design, however you will be happy to know there are several excellent tools you can use to test if your website meets website accessibility guidelines.

Website accessibility validators

The following, free online tools will show you if your website meets website accessibility guidelines.

• Cynthia Says – This is the standard for testing for website accessibility. Cynthia Says has been around for years and will give you a detailed report on how well your website meets accessibility guidelines (and where it fails).
• Web Accessibility Evaluation Tool (WAVE) – This tool does much the same work as Cynthia Says but in a more visual way. Often we will use both tools when assessing website accessibility.

Other website accessibility related tools

These tools deal with specific elements of website accessibility but are no less useful.

• W3C HTML Validator – Validating your HTML code is a first step in making your website accessible. This tool will help show you any errors in your code so you can fix them.
• Color Oracle – Unlike all the tools mentioned this is a program you can download (for free) and it will emulate how a website will look to a color blind user. Very useful.
• Snook.ca Color Contrast Checker – Remember when we talked about making sure you provide sufficient color contrast on your website? Well, this tool will help take the guesswork out of it.
• Firefox Screen Reader Emulator – This tool is a plug-in for the Firefox browser and will show you how your website works for a blind person. Often this is very eye opening and pitfalls can quickly be seen and addressed.

Benefits of website accessibility and the future

Well, the obvious benefit of meeting website accessibility standards is that you are accommodating all visitors to your website. However, because there is significant overlap between website standards and website accessibility you also get some very nice benefits that all visitors (not just handicapped visitors) can benefit from including better search engine results and faster loading pages.

We predict website accessibility will become more important as time goes by. Already the government enforces website accessibility standards on their own websites and it may only be a matter of time before some level of enforcement may appear for all websites, particularly given the ever growing popularity of the internet. Even if no such law is ever passed we argue that it is simply a good practice to accommodate all users to your website and for that benefit alone website accessibility should be considered with your website.

Content management systems defined

Put simply a content management system allows you (the client) to edit your website without needing to know anything about HTML, CSS or any other technical knowledge. In the early days of the internet websites tended to be more static in nature. If you needed to edit your website you would contact your webmaster, send the desired changes along and wait for your webmaster to make those changes. Content management systems put the ability to edit your website in your hands and cuts out the webmaster (for the most part). Content management systems have evolved dramatically since the early days of the internet and today there are many well-refined options available to website owners.

Do I need a content management system?

Now before we get too far ahead of ourselves we would like to do what we do with our own clients and have a discussion about the pros and cons of content management systems and determine if you in fact need one for your website?

Pros of a content management system

• Can edit content without your website designer
• Format of content will be uniform across website
• Allows different access permissions for editing content
• Puts the website owner in control

Cons of a content management system

• The cost of adding a content management system is often considerable
• Code tends to be bloated and can open a website to security threats if not kept current
• Design may be constrained by the content managment system framework
• Unless used regularly users may forget how to use the content management system

Questions to ask yourself

The answers to the following questions will help you answer if you need a content management system for your website. It will also help you avoid the added expense of implementing a content management system if you really don’t need one.

How often will the website be updated?

If you are updating your website more than once a month a content management system will serve you well. However, if you are updating less than once a month you will more likely be better off simply working with your website designer to make edits.

Do you have sufficient resources to commit to a content management system?

Many of our clients are small business owners and the last thing they need is one more thing to worry about. If you are going to implement a content management system make sure you have people who will be responsible for using it regularly.

Do you plan on having a blog on your website?

Blogging has grown exponentially in recent years. It’s a great way to keep website content fresh. If you are planning on blogging (or have other types of frequently updated content) than a content management system will definitely be needed, but if not a content management system may not be required.

If maintenance will be done in house does your person know HTML?

Contrary to popular belief there are ways to maintain a website in house without a content management system. If you have someone who knows HTML, he/she may be able to edit the website directly. A standards based website separates content from the design so basic HTML skills are all that’s needed.

For more on this topic see our blog post titled Do You Really Need a CMS?.

How to make a good decision in choosing your content management system

OK, so you’ve answered the hard questions and determined that your website needs a content management system. What now? First and foremost you want to avoid making the mistake of building your website with a content management system that doesn’t fit your needs. This may sound like a no-brainer but we have had far to many people come to us over the years where this exact thing happened. Choosing a content management system that doesn’t meet your needs will cause you countless headaches. So how do you avoid this scenario?

Obviously your website designer will work with you to steer you in the right direction. However, even before that we recommend starting with your requirements and go from there. Think about the types of content you need to add and update. Is there e-commerce involved? Is there a blog? A calendar? Event listings? Once these requirements are nailed down then and only then should you begin working with your website designer to make a decision regarding your content management system. The reality is that while your website designer will work closely with you to make good decisions he or she can do so only if you have thought through what you need the website to do. If you don’t know what you’re looking for you can easily make a bad decision and get in a bad situation.

Using an existing content management system or building from the ground up

We tend to group content management systems into two categories. The first is an off the shelf solution built by a third party. The second is to have a proprietary content management system built from the ground up around your requirements. Personally, we come down on the side of the first option. For the clients that we work with the second option is often cost prohibitive. We are also of the opinion that off the shelf solutions have become very refined over the years and are robust enough to accommodate the needs of our clients. This is not to say that building a content management system from the ground up isn’t an option, however it is an option best reserved for large corporations with a full IT department. The other advantage an off the shelf solution has is that if your website designer wins the lottery and decides he is going to ride his bike across the country, you will easily be able to find another website designer who works with the system on which your website is built. The same cannot be said of a proprietary system built from the ground up.

Costs associated with a content management systems

As we mentioned earlier the costs associated with content management systems can vary wildly. For the sake of this discussion we are going to limit our explorations to common small business systems. (For those building a content management system from the ground up your costs will be significant to even develop the system itself.) Typically there is a licensing fee that is nominal (or non-existent for open source solutions). The costs of a content management system typically come in configuring it to meet your website requirements and training staff to use the system and support them in the opening weeks. There are also some additional expenses after your website launches (keeping the system current with upgrades as newer versions are released) but again these tend to us rather small and based more on your website designers time than anything.

Examples of content management systems

The systems we mention below are in no way meant to suggest these are the only options available. (Compiling such a list would be a monumental task.) Instead we have opted to highlight popular systems that we have used and/or are in frequent use today. Because we work primarily with PHP nearly all of these systems below are PHP based.

For basic editing

The following content management systems will give you control to make basic text edits but are somewhat limited in what they can accomplish.

• Adobe Contribute
• CushyCMS

For blogging

These content management systems will build a solid website focused on blogging.

• WordPress
• Textpattern

For e-commerce

If your website has a primary focus of selling, using one of the following content management systems will server you well.

• osCommerce
• Zen Cart
• Magento

For more advanced features

The following content management systems can accomplish blogging, ecommerce and many other features (forums, wikis, calendars, etc.).

• ExpressionEngine
• Joomla
• Drupal

Conclusion

Before jumping into a content management system take some time to make sure it is really what you need. If it is, do yourself a favor and write down a list of requirements. Armed with these requirements your website designer will be able to work with you to select a content management system that meets these requirements. Let these requirements drive your decision. A content management system is a big decision and not one that should be taken lightly.

Free things everyone should be doing

Let’s start with some obvious things if for no other reason than they are not obvious to everyone. Make sure your website address is listed on all business collateral (letterhead, invoices, fax cover sheets, envelopes, business cards – everywhere!) Similarly include your website address in any print ads, television ads or radio spots. We worked with a client recently who spent big money for radio spots and nowhere in them was their website mentioned. That is a missed opportunity. Build an email list of your clients and customers. On your website offer a coupon or a free download of something of value in exchange for an email address. Use your domain email in all business correspondence (not you@aol.com or you@gmail.com). Use your email signature as a marketing tool. Mention upcoming events or special offers rather than just your phone number. Make posts on blogs and forums in your field and be sure your website address is listed in your post’s signature. Search engines value inbound links to your website and this is an easy way to accomplish this. And finally, don’t let your website become an afterthought. If you do any marketing efforts will see diminished returns.

Search engine optimization

Search engine optimization (or SEO as it is commonly referred to) is the most common thing our clients ask us about. What we stress to them and what we want to stress to you is that SEO work is not the be all and end all in website marketing. It is a worthwhile option to explore but it should not be the only option you explore. And that is a common mistake many website owners make. We suspect this is the case because folks believe that SEO is a simple equation. However, contrary to what you may have been told (from some less than reputable folks), there is no magic formula for getting your website placed above your competitor (unless you want to pay for placement which will talk about shortly). High search engine rankings are the results of three major factors:

• Keywords in the content of your website
• Where those keywords are placed in your content
• Inbound links to your website

Search engine optimization work generally involves identifying keywords that are worth targeting with your website, revising (or adding to) your content to include these keywords in prominent areas search engines pay closer attention to and building inbound links to your website. The results of these efforts should be tracked regularly to see if your website ranks higher than it did before your efforts and adjustments should be made on a regular basis. What we don’t want to convey (and in fact want to dispel) is the idea that SEO is a quick fix. This is simply not true.

It is also worth noting that how a website is coded plays a significant role in search engine optimization efforts. A website built with web standards will rank higher than an comparable website built without standards. Why is that? Because web standards mandate that content and design must be separated and when they are separated search engines are fed only the content of a website as opposed to the design elements that are included in a non-standard website. Your keywords then have a higher keyword density because there are far less lines of code when content and design are separated.

Pay per click advertising

Now if you don’t have the patience for organic or non-paid search engine optimization to take effect, pay per click advertising is an alternative worth considering. It is much more of a quick fix, but at a cost. With pay per click advertising you bid on certain keywords to show up in the results when somebody enters those keywords in a search engine. Costs associated with pay per click advertising will vary depending on how far up the list you want to appear and the competitiveness of the keywords you want to show up for (for example the keyword cars will be far more competitive than pontiac trans-am cars). We often recommend pay per click advertising to clients who are building a brand new website because it will take some time for a new website to show up well in organic, non-paid search results.

A word of caution, however. Unless you have deep pockets you don’t want to become overly dependent on pay per click advertising. A better approach is to think of pay per click advertising as a supplement to organic, non-paid search engine optimization. We frequently recommend to clients using pay per click advertising to also work on improving their organic, non-paid search engine results with SEO at the same time. The idea is that you become less dependent on the paid ads over time and reduce your costs over the long term.

Google Adwords is the most popular pay per click advertising program today. Other search engines also have their own pay per click programs and even some social media websites (Facebook for one) offers their own version.

Email marketing

We are a big fan of email marketing. It is a great low cost alternative to traditional print marketing. Remember a few minutes ago when we mentioned building an email list for your business as one of the free things everyone should be doing? This is why. Emails can be sent to your customers and clients (as well as prospective customers and clients) for very little cost. For clients we work with we generally develop an HTML email template that can then be reused with each campaign they send. The results from any email campaign will largely hinge on the quality of the mailing list you are sending to. Do not buy spam lists from less than reputable outfits but instead focus on building a quality list by asking for an email address on your website and collecting it from any contacts or orders you receive.

When it comes to sending your email campaign you have a number of options but they generally fall into two categories. The first is sending the message from software running on your own server (usually using a script or a content management system that has this feature built in). The second is to use a third party service (Campaign Monitor, Constant Contact, etc.) to send it for you. The latter will be a little more expensive but it alleviates the headaches of potentially getting your server blacklisted (rightly or wrongly) as a spammer. Unless your list is very small we generally recommend a third party service to our clients.

Blogging and the RSS feed

As we mentioned in the opening your website itself should be part of the marketing equation. Your website should be updated regularly with new content to keep people coming back. Blogs are a great way to accomplish this. It is also worth noting that blogging has a very positive effect on organic, non-paid search engine results. Associated with blogs are something known as an RSS feed. Basically this is a way to syndicate your content so that anyone who wants to can subscribe to your RSS feed and get updated when you post something new in your blog. The Tunnel 7 website actually has two separate RSS feeds (one for the blog and one for the podcast). It’s yet another way to get the word out about your website.

Social media websites

We would be remiss if we didn’t talk about social media websites. Social media websites exploded in the last half of 2008. We can’t read any website related article or listen to any website related podcast right now without hearing folks talk about Twitter, Facebook and the like. All of these websites allow you to build relationships with people you would not otherwise know (as well as people you do know). There is an entire industry rising around folks who exclusively do social media marketing for their clients. While it is very popular right now and we will say that we have received leads and work as a direct result of our presence on these websites, we will caution you from getting too caught up and relying on social media for strictly marketing purposes. Is it valuable? Absolutely. But be careful what information you post. You don’t want to turn people away. People will quickly see through you if you are using social media for marketing only. Social media websites were created primarily so people could be social and interact with each other. The marketing angle, while all the rage right now, should really be secondary. Think of it as going to any social event. Do you want to be the person trying to convince your fellow party goers that Amway is a good idea for them?

Social media websites definitely have a role in your website marketing efforts but use them wisely and encourage social interaction first. Keep the marketing angle secondary.

Tracking results

Regardless of the method or methods you employ in you website marketing efforts tracking the results of your efforts will be critical. Website analytics will be your ally in figuring out what is working, what is not working and where you need to adjust your efforts. In earlier podcast we talked about website analytics in great detail so we won’t go into it here again. Just know that you must track results of any website marketing efforts to determine effectiveness.

Conclusion

Building a website is not enough today. The idea of build it and they will come unfortunately doesn’t translate well on the internet. While your website should be built with certain features that will help with your marketing efforts you will still need to get the word out about your website through other avenues as well. Following the advice and guidelines mentioned in this episode will make you aware of your options and get you headed in the right direction with your website marketing efforts.

As we mentioned previously building a website is like building a house.  A website project is built layer upon layer and each layer is very important and builds upon the other.  A weakness in any component will cause the finished product to suffer.  Today the final component we talk about is analytics.

What the heck are website analytics?

We are glad you asked.  Wikipedia defines website analytics as follows:

“Web analytics is the measurement, collection, analysis and reporting of internet data for purposes of understanding and optimizing website usage.”

Well said Wikipedia!  Understanding and optimizing website usage.  That is the power of website analytics.  Unlike traditional print media, websites offer a unique opportunity to analyze your user actions on your website on a very granular level.  Where are your users coming from?  How much traffic did your last marketing campaign bring in?  How much of that traffic did you convert into customers or clients?  The answers to these and many more questions can be found using website analytics.  All of this information can then be used to optimize your website.  This, to me, is the most important part of website analytics – the ability to use concrete, objective data to drive any adjustments that are made to your website.

Now there are a number of website analytics packages available ranging in price anywhere from free to very expensive.  In recent years Google Analytics has become very popular in part because it is free and also because it provides excellent data.  We will say that it has become a very good choice for ourself and a number of our clients.  However, there are a number of other options available.  The key isn’t so much what software you select but that you review the information produced and use it for your benefit.

A real world example of website analytics in action

OK, so we’ve determined that website analytics are important because it gives us concrete data about our website that can then be used to improve it.  How exactly is that done?

Well, let us give you a real world example.  On our website one of the goals we have is to generate leads from the form on our contact page.  Using analytics software we review every week how well we are meeting that goal.  Are our users getting to the contact page?  Once there are they completing the form?  If not why?  Where are they going?  Where are they coming from?  We look at all this information and from it make incremental changes to our website to increase the number of folks completing this form.  Now those changes need not be terribly significant.  We may be simply reorganizing content.  It may be moving a button further up on a page.  Whatever the changes are we will examine our analytics data next time and see if they have helped or hurt us in meeting our goals.

Without this data we’d just be guessing.  Our advice?  Never guess.

Think of website analytics as a bathroom scale.  If you wanted to know exactly how much you weighed a scale could do that for you.  Well, if you want to know exactly how well your website is performing analytics is the scale your website would step on to get that answer.

What information should I look at?

OK, you’ve made your point.  Website analytics are important.  I get it.  Now what the heck should I look at?  Well, in a recent post on our blog we wrote about the things you should know about your website.  Those were:

1. How many visitors does your website receive?

This is an excellent starting point.  Sure you’ve built a great website but unfortunately just because it’s on the internet doesn’t mean anyone will come.  Knowing how many visitors your website receives is essential to determining the effort that should be put into driving traffic to your website.

2. What is the most popular page of your website (other than the homepage)?

The great thing about analyzing website traffic is that it can tell you what your visitors are finding useful on your website.  Knowing your most popular page will tell you where you should be concentrating your development efforts (or where you may want to put an announcement for a new service you offer).  (We rule out the homepage simply because it tends to be the most popular page by default.)

3. What is the bounce rate on your website?

When someone lands on your website and leaves it immediately this is called a bounce.  Obviously not a good thing.  A bounce rate is a percentage of total users who bounce.  Your website should be inviting and offer visitors enough choices to draw them further into the website rather than bounce them away.  A high bounce rate is a red flag that your website is not very effective.

4. What is the average time spent on your website?

People tend to move quickly on a website but if your visitors are spending 30 seconds on your website it clearly isn’t doing you any favors.  We tend to look at average time and bounce rate in tandem as they usually go hand in hand.  When it comes to this metric the more time spent on your website the better.

5. Where does your traffic come from?

Does most of your traffic come from search engines?  Does it come from links on other websites?  Does it come from people directly entering your website address in their browsers?  Knowing this information is critical as it will show you which marketing efforts are working, which are not, and will guide your marketing efforts going forward.

6. What page do most people exit your website from?

If a high majority of visitors are leaving your website from the same page chances are there is something on that page that is turning them off.  It could be the page content or a form that isn’t working properly.  Identifying top exit pages often identifies problems visitor experience on your website.  And, once identified, they can be corrected.

7. How well is you website meeting your goals?

A website is an extension of your business.  Frequently it is the first impression as well.  Do you have goals for your website?  Do you track those goals with your analytics software? (You can and should!) By doing so you will see how often the website meets your goals in guiding your visitors to a desired result.

Conclusion

While website analytics don’t play a direct role in the building of a website in the way information architecture or content writing or coding or visual design do, it is a no less critical part of building a successful website, particularly given the current economic climate.

Website analytics software will collect valuable data about your visitors and show you how well your website is performing.  It will also give you concrete, objective data about what is working and what is not working on your website, which will then give you a direction to make adjustments that will increase the effectiveness of your website.

Using website analytics your website will get away from being something that simply looks good to something that acts as an integral part of your business or organization by driving your users to complete a desired action.  Without analytics in place decisions you make about your website will be based on subjective guesswork.  Don’t fall into this trap.  Put website analytics to work for you today!

Like we mentioned last month, you should be getting the picture that a website project is built layer upon layer and each layer is very important and builds upon the other. As we like to say, building a website is like building a house. A weakness in any component will cause the finished product to suffer. Today the component we talk about is testing.

Why do we need to test a website?

It is not uncommon for us to get this question when meeting with clients. And it’s a fair question. Why do we need to test a website? At this point we usually like to answer that question by making a comparison.

When people think of designs they tend to think of print pieces – catalogs, brochures, newsletters and the like. What is it that all those print pieces have in common? Go ahead. Think about it. For those of you who answered a controlled environment you get a gold star. Print pieces, unlike websites, are produced in an environment the designer has complete control over. He or she knows the paper the design will be printed on, can specify the color inks to be used and generally has complete control over the finish product. Each piece will look identical and everyone will see it the same way.

Now let’s consider a website. Do we have a controlled environment? Go ahead. Think about it. For those of you who answered no you also get a gold star. Because websites can be viewed on any number of operating systems running any number of browsers with screen resolutions that will vary greatly from machine to machine, we as website designers need to test to accommodate all these possibilities.

If you’ve ever seen a website that doesn’t work correctly or has a layout that appears broken or just plain doesn’t work in your browser you really have the answer to the question why do we need to test a website? It’s to avoid all of these things.

When it comes to website testing we tend to organize our tests into two general categories – website functionality and browser compatibility.

Testing website functionality

If we carry the print versus web comparison a bit further we will quickly realize the other component that print pieces do not have that websites do. Anyone? Go ahead. Think about it. For those of you who answered interactivity you also get a gold star. (And we promise not to use this annoying little Q&A mechanism again.) Websites are interactive. At the most basic level this could be a click on a navigation button that takes users to a new page, checking for broken links or a general contact form where users can submit information that then gets sent via email (or entered into a database). At more advanced levels it could be a member login where registered users receive additional content that non-members don’t or a forum or a wiki or some other format where users actually contribute content to the website.

All of these items, whether basic or advanced, require testing to ensure that the expected action or behavior actually happens.

When testing for functionality, in many cases we are actually attempting to break the website. Why? Because if we can find something that will cause the website to fail then so will visitors to the website. We want to find those things before they do.

Let’s use the example of a basic website form. When testing such a form we do things like enter a lot of special characters into the form to see if it still functions (special characters have special meanings in programming languages that can affect form processing). We leave required fields blank to see if we get logical error message telling us to complete the required fields. We also checking to see if that form data is being received properly (either by email or entered into a database). If any of these tests fail it then becomes a matter of determining why the failure happened and revising code to fix it. Is it tedious? It sure is. Is it essential? Absolutely.

Consider the alternative for a moment. Company A builds a website whose sole goal is to generate leads from the website through a contact form (much like the one we just discussed). The website gets built and launched with minimal or no testing of this form. After all, everything “looks good”. Six months pass and Company A realizes that they haven’t received a single lead from the website. Upon closer inspection it turns out that every time someone submits the form they receive a message politely thanking them for contacting Company A and a note saying someone will be in touch with them soon. However, Company A never receives the results of this form. Somewhere along the line there is a failure that was never caught because it was never tested properly. Company A not only doesn’t know how many submissions they’ve missed but has no way of reassuring those people who did complete the form and who, by now, have turned to Company B for their needs.

Does this sound far fetched? It shouldn’t. We can’t tell you how many times we’ve heard a story just like this. Functionality testing of a website eliminates this possibility and it should never be overlooked.

Testing website browser compatibility

So we’ve established that with websites we don’t have a controlled environment. Here are Texel Graphics we have a Unix machine running the Firefox browser, a Mac running the Safari and Firefox browsers and a couple of PCs that run the following browsers: Internet Explorer 6, Internet Explorer 7, Firefox, Opera and Chrome (Google’s new browser). Now we don’t mention this to make ourself sound schizophrenic. (For the record we have one primary machine we do most of our work on. These others are testing machines.) We mention this to illustrate all the different testing environments we have here to pinpoint any issues that can crop up with a website. Only by viewing a website in all these different environments we will be able to identify any bugs that remain.

Now you’re next question may be this: don’t all browsers work the same way? Ah, if only that were true. They don’t. Each browser uses a different engine that will render the code that makes up the website differently. You may recall that earlier we talked about validating website code. Now we are not going to go into much detail on the subject here (see last month’s episode for more) but as website designers we validate our code to ensure there are no errors in it. Having coding errors will nearly always create browser compatibility issues. However even 100% correct and valid code will render differently from browser to browser.

Let’s look at a real world example. Just this morning we were testing a project we are finishing up in all the different browsers we mentioned above. We noticed that in Internet Explorer 6 a search button at the top of the page was twice as wide as it should be. It looked perfect in all other browsers but it looked awful in Internet Explorer 6. We had to go back into the code and make a revision specifically for Internet Explorer 6. However, had we not conducted a thorough browser compatibility test we would never have seen this issue. The visitors to this website would have seen it and it would have reflected very poorly on our client (and on our work as well). Not a good situation.

Just like functionality testing, browser compatibility testing should never be overlooked in producing a website.

Conclusion

Website testing is a no less critical component then any of the other items we’ve talked about over the past several months. Testing is a requirement simply due to the nature of websites. Unlike print pieces, websites have no controlled environment (they can be viewed on different operating systems running different browsers) and they are interactive. As such, websites need to be tested.

Without testing a website runs the risk of not functioning properly when users interact with it and/or not rendering properly in different browsers and operating systems. This will reflect poorly on the website owner and have real negative impacts to the success of the website.

Is website tedious? It sure is. Is it essential? Absolutely.

By now you should be getting the picture that a website project is built layer upon layer and each layer is very important and builds upon the other. As we mentioned previously building a website is like building a house. A weakness in any component will cause the finished product to suffer. Today the component we talk about is coding.

After all the designs are finalized and the content is well on it’s way to being completed we get down to the nitty gritty of actually making a functional website from the work we have done. In the coding phase we work with html and cascading style sheets (css) to create the actual web pages. Unlike the previous stages that were largely collaborative efforts with the client, the coding of a website falls firmly in the lap of your website designer. While this phase does not have the glamour of the visual design stage and is largely done behind the scenes it plays a no less critical role. Decisions made during the coding phase of a website project have far reaching implications to accessibility and future growth.

So what exactly goes into the coding of a website? We are glad you asked!

Structure and URLs

During the coding stage we always start with defining a structure for the pages and directories of the website. This will closely follow the information architecture we defined previously, however there are still logical questions to be answered.

A website, when you get down to it, is simply a collection of files organized into directories. A good organization is essential. At the very least we always have a root directory which contains the top level pages (homepage, etc.), a directory for images that will be used on the website, and a directory for shared components of the website (header, footer, navigation, scripts, etc.) For a larger website we tend also to create directories for each of the main sections to keep them logically organized. For example if there is an about section that has a number of sub pages a directory named “about” will be created. Now you may be asking – Why should I care how you organize the files and directories? You should care because this directory structure ends up being the URL of your website pages. This structure is more than just something created to satisfy your designers sense of organization. It helps to create a logical flow to the website and defines the website address that will appear in the browser’s address bar.

It’s worth noting the this URL is also taken into account by search engines when ranking your website. A URL of www.domain.com/index.php?id=334232 is hard to make sense of but www.domain.com/services/web_design makes more sense both to the human reader and also to search engines. These types of decisions are made early on in the coding phase. They may not be glamorous but the do provide the foundation for all work that will follow.

When thinking through structure and URLs we are also planning the website for future growth. Planning in advance for tomorrow today is always wise because websites do grow over time. As a rule of thumb we try to minimize the number of levels deep a website can go. Two maybe three levels should be plenty in most cases. We don’t want to bury content several levels down but we don’t want the website to be too rigid to not allow for this future growth. Each project is different but spending time thinking this through is critical.

Standards compliant code

With our structure and URL plan ready it is time to actually start coding the pages. Web pages are coded in html. Now we are not going to go into great detail about the benefits of web standards (check out episode 1 for a detailed discussion about the benefits of standards) but this is the area where they really shine. All coding that we do separates design from content and is semantically correct. What does that mean? One of the major tenants of standards based design is that web pages elements should be coded to be what they are. This has benefits both in terms of accessibility and a residual search engine benefit. If a block of content is a paragraph it gets wrapped in paragraph tags, if it’s a list it gets a list tag … sounds simple enough, right? It is but we can’t tell you how many folks in our line of work don’t abide these web standards. Those relying on WYSIWYG editors to write code for them or building pages with old table based layouts that combine design and content aren’t doing you any favors. There is no reason in today’s environment why standards should not be followed.

Now you may be asking: What possible risks are there for not following standards? By not creating standards compliant html code you are throwing up unnecessary roadblocks for handicap visitors and search engines alike. By using non-standard code you also run the risk of having your website break as newer browsers are released. Not long ago we did some work for one of the larger companies in our area and they invested a lot of time and money into a portion of the website that used proprietary, non-standard code. With the release of Internet Explorer 7 none of the forms built on this code worked and the website was crippled. This doesn’t happen with standards based code. Browser manufacturers today closely follow the established standards when building their browsers. It only make sense then that your html code does the same.

Cascading style sheets

With our html coded it is time to give that html the look and feel we have established in the design. Whereas the html code holds all the content of the website, the style sheet controls all aspects of the design. Fonts, colors, background images, layouts … that’s right the style sheet is very powerful. But it can be powerful only if it is acting on the semantically correct html code that we mentioned (ah, now you see why we make such a point about semantically correct, standards based code!). If html code does not make a clean separation of content and design and is riddled with design elements it will override the definitions in our style sheet and greatly limit the power of the style sheet. Instead of making a change to a few lines of code in our style sheet that will affect the entire website we will now need revise each page where the design has been merged with the html code. You can see that this complicates maintenance of the website exponentially. This is not a good thing. It severely restricts the power of our style sheet and also severely complicates maintaining the website making it tedious, time consuming and expensive.

We would be remiss if we didn’t also mention the organization of the style sheet. Every designer has his or her own preferred method of writing style sheets. We have tried many methods but the key is keeping the style sheet file well organized (not unlike the structure of our website … perhaps you are seeing a pattern here?). A well organized style sheet is one that any designer (including the person who wrote it!) can read through, make sense of and quickly make any required changes.

How do I know if my code is good code?

Well, that’s a very good question. All code that is written for a website should be validated against current standards. The W3C is the organization that defines standards for websites and they provide validation tools to check the compliance of any page (and css style sheets):

W3C HTML Validation Service
W3C CSS Validation Service

You should make a point of asking your website designer how they are going to build your website. Make sure they are abiding by current standards. A design can be taken and coded in a standards based way and a non-standards based and look exactly the same but it’s what’s underneath the hood that counts in the eyes of search engines, screen readers and validation services. Admittedly it’s a bit technical but we strongly encourage you to make sure that the code being written is standards based code. In fact, if you make only one requirement for your website project make it be that all code used has to be standards based and validate (both the html and the css).

We also want to make a point about code reusability when it comes to redesigning a website. A couple weeks ago we were reviewing an older website for a potential client that was written with old, outdated non-standard based code. In reviewing it we told the potential client that there was nothing that could be reused. With the standards based approach this is never the case. If content is coded with semantically correct html code and design elements are confined to the style sheet the only thing that needs to change is the style sheet to give the website a completely new look and feel. All the html code can easily be reused. During the recent redesign of the Texel Graphics website we didn’t change any of the html code. All we did was write a new style sheet that redefined the look and feel of the website while relying on the old, semantically correct html code. The whole redesign took us less than two weeks because we had that solid foundation to fall back on. This fact of code reusability is often overlooked but it will save you a lot of time and money when it comes to redesigning your website down the road.

Content management system deployment

A content management system (CMS) allows you, the client, to edit the website directly without having to know html. Now we would be remiss if we didn’t at least mention CMSs at this point. If your website is going to be using one it is during the coding phase that it will be deployed. Now there are literally hundreds of different CMSs out there and we are not going to get into the pros and cons of each. We will say that CMSs are notorious for adding non-standard code to a website in their efforts to simplify use for the client. Be careful about choosing a CMS. Personally, we like ExpressionEngine because it does not do this. It allows me, the designer, to plug in the exact code that we’ve written and know that this code will not change within the system. It also provides you, the client, an easy to use interface that also produces standards compliant code. To us this is the best of both worlds! We mention this because many other CMSs define a structure for you in advance. This limits the design possibilities for your website and also starts the project off on the wrong foot with non-standards code. A CMS is a big decision to make and we would argue having one that will support standards based coding while still being easy to use will serve you best.

Conclusion

We hope we have made the impression on you that how a website is coded is just as important as how it looks. We will admit that are are somewhat biased when it comes to standards based code, however we are so because we know it has tremendous benefits for our clients and their websites.

While not the most glamorous part of the website design process coding is no less important in the ultimate success of a website. Making sure that the structure of your website is strong and can accommodate future growth, that your naming conventions are logical and that all code (both html and css) is compliant will maximize your website’s accessibility and search engine friendliness. It will also minimize your maintenance costs and improve the forward compatibility of your website. And all of this will pay big dividends today and down the road.

If we had to pick one area that clients consistently underestimate both in terms of the time involved and the importance to their website it would be content. There is a saying on the web that “Content is king”. While it may not be wearing a gold crown the content of your website, we would argue, is the single most important piece of your website.

Prerequisite for success

The internet is a very competitive place. Think about it. In any field there will be literally hundreds or even thousands of websites that are in direct competition with yours. They’re not just from down the street either. They can be from halfway around the world. How do you stand out from the competition? While your first answer may be the visual design of the website, research has shown that visual design makes only a first impression. Quality content is the reason why visitors stick around and click further into your website. A website with a weaker visual design and stronger content will trump a website with a stronger visual design and weaker content. Now while we are certainly not advocating ugly visual design this fact does illustrate the importance of your content. It really is a prerequisite for your website’s success.

Connecting with your audience

Writing content is easy, right? Yes it is. But writing good content isn’t easy. It takes time. As an example, just last week we spent several hours refining a single two sentence introductory paragraph for a website. Why did it take so long? We wanted that paragraph to connect directly with the audience that would be reading it. When they read that paragraph we want them to say, “Yes, that’s exactly what I need. How do I learn more?” and click deeper into the website. And that is what good website content does. It connects with your audience and draws them in rather than push them away.

One of the biggest issues we see with client website content is that it talks more about them as opposed to any benefits one may receive from working with them. Yes, there will be a place to talk about yourself but keep the focus on the benefits you offer to connect with your audience in a direct way. To do so we recommend the following:

• Write for your audience, not yourself. OK, this one isn’t terribly specific to a website but it is a good place to start. When writing content put yourself in the shoes of a member of your audience and, like we mentioned, speak to the benefits you offer.
• Tell your whole story and leave the marketese out. Never assume that anyone visiting your website knows anything about what you do. Your content should clearly tell what you do but should not rely on a heavy marketing slant. Research shows that visitors detest the marketese.

Formatting website content

Website content also brings with it unique challenges that printed materials do not have. Think about it. People on your website are always one click away from leaving. They literally have millions of different websites they can go to … instantly. It’s not surprising then that website visitors have limited attention spans and tend to skim more then they read on a website. If your visitors can’t easily find what they are looking for they will simply go elsewhere. Be sure when you’re writing your content that you take this into consideration. We recommend the following:

• Keep paragraphs short. Fifty words per paragraph is plenty and less is even better. People simply skip large blocks of text on a website and they should be avoided.
• Use lists whenever possible. What better way to feed content to a person scanning text than a list? Lists are easy to skim and easy to digest. Keep them short and they are ideal for website content.
• Use section headings extensively. Like lists, section headings give a skimming eye something to stop on and consider. Headings also have the added benefit of helping with search engine rankings so use them often!

Importance of content with search engines

That’s right. The connection between your content and how well your website ranks in search engines is a direct one. Your website content largely determines how your website shows up in search engines. Over the years search engines have become sophisticated enough to simply read your website content as you or we would (as opposed to relying on meta tags, hidden text and other older tricks folks used to use to inflate search engine rankings). How well your website ranks for a given keyword is the direct result of the search engines finding (or not finding) that keyword in your content. If search engine rankings for particular keywords are critical to the success of your website be sure that those keywords are included within your content. This will be the foundation from which all other search engine optimization efforts will be built.

One word of caution, however. Be careful to keep your human audience in mind. Content should, above all else, be easily readable and make sense to them. Your audience should not be able to look at your content and realize you’re more concerned with stuffing keywords for search engines than speaking to them.

Importance of regularly updated website content

With all the competition on the internet you want to give your visitors a reason to keep coming back to your website. This is accomplished by regularly updating and adding content. Think about it. If you have two websites in the same field and you visit both today and again in one month, and website A has the same content it did a month ago, and website B has new and updated content, which are you most likely to visit in the future? A stagnant website is one that will lose traffic over time. By not offering your visitors anything new a website quickly becomes dated and stale. Is that the message you want to send to your visitors?

Content updates need not be grand to be effective. Something as simple as updating a small news widget on a homepage will show that your website is regularly updated and current. You might also want to consider writing a blog, which is a great way not only to create new content but to connect directly with your audience in a somewhat less formal manner. If you don’t have time to write a blog then you may want to consider relying on your website visitors to add content. User generated content from forums, comments, reviews and the like all help keep your website fresh without you having to write anything. You could also incorporate RSS feeds from related sources to keep your website looking fresh. We have used this technique on client websites with good effect.

Conclusion

Website content is critical to the success of your website project. Be prepared to spend time putting quality content together. Remember that your website is one of countless others in your field. Well written and regularly updated content will speak directly to your audience, pull them further into your website and give them a reason to keep coming back over time.

The ultimate goal of website design

Usually we start at the beginning but when talking about design issues we actually like to start at the end. What is the goal of website design? Quite simply, it’s to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. And thanks to the information architecture work that was done in our previous step we have already defined our navigation and know what should figure more prominently and less prominently in the design.

The nuts and bolts of getting to our goal

Perhaps the best way to illustrate how we’ll achieve our goal of a user friendly interface is to talk about the different steps in the design process and pay close attention to how they dovetail with our previous information architecture work to create a finished product that not only looks great but keeps usability at the forefront.

Sketches

With all the technology out there you may think that there are all kinds of outstanding solutions for starting a design. However, for our money, nothing beats a blank piece of paper and a pencil (preferably with a large eraser) to sketch out the overall design. During the sketching process we are working closely with the information architecture document and literally sketching out how the interface may layout. Where will the navigation be placed? Main content? Related features? Logo? Ads? Mailing list signup? Legal statement? The sketching process allows us to look a the big picture and find a place for all of the elements the website requires and, more importantly, how these elements will help guide the user through the website. Frequent erasing and re-sketching is common at this stage as different approaches are thought through.

Grids and layout

Once the sketches are flushed out and we are happy with the interface from a big picture standpoint it’s time to open Photoshop and bring those sketches to life. But before we talk about colors and fonts and imagery we want to talk about grids. Grid-based design has been used in traditional printed media forever. In recent years there has been a trend to use them in website design as well. Why grids? Grids help align elements on the screen to create a clean, uniform look that also improves the overall user experience by allowing visitors to easily scan the screen. We are a huge fan of grid-based design and like to start our Photoshop file by creating grids that will accommodate the elements in our sketches. You’d be amazed what a difference alignment can make with any design. They are the skeleton that we’ll hang everything on.

Color palette

OK, so we have our sketches of how the overall interface will fit together and we’ve created a grid that will help us with aligning the elements used in our design. The next step is to define a color palette. Colors can be warm or cool. They can convey happiness or anger, elegance or aggression. The color palette will largely set the overall tone of the design. Now a color palette should not consist of too many colors. We tend to use no more than three main colors (and often related shades of those colors). We also like to use one accent color that will pop against the other colors in the palette for accent pieces that we’ll want to draw attention to. Many people tend to think that more is better when it comes to defining a color palette but just the opposite is the case. A small color palette will provide a solid, unified look across the entire website.

Imagery

Imagery to be used on a website can come from many sources. Most of the time the imagery we are working with is photographic, although sometimes illustrations are used as well. We have worked on projects with clients who’ve had amazing professional photography available and we have worked with clients who had snapshots they took in low light on a camera phone. As you might imagine there is a rather sizable discrepancy in quality of these photos. Imagery – be it photographs or illustrations – should be something to highlight and pull people into the design and not be something that your designer has to work around. As such we always recommend considering either a professional photographer and/or illustrator or professional stock imagery, particularly if the design is going to rely heavily on this imagery. Imagery needn’t be overwhelming to be effective. We usually find that a single piece of well placed imagery can have an outstanding effect on the overall design.

Textures and backgrounds

So at this point we are moving right along and the design is coming together nicely. We have our layout established (again, based on our information architecture work), we’ve defined a solid color palette and we’ve added some great imagery to the design. At this stage we usually have a solid visual for the new website but it tends to be a little flat. This is where textures and backgrounds come into play. Now a texture or a backgrounds need not be big and gaudy to add dimensionality to the design. A gentle background fade can make the difference between an OK design and one that really jumps out and feels very modern. So in this step of the design process we are dealing with more subtle enhancements to give the design a little more pop and dimensionality that it had before this step.

Fonts

And speaking of subtle enhancements that can make a big difference … let’s talk about fonts. We tend to start with a standard arial or helvetica font when beginning a design and then come back to adjust the fonts later as the design nears completion. Each font has it’s own feeling so matching the font to the overall feeling of the website is important. If the website is trying to convey a very elegant and posh feeling perhaps a flowing cursive font will be used. If the website is striving for a more industrial feeling a block font will convey strength far better than that flowing cursive font. Selecting the right fonts (and font combinations) can make or break a design. Now you may be saying to yourself, ‘Hey, we thought there were only a handful of fonts a website could use?’ Yes. This is true to a degree. We are limited to a handful of fonts that all browsers and operating systems will display, however there are a number of font replacement techniques that will allow us to use any font we choose for headlines across the website. These non-standard website fonts will be used sparingly in our design and provide accents rather than altering all the fonts across the website (which would present usability issues).

Finishing touches

We are almost there. Everything is looking great! At this point we are almost ready to present the design for review. However before so doing we like to stress about the little details. It may be the addition of a stylized line to separate sections or a rough edged background in the header or an accent used for lists on the website. These little details add that final bit of uniqueness that will make the website inviting to visitors and draw them in. With these little touches in place it is time to finalize the design.

Delivery of comps

We made it! The design is ready for review. When we deliver design comps we post them as standard .jpg files on a client page along with notes we made during the design process describing decisions we made along the way. These decisions will be based on the information architecture of the website and the priority that has been placed on each element. Once presented there are usually some revisions to make based on your feedback. Once these are done the design phase is complete!

Conclusion

While the visual aspects of website design tends to be what people focus on, it is important to note the solid foundation information architecture provided before any visual aspect of the design ever begins. This foundation played a role in all of the key decisions made with the visual design from our sketches right through to our finishing touches. Because of this work we are able to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. The visual aspects of the design may pull people in but a solid information architecture will help keep them on your new website.

Information architecture defined

A quick search on Wikipedia gives us the following definition: “Information architecture is the art of expressing a model or concept of information used in activities that require explicit details of complex systems.” OK, so that isn’t the clearest definition but at least it gets us on the right track. This notion of expressing information in a complex system, though a bit vague, does speak directly to the role information architecture plays on a website. The website is our complex system made up of various types of content and the organizing of this content is the expressing information piece. This organizing will largely define the layout of our pages and the navigation scheme our website uses. To put it succinctly, information architecture is the foundation upon which the website will be built.

Information architecture and user experience

If the information architecture is the foundation then it is critical that this foundation can support our website (and our website users). It is not enough to simply build a page for this content and build a page for that content and use this layout here and that layout there. Quite frankly this is how websites used to evolve. What happened back then was that the website soon had too many pages and these pages weren’t properly organized and the website quickly became difficult to navigate. In such a scenario the user experience suffered. And this is the critical component that information architecture brings to any website – enhancing the user experience. If your user can’t find things on your website, well the website (and your business or organization) will suffer. Today any website designer will gather all the types of content your website needs to display and organize that content before the website is even built. This is a critical step. Tedious? Sometimes. But definitely critical!

Good information architecture in practice

Because information architecture is rather nebulous, let’s look at a website where excellent information architecture is apparent. CNN is a very content heavy website that is updated every few minutes. Let’s take a minute to look at their website. What we want you to notice is the organization. The placement of every section on this website, the structure of the navigation, the design of each page – all of these are the result of a clear and well thought out information architecture design. This ensures that CNN always has a place for any type of content not matter how diverse and that this content is well organized, easy to navigate and laid out in a clear, succinct manner. And this connects back to the user experience we mentioned earlier. That experience is much better now. OK, now most websites don’t have nearly as much content as CNN but looking at their website as an example we can practically see the information architecture in place.

Laying the groundwork for a solid information architecture

Now that we have your attention and you’ve thought through all the different types of content you need on your website – Now what? How then do we ensure we have a strong information architecture? Well, for me, the first part is sitting down together and grouping the content. And when we say content here we are not talking about finished copy. This is far more high level at this point. Now everyone has their own ideas about the best way to accomplish this grouping but we have found that a good old deck of blank index cards, a sharpie and a large table is all we need. We start by writing the title of each content piece needed for the website on a card. Depending on the size of the site we may have 20 cards, we may have 100 or more but when we’re done and all the different types of content are accounted for we can then start organizing the cards into logical groups. Some cards are deleted, some are combined, some are added. The end result of this exercise is a document defining the pages and navigation scheme for the entire website.

Keep in mind that you as the client will know what information your website should have and your website designer will know the best practices for logically grouping this information for the purpose of the website. Information architecture is largely about taking these two inputs and establishing a result that will benefit – you guessed it – the website visitor by enhancing his or her user experience. It certainly is a collaborative effort.

Why is information architecture so darn important?

Strangely we often find that folks don’t find this part of a project to be all that important. Some have actually asked if we could simply skip it and just build the website. But if content is the most important piece of any website if follows then that finding this content and presenting this content in a clear way is critical. This is why information architecture is so darn important. If your navigation and page layouts are confusing your website is doomed. If your navigation and page layouts are logical and well presented your website is much more likely to be a glowing success. It sounds simple but without working through the information architecture exercises we would never have arrived at our glowing success of a website.

Conclusion

We often use the analogy of building a house when talking about building a website. Any house (and any website) needs a solid foundation. For a website, information architecture provides this foundation. Everything that comes after this step – defining page layouts, navigation schemes, placement of design elements, programming interactions – all are founded on the information architecture. With a solid information architecture in place your website is on its way to delivering visitors an excellent user experience where they will be able to easily navigate and quickly find the content they seek and that content will be presented to them in a well designed layout. They’ll be happy and that will make you happy as well.

When websites began there were no standards. In fact the internet was largely an academic invention and it was never intended to be able to display the complex design layouts that have come to dominate the internet today. It was really intended as a way for scholarly types to relay academic information to each other in an easy way. Design was never considered. Is was all about the content.

In the early days enterprising companies saw the potential of this new medium and began to stretch the boundaries of what was possible using the limited options html had for displaying content. At about the same time browser manufacturers began adding proprietary tags to extend the functionality of html. And somewhere someone figured out that the html table tag could be used to create design layouts on the screen and off we went into this brave new world with the design elements of the website intermingled with the content.

Early websites were, by and large, incredibly difficult to maintain. Why? This mingling of design and content meant that if you wanted to change all the page headers you had to do so by going into each page directly and making the change. Now on a five page website that’s not a problem but on larger websites it would take hours and hours of time. The same issue would arise whenever a design element needed to be changed. If the boss came down and said that the navigation should have red text instead of green it would have to be changed on each page of the website. And chances were that this navigation was an image as opposed to text which also meant that all the images would have to be recreated before the navigation could even be updated.

As time went by there were some small changes to make maintaining websites easier – server side includes and the like – however none of these dealt with the fundamental issue of the design and the content being intermingled. Accessibility on these websites was virtually non-existent. If you were handicapped and used a screen reader you would be read hundreds and even thousands of lines of code (including design elements) as oppose to just the content.

Fortunately the organization responsible for the internet – the World Wide Web Consortium (a.k.a. the W3C) stepped forward and developed standards that should be adhered to for both browser manufacturers (who were adding their own proprietary tags to the html language) and for website designers (who were merging content and design with table-based layouts). Of course the problem was that these standards would take time to implement as no browser supported them in the early days and website designers wouldn’t be able to adhere to them simply because of this lack of browser support.

Well, the good news is that today browsers do now (more or less) support standards based design and website designers have become skilled (particularly in recent years) in adhering to the established standards. Today the separation of content and design is not just a possibility but a reality. Now you’re probably sitting there asking yourself: Why should I care? We are glad you asked.

Benefits

A standards based website has several benefits to the average website owner including the following.

Simple visual consistency

Remember how we said that if a change needed to be made across the website the designer would have to go into each page and make the change because the design and the content were all intermingled. Well, aside from being a pain in butt, this also often resulted in visual inconsistencies. Perhaps the designer forgot to hit save on one page or perhaps he or she made a small typo and the text was the wrong font or the header was the wrong color. What website standards brings to the table is a separation of design and content. This means that all the content resides in the html files and how that content renders and how the design of the page appears on the screen is all be controlled by a separate stylesheet (known as a Cascading Style Sheet or a css file). This means that the design inconsistencies of the past are eliminated. The designer need not even access the content in the html files. Now if all the headers across the website need to be changed this can easily be accomplished by changing a few lines in the stylesheet. The html file simply loads the revised stylesheet when rendered and – voila – the change is made. This visual consistency across the website ensures uniformity and gives the website a professional appearance. Brilliant!

Accessibility to all devices

Another huge benefit of the standards based approach is that websites are now be more accessible to handicapped users and folks using assistive devices. That same person who had the frustration of trying to traverse an old, table based website that intermingled design and content with a screen reader is now presented with only the content of the website. This is a tremendous benefit, particularly when you consider that there are millions and millions of internet users who surf websites with assistive devices. Along the same lines because there is this clean separation of design and content other devices such as pdas and cell phones render websites far better than an old school non-standard, table based website. It’s also possible now to write a stylesheet specific to a given device. This is in it’s infancy but will become increasingly important as new devices (such as the iPhone) are introduced for browsing websites.

Website maintenance less expensive

So it’s not much of a stretch then to realize that a standards based website is much easier and less costly to maintain than it’s non-standard counterpart. Remember that navigation that the boss came down and wanted to change. Well, with the standards based approach that navigation is no longer an image. We now use semantic html, which is really just a fancy way of saying use html as it was intended. If something is a header tag it as a header. If it’s a paragraph tag it as a paragraph. If it’s a list tag it as a list. You get the picture. Then style the semantically correct html with the stylesheet. So not only do we not open up Photoshop and recreate the images used for the navigation we also don’t open a single html file (unless of course the actual content changes). Again, it’s just a few lines changed in the stylesheet and the design change cascades across the entire website. Where a change of this nature used to take hours and hours of work the same can be accomplished in minutes saving both time and money.

Better search engine results

Last but not least is the one that everyone asks about. Why isn’t my website showing up in the search engines? While a standards based website itself is not going to guarantee top placement in all the major search engines for your given keywords, it will definitely increase the likelihood of search engines ranking it higher than a non-standard based competitor. And if you think about it that makes sense. Because just like the handicapped user with the screen reader the search engine is presented with the content (and only the content) of the website. And that content is much much cleaner than it used to be because the design elements are separated and stored in the stylesheet. Search engines weigh all the content they are presented in an html file so if your keywords are among 90 lines of code in a standards based html file their weight is far greater than a non-standard html file that has 900 lines of code with design elements intermingled. So it’s possible that you can have a better answer the next time you has why your website isn’t showing up well in the search engines.

The future of building websites

Obviously we are a huge proponent of website standards but we are such a huge proponent because this is the future of building websites. A few years ago a standards based website was more on the bleeding edge simply because the older browsers had trouble supporting them and designers had to use lots of hacks which presented their own set of problems. But it can no longer be stated that a standards based website is on the bleeding edge. Mainstream websites such as the BBC, CNN and ESPN (to name only a few – there are many many more) have made the break away from table based layouts in favor of separating content and design using a standards based approach. So, as you are considering your next website project keep everything that we’ve mentioned here in mind. Our hope is that we can steer you in a this more modern direction going forward.