No webdeveloper loves developing for older browsers, at least no masochistic webdeveloper. Less possibilities and more quirks require more “creativity” and kind of a positive thinking. As I work on smaller projects, I usually follow a pragmatic approach, focussing on the content.

Form your own opinion

I think, the most important thing is to question your goals and your target group (and your budget). Speaking for myself as a webdeveloper, my blog is my worksample –  I feel queasy risking a badly optimized website. Our clients remind me every day: Quite a bit of them are stuck to IE8 or IE7 because of some old tools, that won’t work in today’s browsers.

Which leads me to the target group. Who is your customer? Who is the customer’s target group – who will view your website? Evaluating your webserver’s log-file (or Google Analytics) by browser usage, is of course a must. Sometimes, we are unlucky and the customer’s IT sticks to IE7. Yay, optimizing is a must though they may only represent a small amount of the overall visits.

There might be a group of unconvinceables. My grandma loves her laptop – we bought it on craigslist 10+ years ago and XP hardly runs – she loves IE8 (aka THE INTERNET). What the heck…? When talking about website optimization, it sometimes gives the impression, that we forget the humans behind the website statistics. Suggesting a different browser or recommending some update, might be enjoyed as good advice or misinterpreted as directions offending personal preferences.

Possible solutions

In my pragmatic approach, I first analyze the facts, address customers’ requirements and the target group. This results in possible solutions:

During design-phase, I strongly propose a content-based approach, towards showing information properly in respect to each browser’s abilities. Always focussing on the content – comprehensive, clear, uncluttered.
I do not implement pixel-precise layouts and try to skip design-wishes that require extra markup or hacks, that may slow down rendering. This sometimes results in lively discussions with our designer. This results in decent content-display for older browsers and special treats for more advanced, modern browsers.

Example

We recently developed this quick-answer-game, as a responsive fullscreen webapp. I use relative units for everything and started with the base-layout that works well for the most common screen-widths according to the statistics (between approx. 1.024-1.280px). For all other sizes, I adjust the base-font-size using media queries and everything else scales accordingly. As IE7 and IE8 do not support media queries, they stick to the base-layout.

In addition, I added classes using conditional comments for them. Combined with max-width and max-height, the game is not a fullscreen webapp anymore, but a decent, unclutterted, cheerful solution without underdog-feelings coming up.

article-opt-chrome

Scalabe, fullscreen webapp in modern browser with SVG graphics.

article-opt-ie7

Fixed size content-display with PNG buttons and fancy GIF animation.

You have to see the adaptions in relation. Making the webapp smoothly responsive and adjusting to screen-orientations took me over 600 lines of code, making it work in IE8 took 100 lines of code and adjusting it for IE7 took another 20 lines of code.

This comparison already shows the caveats of this approach: IE7 and IE8 load quite a lot of code they cannot deal with. I’ve been working with WordPress’ theme “Bones” a lot recently and it uses Compass/SASS very smart in order to bypass media queries for IE7/IE8.
Short summary: It splits all media query blocks in separate SASS files. These files are included and compiled into one file. For older IEs, you create a separate stylesheet and import it using conditional comments. You simply include the required files without surrounding media query blocks. Tadah!

 My resume

If you are unsure, whether to optimize or not, keep older browsers in mind when developing your markup and CSS. I’d suggest setting yourself a time-budget and then just try to get the most out of it without getting lost in minor quirks. Go for it and stay optimistic *.

Further readings

* Optimistic does not refer to IE6 – though you might tell yourself: “hihi, totally retro”.

Frau Doudou

Frau Doudou is a web developer living in Munich. She loves working on creative solutions for sneaky web-problems – challenge accepted!
Feel free to ask questions and contact her on Twitter.