Punkchip

In a recent article, Marco Battilana wrote about how he ensured his standards-compliant designs remained so after handing them over to a client. His solution was to target the depreciated tags and attributes and style them using BRAT, which made the developer acutely aware that there was some problem behind their WYSIWYG‘d page.

I had a similar problem a couple of years ago when I was employed by a company to tidy up front-end code and to design a cleaner looking user interface and I had to come up with a subtle way of steering them in the right direction.

After a few weeks of banging my head against a brick wall, it became clear that these back-end developers were much more interested in how stuff worked with the database rather than ensuring their front-end code was up to scratch, standards-wise.

I didn’t want to learn how their stuff worked properly, they didn’t want to (or perhaps think they needed to) know how to code in a standards based way.

A Gentle Push

I started to get frustrated at endlessly removing font elements, adding end <td>’s as well as stopping them using endless heading elements down to <h6> when we only had, at maximum, 3 levels.

Instead of telling them over and over again, I needed an obvious way that told them what they were doing was wrong. This is where the CSS pseudo-elements ‘before’ and ‘after’ came in handy. I wouldn’t usually use them in ‘real-life’ because they aren’t supported in IE - still the most common browser - but as our main development browser was Firefox, I was able to go ahead.

Adding to the stylesheet

So, my version of BRAT is to add a piece of information to the page when the depreciated or not needed element was being used:

<style type="text/css">
    font { color: red; font-size:1.5em; }
    font:before { content: "*** style text
                  using css, not the font element ("; }
    font:after { content: ") ***"; }
</style>

<p>See our <font size="2">contact page</font> for
more information.</p>

This would be displayed as:

See our *** style text using css, not
the font element (contact page) ***
for more information.

or you can do:

<style type="text/css">
    h4:before, h5:before, h6:before {
        color: red; font-size:1.5em;
        content: "** we only use h1-h3 *** ";
    }
</style>

<h5>Member details</h5>

transforms to:

*** we only use h1-h3 *** Member details

Solved by another Acronym

While you can’t stop all bad practices in this way, it does mean that the back-end developers get a little lesson in web standards and I get cleaner code once I’ve stopped developing it.

So it’s BRAT with added detail; or BRATWAD.

Posted in: Web Standards, Work

October 7, 2006 : Bookmark this post: your way