Designing for Content Management Websites
By peteratomic
A Designer's Rambling Thoughts on Working with CMS Systems
As a web designer with 12 years experience, I have come to realize that designing for content management systems is just about the most fun thing to do with my clothes on.
Okay, okay, that's just a punchy attention grabber. I wouldn't go that far, but it was fun to write. Sometimes digging through stylesheets for design-killers can also be utterly maddening and drive me to the brink of suicide. An example.
Recently I was working on a Wordpress theme -- the default Twenty 10 theme (why did I JUST realize they named that after the year it was released?? Oh brother, forest for the trees). One thing I don't like in that template is the way it styles tables. So I went ripping through the CSS, pulling out anything in the style sheets dealing with tables.
Later, as I started adding some content to the site, I noticed the menu was doing some freaky things -- everything was indented an extra 30 pixels and the sub-menu looked awful!
For the next 60-90 minutes (I lost track in waves of palpitations) I started ripping through the code, trying to figure out what I'd deleted that was causing such obnoxiousness in the menu. Fortunately I have a wicked app for the Mac called DiffMerge which allowed me to check the original stylesheet (always, always, ALWAYS save the original!) with my modified version.
After trying everything logical that I could possibly think of, after having scared off the birds hanging out on a nearby windowsill (frightened by my blood-curdling screams), after swearing up and down that that was IT, I was finally going to quit this damn job and go work on the most disgusting fishing boat I could find because it HAD to be better than this, I took a deep breath and said, ok, ok, ok. Now it's time to change back whatever is illogical.
Bingo! Nailed it on the first try.
What was the code culprit?
I had removed "tr, th, td" from the opening CSS Reset.* Here's the catch -- there are no tables inside the menu -- it's all done with ULs and LIs.
Hu-whaaaa??!!!
How could a missing TH, TR or TD style element cause a table-less menu to go completely haywire? Who in the hell knows. (Actually, if you DO know, please post a comment below even though I may temporarily curse you before bowing-down to your mad skillz.)
The lesson is thus. Wait, let me emphasize this a little.
Lessons in Designing for Content Management Systems
In no particular order:
- Always have a complete backup of the template you are working on.
- Never close your CSS file in your text editor until a problem is resolved. This is so you can undo a dozen steps looking for the mistake you made. Damn semi-colons.
- Get an app like DiffMerge to compare documents so if you DO frack something up, you can compare to the original file easily.
- Keep Google running. It's usually pretty easy to find suggestions about CSS code that you've never heard of and get quick explanations. Essential if you're like me and never read a CSS book in my life. Learn by doing!
- If you're using a default template from any CMS (Wordpress, Joomla, etc) make sure you make your own version of the template. I found this out the hard way when a Wordpress upgrade starting wiping out my TwentyTen customizations.
- Delete out CSS code that you don't need. Anything to make it lean, to improve the load time helps. But only if you made a backup!
- Think like a detective. When you're looking for a style that is doing something bizarre, try and go Columbo on it.
- Use Firebug for Firefox. An essential extension to see how the stylesheets are playing out in the browser.
- *Always use a CSS Reset - it clears out various browser styles so you can control pages the way you want to. (Most CMS templates have it.)
I may add more tips later as I remember them. For now I need to stop procrastinating and get back to that client's site I'm supposed to finish by tomorrow.
Example of Typical CSS Reset Code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
}More Help for Designers
If you happen to run a WordPress site, I've recently produced a ton of WordPress training tutorials that covers all aspects of the CMS. Enjoy!
Comments
Hey Peter, I am not sure when you posted this hub, but great hub and voted up!
Yes, with CMS CSS and HTML/PHP templates, you are right, never use what they give you out of the box and I agree with you that you should always have a backup.
Now, I also design themes from content management systems and I learned one thing:
Never use their themes. You can always copy the entire theme and make your own.
When the deleting of the table tags like TH, TD, TR ruined the menu with ULs and LI tags is also beyond me, but I always end of changing the defaults to something totally unrecognizable like the Zen theme in Drupal.
Thanks for the tips on the CSS Reset also. Great hub.
P.S.
I've written a lot of other hubs and ezines about Web technology and recently wrote a piece called Content Management Website Designing which is more of a general overview about design for CMS. And for an even more shameless plug, I happen to own an affordable website design company.
Multilingual Content Management System 16 months ago
having a back-up is definitely important! good lessons!