Optimizing for Browser compatibility using frameworks and good design practices

Although designing plays an important role in a web application its not all about color or style. It consist of a lot of aspects like usability, typography and above all, it the browser compatibility.
Its not always you find a site fully compatible in all the web browsers, but its about how close you can make it look perfect. We’ll talk about some of the things that we will stumble in the lifetime of a project from PSD to HTML.

For all those who don’t know what a web browser is, its a software application used for retrieving, presenting and traversing information in the web with the help of protocols or simply an application to view the contents of the web. Often browsers are built upon an engine which controls the display of the information. This is common for all browsers and are called layout engines. More than 90% of the browsers are built upon the layout engines Webkit, Gecko and Trident.

When a engine renders it in the browser it does it with its own style, which causes the minor differences across the browsers. Making them look similar in all browsers needs neat and wise coding techniques.

Building the markup and Layout

Due to the different layout engines, the behaviour of design may not be the same in all browsers.
Its important to know the most common and existing bugs in each browsers and developing with these things in mind. Its all about how elements are stacked in the document. Understanding them with the properties associated with each will help you to write a better markup that can make up the framework. Furthermore, a well formatted HTML or XHTML would help in the further upgrade of the application and use of table-less designs should be followed for getting the maximum layout flexibility using CSS. Following a complete CSS oriented design will help in keeping the design and markup separate. The complete layout of design can be twisted to the way we like if we use table less designs and follow web 2.0 guidelines.

If you are hand coding a framework from scratch, it may time some time to develop a bug free and clean layout that meets the requirements. An easier method is to use a framework for layout which is flexible. It would support all the major browsers with almost all issues related to alignments fixed. Examples are grid 960, YUI etc.

Using Javascript for UX

Over the years, Javascript has become one of the essential components while designing any web application. With the rich applications created via AJAX user experience has become an integral part while designing websites and portals. For designing an application that works in all major browsers, It is always a very good practice to adopt a javascript framework and build the website revolving on it rather than using snippets of code for each separate feature. Use of unobtrusive Javascript will also help to keep the code clean.
Some examples of Javascript frameworks are DOJO, Yahoo, JQuery, Prototype etc. Use of these can help in incorporating common web 2.0 features which are supported in all major browsers with very few lines of code.

CSS oriented designs and use of hacks

Style is another subject that needs attention just as much as markup. When we design, we often try to do new different things like the use of css3 and tricks, hacks etc for some other browsers etc. Some of the important things that we need to follow while writing the CSS is :

1. Use of a reset CSS.
2. Understanding the box model and known bugs arising due to it in different browsers.
3. Separate CSS3 features to help future updates easier.
4. Avoiding use of CSS expressions and specific hacks in base theme.

Font stacks and compatibility across browsers

While designing in different platforms fonts change accordingly. We should try to keep the design compatible with the default fonts present in different OS. Although, Windows comes with a default font list, there are notable differences between XP and Vista. Same is the case if MS office is installed in the system. Since all these are settings at the users end we should play safe with the most commonly found font families in the base theme. Embedding fonts can be done using Google API. While using @font-face techniques, some browsers does not recognize the OTF or TTF formats. So they need to be converted to what is supported in them.

Testing in different browsers

A good design cannot be achieved without extensive testing across major browsers. Sometimes a cool feature CSS/JS would look awful if not tested properly. To make sure the layout and style written are correct its always a good practice to use a single browser on which the whole design is developed and then checking it across multiple browsers to make it better. Use of developer tools like in Chrome and Firebug are encouraged and will help you to quickly find out the errors by making edits on the fly.

Either design with IE6 or 7 in mind or don’t. The reason behind this is, a handful of scripts can fix only few of the issues, but we should make a choice and decide considering the users perspective and usability answer if they really worth even if you have 1% of your audience using them.
Unwanted JS can sometime significantly affect the load time of the site and this won’t leave a good impression among the end user. Since this will affect the entire project, it should be noted that mockups in photoshop and CSS tricks should be designed with this in mind and how you plan to achieve even if you will be following the progressive enhancement.

A lot of tools are available for testing cross browser issues like browsershots, MS super preivew, Adobe browserlabs etc. which can come in handy if you want to do serious testing.

Design vs Compatibility will be always there in any design. We cannot achieve the 100% balance between the two often but what makes a good site stand out from the rest are the wise choices that make up to the near perfection to each and every detail of the product we offer and browser compatibility is one among the few that gets the first look. When the design is completed the guidelines must be used as a checklist that can help us improve the minor details. The more we master the frameworks and libraries the more easier it is for us to achieve this goal.