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:
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:
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.
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:
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.
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.
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.