9 Comments

Summary:

For anyone who’s ever designed a web site on a Mac, you’ll know that one of the biggest headaches is testing your design on Windows browsers. Safari, Firefox and Internet Explorer have a nasty habit of displaying the same web site in very different ways, and […]

alkaline

For anyone who’s ever designed a web site on a Mac, you’ll know that one of the biggest headaches is testing your design on Windows browsers. Safari, Firefox and Internet Explorer have a nasty habit of displaying the same web site in very different ways, and constantly swapping between XP, Vista and OS X can be a time-consuming issue.

Alkaline is a new application, launched yesterday, that goes some way toward alleviating this problem. It’s powered by Litmus, an online tool that can show you how your web site appears in a vast array of different browsers and operating systems. Alkaline is their first move to the desktop environment, and certainly stands to save web designers using OS X a huge amount of time.

Setting up Alkaline

Alkaline is a free download, and only takes a few seconds to get up and running. However, to actually use the app, you’ll need to create an account with Litmus. You can initiate this process right from within Alkaline itself, and when completed you’ll be presented with a useful graphic which explains how to enter your information into the application:

Litmus Login Information

Litmus Login Information

Once logged in, you’re able to start running a few tests.

Creating and Managing Tests

Initiating a new test is very simple — just enter the URL of the site you’d like to check, and select the browsers in which you’re interested. Testing in Firefox 2.0 and Internet Explorer 7 is completely free of charge, though you’ll need to subscribe to access all 23 browser versions available.

After initiating a test, you’ll need to wait a while before the screenshot images are generated and returned. This took around one minute in my testing — a more than acceptable delay for a free account. You’ll then be presented with a resizable screenshot of the site in question, and the option of viewing the result with or without browser chrome is available. A test information window is also displayed:

Litmus Test Information

Litmus Test Information

This outlines a variety of information about your test, including the site URL and title, creation time and browser/platform information.

Tests are concurrently integrated with the online version of Litmus, so you can log in and access your results from anywhere. This is done by accessing your personal URL (e.g. http://yourname.litmusapp.com) and logging in.

Version Support

When ironing out problems and bugs with display in a particular browser, you’ll likely be running several tests, one after the other, until the issue is solved. Alkaline supports the storage of different test versions so that you’re able to flick back through previous screenshots and check where improvements have been made:

Version Storage

Version Storage

This is really useful for seeing which code/design changes effected which browsers in different ways over time — as you fix one problem, another often occurs. These different version images are also available through the Litmus web app.

Plugin Support

If you’re someone who uses an integrated environment such as Coda for design and development, you’ll be pleased to know that Alkaline is offered as a Coda plugin. A different version is also available for TextMate. Alkaline is also pushing developers to create a plugin for their own application, and has provided instructions on how simple the process is.

I expect this will be a great way to generate interest from other developers, and it would be incredibly useful to have support built-in to other apps such as Espresso and BBEdit.

Pricing & Conclusion

After running a few different web sites through Alkaline, I’m really impressed. It goes a long way towards negating the need for virtual machines, Windows licenses, or any messing around with keeping different copies of Windows up to date. I’ll definitely be keeping the app installed, and I do think it’ll come in very handy for future projects. While I expect I’ll still need to boot up a virtual machine from time to time, gaining a general overview of how a site looks in Alkaline will be invaluable.

The obvious limitation is that you don’t actually get to use your site, and there is only so much you can gain from viewing a range of screenshots. To really generate an idea for how your site works in a different browsers, you do need to actually use the application itself. Animation, user interaction and rollover effects can often behave in a way you wouldn’t expect — issues that wouldn’t be picked up via a static image.

The free version of Alkaline allows testing in Firefox 2.0 and IE7. To upgrade to access all 23 browsers you have two options. A ‘day pass’ is available for $24, giving you access to all web browser (and also email account testing) for a 24-hour period. Alternatively, you can pay a monthly subscription of $49 per month for unlimited testing. The service doesn’t come cheap, but can offer real value and save a decent amount of time if you’re an OS X web developer.

For more information, check out the detailed screencast or head over to the Alkaline web site.

You’re subscribed! If you like, you can update your settings

  1. errrmm……
    $49/mo? no thanks – i’ll just keep VMWare Fusion open and test them directly in Windows. Not that hard to go do a couple refreshes in some other browsers.

    not to mention – its much, much nicer to have an actual live version of the webpage instead of just a screenshot, so you can make sure all your dynamic CSS features work and you can use add-ons like FireBug for CSS and DOM analysis

  2. My biggest problem with these services is that they require you to test your live site. I like to test my designs before I push them to any public facing server.

  3. Why pay so much just to get screenshots when you can have them for free with, for instance, http://browsershots.org/.

    Moreover I agree with the above comments that anyway, screenshots are usually far from being enough to test a webpage usability…

  4. Try http://www.crossbrowsertesting.com/

    You can test live sites on a variety of browsers for free.

  5. Jonathan Badeen Sunday, March 29, 2009

    My problem with this and all other solutions that get around running windows is that the majority of web work i do can’t work with these solutions. First off, at my company we have everything running on our local machines (in VMWare for me) with modified host files for resolving domains in the test environment. On top of that, signing in to our site is required thus I don’t have a publicly available URL to share w/ such a service. I wish there was a better option. Someday, I hope. Or maybe IE can just die and there will never be a need to do this.

  6. Will check out alkaline. Not sure if its for us. For simple screen shots we use webshots type program but its not a testing program.

  7. Nice application thanks for this review

  8. Way too over-priced, especially in the current economy. I’d rather stick with Vmware Fusion or Para to do my testing. At most, this is worth 20.00$ annually.

  9. Testing IE on a Mac | Chad Things Wednesday, May 6, 2009

    [...] Alkaline and litmus – get snapshots of your website in tons of browsers [...]

Comments have been disabled for this post