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

Tags: , , ,

8 Responses to “Helping the Developers”

  1. paul haine says:

    How come you’re limited to only h1 to h3?

  2. Emma says:

    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.

  3. Marco says:

    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!

    Regards,

  4. Mike Cherim says:

    It’s very cool to see this getting around. :-)

  5. rob says:

    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.

  6. css menus says:

    great post, lol, I can’t stand cleaning up code from developers… I am definitely going to use this technique on our next project!

  7. Cal Wilson says:

    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 :)

  8. David says:

    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.

Leave a Reply