While this was my third site I had worked on, it was the first site that was finished and out the door for the public to enjoy. At Method we have retrospectives, to determine how the project went, and what could have gone better, yet we don’t have a good technical retrospective. So here’s my brain dump of the project, and what I can do to improve.

BTW, the awesome flash piece was done by Austin and Erik Hunter. No relation. They did an amazing job at it, and its really the centerpiece that makes the site really astounding. I just had to do the pathwork for the site, its colors, logo’s, text, mainly the menial work.

Welcome back reset.css!

My love for reset.css has been documented before, and I was able to just throw it along with a few other components at the start of the project. It feels really really good to be able to use whatever pieces of technology I consider necessary on a project like this. Coming from an enterprise product like Daptiv where everything was closely watched and to scrutinized it was great to just pop in libraries as the need dictated.

Abstract like crazy

IE 6 doesn’t support a few really important CSS selectors, one of the more important ones being

  1. .class.alsohasthisclass {}

So to avoid a problem where you can’t accurately target elements because of poor selector ability, create HTML structures that can be easily accessed by tried and true CSS selectors. This is in part because I’m not sure exactly which CSS selectors all the A-Grade browsers support. Something that I’m really trying to pickup rather quickly for sure.

Extra Markup is not the enemy.

Part of what I like to do when I create the structure for a site is to never have to go back and change the markup to make it easier to create the CSS. I figure if I did the Markup correctly, then I should be able to never touch it ala-CSS Zen Garden. The main problem with this, is as you start coding your markup, your not going to see a need to put classes on elements that you can easily style using element selectors. Some of the more simple and common ones I’ve been doing are.

  • Put the class “first” on ever set of elements, P tags in a Div, LI elements in a UL, etc.
  • Add the class “selected” for current navigation item, this is probably one most of you are already doing.
  • Wrap the whole body in a div with a class name.
  • Places where image replacement is a possibility, put the text in a SPAN inside the element.

Lastly…

Separate positional styles from visuals

This was a godsend and something I think is really important. You can’t re-use a class in a different situation for its style properties if it also has positional elements to it.

  1. .box { border: 1px solid brown; }
  2.  
  3. DIV.body P { margin-bottom: 3px; }
  1. <div class="body">
  2. <p class="box">text</p>
  3. text
  4.  
  5. </div>

I’ll be taking this farther in the future, its kind of hard to describe at the moment as I’ve not really created a blueprint on how to do this.

No comments

Leave a Reply