[How-To] Make sure that your websites works with different browsers

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.

These days various browsers are available. As web developer one must ensure that website is displayed correctly.

These days various browsers are available. As web developer one must ensure that website is displayed correctly.

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

DocType is short for document type declaration. Its responsibilities as part of the frameset list include acting as an identifier, specifying certain attributes such as the versions of XHTML or HTML you are using. IE6, IE5/ Mac and Mozilla will all experience quirks in rendering web pages with non compliant doctypes. Opera has its own markup issues and javascript exceptions, but for the most part, it is the browser that has the least issues with faulty doctypes. 

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.

Via: Google Webmasters Help

Also read: [Notes]: Web Application Security Testing

Is your DNS patched against the recent Vulnerability?

BrowserShots: Test your web design in different browsers

You can follow me on Twitter at http://twitter.com/vaibhav1981

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.

Cheers

Vaibhav Pandey

 

 

 


Advertisements

4 Responses

  1. […] Rider Thompson wrote an interesting post today onHere’s a quick excerpt 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. […]

  2. 14001 certification…

    There are two schools of thought in the industry concerning the origin of quality manuals. One categorically declares that a single, common quality manual will not work and that each company should develop its own. This conviction stems from the belief…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: