@media, Bulletproof Web Design

Accessible ways to bulletproof your website, by Dan Cederholm.

If you are using an image background for any element - apply colours as a fallback too.
Bulletproofing applies to:

• Content - text size, content amount (overflows don't cause your design to blow up)
• Editing - content changes and maintenance
• Environment - what happens in various device/browser senarios (turn off CSS, JAvaScript etc
  

Ref: John Allsop - "The Dao Of Web Design"

How to make an icon with text and arrowhead the easiest way?
You could use an image (not editable easily), or CSS styled text and b/g colour and a "sliding door" type arrowhead as a b/g image element applied to the div.

Site headers used to be easy with tables - how do we have a logo aligned left and tabs/links aligned right?
Use one div for the header b/g (and perhaps use img as b/g to that) then float:left the div surrounding the logo, and float:right the div surrounding the nav/tabs/links. Reference: Positioning Is Everything - Easy Clearing

Also, use Modules (divs) which can be placed on the page. Fixed height modules will break with larger text sizes - you need to employ a Vertical Sliding Doors type technique.

Accepting The Box
The box model obviously leads us towards a mor rectangular layout, but you can break out of this visually by applying subtle b/g images to corners (one per element so if you want two, you might have to apply one to div b/g and one to h2 or p background) - to give the impression that things are rounded off or turned over at the corners. Refs: Hicksdesign.co.uk, Odeo, Vivabit (two rounded corners), cameronmoll.com (fancy top and bottom gifs for headings).

Reusable Ornamentation
Effective additional styling elements can be useful for breaking up the boxiness of a site. Eg for h4, give it a top border, text+b/g colour, then img b/g aligned to below and centred 50% - which iif its larger than needed will also suffice for long headlines. See some of the stuff on csszengarden for more ideas.

Pimp Up My Navigation!
Use a gradient b/g image to underlay text, then give the list item a two-sides + top border. Use CSS to style with different colour on mouseover. The only drawback - the :hover pseudoclass only works on anchor links in IE - but you can set li:hover for browsers like FireFox which know what to do with it - it'll just look heaps better in a standards compliant browser without breaking in IE6. You can attach icons to links easily by using a href="blah.htm"
class="edit" and then in the css, a.edit {background-image: url(edit.gif) } or whatever. Refs: haveamint.com, joyent.com, uncorked.com

Layouts - Fixed vs Fluid?
Fluid is better for increasing text sizes and accessibility, but can have major knock-ons for designs. Ref: rollyo.com - used mix and match: Home page is fixed width, but fluid on search results centre column. This is great, but the max-width CSS declaration is not supported in IEWin (dammit), eg #wrap {max-width:1200px;}
Refs: vertua.com uses %-tage width cols on either side to resize the central column.
simplebits.com

Variable Fixed-Width Layout
Wide layout for most browsers (four columns) - but then some clever DOM scrupting with JavaScript switches a stylesheet or class when the browser window is narrow, such that you now get four rows instead! Neat. Ref: cameronadams.com

Bulletproof Tools - Take the 10-second Usability Test:

• Take away the design (css) - is the site still understandable (a lot to do with semantically correct HTML and source order)
• Validation - keeping valid code 100% of the time can be difficult to maintain, but key while designing a site is constant validation of Markup and CSS - avoids lots of aggro when stylesheets don't work for silly reasons.
• Turn off images and see what happens
• Text size - pump it up a few sizes and see what ballooning text does to your design

Concepts - embrace flexibility - you will never get a site looking identical in in all browsers, but if it's still functional and usable, across a wide range, that's OK: Let go of pixel-accurate design constraints.

Issues
Print CSS - still a problem to be able to print out images used as backgrounds to any element. Refs: collylogic.com, muffinresearch.co.uk (drop coloumn site with pure css)
Hacks - Keep IE-specific hacks in a separate stylesheet; keep your main stylesheet clean. Refs, Molly H's article, "Strategic CSS Hack Management".