by Kyle Weems 6.October 2008 11:13
I'm in activist mode. I've yet to buy communist party t-shirts, start holding signs at rallies, or attend poetry slams, but I'm sure those dark events are in my near future. I suppose it's bound to happen, as there seems to be something about the Pacific Northwest that seems to push people into joining movements meant to change or protect the world.
Maybe it's all the salmon. Or perhaps all the plaid people were wearing in the nineties.
Who am I kidding? I'm still wearing plaid. I'm told that grunge and the lumberjack fashion movement are dead, but I just can't help myself.
I've written a couple of posts in recent past where I agree with Andy Clarke's push for moving to showing clients HTML/CSS prototypes rather than static Photoshop/Fireworks visuals. And as I said in A Modest Proposal (CSS, not Cannibalism) I felt that this change in designer behavior will help push towards a web where we're targeting modern browsers, not antiquated ones, and letting the designs simplify in those browsers (rather than pushing for identical or near-identical rendering for twelve-year old Internet Explorer 6). This, I believe, will help both clients and designers by creating more grounded expectations for how a site will function in various browsers, allowing the use of more modern CSS properties without fearing their lack of full cross-browser support, and ultimately saving time and money that would be spent on the hacks and workarounds that would otherwise be needed.
It also might mean that I might reach 40 without any ulcers.
As a responsible citizen of the Pacific Northwest, I'm all about ecological responsibility. We love our coffee, but not if it's not in a bio-degradable or recyclable cup.
I love cool websites, but only if they're browser degradable. For too long people have been putting dirty websites out there that fester like styrofoam in a landfill. Rather than pushing sites that target either the lowest common denominator or work identically on all browsers thanks to numerous JavaScript fixes and HTML insertions, we should be aware of the fragility of the website ecosystem and build only sites that aim high, but appear and function well (if not perfectly) when in a degraded (antiquated) browser.
To that end, there's a number of design features that I want to us to accept as degradable.
1. Rounded Corners
Like them or hate them, rounded corners crop up frequently in websites. Thanks to the advent of border-radius, we can now make these render without messy non-semantic markup and a bunch of meticulously placed images. CSS3.info shows a good example of this property. The caveat is that the property is only supported in Firefox 3+ and Safari 3+ (and at the moment with browser-specific versions).
Honestly? That shouldnt matter. Rounded corners are almost always a non-critical bit of polish on a site's design. It's not going to kill the look of the site in IE to not have those. Twitter has taken that stance with their newest site design, and I haven't heard any outcries from their user base on the topic.
2. Semi-opaque Boxes
Sometimes designers like to add a little panache to their websites by putting a touch of transperancy into the backgrounds of various boxes, letting a bit of the elements beneath peek through. This is very nifty, but supporting it across all browsers can be obnoxious. IE6 doesn't support transparency in PNGs at all, for example, and even with fixes like the Dean Edwards IE7 script it often becomes a source of woe.
Solution? Use rgba colors (or hsla colors if you prefer) for the browsers that support it. And for those that don't? Let it slide. Seriously. A solid blue background instead of a mostly solid blue background isn't going to kill the look of most sites. You can use transperant PNGs for pretty much everything but IE6, but for that browser you'll need to accept that it's just not going to do transperancies well, period. So don't waste your budget on it. Focus on the modern browsers and let it degrade for the old ones.
3. Shadows
Shadows are pretty nifty, adding that sense of depth to an otherwise flat design. It's also a pain. You've got to add extra elements to your markup to hold the imagery that provides the visual effect, which can get really tricky with fluid designs. And once again with IE6 you can run into transperancy issues that you'll then find yourself correcting in just that one browser.
So let's start using box-shadow and text-shadow. Fully supported? Not even close. But they're clean, and for a browser without support the element will look just fine without. Nothing in the site's UI or layout is getting destroyed by the lack thereof.
4. Fancy Fonts
This one's a pet peeve of mine. The conflicts that typeography and the web have been having aren't a secret to anyone who's been working on websites for even a short period of time. There's a painfully small handful of web-safe fonts, so designers wishing to push the envelope have to resort to image-substitution or tricks like sIFR.
Those solutions can be useful, but should be only used with caution and in small amounts. We need to accept, first and foremost, that the web will not support all the fonts we want anytime in the near future, so we need to install correct expectations in our clients from the very first moment in this regard. I've been involved in a recent project where the client wants a non-web safe, non-free font on a series of dynamic menu titles.
Creating a solution to this is a pain.
@font-face is a solution that we should push for to solve this problem. But we need to be aware of all the difficulties that come with it, mainly rights management for font foundries. Libre fonts and Microsoft's push for EOT are bandages, but we need some sort of permanent solution that provides font embedding while not putting the font files at risk for piracy. In the meanwhile, if it's going to be large quantities of dymanic text, live with a font that web safe. If you fancy a libre font, you can use @font-face to provide it to Internet Explorer and Safari users (Opera and Firefox should be caught up in that regards soon), but provide a nice set of backup fonts in your font-family declarations for people with other browsers and accept the reality: font-support is never perfect.
Conclusion
I've dropped a bit into a rant mode here, but let me sum this up. As time passes, end users will abandon old browsers for modern ones. Sites built with hacks and messy markup to serve identical experiences to these old browsers will be filled with wasted, ugly junk in the code that will serve no purpose when that time comes. Keep the web pretty. Make your markup clean and your CSS modern. Make browser degradable websites that look awesome on modern browsers, acceptable on old browsers, and will let those ancient doddering browsers fade away.
Take a look at this example. In a modern browser you get a wide number of effects that enhance the appearance of the page, but aren't required to make it usable and professional. Take a look in Safari 3+ or Firefox 3.1+ for the full effect. Then take a look in IE6 (if you have it) or IE7 (if you don't). Is it suddenly ugly? No. Is it identical? No. But more to the point, it doesn't have to look the same. It's a dynamic medium that we work in, and we need to accept that dynamic, professional results don't involve us adding clutter that won't be needed in another five years.
Don't litter in websites.