Episode 1: Why Web Standards
Starting at the beginning
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? I’m glad you asked.
A standards based website has several benefits to the average website owner including the following.
Simple visual consistency
Remember how I 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 I am a huge proponent of website standards but I am 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 I’ve mentioned here in mind. My hope is that I can steer you in a this more modern direction going forward.