Desert Web Designs Blog

As anyone who was talked to me knows, I am a huge proponent of web standards and standards based design. For those of you who are unfamiliar with standards based design, here is a brief explanation.

Standards based design is web site design that follows and conforms to current web standards recommendations, as set by the W3C. According to their website, the W3C’s mission is:

To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

Some people may ask, why are web standards important? Same reason any set of standards are important: To promote continuity and uniformity. Think of all the standards in place in the world today: Standard Units of Weight and Measurement, Street sign colors/shapes, building/construction code, and even our state/local laws are all systems of standards. Without systems of standards, people would be free to do things as they wish. Ultimately, it would result in utter chaos. Unfortunately, that’s what happened back in the days of the browser wars in the mid-to-late 90’s.

Those of you who are fortunate (or unfortunate) enough to remember, know what I’m talking about. Different browser manufacturer’s did things their own way when it came to displaying web pages as web standards had not been published or were not widely known. Now, things are still far from perfect when it comes to browser support for HTML/CSS standards, but they are definitely better than they used to be. Browser manufacturers are getting better at their support for current design standards and W3C recommendations. A W3C Recommendation is the name for a current internet language standard and guideline, and over 110 recommendations have been published since 1994.

So, why standards based design? Simple. Standards based design provides a number of benefits not only to designers, but also to users.

• Insure that web pages will display in the way that the designer intended regardless of browser.

• For instance, when I was designing my site, I was only able to view my website in Firefox 2.0 and Internet Explorer 7. Now, I can check sites in IE5.5, IE6, Safari, and Opera browsers on my computer. However, because I used standard based code, when I was able to view my site in all these additional browsers, it displays just fine without error.

• Web sites are easier to update.

• By keeping your style and structure markup separate, it makes it easier to edit/change styles in one place than searching for inline style references or <font> tags in your code

• When it comes to search engines, content is king!

• Search engines index you based on content, not fancy layouts, colors, and design. By utilizing standards based design, you are insuring that search engines see strictly your content without any non-semantic code added in. Using CSS, you can replace the text of an <h1></h1> tag with an image that contains a fancier typeface, but the text is still in the <h1></h1> tag and that’s what the search engines will see (more articles about SEO tips can be found in our SEO articles category).

• Standards based design promotes web site accessibility

• Using only semantic standards based code will help to maintain usability and accessibility to your site for non-visual users and mobile devices. Not everyone who uses the internet is a visual user (some are blind), and not everyone uses a computer (blackberry, treo, iphone, etc). Not all these devices have full css support and allow users to still view your sites properly. Blind users also use a device called a screen-reader that literally reads the site content to the user. Some of these screen reader technologies will place different inflections for different tags like <strong></strong>, <em></em>, and header tags.

• Web sites are forward compatible for new browser updates and backwards compatible for legacy browsers

• This one is pretty self-explanatory. Generally, standards based web sites will still display as intended in future browser updates, and will display as intended in older legacy browsers. The reason I say generally is because all browsers, especially older browsers such as IE6 and before and early versions of Netscape, have their quirks. For instance, IE6 and before don’t support CSS adjacent-sibling selectors, child selectors, and attribute selectors, among others, even though they’re all part of the CSS 2 Recommendation and they support other CSS 2 selectors. Because of these quirks, many designers used non-standard hacks, filters, and work-arounds to get around these quirks in IE6. Because of IE7’s increased CSS and standards support, many of these sites broke when viewed in IE7. If they were using standards based code for IE6, they would’ve displayed just fine when viewed in the newer IE7. Instead, these designers had the fun task of fixing all the invalid code to make it display properly in IE7, and then making it backwards compatible to IE6. Most of these designers ended up using propietary IE conditional comments, which are not part of the current W3C HTML Recommendation.

Obviously there are a lot more benefits to using standards based design, too many to list here. For further reading, I recommend the following books I’ve read for designing with Web Standards using HTML/XHTML, CSS, and DOM Scripting:

• Web Standards Solutions: The Markup and Style Handbook - Dan Cederholm
• CSS Mastery: Advanced Web Standards Solutions - Andy Budd, Simon Collison, Cameron Moll
• Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting - Andy Budd, Andy Clarke, Ian Lloyd, Cameron Adams, Rob Weychert, Ethan Marcotte, Dan Rubin, Jeff Croft, Mark Boulton, Simon Collison, Derek Featherstone
• DOM Scripting: Web Design with JavaScript and the Document Object Model - Jeremy Keith

There are plenty of other quality books out there written by excellent writers and web standards proponents including Jeffrey Zeldman, Molly Holzschlag, Dave Shea, and more.

By this time you may be asking yourself what this has to do with getting naked. In 2006, Google Developer and author Dustin Diaz came up with the idea for CSS Naked Day in which web designers and developers “strip” their websites of all CSS code leaving only the un-styled HTML code underneath. CSS Naked Day was started in order to promote standards based design, accessibility, and to display web sites in all their unstyled glory. By turning off CSS, users (and designers) will see web sites in the ways that search engines see them, as well as users who are using assistive technologies such as screen readers. CSS Naked Day is a great way to help promote web standards based design as well as using semantic markup and keeping structure and style separate.

I first heard about CSS Naked Day in Andy Clarke’s book Transcending CSS: The Fine Art of Web Design and as a proponent of web standards, I thought it was a great idea and decided to participate. This year, CSS Naked Day will be observed on April 9th according to the XHTML.com site and Dustin Diaz’s Naked ‘08 post. So, don’t be shocked if you show up to our site on the 9th-10th and see no styles at all (CSS Naked day is observed for one international day, or 48 hours).