From today you can check the browser compatibility of any part of your web application within seconds using Litmus.
How does it work? The secret is our new Litmus bookmarklet - a single button you add to your local browser that lets you test inside your web applications (and other sites that need a login).
It's easier to understand when you see it in action. I've recorded a screencast demonstrating how to use it below. It's eerily simple.
You can install the bookmarklet from within your Litmus account, on the new 'Extras' tab. It's available to all our customers. If you're not already a customer you can try Litmus for free, including the new bookmarklet feature.
In the interests of full disclosure I should explain how we're doing this behind the scenes. The bookmarklet copies your session cookie for the site you're testing, therefore allowing our Litmus browsers to mimic being logged in to your website. Your session information is stored securely on our servers - no-one else can access it. The whole thing works seamlessly.
As always, we'd love to hear your feedback on this new feature!
Lots of points of contact
We took some recent advice and added a contact form to every page on our site. I've placed it in the footer and tried to make it as inviting as possible. It's worked well so far, and we've definitely received more enquiries as a result.
It's worth noting that when the messages are sent to us we also include the referring page URL. This adds a useful context to the enquiry.
Testing
Naturally we used Litmus to test the new Litmus site. I think I spent about a day working on various browser bugs, mainly in Explorer 6 and 7, as you'd expect. I've published the full results online.
Alongside some informal user tests with friends and colleagues, we used the services of UserTesting.com. They set up user tests with people in your demographic and you can then download the video of the session online. This gave us some really useful insights into what could be improved, and we made quite a few changes as a result.
I'll be sharing some excerpts from our user tests on the site in a future post, so you can see exactly the kinds of results we got from this.
Separate sections for email and website testing
Previously we maintained a single 'features' page that covered both the email and website testing aspects of Litmus. This made it difficult to discuss the features specific to one service or the other, without it becoming confusing. On the new site we've separated the two services onto their own pages, and as a result been able to add much more detail to describe them.
Although most of our customers tend to use both services at some point, we found that the majority sign up because they need to test either a website or an email template. From that perspective, it's useful to focus our product information on just what the visitor is interested in at that point.
The numbers
The biggest question is: how did this affect our website stats? Here are some key figures, comparing the month prior to the redesign to the month after.
Conversion rate improved by 46% This is people signing up for an account (including our free plan).
People spend 30% longer on the site This means that they are hopefully spending the time to read the extra copy we added.
People view 23% more pages per visit The new site is helping encourage people to read more pages overall.
More than 2x as many visitors view the 'pricing and signup' page I suspect this is because I've increased the visibility of the sign up calls to action.
I'd really welcome your feedback on the new site, and feel free to ask me to expand on anything I've written if you'd like to learn more about a certain aspect.
I was responsible for the complete redesign of the Litmus site that we launched last month. I'd like to go through a few details about what we changed, and the thought process behind them.
Less cluttered
As we'd added more features over time, the pages were getting more and more cluttered. Especially the home page. Here's how it looked before:
And here's the redesigned version:
Notice the screenshot of the application itself is now the only visual on the home page. Looking back, the sexy 3D “pages” may have looked nice, but didn't aid understanding of what the product actually was.
Bigger fonts
I've become quite a fan of larger fonts with nice tall line spacing. They clearly enhance readability, but they also seem more accessible. I don't mean that from an disability/accessibility standpoint (though that's also true). I mean it makes the pages seem less dense, less intimidating, and easier to scan.
Along with the larger fonts I also added emphasis to key phrases in the form of yellow highlights (just by styling the em tag to add a yellow background colour). That helps to draw your eye through the copy. Incidentally, I also boosted the contrast of the highlighted type, to make it pop out a little more.
More text
Along with a larger font size we've also added a lot more text to the site. We wanted to keep things as concise as possible, but when selling a product like ours there's quite a lot to explain. We've had a lot more sign ups from the new site, and I think the additional copy has definitely had a positive effect in that respect.
I believe people will take the time to read a few pages of information about a product if they're seriously considering using it. There is often talk of cutting back copy to the absolute essentials, but I think that can go too far. We've tried to inject a little friendliness and personality into our copy, as well as covering all the details of the product. As a result it's a little longer than it could be, but in my opinion it works better.
Lots of zoomable screenshots
All the product details are now accompanied by screenshots. When clicked, these expand to give full size views of the feature in question.
The previous site didn't have any full size screenshots. Looking back this was a huge mistake, and one of the must frustrating things I encounter on other sites - if I'm considering buying a product (physical or virtual) let me see it properly first!
As an aside, I used Cabel Sasser's FancyZoom to load our full size screenshots and have been very pleased with it. A couple of effects like that, used in moderation, can really lift a design. Note the rollover effect for the thumbnails as well.
In part two I cover the details of testing the new site, and the effect it's had on our actual visitor and sign up figures.
It's one thing when techie sites such as Reddit claim to no longer support IE6 (since their redesign). There have been heartfelt pleas from designers the world over to drop support for IE6 for years, but only sites with particularly techie audiences have actually made the jump.
However, in the past few months there have been mounting examples of more mainstream sites following their lead. 37signals have announced they are now phasing out support for IE6 across all their web applications.
And the most surprising example (to me at least) was Facebook. Facebook visitors with IE6 are now greeted by an "upgrade your browser" message, and recent features will not work for them.
Although the vast majority of Litmus' users are using Firefox, we see 9% of visitors using IE6. We still test in IE6, and try our best to maintain near-perfect compatibility.
In our case, a lot of our customers' clients may still be using older systems to view the published compatibility reports, even if our own users are very savvy.
What do you think? Have you stopped supporting IE6 on any of your sites?
