Introduction to Web Standards

Part of the excitement that surrounded the Internet in the mid 1990s was that anyone with a basic level of computer literacy could grab a book and learn to publish their own web site in a matter of hours. Many of the professionals in today's Internet industry learned that way, and have parlayed that basic knowledge of HMTL into a career building web sites. Unfortunately, in the hysteria of the dot.com explosion, and as the demand for web sites greatly exceeded the capacity and availability of skilled, professional web developers, anyone from moonlighters to the CEO's teenage nephew suddenly started managing corporate web sites, whether they were qualified or not. And while these web sites may have looked just as professional when viewed in IE, a quick look at the code often revealed severe structural deficiencies under the hood. A basic lack of understanding of the proper functions of each aspect of web programming led to inaccessibility, browser incompatibility and site maintenance nightmares. Two or three redesigns later, the sites still had the same problems as they did at the start.

The term "Web Standards" refers to the protocols and guidelines set forth by the World Wide Web Consortium (W3C) intended to ensure the long-term viability of documents and applications on the internet. The technologies behind Web Standards have actually been around for a while, but their adoption suffered in the wake of the browser wars of the late 1990s. As Netscape's Navigator and Microsoft's Internet Explorer (IE) battled for Web browser market share, proprietary features and well-intentioned – but unofficial – HTML extensions made the practice of web site development overwhelmingly inexact.

In the bad old days, those HTML extensions brought us "stupid browser tricks" that people preferred to meaningful content. What's more, if you were interested in using or making a stupid effect yourself, you were limited to showing off only to viewers who used the same browser as you did.  The hope was that whichever browser's set of stupid web tricks was most popular would squelch the other browers entirely, and then there'd be a clear market winner. The result: very few sites actually rendered and functioned properly in both of the leading browsers. And no one really cared that much. A "This site best viewed at 1024 x 768 with Internet Explorer 5" warned that you were about to visit a site that didn't recognize any other possible screen size or browser as important.

Luckily, a group of engineers, programmers and designers (The W3C and The Web Standards Project, or WaSP) chose to demand instead that browsers standardize their way of reading code, before we ended up with Babel. They highlighted the group of browsers that showed content uniformly and suggested that we write to those browsers only, until the others begin to write their bugs out and show that uniform code, too. Browers have to be upgraded constantly anyway, for reasons of security, and to eradicate legacy bugs. If we have one working standard to test new browser versions against, one standard can be adopted overall.

And once the browsers are all on board, the major online players can comfortably redesign their crumbling vintage code without alienating their audience. While a select few Internet heavyweights are currently leveraging the power of a Web Standards approach, such as ESPN.com, Ticketmaster.com and ABCNews.com, it's now up to the rest of the corporate world to join in the effort to make their sites standards-compliant, not just because it's the right thing to do, but because there are quantifiable, real-world benefits to be realized from adopting Web Standards today.

So, What Exactly Are Web Standards?

As previously mentioned, Web Standards are open, evolving technologies recommended by the W3C, the "governing" body of the Internet, if you will (and supported by the WaSP and popularized by such sites as csszengarden.com) .These technologies ensure that web sites will continue to function correctly as traditional desktop browsers evolve and as new Internet devices become available. Most relevant to your web site are XHTML, CSS, ECMAScript (commonly referred to as JavaScript) and the Document Object Model (DOM):

• XHTML: The successor to HTML, XHTML is a much stricter, cleaner mark-up language that is now the W3C's recommended standard.

• CSS: Cascading Style Sheets (CSS) allow you to simplify the code of your web pages by stripping out presentation information, leaving only content and structural data in your XHTML. With CSS, you can code your site once, and then redesign your entire site by changing just one file.

• Document Object Model (DOM): In technical terms, the DOM is an Application Programming Interface (API) for interacting with objects on a web page. It allows a web page or application to exploit the full power of scripting languages such as JavaScript.

• ECMAScript: Standardized JavaScript; an object-oriented scripting language which allows for dynamic manipulation of objects on a web page or application via the DOM. When used to fulfill the promise of Web Standards, these technologies reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web.

As well, the emphasis on wacky (or pretty, or cool) presentation styling on the web overshadowed the original intentions of the non-designers who set up the logical structure of web-based documents.   HTML is a simple method of marking up documents for reading. CSS is the images, colors and spacing that imbue the documents with an aesthetic quality. For robots (which search the web and bring their search results back to search engines for addition) and for the visually-impaired, the aesthetic quality is meaningless. You can immediately improve your SEO and Section 508 results by applying that principle of separating content from display styles.

