I recently received a note from Mac user who looked at one of our sites on a PC.

“Something is wrong with the site. The fonts don’t look right at all!”

That person had hit upon an issue that vexes web designers and programmers around the world.  Unfortunately, Macs and PCs are like apples and oranges; they handle fonts in a very different manner.  As much as it pains me to say it as a PC user, Macs are far superior in how they render fonts. In the end, it isn’t anything we can change as front end website coders.

To illustrate: http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

The same Mac visitor brought up how the site has slight (and sometimes great) variations in different browsers. Once again, it’s a common problem that HTML and CSS coders have had to overcome.  It is essentially a balancing act.

Do we want to build quickly and efficiently while utilizing the latest standards and technology?

If so, we can make sure it works great in Google Chrome, Safari, and Firefox (which we’ll call “modern browsers” for the duration of this post) and ignore Internet Explorer (IE) altogether.  In modern browsers, our CSS gurus can make rounded corners, fancy navigation, interactive popups, and a host of other website improvements with just a little code.  The only problem is IE.

Do we want to implement the design quickly, and still make sure IE isn’t left behind?

If so, we’ll make sure that IE 8 and IE 7 function and look good. The site may not have the rounded corners or other details that users would get in modern browsers, but it still looks great. Only the designer and a discerning user will see the difference.  This is the route we typically take at Mindscape. It strikes a good balance between using modern HTML and CSS techniques, using our time efficiently, and making sure IE users have a good experience.

Do we want to ensure that all users, even IE 6, have the same website experience?

If so, we end up making a style sheet for the modern browsers, as well as a special style sheet for IE 8, IE 7 and IE 6 respectively.  In essence, we have to build the site 3 times, skip over modern techniques for HTML / CSS creation, cut all rollovers and navigation into multiple images, and generally fight the system to make it all work correctly.  Typically, we don’t follow this process. It’s easier to detect if a user is using IE 6, and if so, give them a message to upgrade. Hey, if Google isn’t supporting IE 6, I don’t think Mindscape needs to either.

To illustrate a recent issue: we had a 1 pixel gap on the tabs for the http://www.thewhisperwall.com in IE 7. It took our HTML Guru 3 hours and hundreds of tiny changes to make it look acceptable in all browsers. In the end, we had to build completely new code for IE 7 because it worked so differently.  We didn’t even try to fix all the issues in IE 6. It is too archaic.

So how long with this inequality in browsers last?

HTML 5 is the new website standard that is being developed. Modern browsers support much of what is in the HTML 5 standard.  IE is years away. However, do you know how far away the final version of the HTML 5 standard is?  About 12 years: http://en.wikipedia.org/wiki/HTML5.

So us lucky web programmers have another 12 years (at least!) of having to test, retest, and rewrite our code multiple times to work in every flavor of browser out there. Please don’t hold it against us!  If you are a Mindscape client, send us the issues you see and we’ll do our best to correct it.