When designing under css, what techniques do you guys use to test across different browsers?

I kinda open it in different browsers.

I’ve been a professional designer working in HTML/CSS for years now. I have a Mac (no surprises here) and I use Coda (HIGHLY recommended) which uses Webkit (the engine that runs Safari) to render it’s code. So I actually code for Safari first.

Before I used Coda, I tested in Firefox first—because it’s the fastest and you can use tools like Firebug and the Web Developer Toolbar. Then I went into IE6 and IE7 afterwords.

Unfortunately, you actually need two installations of Windows to run both IE6 and 7 correctly. There are ways to have them installed at the same time but those solutions don’t actually correctly reflect an untainted installation of IE6. So, I have two installations of XP on my Mac (using VMWare) which I use to test IE6 and IE7.

So the complete system is that I code for Safari then check it in IE6. Once those two look perfect, I check Firefox 2 and IE7. Once all four of those look perfect, I check Firefox 3 and Opera. I typically find that this is the fastest way to work.

The studio I work for just ignores IE6. Honestly, unless your clients are seriously behind the times – in which case they probably wouldn’t be buying a website in the first place – they’ll have IE7. Their clients will have IE7.

If a client specifically requests it, or you think it’s a likelihood someone will show up with Internet Exploder 6, you can always make a specific stylesheet or landing page telling them to upgrade or gtfo.

I loathe IE6 as much as the next guy, don’t get me wrong.

Normally what I do depends on the client. If the project is small, supporting IE6 is easy. When a project is large, you can take a few different paths. If they already have a website, just look at their analytics and determine how much of their audience uses IE6.

If they don’t already have a website then it might be worthwhile to partially support IE6 for a long enough period run analytics and see what the IE6 rate is and then go from there.

If you really do truly know your audience won’t be running IE6 (as I do on my personal blog) then you are in the most beautiful territory in the world. Unfortunately, that simply isn’t the case for most clients.

The easiest way I’ve found to test multiple versions of IE is TredoSoft’s Multiple IE, it installs whatever versions you’d like to keep active on one PC (or installation of windows in bootcamp or something similar, if you’re testing on a Mac), it’s free and I haven’t run into any specific differences between how a page renders or behaves there and in a ‘conventional’ install, although apparently there are some outlined on their site.

As far as process, I usually design for Firefox just like you do bumpley, mainly because all the great extensions that are out for it make the initial design portion so much easier. (if you don’t have Firebug check it out)

Every couple of hours or so I’ll open what I’m working on up in IE7 to try and snuff out any problems there while they’re fresh, the same with Safari which can have it’s own quirks. I usually wait to tackle IE6 until I’m pretty close to done, partly out of dread and partly just because it’s easier to make the necessary fixes once things have solidified a bit. If there’s a lot of javascript, I’ll check more often since I run into more compatibility problems there and the error messages are notoriously vague.

Before releasing a site I’ll try to check it out in everything I can get my hands on, but always check Firefox 2, an older version of Safari, Chrome now, Opera, and at least one phone. Hopefully by this point it’s fairly painless but even if you’re not offering full support to something it’s good to know what the issues are.

As an aside, I don’t see any way a professional organization could ignore IE6 at this point. We’re not talking about a fringe browser, depending on your audience it still accounts for 20–35% of users. So at a minimum you’re telling 1 in 5 to “gtfo” rather than spending an extra hour or so making your design work in IE6. It doesn’t seem like a good choice for the firm or their clients.

stats for W3Schools which represents people interested in web development so is probably the best you can reasonably hope for

stats for theCounter.com which is probably closer to a non-tech group you would need to look at for any sort of wide spread audience or e-commerce

If you’re interested, Yahoo talks a lot about how they decide what to support and how. Their Graded Browser Support seems to be becoming something of an indicator for how things are “in the wild”...

@funkdaddy TredoSoft’s Multiple IE is the software I was describing. In my experience, the way that Multiple IE’s IE6 renders transparent PNGs is inconsistent as well as some z-index/hasLayout problems. They’re all edge cases but any level of compromise is not worth it in my opinion.

Awesome, I’ve always wondered what specific examples I should be looking for and I can understand wanting the testing environment to be as pure and accurate as possible. A native install is always going to be best I guess.

Regarding PNGs, there’s a fix about halfway down the page in the comments that seems to work (search for AlphaImageLoader) and I believe this is now integrated into the new installers. I could be wrong.

Any examples of the z-index/hasLayout problems you’ve run into? I’m guessing layering or overflow problems of some sort?

I appreciate the heads up.

thanks everyone for sharing your input. even though all developers have their own way of doing things; testing between browsers has always been something i was never too sure of. I do agree with the ol “out with the old, in with the new” quote, but i view IE6 more of a last step of development stage. It’s nice to know how other developers are doing it.

browsershots.org