All posts in Reviews

Balsamiq Mock Ups Review

Balsamiq Mockups is a program that makes wireframing incredibly quick and easy to do. It is an Adobe Air app so will run cross browser and will set you back $79.

Video Review

What I like about Balsamiq:

  • Very easy to use.
  • Works in all Operating Systems.
  • Comes with lots of pre-made common items.
  • Presentation mode means explaining things to clients is so easy.

What I don’t like about Balsamiq:

  • Can get a bit slow if you have a big wireframe in progress (or a slow PC!).
  • Cost of $79 seems a bit overpriced.
  • Hand drawn style will not appeal to everyone.

So that’s what I think, what about you? Please let us know which application you use for wireframing, and if there are any apps you think we should review., a free image optimising service is a website that can reduce the size of your images. It’s free, fast, and effective. has been created by two members of Yahoo’s Exceptional Performance team—the same people who brought you Yslow. will never reduce the quality of your images, but it can reduce their file size. So you get exactly the same image, but it takes less time to download. Since images are typically the heaviest part of a web page, Smushing them can make your pages load much faster.

How do you use it?

You can use in three ways:

  • Upload images through your browser
  • Supply a list of links to images
  • Use the Firefox add-on, or the browser bookmarklet, to Smush all the images from one of your pages will tell you how much it saved, and give you the option to download the optimised (Smushed) images individually or packed in a ZIP file. also has an API, which allows you to Smush images automatically as they are published (without needing to visit the website). The documentation is sparse, but likely to improve soon.

How does it work? uses several image-compression algorithms:

  • ImageMagick converts GIFs to PNGs, whenever this reduces file size.
  • PNGcrush for PNG files
  • JPEGtran for JPEGs
  • GIFsicle for animated GIFs

None of these algorithms is new; simply packages them into a friendly interface.

If you use GIFs, you can expect to convert them to PNGs (because PNGs are usually smaller). Because this conversion changes the file extension (image.gif becomes image.png), you will need to update any references to the image (such as in your CSS or HTML).

How effective is Smushing?

Smushing can substantially reduce your file sizes, especially when applied to GIFs or PNGs. The actual savings will depend on the nature of your images; in extreme cases you can save over 90%, but occasionally you may save nothing. Smushing generally produces larger savings for GIFs and PNGs than for JPEGs. As a hand-waving estimate, I reckon you can expect about 10–20% savings on PNG files.

I already optimise my images in Photoshop. Why Smush them?

Photoshop is extremely weak at optimising images. It does some things well (JPEG compression), but others badly. In particular, Photoshop’s PNG output is usually bloated; the size of your Photoshop PNGs can be substantially reduced by Smushing them.

I only pick on Photoshop because it’s popular. The same criticism applies to graphics programs in general.

There’s more to image optimisation than Smushing

By design, Smushing is fundamentally limited because it only performs lossless compression: it preserves the quality of the original image. Much greater savings are possible by using lossy compression, which reduces the image quality. Graphics programmes are generally good at this: when saving a JPEG for the web, you can choose how much compression to use. Moderate lossy compression should be used on almost all your JPEGs.

Lossy compression applies not only to JPEGs, but also to PNGs. Your PNGs may have thousands of unique colours, but can you actually appreciate them all? By reducing the palette to 256 colours (or fewer!), you can make the file much smaller; this is lossy compression, because colours are changed slightly. In many cases, it’s impossible to spot any difference between truecolour and 8-bit PNGs.

To summarise: use moderate JPEG compression, and use 8-bit PNGs instead of truecolour PNGs whenever you can. can’t help you here; you have to manage this yourself.

Smushing vs. running the same tools yourself

Instead of using, you can run the same image optimisation algorithms yourself. In some cases this will result in greater savings, because you have direct control of the tools and can configure them to act more aggressively.

For example, you can run PNGcrush in a brute-force mode that uses every algorithm in its library. This is much slower than the standard smart method, but it sometimes gets a better result. More significantly, you can use JPEGtran to remove useless metadata from your JPEGs—but currently does not implement this, because they are concerned about removing copyright information.

In other words, running the tools yourself will offer significant savings for JPEGs, and small savings for PNGs. However, these tools are not designed to be soft and cuddly: they don’t have plush graphical interfaces, and their websites don’t have reassuringly large, green Download now! buttons. They are made for geeks, by geeks.


I ran on a few home pages to see how much could be saved:

  • saved 18% (26 kb)
  • saved 3% (8 kb)
  • saved 15% (44 kb)
  • saved 7% (20 kb)

These savings are clearly worth having, but they don’t tell the whole story. Let’s use the WebSqueeze logo text as an example:

The original Websqueeze logo, as a JPEG

This image is a 45.2 kb JPEG; Smushing reduces this to 43.7 kb. But since this is a low-colour image, the JPEG format was a poor choice. I saved it as a PNG in Photoshop, choosing a palette of only 64 colours. The PNG version is 18.8 kb—less than half the size of the original! I then ran the image through a brute-force PNGcrush, which reduced it to 16.6 kb. Finally, I ran the 18.8 kb image through, which produced exactly the same result. A summary:

  • JPEG format
    • Original JPEG: 45.2 kb
    • Smushing it: 43.7 kb
  • PNG format
    • Lossy compression to a 64-colour PNG: 18.8 kb
    • Smushing this, or running PNGcrush myself: 16.6 kb

In total, I saved 62%. By far the greatest part of this saving came from reducing the colours; Smushing then shaved off a little more. The two images are visually indistinguishable from each other. Take a look. Can you tell the difference?

The Websqueeze logo, as a Smushed 64-colour PNGThe original Websqueeze logo, as a JPEG

By applying lossy compression to just one image, I achieved greater savings than by Smushing the entire page! Smushing is good, but it can’t hold a candle to lossy compression.

The verdict

If you’re comfortable installing and running these tools yourself, then you may get somewhat better results. In fairness, however, you are not really part of’s intended audience; you’re an alpha-geek! makes lossless image optimisation accessible to the masses. It’s easy, fast, and free. Unless you’re already running the same tools, there’s really no excuse not to start Smushing!

However, Smushing is no substitute for traditional lossy compression. You can get much greater savings by applying lossy JPEG compression or using reduced-colour PNGs. Do these things first, and then Smush the resulting images.

ActiveCollab Designer Review

Testing ActiveCollab – A Designer’s Perspective

ActiveCollab is just the piece of software that I’ve been looking for. I have been interested in this program for a while, but cheap as I am, I didn’t want to pay for it. When I got the opportunity to test it for The Web Squeeze, I immediately said yes! Here’s why:

As a (freelance or single) web designer, half my time is spent communicating with clients. That’s what I like about the job, but I thought there had to be a way to communicate more efficiently.  It would be great it I could skip the extra 10 minutes of chit chat you have to do in a phone conversation, because, whether you like it or not, time is money.

That’s where ActiveCollab comes in. It’s a very powerful application you run on your own web server, and it’s installed in minutes. It allows you to create a “to do” list for yourself, set clear deadlines and keep your client(s) informed in a very professional way.

Getting started

I test-drove the small business version, because, well…I have a small business. See the difference between the “Corporate” and Small biz” versions of ActiveCollab here:

The installation is a breeze. All you have to do is extract the zip file, upload it to your server and run the installation file. After I did that I wanted to click around and learn without the (awesome!) manual, located on the ActiveCollab site, to see how user-friendly it is.  I must say: It’s very intuitive. Buttons are at the right place, the configuration makes sense, and I can see this being a real time-saver.


Like I said in the intro, there’s a difference between the small biz and the corporate version. For me (note, I’m writing “for me”, not “for everyone”) the Small-biz version does what I want.

The only thing I really missed in the small business version, which does exist in the corporate version, is the ticket-system. There are other features that you don’t have in the “small biz” version, but I’ve taken care of those with awesome free applications. For instance, I use Klok (, which runs on Adobe AIR for my time tracking. You can export milestones (deadlines) to iCalendar or Google calendar. I don’t even know what the other options are, but I didn’t miss them.

This version has what a web designer needs: Milestones (deadlines), tasks
(“to do” lists), plus a discussion board.  The board is private with your client and/or co-worker(s) and you can share files, which comes in handy if you want to show drafts to your client.

Personally, I like the fact that it’s not just a project manager, but it’s also a collaboration tool. I outsource some work to a friend developer of mine in the Netherlands (pretty much on the other side of the world from me), and I gave him an account in ActiveCollab. That way, with the time difference and all, he can still communicate with my client and when I get to work the next day, I can see what he discussed with the client.

More details

ActiveCollab is a tool with a natural feel to it. Although there are some things I had to look for, I only needed the manual once. This was for my question “Where do I add a user?” The answer was simple, but hidden. First you make a client profile, and you have to actually be IN the profile to add a user for that client.  That’s pretty much the only “glitch” I could find.

Adding milestones, checklists, discussion threads and files is done in seconds.
The thing I really like is the RSS-feed that’s on pretty much every page. The one on the main page will track all changes made in your projects, or you can choose to subscribe only to the milestones. This way you can use a feed reader to track what’s going on if you’re collaborating with a lot of people, or have a lot of clients breathing down your neck.

There’s also the option to turn features off, so clients can’t see them. Let’s say there’s a project your client doesn’t need right away, but you want to get it done before a certain date for your own piece of mind. You can set the milestones per project visible for only you.

If you’re collaborating with someone on a project you can assign tasks to people. Let’s say you have a designer, PHP developer, and a Flash designer working on one project. You can assign tasks to all of these people. As soon as they’re done with their assignment, they can click “completed”, and the graphic bar will change to the percentage done on the project instantly.


ActiveCollab is a real time-saver, it looks professional, it’s easy to navigate and I’m going to spend $199 to get the Small-biz version. I should have done this a long time ago!

Check out ActiveCollab’s website here.

Designers Rating: 5 out of 5!

Full Reviews