Litmus Browser Testing Software

Litmus is a web browser testing service that lets you test your web pages against 23 browser versions on 3 platforms as well as testing email on 16 different mail clients. The service offers a very intuitive experience for running tests, viewing the full page screenshots, and verifying compatibility.

They also just released Alkaline, a Mac app that lets you view your tests of Windows clients without going to the web site, which is shown in the screenshot above. This looks like it will be a great service for small teams or individuals. Doing my test with 2 browsers brought back screenshots within a minute or 2.

They offer flexible plans, e.g. a 1 day pass, and subscription plans that are downgraded retain screenshots of previous tests. If your pressed for time, or don’t want to fire up that VM, this looks like the service to beat.

Wireframe Icons for Axure RP Pro

Thanks to the great feedback from a few new readers and colleagues, and with a little help from Axure, the Konigi Store now offers the wireframe icons for Axure RP Pro. This is the same set of icons offered in the OmniGraffle stencil, formatted as an Axure library that you can import into your widgets panel. As with the OG set, this is priced at a super low $10 with lifetime upgrades. Happy wireframing. :)

Feng-GUI: Feng Shui for Graphic User Interfaces?

This is an interesting idea in principle. Feng-GUI helps you find out how people see your website, photo or ad and which areas are getting most of the attention.

Feng-GUI simulates human vision during the first 5 seconds of exposure to visuals,
and creates heatmaps based on an algorithm that predicts what a real human would be most likely to look at.
This offers designers, advertisers and creatives, a Pre-testing technology that predicts performance of an image, by analyzing levels of attention, brand effectiveness and placement, as well as breaking down the Flow of Attention.

I’m not sure it’s all that useful, and it certainly wouldn’t replace usability testing or real click-tracking and eye-tracking. The examples imply that people only look ads and dark, saturated areas of color. Doesn’t seem very realistic. Have you tried it? What do you think?

Wireframe Icons Updated (v. 1.2)

The wireframe icons have been updated to add a bunch of new icons and crop the PNGs to 16 x 16 px. Still recession priced at $10, with lifetime free upgrades. If you own this set, go to your account page and click the “Files” link.

New icons: home, currency symbols, light bulb, hour glass, bell, rubber stamp, text tool, drawing tool, layout, calculator, medal, ribbon, puzzle piece/plugin, key, asterisk/new, wand/wizard, music, exit, pagination arrows, mobile phone, iPhone, happy face, and sad face.

For those new to this icon set, the icons are meant for creating wireframes, grayscale user interface design schematics. The downloadable file gives you an OmniGraffle stencil and a folder of PNGs.

Find out more about the wireframe icons.

Adaptive Path's Favorite Sketch Tools

Leah Buley lists Adaptive Path’s favorite sketch tools.

There’s an interesting shift happening in user experience design. After years of making documents that look like they are FEBE (for engineers, by engineers), we’re seeing increasing evidence of the human hand in our own work. Why are sketches and drawing suddenly so prevalent? Well, for one, they can save a lot of time and mitigate the risk of building the wrong thing. But we’re also finding that drawn elements magically invite people into the process and make ideas proliferate.

Whatever the reasons, sketching and drawing seem to be emerging as the next must-have skills for user experience professionals. If you’ve been wanting to beef up your sketching chops, this newsletter is for you. In it, I share my toolkit for sketching like a pro — even if you aren’t one.

Incidentally, I like the Pentel Sign Pen for thick lines and Microns for thinner lines rather than the Sharpie for sketchbook work, but for working big you can’t beat the Sharpie. Great suggestions.

Chrome Experiments

Google’s Chrome Experiments lab showcases some interesting uses of Javascript.

We think JavaScript is awesome. We also think browsers are awesome. Indeed, when we talk about them, we say they are the cat’s meow – which is an American expression meaning AWESOME.

In light of these deeply held beliefs, we created this site to showcase cool experiments for both JavaScript and web browsers.

These experiments were created by designers and programmers from around the world. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.

Some pretty slick stuff in there. Check it out. You won’t need Chrome to play with these experiments.

Fluid Grids

In the latest A List Apart, Airbag Industries’ Ethan Marcotte writes about designing fluid grids, rather than using the fixed pixel methods provided by most CSS layout frameworks. Marcotte describes that the technique of calculating percentages for column widths is the same method we use for calculating font sizes in ems.

To calculate fluid grid dimensions, we first take a base font size of 100%, which is usually 16px in the majority of browsers when not altered by the user. This becomes our context variable. Then we take the fixed pixel size we want to make fluid, e.g. a width in our fixed pixel design, and divide by the context variable, which gives us a relative value for our fluid grid.

Fluid grid equation

target ÷ context = result

For example a 700px column is calculated to be 43.75em.

700 ÷ 16 = 43.75

The one minor exception to the above is that you might have to shave a pixel off your target if you experience problems with your widths in IE because of that browser’s rounding behavior.

Users of 960gs may be interested in using the fluid port of that framework.