Chap 02

Browsers! Browsers! Browsers!

The raison d’etre of web design is the end user. After all, the Web page was created so that he can browse it, interact with it and use it. If he is not comfortable with the web page or the page does not display accurately, it is logical that the user finds fault with the web page and the designer of the page. However, in reality the web designer is not to be blamed. He does create web pages that are excellent, user friendly and entirely in accordance with the needs of the end user in mind. It may not be displaying the results correctly because the browser being used by the end user is not the one for which the web page was designed! Again, the end user may turn around and ask “So, is that not a problem the designer should have fixed?” Maybe he is right but so long as there is no single standard or rule that is supported across browsers, the web designer must silently bear the blame.

What goes wrong with the web page when it is displayed in different browsers? Many, many things go wrong! The page overflows horizontally and vertically. The text boxes in forms are not in the position in which they were originally placed. The images seem to have jumped up or down a few pixels or they just do not load. The formatting seems wrong and the font is changed! This list could go on endlessly. The fact remains that web pages do not display uniformly across all browsers. There are several problems that need to be addressed if they have to display well in all target browsers.

Added to this issue is another major problem. The same browser or version of browser does not display the web page the way it should in another computer. The platform is different, the operating system is different and hence the browser displays differently! So, the woes of the web designer seem endless! He must throw up his hands in frustration or tell the user “Dear User, my web page will only display well in browsers of xyz kind working on an operating system xyz”. This will lose them visitors and customers.

Most web designers decide to settle for a compromise. They will make enough effort to ensure that their web pages display well in the most popular browsers and pray to God that it will not appear too bad in others.

Therefore, before studying of the problems, which browsers browbeat the web designer with, let us look at a few of them in some detail.

User Environments:

The window in which the user explores your web page is called the browser.
A browser is a generic name for a computer program that creates a window or interface through which websites can be viewed on their computers. Most computers come with pre-installed browsers and are often identified by the name of the browser installed. The most popular browsers in use are:

• Microsoft Internet Explorer
• Netscape Navigator
• Firefox and related Mozilla-based browsers
• Opera

Microsoft adopted a marketing strategy of bundling their browser with the windows and hence it became the default browser that was used by all users who used windows platform. Many of them are happy with the bundled software and are too lazy or unenthusiastic about changing over to other browsers—even if they offer better features. Netscape Navigator was a long time rival of Microsoft. However, it was taken over by America online and the latter prefers to use the Internet Explorer for all its operations. However, the healthy competition between Netscape Navigator and Internet Explorer gave a boost to browser technology and while the non standard features of these browsers attracted much criticism, they got the developers thinking about standardization of browser technology. Internet Explorer too is implementing standards with each new browser version that it brings into the market. However, the fact remains that standardization of browsers is still a distant dream and the web designer must make his pages compatible with all the target browsers. He must have a clear understanding of the way these browsers treat the HTML codes or the CSS or the different scripting languages before designing his pages.

Internet Explorer:

Internet Explorer has been the most popular browser. It comes installed with the Windows Operating System. 60% users used IE 6 in 2003. The popularity appears to be waning and today only 20% of the users work with Internet Explorer. The reasons for this are many and include issues of vulnerability of IE compared to other browsers.

Since IE was the most popular Browser for a long time, most web designers also focused on creating pages which displayed well on IE. Several of these die hard fans of IE will tell the user that they will have to download different browsers for different web pages if they do not use IE. Others will simply throw before the user innumerable examples of disjointed websites that do not display well on any browser as examples of how non-IE browsers function. What these die-hard fans do not state is the truth that most of the web pages designed for IE were really products designed for Microsoft applications and not for the Internet. They also do not acknowledge that is possible to design websites that function well in other browsers. It is believed that websites that are designed only for IE may result in loss of visitors in the long run. Yet, one comes across the statement on many web pages “Designed for IE”.

So what is “Design for IE”? The 1990 browser wars were responsible for the non standard features of IE and its rival Netscape Navigator. Later, the lack of changes in IE’s Trident rendering engine since versions IE 5 has also resulted in lack of support for standards in IE. So web designers who wanted to take advantage of the features of the most popular web browser, had to design their web pages to display well on IE.

The criticism often leveled against IE is that HTML and CSS are implemented in an incomplete and incorrect fashion and there are bugs in the implementation of the float margins for the CSS standards. The IE box model bug is another famous bug that makes IE critics vociferous. It is often noted that web sites created and tested in IE using the non standard extensions can result in other browsers being extinguished by Microsoft.

IE 6 and below do not support PNG alpha channel. This has resulted in a reduced use of the PNG image format on web pages. This alpha channel distinguishes this image format from GIF and JPEG. However, in IE the transparent section of the image is displayed as gray, white or some other color depending on the image editor that has been used for the creation of the PNG format. Many IE developers are aware of the missing functionality but continue to use IE. In addition to this problem, IE will ignore a PNG image, which is 4097, or 4098 bytes in size and only display the placeholder.

JPEG images in IE display an interlacing problem. The image does not appear as a series of scans, which sharpen the image with every scan. Similar interlacing problems are also seen in PNG images. As the result the image does not get displayed until it is completely downloaded.

IE does not support XHTML. So design for IE will have to take into consideration the fact that the XHTML’s MIME file will immediately present the user with a download prompt. Workarounds that are used to get over this problem treat the XHTML file as if it were a HTML 4.0 file and as a result lose support for the unique features of XHTML such as robust error checking.

Moreover, Internet Explorer will display a text file with HTML like tags as HTML instead of text. This behavior can only be changed by manually editing the registry at the user end and most users would not be interested in undertaking the task. Content negotiation is also not supported in the browser. So the web designer must take care of these problems at design time.

CSS support in IE is believed to be very inadequate. Practical experience shows that IE misinterprets many of the CSS level 1 features and the famous Internet explorer box model bug defines the width different from the one specified by W3C. This required specialized web page design for Internet Explorer. Microsoft has come up with an option in Version 6 to enable the “standards mode” which supports the DOCTYPE on the first line of the HTML. W3C has also adopted Microsoft’s box model implementation in the CSS 3 specs.

IE supports a scripting language called Jscript, which is similar to the JavaScript specification of Netscape. This script also supports ECMAScript, which is the standard scripting language of the web and hence this aspect of IE does not unduly impact the web designer. Nevertheless the Document Object Model adopted by Microsoft for its Jscript only implements some of the DOM levels recommended by W3C. It also implements some proprietary extensions to DOM. The slow down in IE development post version 6 also resulted in the non-implementation of standards that work with every browser. So web designers are forced to write extra code for IE, so that their web pages display correctly in many browsers.

After IE 5.5 Microsoft also dropped its support for API plug-ins in favor of its proprietary ActiveX components and this increased the workload for designers.

Unicode display in IE also is not automatic. Most web designers are forced to second guess on the software that is likely to be available on the user’s computer.

A number of campaigns have been launched to encourage user’s to migrate from Internet Explorer. The numbers of new popular browsers that have come into the market have also got the web designers thinking and more designers are attempting to code for browsers that implement standardized specs of W3C.

Netscape Navigator

This browser was a competitor to Internet Explorer and one of the first pioneers in this field. It was purchased by America online and is still used by nostalgic web surfers. The development of Netscape is almost at a standstill. Its position has been taken by Mozilla Firefox today.

FireFox

This is a robust modern browser that is competition to Microsoft’s Internet Explorer. It is drawing a large part of IE business and is free. Unlike IE, its download size is minimal and has a lean, mean interface with eye-catching themes. It knows how to block annoying pop ups and has extensions that can be used to enhance user experience.

Statistical data posted on a number of websites indicate that around 11% of web customers have downloaded FireForx web browser in the last one year(2005-06). So it is estimated that about 35% of the website traffic must be from Firefox users. Therefore, it makes sense to design for Firefox.

Designing for Firefox is to comply with W3C standards. Moreover, Firefox falls back on the “Quirk mode” when a web page is not standard compliant and still displays the page correctly as it seeks to replicate many of the quirks found in IE and other browsers in order to make non-compliant pages look right. So several designers suggest that it would be better if one could design for Firefox first and then test for compliance in other browsers. Designing for Firefox is said to have the following advantages:

• Increased search engine optimization
• Proper content presentation
• Decreased development and maintenance costs
• Lower bandwidth usage
• Faster download times
• Web viewing beyond the computer (your site on wireless devices & RSS)
• Increased benefits for disabled users.

However, web designers still need to remember that the other half of the world is still using IE and other browsers and if he does not cater to that segment is still going to lose a large chunk of his customers. So if Firefox displays pages well using the “quirks mode” it may make sense to design for IE and then test it in Firefox.

Firefox has certain special features, which web designers would love to take advantage of. The first of these is the efficient pop up blocking feature. Second is the Tabbed browsing feature. Firefox is also integrated fully with Google search. It uses keywords for bookmarks and has a dictionary tooltip that provides definitions for any word. The improved security features, the download manager, the customizable toolbars, the theme manager and the smart update feature are all bundled with the browser and can be used by web designers to enhance user experience.

Firefox also has an extensibility feature that allows users to add features and functionality through the installation of XPInstall modules. The core of the program remains clean and unbloated. This extension system is a fertile ground for experimentation for the creative web designer. However, cautious designers point out that security is a concern that must be addressed while using extensions.

A troublesome feature of using extensions is that the browser must be restarted when extensions are installed, uninstalled or disabled.

Firefox supports plugins that are based on Netscapes plugin application program interface. This is also supported by IE 3.0 upwards and Opera.

Firefox is standard compliant and supports most web standards such as HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, XSL and XPath. It also supports PNG formats and can withstand the rigorous Acid2 standards test.

Firefox also has cross platform support for different versions of Microsoft Windows, Mac OS X, Linux etc. Since its source code is available, it can be customized for other operating systems also. Moreover, Firefox uses the same profile format in multiple platforms. Finally Firefox is a very secure browser, built with security in mind.

Opera

