Web standards and why YOU should care about them!
Posted February 13th, 2008 | No Comments
Had this blog been around a few years ago, the topic of web standards would have been the top of our priority list.
Luckily these days people are generally more aware of web standards, however there are still enough designers either unaware of them or still ignoring them to make it worth discussing here.
So what are web standards?
First we need to get a little bit technical, I know this blog is for website owners and you hire people like us to worry about the technical stuff, but it’s important that you know just a little bit about how things work.
HTML
Most of you probably know that websites are coded in a language called HTML. You can right click and select ‘Show Source’ or ‘View Page Source’ to see the code behind any website. HTML is a mark-up language and was designed to identify pieces of content in a document such as headings and paragraphs. It was never intended to be used for design purposes. For example, HTML uses a range of header tags from <h1> to <h6> which were designed to show the relative importance of headings on a page not to change the size of the content which is what happened. Tables are another example of misused HTML, tables exist to display tabular data but they were manipulated and used for creating website layouts instead.
So whats the problem?
The main problem with sites constructed this way is accessibility, bad practices means sites are often unavailable to users not using mainstream web browsers and operating systems. Disabilities are another major issue, screen readers used by users with vision impairments have trouble reading table based websites due to the amount of code that nested table cells and font tags require.
This mass of code makes your site bloated which means it costs you more to host and is much slower for your users to download.
Web standards save the day
Web standards are a better way of building websites. They make is possible to completely separate the design from the content. The content is held in the HTML file as originally intended and all of the design code is held in a new separate CSS file. For example this is how a heading on our site might have looked in the past
<font face”Arial, Helvetica, “Lucida Grand”, Verdana, sans-serif” size=”10″ color=”#003366″> Web Design Bolton</font>
Now using web standards, we can mark it up semantically as a heading like this
<h1>Web Design Bolton</h1>
And add the styling to our separate CSS file.
These web standards were actually released in 1998 but browsers didn’t start supporting them properly until 2003/2004 and even today there are some issues with compatibility, particularly with Microsoft Internet Explorer. The problem was that browsers also had to support sites not created with web standards and that meant that it was easier for designers to carry on making websites the bad way and not learning to build them the right way. Which is why there are still people creating websites with table based layouts and not using webs standards today.
Why YOU should care: The benefits
If you only take one piece of advice from this blog please let it be this.
Don’t even consider a web designer who does not build sites with web standards!
Every site we have created from 2003 onwards has been accessible and built with web standards, here’s why we think they are so important.
- Faster websites - Because using web standards reduces the amount of code used, files are smaller to download making your site much quicker to use (and cheaper server costs too!)
- Better search engine listings - Search engines do not understand presentational code such as font tags, it actually stops the content of your site being indexed properly. Web standards leave a much cleaner HTML file containing only content for the search engines which results in much higher listings.
- Separate styles for print & mobile - With web standards you can have multiple styles or designs using the same content, such as for printing (maybe with adverts and navigation removed or better print fonts) or a site optimised for mobiles/PDAs with smaller/less graphics and small text.
- Easy to update - Because design is kept in a separate file it is much easier to change the look and feel of a site. It can be done from 1 CSS style sheet without having to change every page.
- Backwards compatibility - It’s important that your site is usable in as many older browsers as possible, web standards makes this more likely.
And of course, as we mentioned earlier, accessibility is the major issue. As a website owner you actually have legal requirements to ensure that your site is accessible. As well as obvious moral and business reasons. Web standards go a long way to making your website accessible. (Please see our accessibility page for more information.)
If you have any questions about accessibility or web standards please email us and we will be happy to answer you.