Development

Why You Care About Web Standards

Web standards are a set of best practices for building Web sites. They help establish a consistent way to author Web documents and help browsers to uniformly render sites.

Kelly Packer

February 9, 2010

Web standards are a set of best practices for building Web sites. They help establish a consistent way to author Web documents and help browsers to uniformly render sites.

Just like there are standards for building solid, long-lasting houses, there are standards for building Web sites so they are more stable and viable for the future. A site built with Web standards is a sound investment and will add value to a business, increasing its longevity and sustainability. Standards-based sites are faster and more search engine friendly. They also are more scaleable, more accessible to those with disabilities and render more consistently across browsers.

Designing with Web Standards

Sounds dry, sure. But this book might surprise you. It's an entertaining read. The author, Jeffrey Zeldman, is a giant in the field and his quick wit is well known (his twitters are some of the best around). His contributions to furthering Web standards and raising the quality of Web design are immeasurable. http://www.zeldman.com/

Who Sets the Standard

Chaos ruled the Web revolution; designers, developers and companies were throwing everything at this new wide world and seeing what would stick. Each browser rendered sites completely differently, leaving Web developers to create multiple versions of the same site. Tim Berners-Lee founded the W3C in 1994 to normalize the way browsers displayed Web sites. These industry leaders came together and created compatibility recommendations.

Browser vendors were involved from the very beginning of the process, but it is left up to each vendor to choose whether or not to follow the recommendations. There has been progress, no doubt. Bugs continue to be worked out and legacy browsers are disappearing (the death of Netscape and the impending demise of Internet Explorer 6). While Microsoft continues to ignore standards and go it their own way, Firefox, Safari, Opera and Chrome, while not perfect, are built to support Web standards and continue advancements toward HTML 5 and CSS3.

While browser makers hold most of the power, designers and developers can also choose to follow the W3C recommendations or not. Some continue to rely on outdated methods to create sites with meaningless markup and excessive tables. Others develop sites that only work on a few choice browsers. It might seem amazing that this is still going on today, but sadly it is. Not everyone who builds Web sites are truly excited about the Web and want to make it a better place. For designers and developers, laying the ground work Unfortunately in the end, the user and the business pays the price.

Benefits of Web Standards

Faster

Separating the HTML, CSS and Javascript speeds up page load time because the CSS and Javascript files only need to be loaded once. Users love this because they are not bogged down loading the same files for every page they click to and it saves on server bandwidth costs.

Longevity

Standards code is written to last. It accounts for future possible Web technologies while keeping in mind older browser quirks. Well-written code serves as a solid foundation for scaling up your site when it grows along with your traffic.

Easier Maintenance

It's easier to read and maintain standards-based code and this makes updates quicker. If you decide to change Web masters, the new Web master will be able to understand standards-based, well-written and commented code much faster. All of this means paying less for Web maintenance and future updates.

Search Engine Friendly

Standards code is clean code. Code that avoids redundancies allows search engines to focus on the good stuff, the content. Search engines don't like errors in the code. Too many and they will give up indexing a site. While validating code is one tool to use to see if a site is on the right track, it's not the only barometer. There are times when invalid code is a trade-off for fixing a cross-browser compatibility concern or implementing a progressive design technique such as CSS3. Bottom line, search engines and users like the same thing: clean URLs, hierarchical content and lean code.

Beyond Validation

Some further thoughts on why Web standards is about a lot more than just validating code is on MikeIndustries.com. This post from 2004 (!) expounds on the real-world application of "valid" code. It influenced us as young Web designers and is still relevant today.

Accessible

What is good for search engines is good for user accessibility. Making sites accessible to impaired visitors widens your audience. It also keeps sites inline with the U.S. government’s Section 508 accessibility guidelines. Why wouldn't you want your site seen by more people?

Flexibility

By separating the HTML and CSS we can use the same HTML to create different style sheets for different formats including screen, print and mobile. This separation also allows the look of the site to be updated without having to change the structure.

Warning - Technical note!

There are many guidelines and techniques to follow when creating standards-based Web sites. The checklists can be lengthy and technical. Separating the content, presentation and behavior layers of a Web page is just one Web standards strategy, but it may be the biggest. It affects every aspect of the site and thus, the payoff is big. When hiring a company to create your Web site, make sure they are following this standard.

Got to Keep ‘em Separated

Most web pages are comprised of HTML, CSS and Javascript. The HTML is the structure of the page, outlining headers and paragraphs, etc. The CSS tells the browser how each element should be displayed. The Javascript adds the behaviors of the page, how the page should react to user events, liking hovering and clicking. Each layer of the page should be independent from the other. Take away the styles and the page still makes logical, hierarchical sense (this is how a search engine would see it). If someone doesn’t have Javascript installed on their browser, they don’t miss out on any of the content, just those extra enhancements.

This 'progressive enhancement' approach not only makes a site faster, but also makes it more accessible to users and search engines. Search engines don’t care about how the page looks and can’t read and execute Javascript. Adding each layer as a progressive enhancement eliminates this barrier so search engines can quickly crawl your site.

Web Standards For The Win

For companies, having to pay for a new Web site every couple years is unsustainable and can be downright disastrous. For Web designers and developers, it is very frustrating to create work that has a tendency to be ephemeral. Laying the groundwork with Web standards will help in the creation of enduring sites that contribute to the overall quality of the internet.

Read next