By Mike Rohde, Design Director, MakaluMedia Group

As a Micro-ISV owner one of the necessary tasks for your small business is a place on the web. Micro-ISVs often make most of their sales online, so a decent website that doesn’t scare potential customers is quite critical.
So, you’re thinking of getting out your copy of FrontPage 1.0 to develop your corporate site, right? Not so fast! While this might be the path of least resistance now, in the long run it may cause great pain, just like choosing the Dark Side of the Force.
I would suggest that before you dust off that FrontPage CD, you might consider developing a simple, clean, lightweight site using Web Standards instead.
What are Web Standards?

Web Standards is a common term among web design and tech folk, but may not be a term you’ve heard of, or if you have, may be pretty nebulous.
Basically it means a set of “standards” outlined by the World Wide Web Consortium (W3C), which aims to provide web developers with a reasonable, logical set of standards for use with building websites.
http://www.w3.org/Consortium/
In particular, W3C promotes the idea of separating a web page’s content (the body text) from its presentation (the pretty graphics, colors, typestyles and positioning). The W3C also develops guidelines for eXtensible Hyper Text Markup Language (XHTML) and Cascading Style Sheets (CSS) code and more.
So, Why Should I Care?

Well, besides the warm fuzzy feeling you’ll get by creating “valid” code per the W3C standards, following web standards offers these added benefits:

  1. Separation of content (text) from the presentation (design and formatting) allows you to make a single change to your site’s CSS stylesheet, which can change specs across an entire site. If you’ve ever had to do a search and replace on a few hundred web pages, you’ll appreciate the beauty of this.
  2. Lighter weight web pages that load more quickly, use less bandwidth and work in a wider selection of browsers (PDAs, mobile phones, and even aunt Betty’s crusty old 486).
  3. Simpler, more manageable site. By avoiding the use of tables to create a layout, in favor of managing the design with Cascading Style Sheets (CSS) you’ll end up with a much less complex, easier to manage site.
  4. Control of the design in the future. By developing with a CSS stylesheet, not only will small edits be less of a pain, entire site overhauls will be much less painful. Just backup the original CSS stylesheet, then modify your existing stylesheet to create a new look, site wide!
  5. Create a more flexible website. You site can be setup to adjust screen widths and font sizes, and can deal with nearly any screen resolution out there. By using percentages in layout and type sizes, your visitors can determine for themselves the most comfortable screen width, height and font sizes.

Ok, How Do I Develop a Site with Web Standards?

If you’re interested in developing a site with Web Standards, there are a few ways to go about it. You can do it yourself, or hire someone else to do it for you. Each has its benefits.
Doing a Web Standards site yourself is probably cheapest cash-wise, and many Micro-ISV folks tend to be technically talented and careful in the cash department. As a geek you’ll also have a good reason to learn a new technology. However, you may realize you’re no designer and that your time is valuable than cash. It’s a good idea to weigh your skills and available time to develop a site yourself before you dive in.
Hiring someone to do it for you relieves your stress of learning XHTML/CSS and also can offer the benefit of someone who is good with design. However, this will cost something, even if that designer only creates a template. If your productive time is valuable, this still may be a better deal than the time hit you may take building your own site.
Whichever approach to site development you may choose, going with Web Standards provides benefits beyond being a “good guy” in the W3C’s eyes: it offers a way to make your site fast, accessible, flexible, and manageable.
Resources

To get started building your site using Web Standards, here are a few books and web resources to check out:
Books:
Designing With Web Standards
by Jeffery Zeldman
One of the first books promoting Web Standards as a sensible way to design and build websites. Zeldman shares solid, detailed, logical reasons why Web Standards make sense. Probably the funniest technical manual I’ve ever read.
http://www.zeldman.com/dwws/
Eric Meyer on CSS and More Eric Meyer on CSS
By Eric Meyer
Excellent tutorial books on building sites with XHTML and CSS. Eric spends time walking through the process, explaining details along the way.
http://www.ericmeyeroncss.com/
http://more.ericmeyeroncss.com/
Web Standards Solutions
by Dan Cederholm
Using a question and answer format, Dan shares multiple approaches to Tough situations, explaining the pros and cons of each approach.
http://www.simplebits.com/publications/solutions/
Bulletproof Web Design
by Dan Cederholm
Follow Dan as he provides numerous flexible, bulletproof solutions to worst-case scenarios using XHTML, CSS with Web Standards.
http://www.simplebits.com/publications/bulletproof/
HTML & XHTML: The Definitive Guide
By Chuck Musciano, Bill Kennedy
Companion manual to O’Reilly’s CSS Definitive Guide, provides in depth coverage of every aspect of XHTML. A superb reference tool.
http://www.oreilly.com/catalog/html5/index.html
Cascading Style Sheets: The Definitive Guide
By Eric Meyer
In-depth reference manual covering anything you might want or need to know about CSS, and even a few things you don’t want to know about.
http://www.meyerweb.com/eric/books/css-tdg/
Web Resources:
CSS Zen Garden
Provides a glimpse into the kind of change that’s possible, simply editing a site’s CSS stylesheet. Stylesheets are submitted by the site’s visitors.
http://www.csszengarden.com/
A List Apart
Web-based magazine providing in-depth articles on solving common and uncommon problems when building sites with Web Standards.
http://www.alistapart.com/
W3Schools XHTML & CSS Tutorials
Free online tutorials on use of XHTML and CSS for those interested in learning more about these two areas.
http://www.w3schools.com/xhtml/
http://www.w3schools.com/css/
W3C HTML & CSS Validator Tools
These validation tools let you know if your code “validates” to the standards of the W3C. Both tools are very helpful for hunting down and killing bad code on your web pages and CSS stylesheet.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Web Developer’s Handbook
This online resource is a cornucopia of excellent web resources related to design, XHTML, CSS and Web Standards.
http://www.alvit.de/handbook/
Conclusion
I hope this brief overview helps present some compelling reasons to consider building your next website using Web Standards. Not only are these standards good for you, your customers and the web, they make practical sense too.
—-
Mike Rohde is a designer, specializing in web, corporate identity and application icon design. He has 20 years experience practicing in the field and currently works as the Design Director for MakaluMedia Group, an international engineering, consulting and internet services firm. Mike also maintains Rohdesign Weblog, his personal space for capturing ideas and observations on design, technology and life in general. Mike can be reached at mike@rohdesign.

6 Comments

  1. John Senior Reply

    I think you should mention that browser support for CSS can be a problem, especially with Internet Explorer. (Even IE7 beta still does not fully support CSS)
    So a table-based layout may be more practical if you want to avoid wasting time trying to work around CSS features that don”t work as they should.

  2. Good point John. Yes, some areas of CSS can be quirky when used with IE and old browser versions, such as IEs ways of dealing with boxes and padding in certain instances.
    Personally, I think it’s quite practical to make use of a very simple-celled table to “hold” separate DIVs, if issues are encountered with table-less designs. This blend of simple tables and web standards is what Jeffery Zeldman calls a “Hybrid” layout (Designing with Web Standards, Chapter 8).
    What I’m suggesting people avoid are are complex, slow-loading, nested tables and spacer GIF layouts commonly used in the late 90s (I used them once myself). These kinds of table layouts add un-needed complexity, are tricky to troubleshoot and are difficult to easily make global changes to, compared to Web Standards sites using CSS to control the details.

  3. I’ve found if one uses CSS in a reasonably straight forward manner, its relatively easy to keep it working for IE and other browsers at the same time. I recommend taking a look at the CSS articles on A List Apart, or if you’re like me and you want working examples, check out bluerobot.com [ http://bluerobot.com ] especially the two and three box layouts. Nice work.
    There’s one other really important reason to write entirely valid web tier code (HTML, CSS etc) – Search Engines! Google indexs your site via sending a ‘robot’ to crawl over it. The robot has to be able to understand your site’s code. If your code is not valid, the chances of the robot getting ‘confused’ are very high. A classic example of this would be omitting “DOCTYPE” – IE will just assume the author meant HTML 4.01, but – a robot just goes “whats this?” and leaves your page uncrawled. When I have the “your site looks pretty, but its code is a nightmare” discussion, this is usually the point I make first.

Write A Comment