Revision Content

Introduction

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 look and feel consistency

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.

Improved User Experience: Uses less bandwidth, loads faster

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.

Increase Website Traffic

Better search engine ranking

Being well-placed in search engines is one of the hardest challenges faced by webmasters. In this case, every bit helps.

Search engine agents crawl the web to index it. Compared to human beings, there are very significant differences in how search engines operate. 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.

Accommodate 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...)

Future-proof

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.

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 cost of maintenance

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 lightningly 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

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.

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.

Compatible with newer browsers

More and more browsers, other than Internet Explorer for Windows, are used to surf the web:

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.

The Netscape 4 and IE4 exceptions

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 which 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.

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.

Revision Source

<h2 name="Introduction"> Introduction </h2>
<p>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: <a href="en/Web_Standards">Web Standards</a>.
</p><p>This article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.
</p>
<h2 name="Site_wide_look_and_feel_consistency"> Site wide look and feel consistency </h2>
<p>By separating structure (or content) from presentation, web designers have a lot to gain. Specifically, presentation is defined using layout-oriented <a href="en/CSS">CSS</a> language. Storing CSS in a separate document (aka style sheet) and applying it to a set of <a href="en/HTML">HTML</a> 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.
</p>
<h2 name="Improved_User_Experience:_Uses_less_bandwidth.2C_loads_faster"> Improved User Experience: Uses less bandwidth, loads faster </h2>
<p>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 <a class="external" href="http://webword.com/interviews/king.html">Andy King</a>, author of <a class="external" href="http://www.websiteoptimization.com/speed/5/">Speed Up Your Web Site: Web Site Optimization</a>, 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, <a class="external" href="http://www.useit.com/papers/responsetime.html">according to Usability Guru Jakob Nielsen</a>, who notes that users tend to close a web page when it takes more than 10 seconds to load.
</p>
<h2 name="Increase_Website_Traffic"> Increase Website Traffic </h2>
<h3 name="Better_search_engine_ranking"> Better search engine ranking </h3>
<p>Being well-placed in search engines is one of the hardest challenges faced by webmasters. In this case, every bit helps.
</p><p>Search engine agents crawl the web to index it. Compared to human beings, there are very significant differences in how search engines operate. Dynamic effects such as those created by <a href="en/JavaScript">JavaScript</a> 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.
</p><p>Using CSS to render titles instead of graphics also helps in this regard.
</p>
<h3 name="Accommodate_Multiple_Platforms"> Accommodate Multiple Platforms </h3>
<p>Standards-based code and cross-platform go hand in hand. While some browsers have quirks that cause different behavior by platform, <a class="external" href="http://www.mozilla.org/university/HOF.html">Mozilla-based browsers</a> are designed to behave identically on all supported platforms (Mac, Linux, Unix, Windows...)
</p>
<h2 name="Future-proof"> Future-proof </h2>
<p>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.
</p><p>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.
</p>
<h2 name="Extensibility"> Extensibility </h2>
<p>Using strict HTML and separating structure from content paves the way to <a href="en/XHTML">XHTML</a>, an <a href="en/XML">XML</a>-compatible version of HTML. Using XHTML will enable web authors to leverage tools from the XML world, such as <a href="en/XSLT">XSLT</a>, to easily manipulate XML data.
</p><p>Using XHTML is a way to enter a set of standards composed of XML-based technologies, such as XML, XSLT (transforming data), <a href="en/SVG">SVG</a> (animated graphics), <a href="en/MathML">MathML</a> (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.
</p>
<h2 name="Reduce_cost_of_maintenance"> Reduce cost of maintenance </h2>
<p>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.
</p><p>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.
</p><p>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 lightningly fast. Which is as it should be. If we have produced content we want to publish it now. Not in 6 weeks time.
</p><p>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.
</p><p>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.
</p><p><br>
</p>
<h3 name="Benefits_of_CSS_over_JavaScript"> Benefits of CSS over JavaScript </h3>
<p>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.
</p>
<h3 name="Well-formed_HTML_code"> Well-formed HTML code </h3>
<p>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.
</p><p>Well-formed code significantly reduces rendering differences in various browsers. Using validation tools such as the <a class="external" href="http://validator.w3.org/">W3C Validator</a> helps by spotting coding errors and making sure HTML code is well-formed, which eliminates ambiguity in parsing by browsers.
</p>
<h2 name="Compatible_with_newer_browsers"> Compatible with newer browsers </h2>
<p>More and more browsers, other than Internet Explorer for Windows, are used to surf the web:
</p>
<ul><li> Windows: MSIE, browsers using <a href="en/Gecko">Mozilla's Gecko rendering engine</a>, Opera
</li><li> Mac: MS-Tasman (IE/Mac's rendering engine), Gecko-based browsers, Safari, Opera
</li><li> Linux: Gecko-based browsers, KHTML-based browsers, Opera
</li></ul>
<p>Overall, 5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms.
</p><p>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. <a class="external" href="http://getfirefox.com/">Firefox</a> alone has been downloaded more than 50 millions times in 6 months.
</p><p>In such an increasingly heterogeneous environment, testing each web page in every configuration is impossible. Coding to standards is then the only practical solution.
</p>
<h3 name="The_Netscape_4_and_IE4_exceptions"> The Netscape 4 and IE4 exceptions </h3>
<p>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.
</p>
<h2 name="Mandated_Accessibility"> Mandated Accessibility </h2>
<p>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, <a class="external" href="http://www.section508.gov/">Section 508</a> applies to government-funded projects and agencies.
</p><p>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.
</p><p>Taking care of accessibility means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people.
</p><p>Comporting with the relevant legislation in the jurisdiction is an important driver particularly for developers who which 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.
</p>
<h2 name="The_Development_Process:_Working_in_Teams"> The Development Process: Working in Teams </h2>
<p>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.
</p><p>Following <a class="external" href="http://www.w3.org/QA/2002/07/WebAgency-Requirements">standards-compliance in requirements</a> documents is a very effective way to ensure measurable quality of the final product, the W3C being an impartial judge.
</p><p>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.
</p>
<h2 name="Web_Standards:_Enriching_the_User_Experience"> Web Standards: Enriching the User Experience </h2>
<p>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.
</p><p>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.
</p>
<h2 name="Conclusion"> Conclusion </h2>
<p>Using web standards and separating structure from presentation brings a host of benefits for today and tomorrow.
</p><p>Today, it means more audience, lower cost to produce new content, and becoming compliant with accessibility requirements.
</p><p>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.
</p><p>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.
</p>{{ wiki.languages( { "es": "es/Ventajas_para_los_negocios_del_uso_de_est\u00e1ndares_web", "ja": "ja/The_Business_Benefits_of_Web_Standards" } ) }}