How? HTML does not need the CSS to be written inside its code for it to display the images and pretty colors, the CSS is referenced from an outside document. A robot or display reader (tool for the visually impaired) is programmed to ignore the CSS and focus on the content and links.

Non-impaired readers' browsers assemble the HTML and CSS into a visually-rich document. To most of us, this seems ok. And it is. But the way you look at the web is driven by why you're there, to get information. We are accustomed to GUIs to interact with computers of all sorts, and the internet has a sort of GUI built into it, too. We all understand that we scroll downwards, in general, to read more of a document, and that we follow a 'next' or 'previous' link to move into a new section or page, or back to a prior one. Web standards also provided the means to make sure that important elements like that wouldn't be buried under stupid blinking effects and that a common internet literacy could develop.

Why did we ever do things the other way?

Once the internet had enough speed to support sending pictures at all, people began to try to make their documents 'prettier' (and usually failed).  Programs like Word incorporated a feature to save a rich text file as HTML, but it's not the HTML of the web, it's far from standardized, and has hundreds of lines of unnecessary code. Most importantly, it created the impression that pages on the web are indistinguishable from pages in print, that their coordinates are fixed along an x-y axis (which is why people put their images into tables, using that same prejudice for a grid), and that you're going to print them out to read them.

It's important to understand that a computer screen is not a piece of paper.

For one thing, it's lit from within. For another, it has no set display size. A computer screen can be anywhere from 640x480 pixels to well over 1600x1200 pixels, and cellphones and PDAs have a completely different, and much smaller screen size. If you design for a set size, you limit your audience: no one likes scrolling endlessly, or trying to see tiny images on a huge screen.

A page on the web is actually a GUI, it's not a piece of paper. GUIs only work if you can find the controls. You won't bother to try if the controls for the GUI crowd out the information you're trying to read. Both have to be in proportion for the experience to be meaningful.

Far too often, web sites are built quickly on the cheap, simply because somebody's boss just wanted to see those lovely Photoshop comps up on the company site before the end of Q2, and as a result, little or no attention was paid to the actual code behind the design. Browser testing was never conducted, code went unvalidated and suddenly the site was a mess of proprietary tags and deprecated markup that quietly compromised future compatibility.

Ever look at your favorite web site on a Mac? How about a PDA or a cell phone? Do you know how a blind or disabled user will experience your site? The lesson: If you're not using Web Standards, your web site is already broken. You're just not seeing the cracks.

Your site can be saved and vastly improved, by implementing Web Standards. In fact, to ensure forward-compatibility, universal accessibility and search engine optimization, you must buttress your site with the Holy Trinity of Web Standards: semantic XHTML, Cascading Style Sheets (CSS) and Section 508 Accessibility compliance.

Show me the monkey

Due to the common misconception that Web Standards are "harder" than traditional means of Web development, some Web designers are reluctant to take on the challenge of Web Standards. They've also been supported by Dreamweaver, a sort of training wheels contraption that muddles the idea of how to code in the first place. Standards-compliant coding has to be done by people, at least for the time being. In today's market, you'd better be able to hand-code, or you aren't going to get work anymore. While migrating to Web Standards requires a bit of a learning curve, the payoffs are compelling, and you need to know it to stay marketable in this field:

1. Learn to separate content and presentation.
2. Learn how to use CSS with some books and/or classes
3. Get your boss to pay for it. 

Here's the pitch. Your boss wants you to work faster and more efficiently, and to have clients that are satisfied. Here's how that works:

