A better way to build your website

Build a site that is accessible to all, look better than ever, is cheaper to build and is compatible with both future & legacy technologies.


The Problem

The root of the problem lies in the way websites have traditionally been built. As I am sure you are aware, websites are constructed in a language called HTML. HTML was created by the World Wide Web Consortium (W3C) which is the body responsible for developing standards on the web. However, when HTML was created, nobody could have possibly imagined what the web would evolve into. HTML was designed to help identify pieces of content in a document, NOT to help the page look well designed. For example the header tags were created to tell a browser that this content was a heading. It wasn’t designed to make that piece of content look bigger on the page. Tables are probably the best example of this. Originally, tables were designed simply to display tabular data. However, web designers soon worked out that tables could be used to help with the layout of web pages. As the web became more commercial and companies became more and more demanding about how their brands were portrayed online, web developers became evermore creative about how they could manipulate HTML to show the effects their clients demanded. Summarising the problem, web developers have been ‘fixing the fix’ by continually manipulating HTML rather than ‘finding the solution’. "How does any of this affect me?" I hear you cry, "my site looks great". The reality is that your site may look great on your machine but what is going on behind the scenes will, in many cases, have the following effects:

1. make your site slower to download (because of excess amounts of code)

2. make you site unavailable to anybody not using mainstream browsers and operating systems

3. make your site inaccessible to those with disabilities. It is often easy to underestimate how serious the above points are. It is easy to say to yourself "as long as it is accessible to most people that is all that matters". However, by saying that, you are potentially excluding more than 20% of your users. That’s like your website being offline for 73 days of the year!

The Solution

So what is the solution? Well, fortunately the W3C are on the ball. They have introduced changes which will revolutionise the way in which websites are built. Without going into the technical details too much, they have created a way to separate the content of a webpage from the style of it by using XHTML and Cascading style sheets (CSS). This has numerous advantages which I will outline below. However, what is really remarkable is that they did all of this back in 1998. The problem has been that it is only relatively recently that it has been properly supported by the major browsers. Of course, the problem is that these same browsers have also got to support traditional websites (otherwise 90% of the internet would be inaccessible) and this means it has been easy for us web designers to carry on working in the way we have done for years. The upshot being that this new approach to web design has been slow to catch on. However, the benefits are enormous, and so I would encourage you to make sure your site adopts this new approach.

The Advantages

So what exactly are the advantages of separating design from content in this new way:

Flexible design

Cascading style sheets, which is the part of the new approach that handles all of the design aspects, offers unparalleled control over the look and feel of the site. This is because it is specifically designed to do that job, unlike HTML. Not only do you have pixel perfect positioning (something that opens up endless possibilities from a design perspective) you can also control how a page looks when it is printed, change the look and feel in an instant and have greater control over the way text appears. In fact you could easily write a whole book on the design benefits of CSS and indeed many books have been written. However, it is sufficient to say the benefits are considerable.

Streamlined code

Because HTML was never designed to create complex page design, web developers had to become ever more creative in the way they used it to achieve the desired effects. As a result, the amount of code and number of images used to build a page grew beyond belief to the point where there was a noticeable increase in download time. The new standards introduced by the W3C have done away with this problem. Pages are reduced to the absolute minimum of code so improving downloading time and reducing bandwidth costs for those that have dedicated servers.

Faster development

The improvements these new web standards offer to development time are almost unbelievable. Imagine being able to completely redesign the look and feel of your site by simply replacing one file! I know, it’s hard to believe but now it is actually possible. What is more if your site is built correctly it is no longer necessary to build different versions for different browsers or to design a separate print friendly version. All of this is handled with a few simple files. The man hours saved on this alone are massive.

Available on more browsers and devices

When most of us build a website we make certain judgements about the minimum specification of browser the site will run on. Most of us go for Netscape & IE version 5 and above. This captures the majority of the potential users. However, we are all too aware that a huge number of people do not use these browsers and therefore won’t be able to view our sites. Budget restrictions usually lead to the conclusion that the investment in building an alternative version for them is just not worth the effort. This problem has been further complicated by more and more devices accessing the web. These might include PDAs, mobile phone, web TV and the like. At the end of the day we have always been forced to draw a line in the sand and leave it at that. However, this no longer needs to be the case. The W3C have designed the new web standards with exactly this problem in mind. One version can now truly fit all. That is not to say they won’t look different in various browsers or on diverse devices but what it does mean is that they will be viewable on all.

Suited to the visually impaired

As we discuss in one of our articles on accessibility it will soon become law that any website offering a service (which potentially is all websites) will need to be accessible by those with disabilities. This obviously has huge consequences and is a topic in its own right. However, adopting the new web standards is a huge leap towards having an accessible-to-all website. I couldn’t possibly go into all the details of why that is the case here but it is enough to say that a well designed web standard built site will also be accessible to the visually impaired.

Future proof

Probably the most important benefit in adopting the new web standards is that you are future proofing your website. By that, I mean you will no longer have to redesign your website every time a new piece of technology comes along. These standards have been created by the W3C who are the official body behind the web and include representatives from all the major browser producers as well as from companies like Macromedia who produce web design tools. Admittedly, you might wish to redesign your site for cosmetic reasons but as I have already said this becomes a matter of replacing a few key files not rebuilding the whole site. Also, apart from the cosmetic changes the underlying content is here to stay. Eventually the majority of the web will be built this way. The question is not ‘shall I implement these changes?’ but rather, when.

Conclusions

So
why don’t all web designer
s build their sites in this way? One day I believe they will. However this is a huge shift in thinking for web developers. In effect we are being asked to throw away years of experience and start again. That is a hard thing to do. Some are burying their heads in the sand while others are just too busy to even discover there is an alternative to the way they have always worked. However, it is inevitable and for once the change is for the good. Unfortunately this article has only scratched the surface of what is possible and I am sure has left you with many questions. Feel free to email me and I would be happy to discuss the possibilities with you further.

  • http://www.mattbobjones.com Matt Jones

    Great article! Couldn’t have been said any better.

  • http://www.code-sucks.com Keith Donegan

    Very Nice Article indeed…

  • http://ForrestCroce.com Forrest

    I’m lost … your site is beautiful, and I can see it’s done entirely with divs – not a single table. I’m trying to do the same myself, but keep running into a problem you seem to have solved.
    How did you get your divs to resize when I maximize my screen?

  • http://cguniversity.com Sanjay

    Im facing problem in different browser setting.
    Plz solve my problems.

  • http://www.ahm531.com Ahmed Essam

    What a gr8 article!
    Am starting using CSS from today… I will redisign my page.
    I wanted to learn CSS before, but I was postponing it for a while,, after reading your article, am so encouraged…
    Thank U

  • Josh

    But Css makes NO sense!

Headscape

Boagworld