Without a doubt, one of the most challenging aspects of working on web-based projects is making sure that the site renders and performs the same across all of the major browsers. With multiple browsers, multiples versions of a single browser, and different rendering engines, this gets tedious.
Although we can’t completely get rid of the monotony of testing our sites, there are a few things that can be done to help ease the pain a bit.
Here are three tips for developing cross-browser compatible sites that I’ve found to be useful…
Know Your Audience
It’s not at all uncommong to hear that your project functions the same across all of the major browsers. In some cases, this is absolutely true, but it’s also important to know who you’re targeting.
If you’re building a blog, portfolio, or digital presence for yourself or your organization, then it’s worth making sure sure that the experience is the same regardless of the browser. After all, you’re looking to to reach whoever lands on your site regardless how they discovered it.
On the flip side, if you’re building an internal application or a site that is intended to be used by a select audience or niche area, cross-browser compatibility may not be the biggest concern. This isn’t to say to ignore the presentation completely, but that time may be better spent refining the experience for the target audience.
Get The Right Tools
Install a copy of each browser that you’re going to target. Unfortunately, this could mean that you’re going to be running anywhere from four to eight to even more browsers. Unfortunately, this is the nature of the beast.
Luckily, there are tools available to help. Aside from actual browser installations, we’ve covered three free tools for cross-browser testing. Internally, we’ve also used the Utilu Collection for both Firefox and IE testing and have had a good experience with it.
Iteratively Develop
I have often heard that people say to design for the lowest common denominator first. The general idea behind this is that if your project works in the least advanced browser, you can begin to progressively enhance features for other browsers.
The problem with this is that IE6 is currently the lowest common denominator and most modern designs will require a number of hacks to achieve proper implementation for this browser.
Alternatively, try iteratively developing your project. By this, I mean start implementing the general design and then test it across all of the browsers addressing each of the nuances as you discover them. From there, move on to the next feature and repeat the process.
It may be even worth breaking some of the styles or JavaScript out into browser-specific files. This helps keep code organized and separated so if a change must be made for a certain browser, it can be done in a single place.
There are a number of other ways to go about managing cross-browser tips. Got any particular tools, add-ons, or tips that you or your team has found useful?
Brian Notess says
I’m still looking for a good way to test IE on a Mac. I don’t really want to run a virtual machine every time I need to check my pages.
Any suggestions? I guess I could always buy a PC.
Tom says
ie4osx is the most popular option I’ve seen, but it does take a little bit of setup.
I know that Jared actually has a netbook for testing IE.
Kyle Reed says
Perfect.
This helps a ton. Great resource links on here.
Thanks Tom
Kyle Reed says
Now go and farm or something
Trevor Taylor says
I use Google Chrome on one screen and Firefox on the other. I only use IE for one purpose. To download Firefox. I know I probably should open IE to check on compatibility, but I just don’t wanna.
Tom says
Funny – whatever works, I guess. It does all depend on who you’re targeting, though.
There have been a number of things I’ve created in my 9-to-5 that have been used by people that exclusively use IE.