Strategy summary
This article discusses a strategy for making your websites compatible with Internet Explorer 8, which is composed of the following steps:
1. Code according to web standards
2. Multi browser rendering testing
3. Design adjustments and customizations for specific browsers
4. Increase your efficiency with development tools
Internet Explorer 8.0 is close to be released
As the availability of IE8 increases and the installed base grows, more users will start visiting your web site with IE8. These users could have updated their previous IE6 or IE7 versions, they could be trying Windows 7, hence Internet Explorer 8. Whatever the reasons, the IE8 audience will grow for sure.
Problems can arise when users start viewing Internet content with new browsers, different from the ones they used to have. Differences between browser versions can include minor changes like bug fixes or specific improvements. Major changes can also have been made, for example general modifications in the layout and rendering engine, as is the case in IE7 and IE8. These two versions included significant changes to the core rendering engine, especially IE8, for which the rendering engine was completely reprogrammed with special attention to the W3C standards. The magnitude of the changes can produce rendering differences that surpass the ones observed in previous Internet Explorer updates.
Users that start browsing with IE8 and were using previous IE versions or other browsers could observe important differences like the following:
· Web page design and layout issues
· Web page behavior issues
· Different support levels for W3C standards
One of the main areas that were changed in IE7 and especially in IE8 is stricter adherence to W3C standards. A high percentage of the required workarounds for previous versions of IE are no longer necessary, allowing web developers and designers to spend less time on browser customization and more time on the actual design and development.
Multi browser rendering testing
The first step in the strategy to accomplish cross-browser compatibility, including IE8, is to write your code following the W3C standards and the industry best practices. There are plenty of resources in Internet about the subject and every hour invested in reviewing this documentation and adopting the practices will yield higher quality code, improved maintainability and understandability, better possibilities for cross-browser compatibility, and even better ranking in search engines.
The second step in this strategy is to test every representative page of your web site in all the browsers used by your intended audience. Web site testing could be a complex process, including the following phases:
· Visual validation of rendered pages: Inspection of the different web page elements and their visual characteristics and layout is performed. You should perform at least this type of testing for all your web sites, considering static pages and page templates.
· Dynamic behavior validation: All forms for user input and dynamic results should be verified. Inspection of the rendered elements is performed.
· User-browser interaction verification: Users can change different settings in their browsers, for example font size, window size, among others. The tested web site should continue working when the user changes browser settings.
It is recommended that at least the visual validation of rendered web pages is performed. This step is especially important when dealing with legacy code whose adherece to web standards is unknown. There are tools that can help in this process, for example online services for rendered web page image generation.
These web page pictures can be generated in order to let you see how is your web page rendered in a wide variety of web browsers and operating systems. This information is essential for the third step in this strategy, which is to make all necessary design adjustments and customizations for specific browsers.
One possible approach for cross browser testing is to install different virtual machines with the necessary browser and operating system combinations. This allows for low level control of the environment, automated tests and user interaction. Nevertheless this approach could require considerable setup and maintenance time.
Another approach includes the usage of an online service to generate images of web pages as displayed in different browsers. The following list provides general information about the most popular web sites for this purpose:
· Browsershots (browsershots.org)
This is an open source project that gives web designer the ability to observe their web pages in a collection of browsers. The user can change the browser’s resolution and color depth, also the host operating system and settings for Java, JavaScript and Flash. There is a palette of nearly 70 browser and operating system combinations, including different versions of popular browsers. Some browsers can have long queues of users waiting for the service, in this case, the service for the specific browser will be blocked.
· Browsercam (www.browsercam.com)
This is a service that offers a monthly subscription as well as a trial version. There is a palette of nearly 45 browser and operating system combinations. There are also remote access sessions for JavaScript testing. A new addition to the services includes mobile device and PDA screen capture.
· Browsrcamp (www.browsrcamp.com)
Browsrcamp allows users to test their websites in all the browsers available in the Mac platform, which are 11 in total. The web page picture size as well as the quality can be selected by the user.
· litmus (litmusapp.com)
This is a high availability service with a useful combination of cross browser and cross email client testing. It provides a free trial account, a day pass and monthly subscriptions.
· CrossBrowserTesting.com
This service allows website designers to test their websites across 65 different browser and operating system combinations. CrossBrowserTesting gives user access to instances of virtual machines; it is possible to test AJAX and Javascript as well as the page visual elements.
Windows 7 Beta with IE8 was recently added to the available platforms.
The third step in the strategy is making all the necessary design adjustments and customizations for specific browsers. There is extensive documentation in the web about browser hacks and techniques to solve browser rendering differences; one usual workaround is to selectively apply CSS rules to different web page elements.
Thanks to the new IE8 compatibility meta tag it is possible to achieve low-level, page-by-page control over the rendering mode used to display a web page. For more information about the specific meta tag values and the reasons behind it see How to make my web pages Internet Explorer 8 compatible. Page-by-page control is extremely important when testing a whole web site and suddenly you find that some pages were intended to be rendered by IE7 or previous. A first step in the journey to web standards is to include the appropriate meta tag in the problematic pages and continue the manual adjustments following a list of prioritized web pages. After a couple of iterations the whole website will hopefully be standards compliant and then the compatibility meta tags could be carefully removed. After removing the meta tags, the web pages should be retested.
The task of adding the compatibility meta tags is automated by the tool Aggiorno IE8 Compatibility Wizard. It takes into account different situations that could make a manual process fail, for example legacy code handling, several files in several nested directories and requirements to preserve file formatting.
The fourth step in this strategy is to always keep improving. Cross browser compatibility is a long term goal that will always continue to change as new browsers and new technologies are released to the audience of our web sites. This could be an overwhelming task and consumes resources that could be necessary for other goals like web site accessibility, design, SEO, among many others. In situations like this it is always advisable to get help from automated tools that can increase our development efficiency. Aggiorno, a tool made by Artinsoft (www.artinsoft.com) was designed and built with the always changing web development environment in mind, giving you a significant advantage in the cross browser compatibility field as well as in many others.
References
