This post is an elaboration of a comment that I left on a post about CSS frameworks. I agree wholeheartedly with Joren’s position on CSS frameworks after having used 960gs for the layout of this site (at the time of posting this).. As I mentioned in my reply to Joren’s post, I used the framework to try to cut down the stress I feel when I try to make things line up properly and that most certainly didn’t work as intended.
Specifically, I have a little widget that shows my most recent tweet on the front page, and I’m using a cute Twitter bird vector from DarkMotion.com as the background for this element. If you are viewing this post in IE, Chrome on a small resolution, and probably Opera and Safari, the bird is probably sitting obnoxiously below the recent post bar, getting in the way of content.
This little bird has given me so much grief in the design of this site, that I’ve thrown my hands up in despair and given up. The reason it’s plagued me so is the way 960gs automatically floats everything for it’s grid system. If you want to work outside the grid system, even a little bit, the framework makes you pay with blood.
I love the bird, I love showing my most recent tweet. I will not remove it. However, I can’t claim to be a serious developer, whilst still allowing obvious display bugs on the site, and I can’t bring myself to use a third-party theme to represent my personal blog. It just seems wrong.
In Joren’s post, there is an excellent comment defending frameworks, which makes mention that Joren’s blog has a 3 pixel difference in margins of the content, between the header and the footer. While I acknowledge that this wasn’t the author’s main point, it brings up something that I’ve never understood in web design, and the mentality of many web designers, both new to design and coming from print design.
A web page is a fluid medium. Web designers advocate abandoning the pixel for the em, citing greater flexibility and fluidity. So, at some level, they recognise this. However, people still insist on making designs that rely on pixel perfect precision positioning across all major browser vendors, which is where the need for CSS frameworks and reset stylesheets come from.
Web browsers are products competing in a market, and they have different ways of rendering CSS, and they have their own unique quirks. We know this, as well. Beyond glaring CSS interpretation bugs and discrepancies in box models, they have unique margins and padding on elements, and sometimes these only differ by a few pixels.
Why is this a problem?
Why do these people feel the need to contort CSS, torture it into burying these differences, into displaying the same across each browser. There are far too many permutations of resolution and browser, not to mention whether or not someone has their browser full screened (I don’t) to try to enforce this pixel perfect design.
Embrace the differences. Embrace the fact that your margins may not look identical. Recognise that at the design stage, and design your sites to compensate for this. Don’t split images into different elements if they’re intended to fit together seamlessly. Find another way. Don’t stress if the margin between your content and your header is 3 pixels bigger on IE than it is in Firefox. As long as the general communication goals of your design work across all browsers, and it doesn’t look like a train wreck, be happy.
I know all of this is easier said than done. I’m a server side programmer, not a CSS guru or a designer. However, I think it’s a worthy to keep in mind while designing. Don’t fight the diversity, embrace it.
