Press "Enter" to skip to content

#TBT – Big Red Angry Text

Last updated on 26 August 2019

This was an article I wrote back on July 16, 2006 for Accessites. While the references are quite dated, the concepts of a standards-based design and teaching users to code properly still apply today. Enjoy 🙂

As a standards compliant designer supporting an Intranet environment, it gives me a good feeling to create a fresh, new, standard compliant design for a client to replace an older, deprecated, table-based design.

However, that good feeling can turn to dread when I revisit a site and find out that there are only remnants of my standard compliant markup remaining. As for the rest of the document, it has been butchered by deprecated WYSIWYG markup inserted by the software the editors are using. Basically, it’s hard work gone to waste and a huge step backwards.

With no current content management in place and many editors with varying HTML editing skills, I had to come up with a way that would grab the editor’s attention as well as educate on some of the effects of WYSIWYG editing.

Hence, I created a simple, but effective way to give an extreme visual example to show the editors that something has gone horribly wrong — B.R.A.T. or Big Red Angry Text

To demonstrate, I insert this snippet into the global CSS:

 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 This is to determine if deprecated elements are used. 
 If so, they should be replaced:
 1a. <font> and
 1b. <font color="xxx">…</font>: Shouldn't be used. 
 CSS should dictate font attributes.
 2. <center>: Shouldn't be used. CSS should dictate 
 horizontal alignment.
 3a. <div align="xxx">...</div>
 3b. <p align="xxx">...</p>
 3c. <table align="xxx">...</table>: Shouldn't be used. 
 CSS should dictate horizontal alignment.
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* CSS Begin */
 font, center, div[align], p[align], table[align], font[color] {
   color : #cd0000;
   font-weight : bold; 
   background : #eecc11 url(images/warning.gif) repeat 0 0;
   margin : 10px;
   padding : 10px;
   border : 2px dashed #cd0000;
   font-size : 2em;

That’s about it. Simple, effective and in your face.

As for the benefits of B.R.A.T., they are immediate. Let’s just say that I receive phone calls quite quickly about some “display issues” the editors are having.

Another benefit is that this be completely customized. If you’re not keen on big, red and angry text, you can always go for something a little softer on the eyes. If you’re a mischievous type of person, well, you can use your imagination.

Now, B.R.A.T. doesn’t only have to be used in an Intranet environment. It would be easy to apply this to any environment to give editors quite a unique visual and educational experience, assuming that you are using some sort of shared CSS. There are a couple of important things to keep in mind:

  • The div[align], p[align], table[align], font[color] selectors are not supported in IE 6.0, but should be in IE 7.
  • From the editor’s perspective, this can make for a limiting experience.
  • If your existing environment is not currently built to recommended standards and you implement B.R.A.T., you might be in for a surprise.

The process of educating editors on the benefits of a standards-based design can be tough enough to do, especially when working with various levels of HTML knowledge. This method is meant to show, educate, and be passed on to other editors for an exponential improvement on the state of web documents. As well, make for less maintenance and headaches down the road.

And isn’t that what solid, standards-based design is all about?

    Leave a Reply

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