One of the trickiest things a web developer runs into is making sure their website is W3C compliant. Some developers take longer time to make sure their code is valid than they do actually developing the site itself. And when they are done, they smile as they can put that little “W3C Compliant” image or text at the bottom of their site.

A lot of designers put the little “W3C compliant” image or text at the bottom of their page even though the website isn’t valid but that’s another article.

What is W3C Compliant? What’s the big deal? W3C is an acronym for the World Wide Web Consortium, or a group of web and other technology professionals that set standards for how web pages should be developed. Because all web browsers handle certain code differently, the W3C’s function is to develop methodology that ensures that web sites are “Cross Platform Compliant,” or, in simpler terms, that the websites work the same way on all browsers.

So why do we want W3C compliant websites? Well probably the biggest attraction to making sure you validate your website is accessibility. Websites that are complaint will be more visible to search engines, and of course, the more visibility, the more traffic the site will get. Also, in relation to that, browsers that are developed for special needs people (screen readers, voice browsers, Braille browsers, etc) will be easier to read by their software.

Another advantage to W3C compliant websites is the reduction in development time. A website that is coded from the beginning using W3C standards is less likely to run into problems. You will find yourself spending less time debugging your code, and more time focusing on the site itself.

Stability is another tenet of W3C compliant websites. The standards that are developed by the W3C are developed with a lot of thought and design for both forward and backwards compatibility. In other words, as browsers progress in their development cycle, sites that are W3C validated will be less likely to run into problems in the future. Your code will be stable for years to come.

On the developer side of things, using W3C standards will help you develop a smoother workflow when developing your websites. The standards are put into place to help teach good practices when developing websites. The W3C has created validation tools that will help even the newest HTML developer easily spot mistakes and even show methods of correction.

Lastly, W3C validation is a sign of professionalism. Today, there is no “official” certification for HTML and CSS design. Sure some universities teach the coding techniques, but only as part of a larger scale program, and there aren’t very many, which leaves a lot of would-be coders left in the dark and having to learn themselves. Validation methods and W3C standards allow new developers the opportunity to be more successful in their development careers.

When you look at the advantages of W3C Compliant websites and Validation techniques, you can see how learning these simple systems can help you become a better web designer, and ensure that your code will be used for a long time.

The browser wars are over and with them the need to develop specific code for specific browsers. All the major browsers (Chrome, Firefox, Internet Explorer, Opera, Safari) are now cooperating so that the same piece of code in a web site will look the same in multiple browsers, as well as looking consistent in other browsing devices such as microbrowsers and TVs.

What Are Web Standards?

Designing with web standards is a general term used to mean that you use the following technologies, and that you use them correctly:

• HTML or XHTML to contain the content,
• CSS to hold all the styling,
• JavaScript and the Document Object Model (DOM) to take care of any scripting.

In the bad old days, HTML was used incorrectly. Objects like tables are meant to be used to hold tabular data but instead they were (ab)used to hold background images and other components just to artificially create a layout on a web page. Style information was mixed in along with the content making the code bloated and inefficient.

The web standards project seeks to:

• persuade browser makers to support the standards, as they were intended and
• persuade web professionals to use them that way.

Why Should I Care?

There are numerous, tangible benefits to designing with web standards, not least of all, financial savings.

Lower Costs

Separating the content from the styling makes your site easier to update and maintain. This makes it less expensive for the developers as less time is needed to add new content, update existing content and test. Also, your site will be future-proofed. All compliant browsers will always support your code, you do not need to have the developers retest every time a new browser releases a new version just to make sure that the pages still look the same.

If your site is large then separation will also mean a substantial savings on the bandwidth, which in turn translates into lower hosting costs.

Increased Findability, Improved SEO

If your site uses meaningful (X)HTML then your site’s content is easier for search engines and therefore customers to find. Some search engines score pages on how well-structured the markup is, your Alexa ranking is affected and other SEO metrics are also improved. For example, when you separate the site’s content from the styling, your site gets lighter because there is less code. This means that your site loads into browsers faster and provides a better user experience, this represents an SEO benefit as search engines like Google score pages on their load time.

Gain a Wider Audience, Find More Customers

When your site complies web standards, accessibility is improved. That means that not only people with disabilities will be able to access your content, but also your site will be available to the new generation of mobile browsing devices automatically. In other words, new potential customers for free.

Designing with web standards is not about adhering to a set of rules just for the sake of it: the benefits are:

• real improvements to your site and
• real financial savings.

Tableless web design, also called tableless web layout, is a method of designing web pages without using HTML tables for page layout. Instead of using HTML tables, style sheet languages are used to arrange the different elements of text on a web page. One of the most common style sheet languages is Cascading Style Sheets, or CSS.

W3C introduced CSS in December of 1996 in order to improve web accessibility and to also make HTML code semantic instead of presentational. HTML was originally designed as a semantic markup language that was intended for sharing research papers and documents online. As the internet became more mainstream, graphic designers looked for ways to control the visual appearance of the web pages that they designed. This caused a number of problems as tables were nested within tables that created really large HTML web pages. CSS was introduced to solve this problem.

Tableless web design using CSS has a number of advantages over tabled web design. One of the advantages is in accessibility. With the number of different devices now accessing the internet, web content can be made accessible to users operating a wide variety of devices from desktops, to mobile phones to PDAs. Screen readers and braille devices have fewer problems with tableless design because they follow a logical structure.

Another advantage with tableless web design is bandwidth savings. Tableless web design creates web pages with fewer HTML tags used purely to position content. This results in pages that become smaller to download. The style philosophy implies that all the instructions for layout and positioning are to be moved into external style sheets. With the basic capabilities of HTTP, since the style rarely changes and apply in common to many web pages, they will be cached and reused after they are first downloaded. This results in a further reduction of bandwidth use and download times.

Lastly, maintainability is also improved with the use of tableless web design. When maintaining a website, frequent changes are often necessary. Under table-based web design, the layout is actually part of the HTML itself. Changing the positional layout of elements on a whole site may require a great deal of effort. In tableless layout using CSS, virtually all of the layout information resides in one place – the CSS document.

You can check if a website is incorrectly using tables for layout at w3tableless.com

Website accessibility is critical to user Internet experience. It’s associated with the development of websites that can be accessed by everyone who wants to access them. And when I say “everyone”, it includes those with disabilities. Despite the fact that the Internet is growing, a lot of users do not have all the resources necessary for a full web experience. A lot of people use screen readers, do not have the latest browsers and plugins, surf with very slow modem speeds and use text-only browsers (without graphics). Creating “universal websites” is therefore an integral part of web design.

Who are these people with disabilities? These are users who are:

• Visually impaired – those who have low vision or are colour-blind or are completely blind.
• Deaf or have difficulties hearing.
• Paraplegic
• Dyslexic or have learning disabilities

Their needs can be very easily accommodated through inexpensive and simple design steps – resizeable text, clear and easy-to-follow instructions, large icons or buttons or using alternate texts.

Who Benefits From Accessibility?

Everyone! It’s practically a win-win situation for both sides.

Most people think that accessibility goes one way. This is why a lot of websites and web designers fail to go the extra mile by making sure their websites are more accessibility. Both the Website Owner and the User benefit from increased website accessibility.

Users, even those who have disabilities, despite the barriers that could have prevented them from enjoying use of many websites can benefit a lot from accessibility. On just one website they can:

• Access information without much difficulty
• Use their services
• Buy the products they have
• Communicate with other users

By increasing accessibility, you end up with more satisfied customers (even the disabled ones) who, in due time, will become very loyal users. They’ll either continue visiting and using your website or promote your website by recommending it to other people.

Benefits For The Website Provider.

Investing a little bit more effort on a website’s accessibility goes a long way. The more accessible your website is to a variety of audiences, the better it is for you. Here are some of the benefits you can reap by increasing your website’s accessibility:

Your audience will grow.

Since your website is more accessible, it means more people will gain access to what you have to say or offer. This means your market share also increases.

Vastly increases the maintainability and efficiency of your site.

Your website will be based on a standard and because of this, it’s going to be easy to add new content or manage existing ones. Because information will be more organized and sensible, search engines will love your website.

Your reputation will improve.

Increasing your website’s accessibility lets people know how much effort you put into your website. After all, not many web designers maintain accessibility on the sites they build.

Meet legal requirements

, both now and in the future, and demonstrates social responsibility. Refusing to provide a service that’s generally available to others or providing a lower standard of service to people with disabilities is tantamount to discrimination. and is illegal under the Disability Discrimination Act 1995 (DDA) and the new Equality act 2010 due to come into force this October.

So now what? Explaining to the web designer the layout design you have in your mind can be a very frustrating process. You will find that putting the “picture” in your mind into words can be a difficult task. Actually in most cases this is the biggest hurdle between you and the final outcome. No matter how talented the web designer is, if you can not communicate with him properly, in his own professional language, he will not be able to use his talent to achieve your design.

There are two possible situations you may face:

1. You know what content you want on the website but have no clue how to present it to the user.
2. You know what content you want on the website, and you have the layout in your mind, but you don’t know how to implement it.

In both cases you will need to explain your thoughts to the web designer. Although most people who read those lines are probably thinking that being in the second situation is better then being in the first situation. However, real life experience shows the opposite to be true. Giving a web designer the complete freedom of action regarding the web design based solely on the website content is usually a smart thing to do. You will find that explaining to the web designer what the nature of your website is, whether it’s a product that you want to sell or a hobby item, is much easier then trying to explain to him the temperate of the color schema or an undefined shape that you would like to have in the website header.

Actually for both of the situations, I would suggest you use the same approach, but with a minor modification to each situation. If you know of a website that has all the features you want or need and/or a site that looks the way you want your site to look, be sure to give the site’s url to the web designer. Doing so will give him some idea of want you want. You will both be looking at the same thing but will actually look at it from a different angle. Therefore, it may be better to give him more than one website as an example. The more websites you find that can express your feelings and/or needs, the easier it will be for web designers to understand your intention without you having to use a single “technical” term. Chances are that you won’t find a single website that has all of the feature you want. After all, if such a website already exists there would be no place for your new web site to be born. Use several websites to express the different features you want. Spend as much time as necessary until you find just the right websites to provide examples of your needs. Doing research at this stage will definitely save you a lot of time later trying to point the web designer in the right direction.

Although you are the one who needs to express your self to the web designer, you must learn to listen to him as well. When he uses technical terms, ask for their meaning. Do not finish any part of the conversation unless you are absolutely sure that both sides are on the same page. Remember that when a web designer speaks about the temperature of a color, he is not talking about the next day’s forecast.

Remember, you hired a professional web designer because you want a professional looking website and you couldn’t do it yourself. So, trust the web designer’s judgment when they tell you something you want won’t work or isn’t the best way to accomplish your goals. After all, you are paying them for their expertise. Don’t try to tell them how to do their job.

It is OK to require that a web designer gets your approval each step of the way so you can tell them if one of your goals isn’t being met. Also, if you really don’t like how something looks and want it changed, tell them immediately. Don’t wait until everything is done and then decide you don’t like it.

A final word about cost

You have agreed on what needs to be done and the web designer has given you a price quote. Simple modifications and bug fixes are usually included in the price. However, other major changes or outright revisions may or may not be included. Make sure the agreement states what is included, what constitutes a revision rather than a fix, and how many changes you can make after delivery without incurring additional costs.

The relatively young marketplace for Web design services can be difficult to navigate, particularly for small business owners who aren’t sure exactly what they need in website development. “We found that a lot of companies are not very truthful. It’s like the Wild West out there. Anyone can work out of their back bedroom with a pirate copy of photoshop and say that they are website designers,” says Jason Boyd, Web Design partner with Pixelbox Design, a Web design firm based in West Lothian Scotland.

Personal referrals are always a good start for professional services, but once you get a few, do background research on your own. Search on typical keywords and see where—or whether—the recommended companies come up: If they can’t get their own sites optimized for search engines, they probably won’t do a good job on yours, either.

Inquire about designers’ credentials and ask whether they belong to a professional association with membership standards. Ask whether they follow W3C international standards for web design coding. If they have done government contracts, those lend additional credibility; public agencies typically vet contractors thoroughly.

Don’t Rely on References

You want original, custom content (not standard templates or cut-and-paste copy) from professionals, so make sure that the designers on your project have at least five years’ experience. Take references with a grain of salt: What’s stopping them from giving you the names of their friends? Better to check out whether they are actively engaged in the web design community.

Once you have some good candidates, ask what specific results they have provided for their clients. You want a site that enhances brand loyalty (which means that customers return frequently) and that increases sales leads and lead conversion rates. The beautiful thing about this industry is that you can directly measure the results through Google Analytics. Designers should give you case studies that show the positive results their clients have experienced.

Read any contract thoroughly before you sign it and do not rely on verbal promises. If an aspect of your project does not appear specifically in the contract section, make sure it is rewritten so it does. “If you have negotiated special payment terms, make sure those are spelled out in the contract rather than verbally agreed upon.

The same goes for copyrights, particularly to photographs, images, and licensed content. Make sure the contract spells out who retains the ownership of those images and if ownership transfers to you once the site is finished and paid in full.

The contract should also guarantee that you get official ownership of your site design and copies of the original files used to create your site. “These files are often needed down the road when you want to make changes to your site. Have them in your possession, because “you never know when you will need them.”

Microsoft have unveiled a beta version of WebMatrix, a free tool intended to simplify Web application development based on Microsoft’s ASP.Net Web platform.
Serving as an addition to the Microsoft Web Platform for building and running Windows-based Web sites, WebMatrix is for developers of all skill levels.  It is downloadable at the WebMatrix website.
[ See InfoWorld's report on Microsoft's recently upgrade to its Expression toolset for designers and developers. ]

