Introduction and Context
Doing more with less seems to be the mission impossible for web designers: Addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site. Caught between a rock and a hard place, web designers face a formidable challenge. Yet they are finding an unsuspected ally in the battle: Web Standards.
This article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.
Site Wide Consistent Look and Feel
By separating structure (or content) from presentation, web designers have a lot to gain. Specifically, presentation is defined using layout-oriented CSS language. Storing CSS in a separate document (aka style sheet) and applying it to a set of HTML documents permits a complete change of presentation for all these documents in a snap. Strict HTML (as opposed to the often-used transitional HTML markup), forces the designer not to use presentation tags in the HTML documents, naturally enforcing the separation of content from presentation.
By locating all the style and design issues in one document - the style sheet - whole sites can be rethemed in one go. The blogging community are particularly dynamic in this respect where on many platforms including WordPress, TextPattern and Habari, the site theme is a complete and discrete entity in its own right.
Improved User Experience: Less Bandwidth and Fast Loads
HTML code is often much more compact (therefore easier to read and maintain) when used in conjunction with CSS. According to various reports, case studies, and Andy King, author of Speed Up Your Web Site: Web Site Optimization, CSS has made it possible to transform table-based layouts into CSS-based layouts. Typically this reduces page size by 25 to 50%. This translates into better user experience, according to Usability Guru Jakob Nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load.
The style sheet only needs to load once and then it is cached. The payload might be slightly higher for the first page. But for accessing multiple pages of a site over many visits the savings in bandwidth are huge.
Improve Search Engine Optimization Without Costs
Being well-placed in search engines is one of the hardest challenges faced by webmasters. In this case, every bit helps. By using semantic markup we greatly assist the Search Engines in their indexing process. These things come naturally to Standards developers without additional effort, time or thought. All their documents are properly marked up at the outset. The number of sites which do not include proper titles and descriptions in the meta is surprising. A lot of other sites would greatly increase their SEO by simply using proper tags for the content. Adding h1, h2, and h3, tags and so on gives proper structure to hypertext documents.
Search engine agents crawl the web to index it, but for ranking and indexing purposes they can only process text. Dynamic effects such as those created by JavaScript are not taken into account, and text rendered with graphics cannot be read and parsed either. Separating presentation from content increases the information/markup ratio, making CSS-based documents more pertinent with regard to the search terms, which makes them rank higher in search results. Using CSS to render titles instead of graphics also helps in this regard.
There are very significant differences in how search engines operate. Instead of worrying about each engine and attempting to artificially manipulate the results, Web Standards pages index and rank properly (where they deserve to) across all search engines. In the same way that Standards hugely reduce the concern we need to have for browser differences, they also reduce the differences between the way Search Engines rank pages.
There should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary Pay Per Click campaigns.
Increase Website Traffic
Maintain Contact With Your User On Multiple Platforms
Standards-based code and cross-platform go hand in hand. While some browsers have quirks that cause different behavior by platform, Mozilla-based browsers are designed to behave identically on all supported platforms (Mac, Linux, Unix, Windows...)
Web Content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - for example mobile telephones. Feed content such as RSS and Atom simply will not work without being implemented by following the requisite standard.
Assumptions about the user and their platform based on erroneous thinking about the anticipated user community are inevitably always wrong. It does not follow for example that successful business users have wide monitors. The opposite may be true. Power users and business travellers are downsizing their notebooks. Increasingly one person may need to acccess the same site using different platforms at home, in the office and when travelling. They expect a consistent experience.
Web Standards gives us tools, and methodologies for dealing with this paradox and making the wider contribution of making our content universally accessible to people in different social, medical and economic circumstances.
Happier Staff
Good developers - both agency and inhouse - simply do not want to work using outdated methodologies and platforms with uncertain standards, with all the consequent uncertainty in quality. They have adopted Web Standards long ago and now work where these new skills are appreciated. Familiarity with Dreamweaver or any other legacy software is not a good basis for hiring creative development personnel.
Eliminate Unwelcome Future Costs
A very significant portion of electronically-stored information is produced for the web and written in HTML format. Most of this information uses invalid HTML which happens to be displayed correctly in permissive older browsers. As the web evolves, web browsers may eventually become either less permissive, or behave differently when given invalid markup (e.g. parse invalid data and render it slightly differently). Using valid, standards-compliant markup ensures that data will still be re-usable for a long time, as specifications on how to parse the standard formats are well documented and here to stay.
Contrary to popular belief, coding to standards does not mean producing less compelling content. As a matter of fact, almost anything taking advantage of proprietary extensions can be done in a standards-compliant way, with the added benefit of being cross-platform and future-proof.
By ensuring that all of the digital content owned by the operator is marked up in a consistent and standards compliant way, the content base becomes a perennially reusable asset without any additional costs in the future.
Extensibility
Using strict HTML and separating structure from content paves the way to XHTML, an XML-compatible version of HTML. Using XHTML will enable web authors to leverage tools from the XML world, such as XSLT, to easily manipulate XML data.
Using XHTML is a way to enter a set of standards composed of XML-based technologies, such as XML, XSLT (transforming data), SVG (animated graphics), MathML (describing mathematic expressions)... Such technologies have been designed to be interoperable, are the base of Web Services. This goes much further than just web authoring.
Reduce Costs of Maintenance and Site Operations
What is maintenance anyway? One of the most important features of a successful site is constantly evolving relevant content which in turn can act as fuel for social media dialogue with the user community. From this it follows that there needs to be a framework and a process for content contributors to post articles, to upload videos, sound or any other media. A web site is only a vehicle for carrying, navigating and displaying that content. Content Management Systems attempt with some success to supply that level of functionality. They act as a very good example of real separation not only of style and content but the process by which those items - which are very different - are implemented.
The process is therefore one of three stages:- the creation of content, applying the markup, and adding the style. Looked at in that light it may seem surprising how clean, elegant and simple the web development process really is. In a multi headed and possibly commercial environment such as a web development agency, this approach also lends itself to a very strict demarcation, between disciplines within a common framework. The content creator - who may be a journalist, a music producer, or may come from any one of a number of disciplines; need not become involved in the actual process of publishing that content at all. And the person applying the markup need not necessarily, know (or care) how it is going to be styled. That has been the real impact of The Zen Garden, in helping to demonstrate the stunning results which are possible without altering the markup, and indeed keeping the amount of presentational markup to an acceptable minimum.
The Content - Markup - Style; model also lends itself very neatly to linear methods of production. No web development activity need or indeed - should take place until the content has been produced. Conversely once the content is to hand the development/publishing process should be lighteningly fast. Which is as it should be. If we have produced content we want to publish it now. Not in 6 weeks time.
Furthermore by strictly marking the production process, time, budgets, and resources for both the initial development and the ongoing publishing of emerging content can be measured and controlled. This is a very powerful management tool.
This is the power of Web Standards. It supplies a far better development framework, for content providers, for web developers, and for CSS stylists alike. It is simply not possible for everybody not to gain and share in the huge benefits of Standards. Customers, developers, digital media creators, can be freed from the tyranny of graphics led development, code generators, and incomprehensible markup. But the real value is at the bottom line. The message to accountants, executives and shareholders alike should be irresistible.
Benefits of CSS over JavaScript
Specifically, graphics and JavaScript are often used for special effects on text fragments. As Style Sheet technology gives designers good typographic control and permits effects such as roll-overs, it greatly reduces the need for JavaScript programming and creation of graphics. Even more importantly, it reduces bandwidth consumption by images.
Well-formed HTML Code Saves Time and Money
One of the major headaches for web developers comes from web pages being displayed differently in various browsers. Such rendering differences do exist in older browsers, but most of them are well known and documented. In many cases, rendering differences are caused by ambiguous coding. For developers who are in commercial environments and are in a postion to measure these time costs some of the figures are astonishing. A single inconsistency between the browsers in a high end feature for the site can absorb the lead developers in hours of painful and frustrating forum hunting and bug fixing. By using Standards to start with we have a known benchmark to measure the known deviations of legacy user agents. Nearly all of those deviations are now well documented and the fixes are well published and well known. Conversely fixing tag soup is a black hole of time and money.
Well-formed code significantly reduces rendering differences in various browsers. Using validation tools such as the W3C Validator helps by spotting coding errors and making sure HTML code is well-formed, which eliminates ambiguity in parsing by browsers.
Standards Embrace New Browsers
More and more browsers, other than Internet Explorer for Windows, are used to surf the web:
- Windows: MSIE, browsers using Mozilla's Gecko rendering engine, Opera
- Mac: MS-Tasman (IE/Mac's rendering engine), Gecko-based browsers, Safari, Opera
- Linux: Gecko-based browsers, KHTML-based browsers, Opera
Overall, 5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms.
According to many sources, Gecko-based browsers are now much more common than Netscape 4.x and MSIE 4 browsers, and it is increasing significantly with time. Firefox alone has been downloaded more than 50 millions times in 6 months.
In such an increasingly heterogeneous environment, testing each web page in every configuration is impossible. Coding to standards is then the only practical solution.
In a ground breaking development MicroSoft have announced a new meta tag that can be used in sites to trigger IE 8 into Web Standards mode. At the same time in non standards mode existing legacy sites will still be seen as intended. Although in some ways a controversial move - the announcement has attracted widespread support from leading developers and standards advocates, led by Jeffrey Zeldman.
Legacy User Agents: Netscape 4 and IE4
The only drawback in using CSS is that older browsers (specifically IE4 and NS4) will not be able to render as intended. In some cases, where a significant portion of the audience is running Netscape 4.x, use of simple tables for layout and CSS for font control may be a solution. Another option is to serve HTML content to Netscape 4.x users, without CSS style. The content will be usable but not as attractively presented as in a modern browser. Furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade.
Mandated Accessibility
Being accessible is mandatory in many countries for government agencies (US, UK, Canada), and --in some countries like Australia-- for every organization. In the US, Section 508 applies to government-funded projects and agencies.
Coding with standards (particularly CSS for positioning, and strict HTML) makes accessibility an easier goal to achieve, as standards have been created with accessibility in mind.
Taking care of accessibility means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people.
Comporting with the relevant legislation in the jurisdiction is an important driver particularly for developers who wish to access public funds, or who work with charities and other socially responsible organisations. Just as important as the obvious necessity to comply with the law; an enthusiastic adoption of web standards is an important indicator of a sense of Community Social Responsibility. Many industry leaders are applying this thinking to everything they do. Sites which satisfy the ego of the designer - and very few other people are going to have an increasingly difficult commercial future.
The Development Process: Working in Teams
A common challenge for web developers when assuming management of existing sites is the code written by other developers. In many cases, they are faced with poor HTML code quality that may also rely on undocumented features or hacks and specific coding practices. Lack of documentation is also often problematic.
Following standards-compliance in requirements documents is a very effective way to ensure measurable quality of the final product, the W3C being an impartial judge.
Because standards are very well documented, another person taking over some standard-compliant code can hit the ground running - and will not need to become familiar with the previous developer's coding practices. This also significantly reduces vendor lock-in.
Web Standards: Enriching the User Experience
The whole ethos of Web Standards is that it is driven by the user experience. It is not driven by graphics designers, by the developers of proprietary code generators or by the need to perform three dimensional coding gymnastics to cope with the vendors of browsers and other user agents. Foremost among the goals of standards led development to improve that user experience are the great twins usability and accessibility. Put simply - and quite crudely - a pleasing, satisfying and fulfilling user experience translates, into more traffic, more repeat visitors, fewer bounces, greater loiter time and higher click throughs. Ultimately that better user experience delivers the business or operational objectives of the site. Greater dialogue, more sales, more people interacting with the site operator in some way.
Sites which are built using web standards methodologies, processes and practises perform far better for every single metric. They load faster, they are easy to find in search engines, and they package and deliver the content effectively. All these great experiences can be enjoyed by the user regardless of platform, software, operating system, or any one of a dozen other variables including screen size, text resolution, JavaScript activation, or any disabilty the user may have.
Conclusion
Using web standards and separating structure from presentation brings a host of benefits for today and tomorrow.
Today, it means more audience, lower cost to produce new content, and becoming compliant with accessibility requirements.
For tomorrow, it means reducing vendor lock-in, reducing cost of maintenance, and having a more flexible web site in terms of presentation. Last but not least, use of standards opens the door to XML technologies.
All these factors also contribute to easier site management, a larger audience and a better return on investment. Geeks, marketers and bean-counters can all benefit from a standard-based web site. This is more than one could even dream of.