In my opinion, one of the most frustrating things about web design is cross-browser compatibility. What are we as web designers up against? A 60% usage share of Internet Explorer, the bane of the web designer’s existence. Microsoft in this browser has blatantly disregarded CSS standards and tried to reinvent the wheel by rendering CSS how they thought it should be rendered. This leads to time-consuming workarounds, hacks, and browser-specific stylesheets to get the site to appear half-decent. Thankfully, trends show that IE’s share is slowly but steadily dropping as the years roll on, and their latest version, 8, is pretty good at keeping to the standards.
Now, I could go on bashing Internet Explorer, but there are already plenty of sites that do that. Frankly, it’s a necessary evil that web designers have to make a decision about. There are still people hanging on to IE’s as old as version 6 for reasons outside their control, or they simply don’t know to upgrade.
The best browsers out there are the latest versions of Safari, Firefox, Chrome, and Internet Explorer. These browsers hold to the standards of CSS and even support more experimental versions like CSS3.
The most proactive thing you can do is educate. Many of the people you meet using an old browser barely know how to use a computer, and whatever they are using is whatever was available on the desktop. While you won’t be able to convert everyone, you can at least inform them that there are better, faster ways to view the internet. Some people don’t even know what a “browser” is. Google has a useful little web page you can send them to. However, you’re still going to stumble across people that don’t want to venture out of their comfort zone, or to whom introducing a new piece of software could render their computer unusable to them.
You can do nothing. You can write your website’s CSS to look good in whatever browser you’re comfortable with and no more. However, if you have clients, or you’re doing a website for a client, it may be detrimental. Your website could be unusable in a browser that some potential customers are using.
You can make the website look exactly the same in all browsers. I’ll tell you now, this is a lot of work. Be prepared to use browser-specific stylesheets and even browser-specific images. This borders impossible since different browsers and operating systems render text differently.
The best option is to utilize graceful degradation / progressive enhancement. Coming from a job that wanted the websites to look identical across the major browsers, this is like a breath of fresh air. The website doesn’t have to look the same. As long as it looks good and is usable, the visitors likely won’t notice. The website will look the best in the most up-to-date browsers, but the graphics will be more simplified in older browsers. Perishable Press has a great, in-depth article about what you can do with CSS3 in regards to progressive enhancement.
One of the culprits of cross-browser problems is the fact that web designers will build the website mockups as a flat image in Photoshop. If you give this mockup to a client, especially one that uses an old browser, they’re going to expect the website to look exactly like it. You’ve got a lot of work ahead of you, especially if you didn’t know their browser of choice right off the bat. There is one technique that Dave Ruse introduced into my thinking that involves skipping the Photoshop mockup stage (at least showing it to the client) and skipping to marking up the site in code. Using features of CSS3 like rounded corners and drop shadows will show up in modern browsers, but their lack doesn’t cripple the look in older browsers. The client will be getting exactly what the final product will look like in their browser. 24 Ways has an excellent article explaining this method.
I am optimistic that the end of non-standards compliant browsers is very near, but in the meantime, we have to be committed to providing the best possible user experience for our clients in whatever browser they prefer.



























Case in Point: Today
Production Director: We’re getting ready to launch this site. How does it look?
Me: In IE 7 — it’s a mess. Text over icons, font all centered, buttons not in the right place, run script errors
Production Director: How important is IE 7?
Project Manager: 19% of their viewers
Me: I’ll start putting tasks in Base Camp