I was recently contracted to edit a clients existing site, a very professional looking site which probably did not come cheap. Beautiful graphics, effective in its marketing concept and powerful at conveying messages. But the first thing I noticed when the page loaded was a misplaced graphic. The problem was in the code, Firefox was having some trouble reading it. I checked in Internet Explorer, sure enough, it was fine. Seems the designer worked in Internet Explorer and hadn't checked they layout in other browsers. Since the client also uses IE, neither of them knew about the design flaw... but for 46% of the web viewing population, they were seeing this as their first impression.
It is important to check for cross browser compatibility so that your sites design, and 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. Here are four steps to ensure that your site is cross browser compatible.
1. Use Clean Valid Code
Whether using a template or creating your own 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 search engines crawl through your information more easily, and gives your visitors a better 'as-intended', faster loading experience. For template users, look for a mention of HTML/CSS validity. For code writers, check w3schools for reference to valid code. If you eventually opt to use a piece of invalid code, understand the purpose of that code, then check and double check, in multiple browsers, that it's not messing up 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 100s of errors. Validation can be a long, arduous process. Starting with good code can help avoid major headaches (for you and your clients).
It can be tricky to find errors in code. The Validator reports each error by line number. The actual line of code the error is on is sometimes hard to find, and will become even harder when using PHP software (like a WordPress theme) that pull pages together from separate files. If you go through errors with patience, I believe anyone with basic html knowledge can get through validation with 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. CSS3 is available and working in many browsers. Obviously CSS3 will not validate here, but I personally feel that its Not a good enough reason to ditch CSS3. Just make sure to check in your browsers to see if it works as intended.
4. Check with BrowserShots.org
Most users have either Firefox or Internet Explorer on their local machine so its easy to test your designs. But what about all of the other browsers available? Thanks to BrowserShots.org, you don't have to install every browser to know what your site looks like. Check the browsers you want to test from their list, let the site do its job, and they'll take a screenshot and show you how your pages look in each browser. Be patient, it takes a while to deliver your screenshots.
It is important to check for cross browser compatibility so that your sites design, and 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. Here are four steps to ensure that your site is cross browser compatible.
1. Use Clean Valid Code
Whether using a template or creating your own 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 search engines crawl through your information more easily, and gives your visitors a better 'as-intended', faster loading experience. For template users, look for a mention of HTML/CSS validity. For code writers, check w3schools for reference to valid code. If you eventually opt to use a piece of invalid code, understand the purpose of that code, then check and double check, in multiple browsers, that it's not messing up 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 100s of errors. Validation can be a long, arduous process. Starting with good code can help avoid major headaches (for you and your clients).
It can be tricky to find errors in code. The Validator reports each error by line number. The actual line of code the error is on is sometimes hard to find, and will become even harder when using PHP software (like a WordPress theme) that pull pages together from separate files. If you go through errors with patience, I believe anyone with basic html knowledge can get through validation with 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. CSS3 is available and working in many browsers. Obviously CSS3 will not validate here, but I personally feel that its Not a good enough reason to ditch CSS3. Just make sure to check in your browsers to see if it works as intended.
4. Check with BrowserShots.org
Most users have either Firefox or Internet Explorer on their local machine so its easy to test your designs. But what about all of the other browsers available? Thanks to BrowserShots.org, you don't have to install every browser to know what your site looks like. Check the browsers you want to test from their list, let the site do its job, and they'll take a screenshot and show you how your pages look in each browser. Be patient, it takes a while to deliver your screenshots.
No comments:
Post a Comment