Opera is a slim, small browser that is easy to install and has been around for several years now. It supports many of the features supported by Firefox but is a browser that stipulates that the add-free version must be paid for. So the number of users is limited.

Safari

Safari is a Mac browser. No Windows version of this browser has been designed. It comes inbuilt with the Apple computer. It is quick, elegant and has an integrated Google tool bar.

Apart from the above popular browsers, there are a few specialty browsers that cater to a niche market. For instance, Lynx is a browser that is text based and caters only to users who work with terminals that do not support graphics. However, this is beyond the scope of the subject of this book and we shall not explore user environments that cater to specialized users.

Who is in Control

The web designer has to comply on the one hand with web design standards and on the other he has to ensure that the user environment in which the web page is to be displayed does not distort user experience! Is he in control? Is the user in control?

As a Web designer, you certainly feel that you are not in control. Your creativity is controlled and limited by the functionalities that are available in the various browsers and the preferences of your customers. However, if you have adequate knowledge of how the different browsers function and how they display the different elements on a web page, you can exercise a large amount of control on his web page.

The user feels that he is not in control. He does not design the web pages that he sees and he has very little that he can do to improve the display of elements on the web page. He certainly feels that he is not in control.

The reactions to this lack of control range from an effort on the part of the designer to gain greater control over the web page and going overboard with giving control over the various components of the web page to the user. Neither trend is healthy nor perhaps the process will find its equilibrium somewhere halfway between the two extremes.

Graphical User Interface and Web conventions

Visual interfaces were attempts to recreate on the screen accepted behavior patterns from daily life. These familiar patterns were used to attract the casual surfer to interact with the web page. In due course, imitation led to the creation of a number of websites which followed similar patterns and these evolved into simple, informal rules that have become embedded in the visual culture. This reduced the decoding burden on the user and made the designer’s job easier. Today web designers are appreciated for their skill in utilizing current conventions and applying them for maximum benefit for all.

Web conventions cover a whole gamut of elements on a web page. The positions of these elements are fixed as per norms of the convention. The triangular yellow road sign is a sign of warning on the web page. The button with a raised beveled edge clicks when the mouse cursor is pressed over it and it appears to depress and release and also trigger of an action as expected. A hyperlink is underlined in blue and indicates that it will link the user to another page. The navigation button for the home page is often located at the top left hand corner of the screen, just below the logo. Words separated by vertical lines at the bottom of the page indicate that they are a set of links to other parts of the website. The list could be endless.

Conventions work because they are visual signals to the user and they are located where they are expected to be located. They convey complex meanings very simply. The web designer can exploit the power of these conventions while focusing on specifics in his website.

Conventions, however, are not sacrosanct. They can be broken. Web designers can go against the established convention, but they might find that their users resist the move or are having difficulties in accepting the new norms easily. However, conventions, which are associated with one kind of information, should not be used when conveying an entirely different type of information. For instance a warning symbol should not be used on a message that is merely informative. A button should not suddenly behave like a text box. This will only serve to confuse the user and put them off your website.

Closely associated with conventions is the concept of usability. A website which is user friendly and provides for ease of navigation and gives the right messages was considered to be usable. Design and usability are two faces of the same coin. A web site that is well designed is very usable. It harnesses the power of visual communication to convey to the user what he needs to do to move around the site and perform all the actions he wishes to perform. Users must know what to expect, how these features are displayed in the interface, where these features are to be found on the page and so on if they have to use the web page effectively. This will leave the user with a feeling that he has control over the website and motivate them to stay a little longer on your website exploring all that they can do there.

Building a Site that Works across Browsers:

The foregoing discussion probably left you feeling a little frustrated and disheartened. Designing a web page that displays its elements well across all browsers is not so easy as it seems. It appears that one must compromise and design for a single web browser or at best a chosen few. However, your awareness of the problems and a few simple rules can help you design a web page that displays fairly well on all the major browsers!

An important aspect of the web page design is the size of the canvas you have to work with. So we must educate ourselves on the spatial aspects of all browsers. The first aspect that must hold our attention is the concept of offset. When content fills a web browser, some amount overflows the edges of the browser window. It is important to know by how many pixels the content is offset from the browser window. Next we must focus on the canvas size. What is the width of the page in 640 x 480 dpi and in 800 x 600 dpi? What is the height available to the user for viewing the contents of the page? The third element is the Text size. What are the standard HTML text sizes? What are the tracking and leading? Finally how much room does the pull down menus and text input fields take up on the page and what about other form elements on the page? The offset in some of the major browsers has been tabulated below to provide you with some idea about the canvas you have to work with.

Measurements in pixels

The offset can be overridden, if you must, by inserting a simple code as under in the body tag:

        <BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>

However, this will not work with Netscape Navigator 3.x and you may also have to set the default offset.

Having taken care of the offset, you must now turn your attention to the resolution.  What is the canvas size for which you must design your page?  Web gurus would advice you to design your page for the lowest possible resolution and center the entire page.  However, it is good to know what are the maximum canvas sizes you can have for each resolution.  This will give you an idea of how much empty space will be visible to the end user when they view your page in higher resolutions.