Helping the Developers

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: ") ***"; }

<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 *** "; 

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

8 comments on “Helping the Developers”

  1. We weren’t specifically limited.

    The software we were developing had to be very intuitive. I decided that if a page required more than 4 levels of heading, then it probably warranted a summary, which led to another section or page.

    Also, occasionally they’d use headings 4 to 6 to get smaller text.

  2. Hi Emma.

    It’s always cool to see someone have a new spin on things. A very nice enhancement to the BRAT, if I may say!


  3. this page does not display properly on IE7 .. the comments run below the footer

    Ed: Thanks for the spot – in future, please contact me directly.

  4. Great, wonderful idea. My company makes me install a WYSIWYG editor whenever we roll out a CMS based site for a client, and all the hard work I put in to defining styles goes out the window as soon as clients get their hands on tags. Thanks for the post :)

  5. Too bad there’s not a way to send some red text to developers when they write tags in all capital letters. Or if red text isnt possible maybe a mob guy to break their kneecaps.

Add your comment

Your email address will not be published. Required fields are marked *