Ensure Your Website's Cross Browser CompatibilityPosted by Bowden McKinney on May 17th, 2021 I was recently contracted to edit a clients existing site, an extremely professional looking site which probably didn't come cheap. Beautiful graphics, effective in its marketing concept and powerful at conveying messages. But the first thing I noticed once the page loaded was a misplaced graphic. The problem was in the code, Firefox was having some trouble reading it. I checked in WEB BROWSER, sure enough, it had been fine. Seems the designer worked in Internet Explorer and hadn't checked they layout in other browsers. Because the client also uses IE, neither of these knew about the design flaw... but also for 46% of the web viewing population, they were seeing this as their first impression. It is important to look for cross browser compatibility so that your sites design, and much more importantly, your message isn't lost in browser translation. For designers, developers and webmasters, it's assumed by the client that your job will be done professionally and their site will work for everyone. Listed below are four steps to ensure that your website is cross browser compatible. 1. Use Clean Valid Code Whether using a template or creating your personal design, I cant stress the importance of clean, valid code. When your code is valid, a browser knows what to do with it. Cleaner code helps se's crawl through your information easier, and gives your visitors an improved 'as-intended', faster loading experience. For template users, look for a mention of HTML/CSS validity. For code writers, check w3schools for mention of valid code. If you eventually opt to work with a piece of invalid code, understand the purpose of that code, then check and double check, in multiple browsers, that it's not ruining your pages. 2. Validate HTML/XHTML Run your site through W3's HTML Validator. When I started writing code, my pages would come back with hundreds of errors. Browserstack Devices can be a long, arduous process. Starting with good code might help avoid major headaches (for you personally and your clients). It can be tricky to get errors in code. The Validator reports each error by line number. The specific line of code the error is on is sometimes hard to find, and can become even harder when using PHP software (such as a WordPress theme) that pull pages together from separate files. If you go through errors with patience, I really believe a person with basic html knowledge can get through validation with just a little practice. Don't Give Up. 3. Validate CSS Next, run your site though the CSS Validator. This tests for CSS level 2.1. Additional hints is available and working in many browsers. Obviously CSS3 won't validate here, but I personally feel that its Wii enough reason to ditch CSS3. Just be sure to sign in your browsers to see if it works as intended. 4. Check with read more .org Most users have either Firefox or Internet Explorer on their local machine so its an easy task to test your designs. But what about each of the other browsers available? Because of BrowserShots.org, you don't need to install every browser to know what your site appears like. Check the browsers you would like to test from their list, let the site do its job, and they'll take a screenshot and show you how your pages try each browser. Be patient, it takes a while to provide your screenshots.Like it? Share it! More by this author |