Monday, July 30, 2007

Standards-based layout saved my day!

I can always count on my clients for some last minute urgent changes - I’ve come to expect it - in fact, I even plan for it (similarly to how I tell all my late friends that things start an hour earlier than they actually do.) I had a change come up on Thursday afternoon that needed to be completed for Monday morning if possible. It involved a color scheme update, new menu items and a few additional design elements. My first reaction was “great, this is going to take a few days…” but after opening up the project to take a look at what actually needed to be changed I was pleasantly surprised – it didn’t look like I needed to make any markup changes (with the exception of changing a few words – Fundraising to Fundraise, that kind of stuff).


Four hours later (most of it spent in Photoshop slicing images and testing in various browsers), the update was complete. No HTML changes, just a bunch of new images and about 20 lines of CSS to change, amazing!


One thing that really saved me was having an extra wrappre-DIV around the main content.




This allowed me to easily add the circles that appear in the bottom right corner.



Without the wrapper-DIV I likely would have to either added it to the markup or gotten really creative with the CSS on the mainbody DIV. Not to say that it wouldn’t be possible to do, just that having it there (it wasn’t really necessary for the original design) made my life that much easier.


The final results:

Before:



After:



To top everything off, the homepage comes down in about 3.7kb of HTML markup which means it loads wicked-fast even on my Blackberry. And of course it gracefully renders to down-level clients without CSS support.

No comments: