The Business Benefits of Web Standards

  • Revision slug: The_Business_Benefits_of_Web_Standards
  • Revision title: The Business Benefits of Web Standards
  • Revision id: 49466
  • Created:
  • Creator: NickolayBot
  • Is current revision? No
  • Comment Robot: Changing category Web Development:Articles

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

Maintaining a web site is often very costly and using Web Standards can help a lot in this regard.

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:

  • Windows : MSIE, browsers using Netscape Gecko's rendering engine , Opera.
  • Mac: MS-Tasman (IE/Mac's rendering engine) , Netscape Gecko-based browsers, Safari, Opera
  • Linux: Netscape 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, Netscape 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.

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.

Reducing dependency on any one developer

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.

Benefits to web site visitors

Thanks to accessibility, faster loading web pages, and compatibility with more browsers (not limited to the one or two browsers using for testing), visitors are more likely to appreciate your service and come back later.

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: web standards.
</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 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 HMTL 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 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.
</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 XHTML, an XML-compatible version of HMTL. Using XHTML will enable web authors to leverage tools from the XML world, such as XSLT, 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), 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.
</p>
<h2 name="Reduce_cost_of_maintenance"> Reduce cost of maintenance </h2>
<p>Maintaining a web site is often very costly and using Web Standards can help a lot in this regard.
</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 Netscape Gecko's rendering engine , Opera.
</li><li> Mac: MS-Tasman (IE/Mac's rendering engine) , Netscape Gecko-based browsers, Safari, Opera
</li><li> Linux: Netscape 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, Netscape 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.
</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="Accessibility"> 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>
<h2 name="Reducing_dependency_on_any_one_developer"> Reducing dependency on any one developer </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="Benefits_to_web_site_visitors"> Benefits to web site visitors </h2>
<p>Thanks to accessibility, faster loading web pages, and compatibility with more browsers (not limited to the one or two browsers using for testing), visitors are more likely to appreciate your service and come back later.
</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>
Revert to this revision