“WebMatrix is a task-focused tool that is designed to make it really easy to get started with Web development,” said Scott Guthrie, corporate vice president in the Microsoft Developer Division, in a blog post. “It minimizes the number of concepts someone needs to learn in order to get simple things done, and includes and integrates all of the pieces necessary to quickly build Web sites.”
“This tool is free, provides core coding and database support, integrates with an open source Web application gallery, and includes support to easily publish/deploy sites and applications to Web-hosting providers,” said Guthrie.
Developers using WebMatrix can build Web sites from scratch or download and customize applications available within Microsoft’s Web Application Gallery.
Also part of the WebMatrix download are IIS Developer Express, which is a lightweight server for building and testing ASP.Net Web sites; SQL Server Compact Edition 4, which an embedded database engine; and ASP.Net programming extensions. Components integrate with the Microsoft developer platform and tools including the Visual Studio IDE, SQL Server database and Windows Server OS.
Also, WebMatrix integrates with ASP.Net Razor, enabling a view engine option for ASP.Net, providing a code-focused templating syntax optimized around HTML generation.
“IIS Express, SQL CE, and the new ASP.Net Razor syntax bring with them a ton of improvements and capabilities for professional developers using Visual Studio, ASP.Net Web Forms and ASP.Net MVC (Model View Controller),” Guthrie said. “We think WebMatrix will be able to take advantage of these technologies to facilitate a simplified Web development workload that is useful beyond professional development scenarios — and which enables even more developers to be able to learn and take advantage of ASP.NET for a wider variety of scenarios on the Web.”

WebMatrix is a 15MB download. Microsoft could not immediately provided a date for general availability of WebMatrix.

As someone who has been building websites for many years, I can tell you the two areas that are the least understood and the most maligned are compliance and accessibility.

Seen as a type of website welfare, only for the few, they are often ignored as an “only if I have to” or “only if I’m sued” addition to most websites. But following W3C compliance and the WCAG (Web Content Accessibility Guidelines) Level AA can help you reach an untapped £13 million market, and also reduce your IT costs, ready you for mobile, improve your Google quality score, and organic search engine placements.

Also, adding the accessibility guidelines would require only 2 percent more effort if you’re doing everything else right, so you could have just one website to meet all your needs. (Note: there are some sites where the functionality is so complex a mobile site will be necessary to present users with paired down functionality. However, most sites can be transformed to work with smart phones and dumb phone mobile devices without creating a second site.)

No way you say? Yep, way. Here’s how.

WCAG AA Guideline: Semantically Correct Valid (X)HTML and CSS

Step one is creating a semantically correct site with valid code. But what does it mean to be semantically correct? I like to use house building analogies.

• Use your HTML for structure only, not presentation. (Think of it as framing on a house) This means no line styles or attributes. Your HTML tags should be completely clean of any extraneous code.
• Use CSS for presentation layer. (Think of it as the decoration on a house) This means all presentation elements go into your CSS sheets, including image borders and spacing.
• Use proper HTML tagging for structural and content. (Think of this as knowing the difference between a load bearing wall and a frame) For example, use lists for navigation and footers, tags for paragraph breaks, CSS for spacing instead of  , etc. Know what your tags are supposed to be used for and then use them that way.
• Move all scripting and inline CSS to external files. (Think of this as putting your wires in coils) Make sure all your client side scripting (example: JavaScript), CSS, etc., are in externally included files. This is just a good code practice.

OK, so that was the hard part! You’re almost there once your code is semantically correct, your presentation layer is separated from your structure, and your scripting files are external.

Choose Your Technologies Wisely

The WCAG AA standard requires that your site be accessible with scripting that isn’t keyboard dependent.

You can meet this standard easily for most functionality requirements if you choose your scripting languages and methods carefully. If not, you can offer alternatives, but this is a least desirable method. Good programmers can almost always come up with a better method, so let them flex their creative muscle and come up with compliant solutions.

Think about it. How nice would it be to only have to maintain your one site, instead of two? Remember, “universal design” is about “one site to rule them all!” No more dual site maintenance. Not only will this help you reach that untapped accessibility market, but also reach more and more mobile users as they come online in droves.

Finally: The Secret Ingredient! Adding your Accessibility Tagging

Accessibility tagging is simple. Here are the most common tagging items you need to add to your site:

