The Perils of Web Development

Fear will keep the { display:inline } - fear of this browser.

There’s never a dull moment in the wonderful world of Web development. The release Google Chrome marks yet another Web browser designers and developers need to consider when producing interactive content. Not really such a big concern unless your job entails the creative/design, coding, production, or quality assurance of Web-based content. If so, then Chrome is the latest browser to potentially add to the plight of the front-end Web Developer by further undermining the likelihood a Web site will succeed in establishing visual and functional consistency across the browser landscape.
At issue are potentially the small to large discrepancies which may occur in how a Web page renders and interprets scripts (Javascript, AJAX, and jQuery for example) based upon browser architecture and the particular rendering engine employed. Combine this with the integrity or flexibility of CSS code in dealing with the idiosyncrasies between the various browsers, and it becomes arguable that 1 more browser equates to yet 1 more coding caveat designers and developers must unfortunately contend with when building a site.


Google Chrome: New Browser On The Block
Launched September 2nd, 2008 and pushed from beta development into full release in a mere 100 days, Chrome represents quick and strategic manoeuvring by Google to capitalize on its search-engine success and build market share within the highly competitive browser arena.
Google, notorious for keeping applications in a perpetual state of beta development (Gmail, Picasa for example) clearly have intentions to raise Chrome’s profile and snatch people away from Internet Explorer, Firefox, and Safari by removing the Beta tag designation and going head-to-head with the more established browsers so quickly. Call it brand positioning or a long-term business strategy, Google like Microsoft are keenly aware of the trend towards Web-based applications and will no doubt continue to release RIAs in 2009 that increasingly leverage the browser as a platform for consumer engagement.

But How Does Google Chrome Stack Up?
In terms of standards compliance, that is, the adherence to coding practices (HTML, XHTML, CSS for example) to define layout structure, typeface, and colour properties of a given web page, Google Chrome actually does quite well. Compared with Firefox 3 and Internet Explorer 7, Chrome scores marginally better in the Acid3 test which essentially qualifies how well a browser complies with a given set of Web standards.

Design for The Best, Test for The Rest
This old adage characterized by optimizing code for the primary target browser (usually IE) and creating a series of supplementary code-snippets or ‘hacks’ to accommodate the less-popular browsers may have been the only viable strategy in the past, but now more clever thinking is necessary to tackle newer challenges.
The rise of Chrome and the fall of Internet Explorer below 69% market share signifies the rapid pace of change on the Web.
Acknowledging the fact that no one browser is 100% perfect or standards compliant, the design effectiveness of a Web site should now be measured against how well visual and functional inconsistencies are minimized across browsers with the realization subtle differences in how a Web looks and functions will no doubt be unavoidable until browser adherence to standards improves.
In the meantime, there are numerous best practices and tricks which can be employed  to at least minimize inconsistency issues and ensure interactive content displays and behaves across multiple browsers in a more predictable fashion:

  • Catch and resolve potential design issues early during the concept/creative development phase by including the Web development team in an internal review of the proposed creative prior to the initial client presentation.
  • Build a development site indicative of the live site environment/file structure and test it thoroughly in FirefoxInternet ExplorerSafariOpera, and Chrome.
  • Before deploying the Web site to a live environment, validate the code to catch potential errors.
  • If you find yourself wrestling with CSS to make the design/layout work and all else fails: http://giveupandusetables.com/

If problems persist and are significant enough to catch the attention of the client and/or brand manager who may ultimately end up calling the interactive team with questions demanding to know why their site looks and behaves noticably different when viewed in Firefox, Internet Explorer, Safari, Opera, then most likely one or more of the above points were neglected.


Comments

One response to “The Perils of Web Development”

  1. I’m glad you liked the cartoon, Darryl. And your first suggestion – having the web dev team review the creative before showing it to the client – ought to be an iron-clad rule.