I recently read Richard Rutter’s The Elements of Typographic Style Applied to the Web after reading about it here. The essay makes several mentions of CMSes and the application of tags to help in the display of text. This got me thinking about the shortcomings of CMSes.

CMSes are a great way to empower website owners. Allowing someone to update their own site without needing to learn HTML or CSS. The use of JavaScript text editors like FCKeditor and Tiny MCE mean that people can even add styling to their content.

Since starting to work on CMS based websites some five years ago I’ve always had a nagging doubt about the code they allow a user to produce. Frequently not accessible, validatable or sometimes even readable. The problem with these editors is you are giving someone the means to completely wreck the look of their website, a website they may have paid thousands of pounds to have designed and built. I believe that part of being a web designer is setting boundaries for users looking to edit their own content. Below is my ideal text editor for a CMS.

I would let users set titles as <h2> - <h6>. I would prevent them from using <h1> as that would be retained for the page heading and generally you only have one of those. Also I would only allow <h*> tags on a maximum amount of words - say 20, to try and stop users from misusing <h*> tags as a means to make text bigger.

I would convert any use of <b> or <i> tags to <strong> and <em> as they are more symantically correct.

I would remove any <font> tags - they have no place in modern web design.

I would remove any inline CSS as this is not content. A CMS should be about editing content not making design changes. That’s my job and it’s what your paying me for, just because you can set that text colour to red and the background to yellow doesn’t mean you should.

It would be great to be able to detect when someone has typed their content all in caps and either convert it to lowercase while informing them that all caps is unreadable. Again maybe set a tolerance of 10 words to allow for any acronyms.

Tables are a difficult subject. They can be legitimately used to display product data but they can also be a source of annoyance to us web designers, they don’t always play nice with CSS. I would like to be able to switch allowance of tables on or off based on the type of website - is it a shop or a blog? A shop might need to display product data for example.

Some customers will want the freedom to change the colour of text and font faces and no amount of trying to educate them will change their minds, but for the most part setting some ground rules like the ones suggested above will help users maintain their site to the standard it was authored at. Which will also help with accessibility.

For the last year I’ve been using a set of bare CSS templates I’d built as the basis of the websites I design. I’m thinking of updating them so I need to revisit the following:

Font sizing

Currently I’m using pixels with a conditional stylesheet for IE that contains font sizes set in the equivalent percentages. The theory was I set up the IE sizes last when the site is basically finished, all I had to do is run through the main CSS and match any pixel sizes to percentages. The main problem I had with this was the addition of elements in the site after I had designed the pages led to the IE sizes not always being set, a problem with project management really and there being too much interpretation of the spec.

Image replacement

Should I be replacing say an H1 tag in the header with a logo image? This would make setting up PDA versions of sites easier but what are the implications of this? What about those people who have images switched off but CSS switched on?

I'm a big fan of lists. For my web design projects I use Zoho Planner. Using the Stylish add on for Firefox I have setup a stylesheet for my lists to highlight:

• Important stuff
• Someone else's responsibility but I will need to check to make sure it's done
• On the backburner

To use it just install Stylish and paste in the above code. With some modification this code could also be used on Backpack.