The business case for Web standards-based development

Insight article

The Business Case for Web Standards-Based Development

Rob Cherny, Lead Web Developer
April 2007

When companies create the software behind their websites and Web applications, they often fail to develop a proper architecture for the user interface (UI) layer. Many in the software and Web development industries consider the UI layer pitfalls from the 1990s as the norm; they do not realize that a more progressive, structured, and thought-out UI layer is not only possible, but will interact much more effectively with backend software. Simplified connections between the UI and backend software layers are one of the primary benefits of a properly-architected UI layer—one developed using Web standards-based techniques that separate content and structure from presentation and behavior. This article will first introduce persistent UI pitfalls of the 1990s, then outline the benefits of Web standards-based website development.

The Web is complex and bad habits pervasive

In the 1990s, the Browser War between Microsoft and Netscape led to the development of proprietary technologies and techniques that spread across the Web. Many of these technologies introduced presentation information into the HTML (HyperText Markup Language) markup or implemented interactivity in a browser-specific way. Additionally, developers had to jump through hoops to get significant design out of technologies that were not conducive to building flexible and well-designed websites. Their various kluges and techniques soon became habit, then were built into software, and finally influenced the software industry’s understanding of how to build websites. Now, over a decade later, technology and techniques have vastly improved but the specter of those 1990s techniques remains—and it’s costing everyone.

Those costs today include increased development risk, expenses, and time to market, difficulties with brand management, unnecessarily high bandwidth costs, staff turnover issues, as well as inflated complexity and cost around future sites and application modifications. At the lowest level, these problems are too closely tied to backend software and manifest themselves in bloated, technically invalid and complex code, which does everything from damage the user experience to limit search engine optimization (SEO) efforts. Presentation layer changes should not put software at risk and a tiered approach, which has been a mantra of the software world for years, is easily achievable through a more mature approach on the UI layer.

Today’s Web sees increased complexity around content management systems, application frameworks, accessibility, rich internet applications (RIAs), mobile, syndication, and other multiuse channels, each of which may need to have presentation information – or a lack of presentation information – associated with it. In the face of this need, most off-the-shelf software packages suffer from horrid UI practices, not to mention software built manually by developers who don’t know any better. From substandard WYSIWYG (what you see is what you get) editors in your favorite content management system (CMS) to server-side frameworks that generate code for you, the UI problem is everywhere.

The good news is that many current UI problems are as fixable as they are pervasive. While most in the industry consider them inherent to Web development, in reality they are stubborn relics of bad practices from the 1990s that have persisted into this decade.

The correct way, the Web standards way

There are best practices that dictate a more flexible and reasoned approach to Web development based on standards by organizations such as the World Wide Web Consortium (W3C). These include many concepts, yet share the key characteristic of properly separating presentation from structured content and from the behavior layer of the UI. That’s three layers, all potentially interconnected to the backend software running your website when they should not be. Modern, W3C standards dictate implementation of the three layers as follows, including structured content, presentation, and behavior:

Structured Content: valid HTML or XHTML (Extensible HyperText Markup Language) to mark up your content and forms. This markup should be semantically built and completely devoid of presentation or behavior information. The markup may be intertwined with your CMS or application logic and the presentation layer of your application.
Presentation: Cascading Style Sheets (CSS). Style sheets contain comprehensive presentation information for all your sites and applications. None of this presentation layer should ever be embedded directly inline in your CMS or application logic with the exception of references to the files, classes, and IDs.
Behavior: JavaScript (aka ECMAScript). Modern JavaScript is implemented in an unobtrusive manner, using only external files and the W3C Document Object Model (DOM) instead of proprietary code. It also never references presentation information directly, but rather gets and sets classes which refer back to the CSS. Although tied to the CMS or application layers of your software, no JavaScript should ever be inline or intermingled with this code directly.

These changes mean a thoughtful review of every component which brings content and applications to the Web and can only benefit your organization.

Benefits of modern Web standards

The benefits of using modern Web standards for site and application development are many, including the following:

Reduced bandwidth

Massive (X)HTML markup reduction with cleaner code
Styles and scripts are cached
Some larger sites have literally saved terabytes in bandwidth costs

Easier Search Engine Optimization (SEO)

Web standards-based code is more SEO-friendly with proper usage of headers, less code bloat, etc.

Enhanced accessibility

Web standards-based code is much easier to make accessible

Reduced risk in current software, future development, and staff turnover

Application logic is not intertwined with presentation information
Design changes have less impact on Web software applications
Easier, faster and cheaper site maintenance, site-wide changes, redesigns, and new development
Less proprietary knowledge base invested in staff, so staff turnover is less of an issue

Longer shelf life, more durability

Open standards have longer term viability
Platform and vendor independence: not locked into a particular Web browser platform
Neutral storage format
Future compatibility with newer technologies and browsers rather than proprietary technologies

Streamlined Content Management Systems

Design not tied to your content store
Fewer CMS templates due to more flexible markup and CSS
Easier content reuse across properties

Reusable and flexible content and presentation methods

Content and presentation methods easier to reuse across channels and properties
Modular sharing of presentation information
Content syndication is more cleanly enabled
Printer style sheets (No more software for printer versions of pages)
Mobile style sheets for handhelds (No more multi-channel versions)

Enhanced user experiences beneficial to everyone

Faster downloads, faster rendering in browsers (people trust faster sites, see Google and Yahoo!)
Design consistency across channels and Web properties enforced with greater ease

Conclusion

Evident from their many benefits, modern Web standards-based techniques are the correct way to build websites. This is not limited to the UI layer but includes every application and content management tool that produces user-interactive code. These techniques should replace problematic relics of the 1990s, resulting in more streamlined Web development and site management for the benefit of all Web users. It won’t be long before every organization with a significant Web presence implements new standards-based techniques—but the sooner it happens, the sooner a company can start benefiting from the decreased cost, enhanced content management possibilities, and improved usability.

View all Insight articles
NavigationArts home