Web design: links and resources
Checking your code
HTML
The World Wide Web Consortium's HTML Validator is fast and versatile and supplies a pretty icon you can put on your pages if your code validates. An alternative HTML validator is provided by the Web Design Group - on occasion it can be a little more helpful in describing the errors it finds.
CSS
Similar to their HTML Validator, the W3C's CSS Validator is fast and free and offers an icon if you pass the tests. Great if you collect these sort of things. Once again, the WDG provides an alternative.
Accessibility
The W3C runs the Web Accessibility Initiative, which has published a series of guidelines to make sure that web sites can be viewed (or heard) by people with a wide range of disabilities. Watchfire Bobby checks your site against the WAI guidelines.
You can also use the Delorie Lynx Viewer to see how your web-site looks on a text-based browser (if you are unable, or can't be bothered to install one on your computer).
Finally, VisCheck can take a URL or a screenshot of your web-site and show you how it looks to people with three major forms of colour-blindness.
Free CSS Layouts & Tricks
The following web-sites offer free CSS layouts that work on a variety of browsers. If you're short of ideas, or just want a head-start, check them out:
- Glish.com Layout Techniques
- Blue Robot Layout Reservoir
- Owen Briggs' Little Boxes
- Craig Saila's CSS Layouts (including some that work on Netscape 4!)
- Firda Beka's Book of Styles
A more detailed description of the trick that hides CSS from Netscape 4 can be found on Caio Chassot's website.
A List Apart, a web-site for web developers, has several articles on CSS, including the excellent "practical CSS"
If you find yourself writing code that breaks in one specific web browser, and you don't mind using a nasty evil kludge, you can find a list of "filters" on Centricle, very considerately shown as a table with a list of browsers that do and don't read through the filter.
Accessibility
VisCheck offer a Photoshop Plugin that reproduces the effect on the website, which is a great way of checking your colour schemes before you start coding them into your style-sheets.
UsableNet have an extension that adds accessibility-checking to Dreamweaver (as offered by Bobby in the links above) reports to the standard validation reports Dreamweaver MX offers you.
Mark Pilgrim, ever the complete dude, has a short, free online book called Dive Into Accessibility. It's very much pointed at making your web-log accessible, but it has valuable lessons for everyone and is good reading.
British Telecom (perhaps surprisingly) have an excellent site on accessible web design. Their page on colour-schemes is particularly good.
If you fancy some heavy reading, the Web Accessibility Initiative's accessibility guidelines are available on the W3C's web-site. In general, running Bobby will alert you to what you need to fix, and if you followed this tutorial it's quite likely that your page will meet at least the Double-A standard (priority 2 guidelines).
People and places of interest
In case you need to convince your boss that your old site needs a re-design to bring it up to the current standards, then this interview with Mike Davidson about the ESPN redesign should make them sit up and take notice. Meyer claims that ESPN are saving themselves 730 terabytes of bandwidth every year, which is an astonishing feat.
Mark Pilgrim's web log is always interesting reading. He occasionally disgrees with the bleeding-edge designers, and like this tutorial, personally uses HTML 4.01 rather than XHTML.
Joe Hewitt works for Netscape, though you wouldn't know it from the content of his web log. It's only linked here because it's so very, very pretty. If you need a CSS role-model, look no further.
Ian Hixie is one of the people responsible for the CSS 2 Specification (and the upcoming CSS 3 Spec). Rarely controversial, but not nearly as bland as his web log's design.