The UX of Skinning a 3rd Party App


How many engineers does it take to edit CSS?  It’s a trick question, engineers hate CSS.  They say it’s “non-deterministic”.  So who is left to mess around with the 3rd party app to skin it and make it look right?  I “volunteered”.

So the first thing to do is to look at the generated HTML.  My first instinct is to barf.  Who made this garbage?  Those aren’t even real CSS rules?  Why did they do that?  Huh!  WTF?! WTF!  WTF? WTF?  My WTF/min ratio was about 15. (That’s high)

Here is a list of rules to every backend engineer who generates HTML that will help us lowly web developers a ton.

  1. Put an ID or Class or both on every single node.  We use those nodes to put background images and other styling.  A DIV inside a million divs with no ID is very difficult to deal with.
  2. Avoid iFrames.  I understand when this is hard sometimes, but make it the very last resort.  They make all kinds of things difficult and CSS doesn’t inherit.
  3. Don’t make things up.  Hotizontal-align: center is not a CSS rule.  Stick to the rules.
  4. Don’t use hacks.  Use conditional comments to have IE specific css.
  5. Avoid inline scripts and styles.  style=”” and inline scripts are the devils playthings.  They make everything more difficult.  Just use the classes.  Again, I understand when you HAVE to do this, but make it the last resort.

Truthfully, CSS3 makes so much of this stuff easier.  If only Microsoft didn’t suck so bad on the browsers.  I really believe that we should all make the experience purposefully ugly in IE just to make people switch.


Whatya think?