Benefits of developing with XHTML and CSS
Introduction
Every industry has standards; they are put in place to ensure easier understanding and consistency of workmanship. For example, building standards help ensure easier and cost effective home improvement. If you need to replace a door in your home, you can easily visit your local DIY store; pick up a standard door and 99% of the time it will fit straight in without any major modifications!
What Are Web Standards?
The World Wide Web Consortium (W3C), setup and founded in 1994, by Tim Burners-Lee, are an international industry consortium with over 450 global member organisations. They develop common protocols to promote the evolution of the World Wide Web and ensure its interoperability. These protocols are what we know as "web standards".
There are many different standards that have been created by the W3C however this paper will primarily investigate the benefits of implementing two standards, eXtensible HyperText Markup Language (XHTML) and Cascading Style Sheets (CSS).
Quoting the World Wide Web Consortium ( www.w3.org/TR/xhtml1/ )
"XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [ HTML4 ]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents."
"CSS is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance."
Slow Uptake of Web Standards
The introduction of these standards is nothing new; the W3c has recommended them since the late 90's. Every web designer has either heard of them or knows about them but unfortunately there seems to be a sincere lack of willingness to adopt these standards within the web industry.
Although many respected individuals within the web industry have tried to publicise the need to adopt web standards, the large majority of web designers are still using unorthodox markup and last century's techniques.
In the past, unorthodox and inefficient code was accepted as developers had to accommodate for non-standard compliant browsers. The use of browser detection scripts, misuse of HTML and sometimes multiple sites were common practice for developers. Those days are now long gone. The introduction of the Web Standards Project helped resolve the browser wars by persuading Microsoft, Netscape and other browser manufacturers to accurately support the W3C standards.
Benefits of web standards
Developing websites using validated XHTML and CSS offers many advantages over existing coding methods. Not only does it provide a better user experience but it also offers many advantages to both the designer and the client.
The majority of developers may be unaware, but traditional web development methods are actually costing them financially. Jeffery Zeldman emphasises this point, he says, "The more successful we've been in the field of web design and the longer we've been at it, the less likely we are to even be aware of the hidden cost of rotten markup." ( Designing with Web Standards, 2003, p. 145).
It is an unfortunate fact, but the majority of businesses will not change their preferred methods unless there is some sort of financial gain, thankfully, standards based design has many. It may not be immediately obvious, but converting to standards based design can pay dividends, so it is something that all web organisations and clients should be aware of.
Traditionally, web developers use tables and spacer graphics to achieve pixel perfect page layouts across multiple browsers. This often requires complicated markup, which bloats pages of unnecessary code. A major consequence of this coding behaviour is often very large sites. The larger the site and the greater the traffic, the larger costs sites owners will face on bandwidth fees.
Implementing standard compliant markup can eliminate the use of deeply nested tables, bandwidth sucking <font> tags, and other unnecessary complex markup. On many occasions, using cascading style sheets for presentation of web pages can considerably cut file sizes. In my experience, the re-design of a site using CSS for layout and text formatting, achieved a file size reduction of 95%. For high traffic sites, the impact of reducing file sizes can only mean one thing, vast savings. Every byte that is wasted on inefficient markup, costs site owners astronomical amounts of money every year. If by implementing validated CSS you can reduce file sizes by an average of 50%, the only consequence will be a 50% reduction on annual bandwidth costs.
Obviously it is only owners of high traffic sites that can truly harness the benefits of bandwidth savings; however, reducing file sizes also has many other advantages that can benefit everyone.
According to the Office for National Statistics, in April 2004, 72.8% of users still connect to the Internet via a dial-up connection. Although this percentage is decreasing, it is important that designers continue to build websites for everybody, not just broadband users. Large web pages are unfriendly to dial-up connections, they usually take a long time to download, often resulting in the user exiting the site before they have even viewed the page. By implementing web standards, developers have the chance to reduce file sizes without having to compromise design. Therefore, delivering reduced download times and increasing the user experience for both broadband and narrowband users.
In the future there is likely to be a huge increase of users connecting to the internet through mobile devices. For this reason, reducing page size is vital to the future success of any site. It is imperative that developers realise this and code the websites of today for the technology of tomorrow. The only way to ensure this, is by coding with web standards.
Designing for Today and Tomorrow
The technology industry is growing at an astonishing rate. Every week, new devices are being unleashed onto the market, all of which have new and different platforms and specifications. The one thing web designers need to understand is that these devices all share one important attribute, the software used to browse the web, comply with web standards.
Without building websites to the correct standards set by the W3C, they are likely to fail considerably when accessed by new platforms. Forward compatibility for websites is no longer a pipe dream, it is now reality. If websites are not built using the correct markup, web design companies will actually be making more work for themselves. Developing multiple sites for multiple platforms, eats away at the projects budget and more importantly the web companies profits.
When designing in accordance with web standards, the overall aim should be the achievement of, write once and publish everywhere. By developing sites to the W3C standards, you are securing the future of your designs. Not only will your sites appear and perform accurately in all current browsers, they will continue to work in future browsers and mobile devices. No longer will designers be creating sites, which become obsolete as soon as new browser is released or new platforms are developed.
As you can see, there are large savings that can be gained by developing with web standards. The need to develop only one site for every platform doesn't just save time in the development stages, but it also makes site maintenance much easier.
Work Flow Improvements
If web companies decided to discard their traditional coding techniques and adopt a standards based development approach, they should see an immediate effect on their work flow.
Web projects usually involve a small team of developers. Traditional coding practices make it extremely difficult to pass projects from one person to another as developers generally have their own personal coding techniques. If web companies adopt web standards, they will ensure higher consistency throughout their projects, enabling them to divide projects up more efficiently, streamlining their workflow. Using CSS to control page presentation and leaving XHTML to structure the content, allows developers to alter parts of the project independently of one another. This will undoubtedly speed up development time and decrease implications when modifying the design.
It is very rare that web projects go through their life cycle without the initial design evolving slightly. If the page design has been achieved using nested tables, it is often extremely hard and time consuming to make the smallest of alterations. If however, the sites design is being determined by an external cascading style sheet, modifications can be done in real time without hardly any effort. For example, a web company have just spent two months developing a site, when they meet the client for the unveiling of the first draft, the client decides they no longer want the navigation menu on the left, they would now prefer it on the right. With traditional coding techniques, this change is likely to cause many complications and take valuable time to achieve, not to mention the need to schedule another meeting for the client to approve the alterations. If however the site had been designed using web standards, global design changes can practically be achieved in real time by simply modifying a single style sheet. This approach not only saves both the web company and the client time, it usually cuts project timescale's dramatically, providing the ability to complete more work with the same amount of developers.
Semantic Markup
Web standards provide developers with the ability to divide the content, presentation and functionality of a website into individual components. I have previously mentioned the benefits this can have on work flow and page size but its' intended benefit is to achieve better meaning within web pages and improve accessibility.
Table based layouts very rarely create pages that have a fluent flow and suitable structure, the content may look structured in a browser but the markup is usually extremely unorganised. Many designers do not understand the importance of having correctly structured markup. The majority seem unaware of the way their sites perform and look in anything other than a graphical browser. This is an extremely dangerous approach to developing, as many users either do not want to or are unable to use the popular browsers of today.
Web standards allow developers to produce sites that are accessible to all. By using XHTML to focus entirely on the structure of the page content and CSS for the presentation of the page, developers can concentrate on creating markup that has semantic meaning and delivers suitable content to users who use text-based browsers or screen readers.
Traditional coding methods have averted from using correct markup, for example <p> tags for paragraphs and <h> tags for headings, as they sometimes comprise the design. The exclusion of these tags can have disastrous results for users accessing the site through screen readers. The site is usually dictated out to them in an inappropriate structure, often resulting in the user having to listen to long navigation lists before getting to the content. With the combination of XHTML and CSS, a developer can structure the content so that it makes sense, whilst maintaining the desired design, therefore providing an accessible website for all.
These points that have just been highlighted should no longer be seen as advantages or benefits of standards based design, they should be seen as necessities. There are many laws regarding to website accessibility, and although they are not covered by this paper, it is important to recognise that by sticking to web standards, you are more likely to build compliant websites.
Conclusion
This paper has highlighted the many benefits that can be gained from developing with XHTML and CSS web standards. The implementation of web standards are designed to be beneficial to all parties and the points discussed in this paper provide evidence of this.
There are obvious advantages for web design companies to adopt a standards based design approach, it ensures consistency throughout web projects and enables them to streamline their development process in many areas. Standards will also help ensure that their projects will comply with accessibility laws and guidelines, therefore reducing the risk of any future issues.
The advantages also have to be recognised by potential clients. There can be huge financial impacts from poorly developed websites. By ensuring that they are developed correctly from the outset, the client is more likely to save vast amounts of money on maintenance throughout the sites lifecycle. Clients also need to be aware that this approach is the only way to guarantee the future compatibility of their websites.
Unfortunately, the mass adoption of web standards is not likely to happen anytime soon and probably wont until both developers and clients fully understand the true benefits. If they continue to use outdated and inefficient development techniques, they will only be making more work for themselves.
Web standards are put in place to aid developers, not hinder them. The sooner this is realised, the sooner web companies, clients and users, can begin to harness the benefits.
This page was created on:
Last modified: 11/06/2008
