Campfire #5 : Designing & Developing Cross-Browser Web Applications [Webinar 58min]

On May 23, 2013, Mertech continued the Campfire initiative with a session on cross-browser web applications, led by panelists Mertech representative Oliver Nelson (Senior Technologist) and Jessica Chan of Jessica Chan Studios. In case you missed it, you can watch the video above.

Presented by Oliver, gave a background of the main issues that arise when developing for multiple browsers, which include usage of browser features as well as considering how the different engines render the webpage and variations in how JavaScript executes across different browsers. An overview of the different rendering engines was then presented. Oliver then discussed specific coding issues and best practices that can be used to mitigate them. The most problematic coding issue stems from differences in Internet Explorer (“IE”), especially IE8, which has many quirks that don’t exist in other browsers. Other coding issues involve new features available to enhance the browser experience, which aren’t always compatible with older browsers.

To mitigate some of these problems, there are a number of approaches. For IE, conditional comments are key as they allow the developer to include instructions that are only read by IE, therefore they only need to maintain a single code base. Another important strategy is to evaluate market share and the dynamics of your customer base to narrow down what you really need to develop for. For example, the medical and insurance industries primarily use IE, therefore working to adapt to all the IE quirks would be very important for a website serving these markets. Supporting different browsers by drawing a line in the sand (supporting X but not Y) and graceful degradation are also effective tactics.

Jessica, who spends her time in the trenches as both a designer and a developer of web apps, commented that she found it effective to learn pure JavaScript, which taught her what works and doesn’t work in different browsers and made it easier to apply “shortcut” frameworks such as JQuery and Dojo because she could understand the whole picture. Oliver then presented an example of a website that Mertech is working on, and pointed out the differences between the different browsers. Jessica commented that doing the work up front to have good mockups and using classes instead of ID’s for semantic markup and CSS selectors are techniques that she finds useful.

There were some interesting questions posed by the audience, including a discussion of how dynamic rendering engines such as that used by Microsoft Lightswitch affect developing for mobile apps (this is an example of embracing the vendor-specific framework and being restricted to the tools that the specific vendor has provided to deal with cross-browser compatibility).

Overall, it was an informative session, and we look forward to future topics.