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“.
