Monday, October 19, 2009

How to Make a Website Browser Compatible

by Pavel Riazanov

These days, the market is flooded with various Internet browsers. Each one of them is freely downloadable and targets different audiences. We, as website developers, will surely want each surfer to view any website "the way we see it" - with minimal differences or no difference at all. The key to this lies in proper and correct website development from the very first moment and adhering to a number of important guidelines manifesting themselves throughout the website building process. The vast majority of websites is created with respect to the requirements of the most popular and wide-spread Internet browsers, such as Internet Explorer and Mozilla Firefox. The question is - how do we attempt to make our website look the same regardless of the browser we use?

The first and the most remarkable issue is working with tables. Tables are a simple and convenient tool for free content placement, and a creative website developer may reach sophisticated results by building inner tables and wise content arrangement. One of the leading differences between browsers is actually table size default values. Ideally, each cell should have height and width settings. In case these settings have not been defined, a browser may "think" there are no such settings and activate its own default values - and different browsers have different default values. A table with no defined size values will look one way in Internet Explorer, whereas Firefox is based on a different technology and will display the table in a different way, unless you strictly define the table's dimensions. Thus, it is crucial to define the size of the table and its cells. It would be enough to specify values for one cell, which will be valid for the entire row or column. Working in such a way will prevent you from unnecessary errors, because all values are numerical and may be recognized by all existing browsers. Another useful tip is related to table size when a table has a background image. Be sure to fit image size to table size, so that it will not be cropped (if it's larger than the table) or repeated (if it's smaller than the table).

Another outstanding difference is working with spaces, which follows from exactly the same reason. The space character in one browser may be one pixel wide, in another browser - a number of pixels, while in the third one there may be a restriction upon displaying more than one space in a row. Some browsers may even treat a single space as a line break. Besides, a space is not a proper character and one should not move the text by means of multiple space insertion. The rule of thumb is - never use more than one space in a row! For the purpose of moving and pushing text around, use centering and alignment tools, indentation changes or place your content in tables. You may enter the page editor and select the entire content by pressing CTRL+A. Redundant spaces and line breaks will appear as contentless "blocks", colored blue. It is strongly recommended to remove them.

Some browsers are being strict about proper alignment, i.e. if the content is not aligned in a certain direction, it may be displayed in a free manner. For example, if we write, let's say, in Arabic - from right to left - in browser A, we should not expect browser B to display our content in the same way. We shall select the text and align it to the right, thus making certain that any browser in any language and of any configuration will know that our Arabic or Hebrew text must be aligned to the right. This is also true regarding images and other contents.

Advanced users having some expertise in HTML may wish to take a look at the source code and replace certain HTML tags, such as replacing paragraph tags with division tags. There is a well-known lack of coordination between browsers in displaying paragraph tags - Firefox, for example, treats each 'p' tag as a line break, whereas Internet Explorer 7 ignores them. Ironically, Internet Explorer 8 displays them in a similar manner as Firefox.

In terms of site design, there are two major options - design by percents and design by pixels. The latter is relatively simple and allows precise computational website planning. Design by percents will guarantee that your website will look the same regardless of screen resolution, however a thorough examination of coordination between different elements is needed. Web designers mostly use pixels, because this parameter is common for both website building systems and graphic design programs. For instance, it is quite easy to figure out that if the overall width of the website is 800 pixels and the side menu is 200 pixels wide, we are left with 600 pixels of working space. Combining this knowledge with the first tip provided here may lead us to a successful outcome in terms of website building and design.

Specific differences between web browsers:
- In Internet Explorer 8, you may sometimes come across text running over other text. The reason for this is poor treatment of "font" tags in the source code. In case you are facing such a problem, please remove the font setting from design settings and define them by means of style parameter in the CSS language.
- Firefox does not display image ALT tags, whereas other browsers do. The ALT text does exist and is "taken into consideration" by search engines, but not overtly visible when hovering. Internet Explorer 6 does not support transparency in PNG images. In order to fit your website to Explorer 6, try to use images in GIF format instead (or encourage your visitors to upgrade...).
- Internet Explorer 7 ignores 'p' tags, whereas Firefox in all its versions and Explorer 8 display a line break and a space in places where 'p' tags appear. In order to avoid this, replace 'p' tags with 'div' tags.
- In some cases, certain versions of Internet Explorer include the scroll bar in site width and define page center with respect to that. In contrast to that, Mozilla Firefox always excludes the scroll bar when calculating where 'center' is.

A few words on W3 validation:

Recently, the popularity of tests aimed at standardizing sites all over the web up to maximal compatibility has been constantly increasing. W3C is an organization, whose objective is to set a standard, according to which websites will be constructed. This goal, as sacramental as it may be, has not gained substantial support and proper attitude so far. As a result, despite the accepted standards and the testing mechanism, passing this examination has virtually no practical influence on a website, and the website is by no means "harmed" by not passing the test. Moreover, striving to meet the W3C standards requires thorough and meticulous code development according to extremely strict guiding principles, which is utterly not in line with systems designed to facilitate this process. Regarding search engines, no evidence has yet been presented proving there is any direct connection between meeting the W3C standards and search engine ranking (big news sites with thousands of errors are a good piece of evidence). In contrast to that, there are much more important factors, such as keywords and correct text rewriting, that may push you up to the summit of the search results. Thus, a website constructor should better concentrate on the most important and influential factors, which affect website promotion and browser compatibility, out of the list of hundreds less significant ones. Try validating the leading websites on the web, major search engines and news sites, and see the vast amount of errors found by the validator. If they succeed regardless of these 'errors', one must ponder if the test itself is well-constructed...

What is CSS?

CSS is a computer language, which allows creating fixed design settings for a website, thus guaranteeing its invariable appearance. We do not encourage users to work on the source code, since website building systems' main principles are simplicity and maximal user-friendliness. However, if you feel enthusiastic about it, feel free to learn more on the topic on multiple sites available on the web. Here is one of these: http://www.w3schools.com/css/default.asp

Performing tests

The best way of testing your website is downloading and installing a number of leading web browsers and trying to surf to your site using different configurations, changing resolution and so on. Most web developers simultaneously use Internet Explorer, Mozilla Firefox, Apple Safari, Opera and others when testing their websites, while constantly changing resolutions and color settings during the practice of fitting the website for any set of settings. Besides, it is recommended to download a free IETester tool, which has been developed for testing websites with different versions of Internet Explorer, which you cannot normally install simultaneously on your computer: http://www.my-debugbar.com/wiki/IETester/HomePage

May your website feel comfortable in any corner of the World Wide Web!

About the Author

Pavel Riazanov, MA, is working for a company dealing with website development, design and SEO. http://www.Site123.com