Designing with web standards

Finally finished reading Jeffrey Zeldman’s much talked about Designing with Web Standards. I had this funny feeling while reading the book that I was getting a lecture by my local web developer standards stud Todd Gehman. If nothing else, I have a hell-of-a-lot more appreciation for web development as a separate career path from general software engineering. Damn there’s a lot to know!

The one thing the book highlighted for me is how far from the cutting edge in web development techniques I’ve strayed from. When I started goofing around on the ‘Net, tables and frames where the big new thing. I’ve basically been stuck there for about the last seven years. Guess I’m not as much of an Internet time guy as I thought.

The main take away from the book for me is your want to build sites standard compliant so that they work with any web browser (at least going forward from 6.0 level browsers :-). The weird hacky stuff you need to do in CSS is really to support earlier browsers. That will likely slow adoption down. But it’s just a matter of time before most web sites are CSS complaint. What a great thing, no more Netscape or Microsoft only functionality! Haven’t seen that since the early days of the web.

Next up for me is to build the Gregov Architects website fully CSS complaint. What better way to get some experience with CSS!

A bunch of notes about CSS stuff I want searchable:

  • Developing web sites using web standards mean easy cross browser support and immediate forward compatibility when new browser releases come out.
  • Web standards seem modeled after three tired computing (seperating UI, business rules and data). In the web world, that translates to structure (XHTML), presentation (CSS) and behavior (ECMAScript, DOM).
  • XHTML is derived from XML. Basically it’s the same as HTML except you are required to close every tag (even BRs!), all tags must be lower case, no mixed case attribute names like “onMouseOver,” and attribute values must receive quotes. The big advantage to using XHTML is that it’s completely portable – – it works in web browsers, screen readers, text browsers, wireless devises, etc.
  • CSS formats web pages. It controls colors, typography, and the size and placement of elements and images. It’s bandwidth friendly – – gets rid of bandwidth sucking font tags and tables which also makes it easy to maintain because there are few elements to deal with.
  • WC3 DOM and ECMAScript (the standards version of JavaScript) enables behaviors that work across all browser platforms. Bah-bye ActiveX and JScript.
  • XHTML markup is not about presentation, it’s about structure (separating content from design).
  • A div is short for a division of a document. The W3C defines it as “a generic mechanism for adding structure.” You name your div by using the id attribute (whose name can only be used once on a page like for “nav”) and the class attribute whose name could be used over an over again (like for a “blog entry” div).
  • If you’re using the XHTML transitional doctype, then you can use tables for structural elements. Zeldman is pretty darn confusing with the notion of “transitional” markup throughout his book. Sometimes he says it’s a-OK. Other times, baaaaad. In any event, if you use tables, you can only use a few them in place of a div and you need to name them using an id tag.
  • Stylesheets contain your rules for controlling how elements should display. Rules consist of two parts: selectors and declarations. Take p { color: red; }. P is the selector and color:red is the declaration (which should always end in a semicolon). CSS properties inherit from parent to child elements or what’s true for the highest-level element is true for its children. So, if you set font-family: verdana for the body element, p, td, ul ol, ul li, etc. will all be in verdana unless over overridden. Nifty!
  • Class selectors are indicated by a dot like .redtext {color: red;}. If you use Dreamweaver, you simply select any text (in this example), right click and choose CSS Styles and the redtext class automatically shows up in the menu. Choose it and now all your text is red. Cool.
  • Style sheets are applied to a web page in three ways: external, embedded or inline. External is a separate text document that’s imported when the web page is loaded by the browser. Embedded adds styles directly to the web page in its header. The bad thing about embedding is that your browser has to load all styles for each new web page that is called. Bad for bandwidth. Inline is simply applying a style directly to an individual element in a web page. Again, no bandwidth savings here.
  • DOCTYPE switching. Modern browsers support doctype switching which essentially means, if your doctype is incorrect or not avaiable, the browser falls back to quirks mode (support non standards complaint markup from old browsers).
  • The Box Model is the main piece of CSS functionality that replaces the need for tables. A CSS box contains content, padding, border and margin. Each of the four areas can be assigned values. The trick is the values are additive. So, if your content width is 400px, padding 50px on each side, then total width is 500px.
  • For the best control over font sizes, use px rather than em or relative sizes. That way if users downsize the default fonts in their browser, they’ll still see your fonts as you designed them. If too small or big, then can use Text Zoom to see a page to their liking.

One Comment on “Designing with web standards”

  1. Erik Benson says:

    Do you know if you’re going to aim for xhtml transitional or strict for the Gregov Architects site?