The Nitty Gritty of Cross Browser Compatibility

Designing a website is a piece of cake for a good designer. Really for me it is as easy as writing an essay. I open up Photoshop make a PSD, slice it and code it. Does not sound very hard, then why good designers charge a lot of money? Well because good designers offer Cross Browser Compatibility for all their designs. You should always ask when you are getting a design coded, for cross browser compatibility and confirm it by checking it once the project is done and before paying.

What is Cross Browser Compatibility?

It is exactly what it sounds like. It basically means that the output of your website should look the same in all browsers. That is the ultimate goal so you do not lose any audience due to non-compatibility. You might wonder why would the browser show it differently anyways?

Think of your browsers as a translator of HTML language. Now you ask two Spanish Speakers to translate a long essay, they will translate it using different words, but give you the same idea. Browsers work similarly. They would represent the same idea meaning your header would be at the header, but the space between your images might differ.

Now we would wish that there was only one browser so designers won’t have to work a lot, but there are a lot of browsers and a lot of versions of those browsers. Take in consideration the main ones like Internet Explorer, Firefox, Safari, and Opera. Then there are versions of these main ones like Internet Explorer 6, 7, 8 then Firefox 2 and 3 aside from all the other minor browsers. So what should you do as a designer? or as a client? How do you check all these browsers if you don’t have them in your computer.

Well there is a website called Browser Shots which will let you check all browsers.

Now most top of the line designers have more than one operating system and a lot more computers using all sorts of different systems. I mean I personally have two Windows Notebooks, one running Vista, and the other XP. Then a Power Mac with all Macintosh browsers, and then Linux on another PC. So I can check the website all in my computer but those who can’t use the site above.

There will always be a time when you would have to settle with some differences but try to get them to the minimum possible if not none.

How do you ease the process of Cross Browser Compatibility?

Cross Browser Compatibility is a frustrating process because it requires a lot of trial and error. When you are experienced you get an easy go, but often for new designers it is a tough process. I think you should always start with having your codes w3c Valid.

A w3c Valid website means that your codes does not have any error according to the standard web guidelines. I have written a detailed article with tips on w3c Validation for your website. Use it for your advantage if you need it.

Next Step would be setting a goal. When I start coding, my goal is to get IE 6.0, and Firefox 2 to match. I have noticed that if I get the older versions to match, the new ones almost always match. Once I have these two to match, Firefox 3 usually do not give a hard time. The problem comes with Internet Explorer 7.0 and if you can get that then IE 8 won’t be any hassle.

So set your priorities and analyze your stats. See what browsers are being used by your users. If majority of your audience uses IE you want to make sure that you make your website compatible with IE. Always try to get the majority of users satisfied and then move towards the minority.

Another major reason of problem during this process is font-availability. Not all of your users are using the same system, so if you decide to use a Vista font it would work on all Vista Users, but a XP user who does not have that font will not see the font, and often times the sizes in the font would differ and it will cause your spacings to get messed up. Which in all results in a not compatible website. I suggest you check out the list of Browser Safe Fonts when you are coding.

One of the common mistakes new designers make is using programs like Dreamweaver or Frontpage. It is ok to use them for learning process, but when you enter the next level you have to know that these program adds codes to your coding and make your site w3 invalid which can also result in a non-compatible website.

While you are in the process of Trial and Error you must make sure that you keep a back up copy of the most stable version. So you always have something to fall back on. Also make sure that you take frequent breaks because when you stare at the same codes for a long period of time, you don’t see the simplest errors.

Learn from the Best and Forget the Rest

The best websites on the web are the top ones. Like ebay, amazon and others even though they use so much applications on their website, they are almost always cross browser compatible. The reason is they are not using flash and other fixed applets. They are using dynamic technology. If they are using JavaScripts then they are using it with CSS files that governs the script. Avoid using the applications that does not give you control because that is when you will lose.

At the End Day, Don’t feel disappointed or hopeless if you can’t get this to work because browser bugs exist and there is nothing you can do about it. Just do your best and enjoy while you work. If you get stuck and think you need help urgently shoot me an email, and I might help if time permits.