• Skip to Content links at the top of the page. Screen readers (and dumb phones) can skip to your content areas and bypass links and redundant content areas. Good for mobile, good for accessibility.
• Add alt tags to all images. Leave empty the ones that are on decorative items or part of a text link.
• Make sure your link text is descriptive. This is an SEO standard already and just means, for example, don’t use “click here” or “learn more” on your anchor text. Make it understandable out of context.
• Make sure your links or click functionality are evident by more than a color change. Again, good for mobile, good for accessibility.
• Make sure your colour ratios foreground to background are 4.5:1. Great for making sure your site looks good on LCDs as well.
• Make sure all your functionality is keyboard available (i.e. without using the mouse). Good for mobile, good for accessibility.

While there is a bit more to it (for a complete list go to the W3C WCAG 2.0 Guidelines or to WebAim), this gives you an idea of just how easy it is to add the tagging once you have done the rest of the site right from the start. Pretty painless, right?

So Again, Why Are We Doing This?

While it’s most certainly the right thing (and, soon, possibly legal thing) to do, it’s also most certainly the smart thing to do.

So let’s review. Why are we doing this? Simply, it’s the smart thing to do.

However, if you have to make this argument to your manager or CEO, what can you tell them to help bring them on board? Why is it smart to do this semantically correct, universal design, accessibility thing? Let’s summarize.

1. Clean Compliant Accessible Code = Better Sites = Better Everything! If you code for semantically correct W3C/WCAG AA accessibility compliant code, your code is clean. Clean code is much better for your servers (clean code = light code = less server load) and your SEO and PPC (Google dings sites for long download times), plus it’s easier to use on mobile devices and smart phones. And it just looks good! OK, I know only geeks like me look at site code for site validity, but I’ve used that as a deciding factor in site trust.
2. Ease of Maintenance. Sites that are semantically correct and accessible make site maintenance much easier. So, the next time you want to do a major design change, or just do a general update, you will be thankful for that little bit of extra time you spent getting your site semantically correct and in standards mode. Why? Because changing out a CSS/XHTML controlled site layout and design is fairly simple as long as you don’t want to rebuild the house — and even then, it’s much easier in CSS. So while making your header purple and changing all your links to red may not be advisable, it will be simple. Or at least much simpler than before!
3. Mobile Ready. A semantically correct site, loaded with accessibility tagging, is just waiting for that mobile style sheet to make it dumb phone compliant. While it’s a little more complex than this, a properly coded site will render correctly in the webkit (smart phones). So dumb phones are an easy adjustment.
4. Better for SEO. This bears repeating because if you use compliant accessible code, your site is great spider food. Your code-to-text ratios are lower and your site downloads faster, which we all know is a new factor in the Google algo game.

Doing all these things will reduce IT maintenance costs, increase your SEO presence, and make your site mobile ready. Now isn’t that worth just doing it right to begin with?

With todays fast and constant technological advancements, it is no longer an option to have a company website, as they are an essential and important extension to any business and its marketing strategy. The World Wide Web is especially advantageous to small businesses because it means they are playing on a level playing field in terms of advertising. Nonetheless, just having a website need not necessarily equate to a state of equality because your choice of website design company is crucial.

For this reason that it is recommended companies should leave web design to the professionals. There is an enormous temptation for companies to attempt to build their own website, but the money that may be saved will probably be lost as a result of the time that will need to be spent in learning the basic skills for website building and also as a result of potential clients lost because of a poor website.

Selecting a good website design company will ultimately be a sound investment because they will be skilled in web design, web technology, design trends and have familiarity with the behaviour of Internet traffic and search engines. These skills combined will ensure you will get an effective website that is attractive to users, portrays a professional image of your company and complies with Disability and equality legislation.

With a profusion of “web design comapnies”, it will seem quite daunting trying to select one to suit the needs of your company. In order to try to simplify this process a number of steps need to be taken.

Initially, you need to have a fairly good idea of what you want from your website. If you give no thought to this prior to contacting a web design company, then you may well spend too much money on features you simply do not need. Factors to consider should be how large the site should be and of course a good way of gauging this is to work out how much information you intend to place on the site. You then need to decide if the site will be either a brochure about your business, or a catalogue that may even contain items to be purchased. You should consider if the content will need to be constantly updated and if it will be a long-term or short-term site. Will you need interactive features, such as a search function or contact/feedback forms?

It is a good idea to rank the functions you may require according to their priority so that if necessary, you can cut back on functions that are less important if your budget should dictate this. Sketch a diagram of the site you are thinking of having, so that you are prepared with what you need to look for in the web design company you may use and of course this will allow the company you select to provide you with an accurate quotation.

Saw this and thought “How true” enjoy.

httpvh://www.youtube.com/watch?v=NLJzI0tQdD0