Attention B2B Marketers: Access 30 Million IT Decision Makers with a Custom Lead Generation Program Click to Learn More!
Welcome Guest | Sign In
TechNewsWorld.com

Making a Web App Work on Safari, Explorer and Everything in Between

By Mike McDerment MacNewsWorld ECT News Network
Jan 5, 2009 4:00 AM PT

Building an application for today's Web is a balancing act. Potential users use several competing browsers. Yet the user experience must be uniform for everyone, regardless of his/her browser of choice. And you can't support one or two browsers because you'll cut out major portions of the market.

Making a Web App Work on Safari, Explorer and Everything in Between

The problem is further compounded if your application is social. Not only do you have to support your direct customers, but you have to ensure that anyone they communicate with is also supported.

When one browser controlled 95 percent of how we surfed in cyberspace, the Web stopped evolving. Things got boring. The good news is that the browser market picture has changed and we're seeing work being done to provide a better experience for Web applications. As evidence, consider WebKit's new blazingly fast SquirrelFish Javascript engine and the sexy canvas element in Safari and Firefox.

Placing Your Bets

As a Web application developer, the real question comes down to priorities. Which browsers should you focus on? Let's look at the most recent as reported by W3 Schools:

  • Internet Explorer (IE) 7: 26.6 percent
  • IE6: 20 percent
  • Chrome: 3.1 percent
  • Firefox (identified as Mozilla before 2005): 44.2 percent
  • The Mozilla Suite (Gecko, Netscape): 0.2 percent
  • Safari: 2.7 percent
  • Opera: 2.3 percent

The data shows you have a bounty of browsers to test against. So, how to choose? The answer: Focus on a few. I suggest dealing with Internet Explorer 6 and 7, Firefox 2 and 3, and Safari 2 and 3. Google Chrome is really new and, in my view, worth waiting for the dust to settle. Let me get to Opera in a paragraph or two.

After you launch your application, watch your browser statistics with Google Analytics or Web log monitoring tools like AWStats. Don't be surprised if they differ from the ones above, particularly as it relates to Safari. Separately, if your application is behind a firewall, be prepared to see anything.

The Future Is Rolling - It's Mobile

Since the iPhone launched in 2007 and the parade of 3G phones that followed, no Web application worth its salt has ignored the mobile market. Sure, supporting mobile customers takes twice the work it takes to build a Web application, but it's a more-than-a-two-fold opportunity. You now have a chance to be ever-present in your customers' lives, and that is a powerful proposition.

Minimally, you need to test your Web application on Opera Mobile and the iPhone. You could add Internet Explore Mobile if your customers have a lot of Windows Mobile devices.

Be prepared. You will likely need to become familiar with the @media handheld CSS (cascading style sheets) command to adapt to the different screen sizes.

Life Is Filled With Choices

Web applications only exist because of the rise of dynamic Web pages, really starting with Javascript and DHTML (dynamic hypertext markup language), and now encompassing ActiveX, Flash, Silverlight and Java. Most applications stick to Javascript, relying on Ajax for their magic. Yours should too. Unfortunately, as we all know, no browser treats Javascript the same way. You will have to test each browser.

Let me recommend using Selenium because it will save you a ton of time. Instead of manually clicking around the application in each browser, you can just fire up the automated tests. Don't get thrown by the fact the IDE only works in Firefox; the tests run on most browsers.

Of course, not every browser has Javascript, Flash and ActiveX turned on because of security policies set by overzealous IT departments. If you're using Ajax, make it gracefully degradable. Otherwise, ignore this problem and move on with your life.

Curve Balls

Life would be boring if the problems stopped there. But no, there are a few more curve balls with which to contend.

First, it's not enough to do cross-browser testing. You also have to check how the browsers work in different window sizes. As you can see from w3school's stats, there is quite the range. Not every browser lays out content the same.

To make matters more teeth-grinding, not everyone has a screen. Consider the growing number of people visually impaired making use of the Web with screen reading software. This particular segment of the market is dominated by JAWS for Windows, so that limits the browsers to test. However, keep in mind the screen reader market is playing catch-up with all that we've come to appreciate about Ajax.

Finally, if you're planning on marketing globally, you'll need to be especially careful of internationalization. The issues range from bi-directional Hebrew and Arabic browsers to supporting the rather incredible Maxthon browser that is taking China by storm. Internationalization is quite complex, so tread carefully.

Testing Tips

Cross-browser testing in a variety of VMWare images works pretty well, though it can be a little slow to open and close images all the time.

For starters, you can just load up a bunch of browsers on your machine. Firefox runs on Windows, Macs and Linux. Safari 3.1 now runs on Windows. IE can run on a Mac using VMWare or Parallels. I'm a fan of using IETab to run Internet Explorer tabs in Firefox as a time saver. Running multiple versions of a browser on the same machine can be tricky. Learn about the process and options before you start any testing.

An easier method is to use a browser testing service. For example, BrowserCam is a paid service where you can get screenshots of your site on multiple browsers or an actual remote terminal to test the Javascript, Flash, and forms by hand. If you don't want to spend the money and have loads of time, the free ad-supported BrowserShots.org is a reasonable alternative. For free remote terminal time, CrossBrowserTesting.com, provides up to 5 minutes free if no one else is using the service. You can pay for priority and more time.

Patience Is a Virtue

This may sound really complicated. Developing a Web application that plays well with multiple browsers takes time and effort but the benefits of persevering are big.

Realize, also, the more browsers that duke it out the Web offers richer opportunity for you and a better experience for users of your application. Further, there'll be greater pressure to adhere to and create new Web standards that can only mean more and better things happening online.


Mike McDerment is founder and CEO of FreshBooks, an online invoicing and time-tracking service that's been multiple browser-compliant since 2004.


Facebook Twitter LinkedIn Google+ RSS
How much are you willing to spend on a smartphone?
I'll spring for a top-of-the-line model, because my phone is extremely important to me.
I'm content with a phone that's a couple of years old and doesn't cost an arm and a leg.
I'm a bargain smartphone shopper -- I'll take the best phone I can find that's free or close to it.
I'm considering giving up my smartphone and getting a basic mobile phone instead.
I don't own a smartphone and I don't want one.