1. Extensibility is valuable to all clients. Allowing developers to separate the actual content of a site from its visual style, an XHTML/CSS site is both more extensible and accessible. Suddenly, the same web page can be quickly and uniquely rendered across several different devices, empowering developers to build a web site that's just as usable on a next generation palmtop browser (i.e., Blackberry or cell phone) as it is in IE 6 or Firefox.
2. Instant search engine optimization means firing those SEO shysters, thereby saving money. Among the many factors in the secret calculus of search engine rankings is the ratio of content to code on your page. An XHTML/CSS implementation allows you tip to the scales heavily in favor of content over code, resulting in an instant boost in search engine ranking. Semantic XHTML markup gives your content context, helping search engines better correlate your site with relevant queries. While relevant content is still the leading factor in search engine relevance, your page's content-to-code ratio is also important, and CSS helps Google unearth your content.
3. Sites that load instantly keep people around for the right reasons Tables and other code bloat now removed from the page, file sizes are generally cut in half (in some cases slashed by 75% or more!), allowing end users to download your site much faster. Since browsers cache CSS files, the design of your site need only be downloaded once, reducing your company's bandwidth costs, especially on highly-trafficked web sites. Meanwhile, your users also save on download times. While a majority of web users are on high speed corporate LANs, there's still a large contingent of home users dialing in on modems while running Instant Message and file sharing programs concurrently.
4. Rapid prototyping and instant redesigns. When the time comes to revamp your site, you can leave your XHTML content alone and simply develop new style sheets, enabling you to see your new site evolve with your existing content almost instantly. When your XHTML is structured semantically, you'll require only minor content edits, or possibly none at all. When managing multiple web sites, you can standardize a common XHTML template that can be used across sites with very distinct designs. A recent Molecular client utilized the same XHMTL template for three very different sites with very distinct designs, saving them time and money.
5. Cheaper, faster site maintenance that can't be done by someone's idiot nephew. When used properly in concert, XHMTL and CSS will make your code leaner, cleaner and ultimately cheaper and easier to maintain. XHTML's emphasis on cleaner, semantic code means that in most cases, your new pages can be edited without the expertise of a developer, but can't be done by the people who can't code. Your non-technical content editor will be able to see where to make the revisions in your new templates, because it's not buried 300 lines deep in nested tables and needless mark-up. Headlines and paragraphs are clearly marked as such. And because your site's presentation is managed externally in CSS files, there's less risk of "breaking" the page
6. Printer Style Sheets. An often overlooked capability of CSS is that it allows for reformatting printer output. Generally, printing a web site page produces unpredictable results and more importantly, unreadable pages. Some sites even publish their content a second time on "printer friendly" pages to solve the problem, doubling the actual number of pages on the site. But thanks to Web Standards, with a little extra CSS, every page on your site can be printer-friendly without an extra click, benefiting both webmasters and visitors alike.
7. Future-proof your site for forward compatibility. Already compatible with the majority of browsers in use today, Web Standards technologies will be supported by tomorrow's browsers, making your code future-proof. While having the latest and greatest code working behind the scenes is admirable, it's the real world benefits of converting to Web Standards that make the extra time and effort a real value proposition. Nothing like a little ROI to make your bosses smile and your performance review sing.
8. Your site becomes instantly more accessible. Aside from pleasing your superiors, the real goal is servicing your end users. And that's where Web Standards really shine. In many ways, Web Standards and accessibility are inextricably tied to each other. When you invest in Web Standards, you're investing in accessibility as well, because coding clean, semantic XHTML instantly makes your site more accessible and searchable to end users. Separating your content (XHMTL) from your design (CSS) makes your information extensible – suddenly, your content is available to audiences that might otherwise be excluded.
9. As laws change, you may have no choice. Government web sites are already beholden to Section 508 guidelines, a law that required federal agencies to make their electronic and information technology accessible to people with disabilities, and lawsuits in Australia and the United Kingdom have already set a precedent for non-compliance. If this continues, you could conceivably find your business' web site on the business end of an accessibility lawsuit. And it's likely that potential changes in Federal or state law could require your site to comply with Section 508 as well. Consider implementing standards-compliance on your web site as a preemptive strike against unnecessary lawsuits.
10. Embrace the latest technology. If you want to keep making money with a website or web business, you need to embrace Web Standards now. There's no such thing as "vintage" web sites. In today's security and privacy-conscious web, old design and code are viewed with suspicion. If you appear unaware that web standards exist, you probably aren't up on current site security measures, either. 

Conclusion  

So whether your web site was built in 6 hours or a year, you may already have a reconstruction on your hands. Sooner or later, you'll realize that your site no longer works in the latest browser, or that your clients can't access it from their Mac or their cell phone. Maybe it's already happened. So why wait? There's never been a better time to rebuild with Web Standards. You'll be able to serve up you site to more devices, get better search engine ranking, and get through sitewide graphics changes quickly. If you are the owner, and not the programmer, of a site…you don't want to pay a fortune. A standards-compliant site is easier to maintain, and displays across more browser versions correctly, meaning that you don't have to keep paying someone money.

 ---------------------
Note: Will Evans is a software information architect for a risk modeling software company in Boston, and was previously the information architect responsible for designing the Gather User Experience. He prefers not publishing articles about IA, User Experience, or even Meta articles about Gather itself. He prefers to publish his musings, ideas, poetry and completely messed up pre-Simulationist and post-modern critiques of modern culture and aesthetics. He drinks way to much coffee.

Tina N. is a web developer in NJ with work experience ranging from online B2B apparel distribution networks to  developing for online CRM programs for some of the world's leading consumer & pharma companies.