Cross-Browser Compatibility Calamity

This is a guest post written by Kate Carpenter, a designer over at a newly started design and development studio focused on web-only projects, Fireworksable.

Just to summarize this post for you; I’ll be discussing the issue of cross-browser compatibility, it’s implications for affiliates, and focusing on things that you can do to combat it.

So, what the hell does “cross-browser” compatibility mean?

Please excuse me if the title of this segment sounds a little, belittling. However, I know as an affiliate before I was thrust into the world of design and development, that I had no idea what the term meant, or how it impacted me, so I’m drawing from experience :).

Here’s a basic non-technical meltdown; web-browsers aren’t all equal. Sure, FireFox is a more robust platform, and Chrome is more free-flowing, but it’s not just the speed and usability that differs from browser to browser, it’s the way that web pages look too.

While a newly created web page may look stunning in FireFox, there’s a good chance it might not be as good looking in Chrome, and will most likely be very different in Internet Explorer.

Coding web pages so that they are cross-browser compatible is something that we as professional web designers have to deal with on a daily basis (and believe me it’s a pain in the ass), however as affiliates it’s probably something that you’re not particularly aware of, and if you’re used to hiring that random dude off of WarriorForum who’ll whip you up a nice landing page for $100, it’s likely that he or she doesn’t take it into account, and in the long run, you’ll probably end up paying for it.

Seriously though, it can’t have that much of an effect on me can it?

Unfortunately it can. With the spring up of Google Chrome over the past couple of years, all three major web browsers (FireFox, Chrome and Internet Explorer) all have substantial market shares (hovering around the 30% mark across the board), and therefore make it imperative that your landing pages are built for all three.

Take a look at the web page below when viewed in Chrome and Internet Explorer. This is just a simple page, but already you can see how you can go from fairly decent in one browser to completely unflattering in the next;

Unless precautions are taken when coding up a web page, these are the kinds of issues that can arise, and when they do your conversions will take a considerable hit.

Combating the illness of browser irregularities

I’ll go out on a limb here, and assume the vast majority of you reading this post don’t have much coding experience. If I told you to add a CSS reset in, you’d probably have no idea what I’m talking about.

So, I’ll stick to picking out certain things that you can do to help smooth out potential kinks in your campaigns:

Identifying where the issues lie

If your landing page is very basic, or your developer knew what they were doing, there might not be any kinks at all. Rather then running off assuming there’s something wrong, you can check with a simple browser testing tool. My personal favorite is Adobe BrowserLabs, it’s free and allows you to test with 99.9% of the browsers people use. Just create an account, pop your url in, and browse through screen shots taken with the different browsers.

Forms, watch out for them

One of the most common elements of a web page to get dismembered by lack of well placed coding are forms. Internet Explorer, the dinosaur that it is, won’t even allow you to set a custom height without aligning the text to the top of the form, looking pretty ugly and rather unprofessional. Look out.

What’s your audience using

If you’ve got Google Analytics installed on your web page, you’ll be able to see what portions of your audience use what browser. Even as a developer it’s impossible to have all websites looking completely the same in all browsers (because not all standards are supported by all browsers), but it’s certainly possible to optimize for the type of browser your audience uses most. For example, if you’ve got a web savvy audience, chances are they’re going to be using FireFox and Chrome far more than they are Internet Explorer.