What exactly does “cross-browser compatibility” mean? Simply put, it means that your web site will look exactly the same in any browser. And while this may come as a surprise to many new designers, anyone who has ever pulled their hair out over the many bugs inherit in older versions of Internet Explorer knows how frustrating it can be to make sure everything parses the same in all browsers.
Think about it, how many times have you designed your “best site ever” and previewed it til your blue in the face, then check it on someone else’s computer a few days later and it looks blown apart … elements out of order, colors wrong, fonts wrong … it’s happened to all new web designers at some point! And if the person who sees the bad version happens to be your client, you can run into big trouble down the road!
So how do we accomplish this goal? Two main ways. First, by being absolutely sure that your web sites are standards compliant and secondly by using the tools available to you both in your software and online to check for compatibility issues.
I use Adobe Dreamweaver almost exclusively in building my sites. That’s not to say I don’t sometimes tinker with other programs and/or do preliminary layouts in notepad or notepad++ …….. but when the final version is being built, I am going to always be in Dreamweaver. One of the nicest things about Dreamweaver, and all of the Adobe Creative Suite software, is the array of troubleshooting tools built in. Dreamweaver has a button in the main toolbar which will allow you to check the browser compatibility of your site as it’s being developed. If a problem is detected, clicking a link will take you to the Adobe web design forums/help pages where solutions can be found.
Remember, when you are finishing your site’s build and previewing … check it in as many browsers as you can. Download the latest versions of Firefox, Internet Explorer, Google Chrome, Opera and Safari and go through every page in each browser. Look for font problems, color problems, divs that aren’t in the right place and images that aren’t floating correctly. Most of the time, a review and tweak of your CSS file will correct any problems. Always use someone else’s computer if possible, to preview your site on a test server before going live officially. Everyone doesn’t use the same resolution, text size, or browser and all of these can affect the way your site displays.
In future posts I will go into more detail on ways to correct common compatibility issues. Until then, happy designing!!