Loose notes from SXSW 2008 panel Responsible Web Design with:
Greg Rewis Adobe Systems Inc
Stephanie Sullivan Principle, W3Conversions
This session was a bit elementary, focused on basic standards-compliant development practices, but stayed with it to hoover up a few teaching tips. It’s always a dilemma at these things… by the time you realize you wish you were at a different discussion, it’s halfway over, and the one you wish you were at is two blocks away. Sometimes better just to ride it out.
Things go awry – sometimes you have to break the rules.
Three layers of responsible design –
1) The HTML layer.
2) The design layer.
Flash 3 is Ecma compliant and can be made accessible. But it’s not always easy, and very few Flash developers give it any thought.
MTV.com is in the process of reducing the amount of Flash on the site – going HTML with embedded Flash “pods” (just like I’ve been recommending in internal discussions re: how multimedia storytellers should operate).
Remember that people need to raise/lower the font size – make sure your design doesn’t break apart when fonts change. Working to web standards will help ensure this doesn’t happen. Do fonts in em widths.
Save money with standards-based approach – faster, much less buggy.
SEO – when there’s less code soup, the spiders can find the key content more readily.
A web site IS content. The content needs to come first. So content should be marked up according to its semantic meaning. Search engines pay more attention to an H1 than they do to an arbitrary “big green bold” class.
Don’t name things “left column” or “right column” – again, mark things up semantically, e.g. “nav_column” and “sidebar”
Wireframe and design stages should happen *after* the content has been received and marked up semantically.
When implementing another designer’s work (e.g. a blog theme or a Dreamweaver template or a downloaded stylesheet) *take the time to read the comments* in the code rather than guessing and hacking around.
Code for compliance first, then work out the Explorer bugs later with conditional comments in the CSS. If you use conditional comments, it will be much easier to handle IE compliance when it finally appears in IE8.
Dreamweaver has supported CSS since day 1. But an emphasis in DW CS3 was on accurate rendering.
Guy’s fave feature in CS3 – you can drag a rule from one stylesheet to another (from local to global or vice versa) and DW will work out any conflicts. You can also create an inline style for bug busting purposes, and convert it to a real rule when it’s ironed out.
DW in CS3 will help to predict browser compatibility issues. Scanning… you’ve got a double float margin bug that will affect… of course… IE. This could be hugely useful! It won’t actually fix the bug in all cases, but will take you to Adobe’s “CSS Advisor” – a one-stop shop where community works together to share browser bug fixes. Usually you would Google for it, but then you get 30 different responses. But the advisor is built to demonstrate specific / recommended solutions. Includes a wiki.
CS3 has some really nice document introspection features that help you to build Ajax features. Drag in placeholder elements. Really nice results.
labs.adobe.com – drop-in tools, such as updates to the Spry Ajax framework in DW.