As web developers or programmers, it’s always good to remember that that regardless of what browser the visitors to your site use, for example, Firefox, Internet Explorer, Google Chrome, Safari, etc. your website should work.
This post describes some easy to implement points which if taken care of, can help you get your website rendered and functioning perfectly with all browsers.
1.) Test your website inside out on as many as possible browsers.
Though this sounds obvious, most of the web developers never even try this. As per a report most of the websites are only made to work with either Internet Explorer or Firefox. What about the Opera and Safari’s of the world?
Testing your website on various browsers gives you the first hand results with details about things which work and things that don’t. Take this step seriously. It can save you a lot of energy and mental frustration later.
Try using BrowserShots. BrowserShots allows you to test your web site on different browsers.
2.) Check the markup of your webpages and get it validated.
Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language. Validate the markup for your webpages.
Validity is one of the quality criteria for a Web page, but there are many others. In other words, a valid Web page is not necessarily a good web page, but an invalid Web page has little chance of being a good web page.
3.) Writing clean and good HTML helps
Your website might be working with the present day browsers, but, what about browsers which are going to be released later? The best way to make sure that your page looks the same in all browsers is to write your page using valid HTML and CSS, and then test it in as many browsers as possible. Also get your CSS Validated.
4.) Try to use rich media only where it is needed.
Though rich media adds the zing to your site, not all browsers are capable of delivering rich media correctly. Its therefore adviced to use rich media only wherever its needed. Also do remember to add alternate tags wherever possible for rich media. This will make your website more search engine friendly.
5.) Check the Doctype
Using different doctypes basically affects the way pages are rendered by web browsers which ultimately impacts the performance of the web pages. Check out Google Doctype, it is a Google-sponsored open encyclopedia and reference library for developers of web applications.
6.) Set proper Charset for your webpages based on the charset requirement.
In some systems, a server will change character encoding to the default charset used. Charsets are not usually an issue unless they are not set right then they become quite important as they may present issues in the way that a document or web page is displayed.
To help browsers render the text on your page, you should always specify an encoding for your document.
This encoding should appear at the top of the document (or frame) as some browsers won’t recognize charset declarations that appear deep in the document. In addition, you should make sure that your web server is not sending conflicting HTTP headers. A header such as
content-type: text/html; charset=ISO-8859-1 will override any charset declarations in your page.
7.) Ensure that the site accessibility is in place and is proper.
Its very important for web developers to ensure that the site accessibility is proper. Testing your site in a text-only browser such as Lynx. Having proper text alternatives for rich media and other related objects on your websites makes your website search engine friendly, better still, it helps users on old or incompatible browsers.
Do you have any tips you would like to share with other readers? Do post them in your comments.
Also read: [Notes]: Web Application Security Testing
Do stay tuned to Technofriends for more, one of the best ways of doing so is by subscribing to our feeds. You can subscribe to Technofriends feed by clicking here.