“And Then There Was Salsa”…

Now, unhappy though I might be to pass on a piece of ‘viral marketing’, I can’t help it with this Vimeo video ‘And Then There Was Salsa‘ – it really impresses me. Anything that takes my expectations and then does nifty things with them gets my thumbs up. However, I’m no more likely to buy chips and/or salsa as a result.

Or am I?

Lunchbox of champions

Today I received my brand spanking new Sigg Maxi lunchbox (thanks Alice!), in fetching blue aluminium. It’s a beauty to behold, ticking a set of boxes for both form and function. It’s the perfect size for a couple of sandwiches, some pasta salad, or whatever takes your fancy – with a couple of nifty features:

• Snap locks work with a rubber seal to provide a water- and air-tight seal to keep your lunch in primo condition.
• The lid, up-ended, works as a fine tray off of which lunch eating is a pleasure. It has an overhanging lip to keep one’s cherry tomatoes from escaping, or one’s cous cous from going astray.

Nice, subtle Sigg logo stamped into one corner, too. Classy!

MailChimp: my new favourite interface

I recently started using MailChimp on their free account, and have come to think of it as one of the best interfaces I have ever used for a web application. It’s a clear lesson on why a sense of fun, clean design, stringent usability standards, stylish illustrations and an overall attention to detail are genuinely all of great importance. The entire site/application – which is in fact very complex and multi-layered, once you get started, but everything just works and it’s a pleasure to use. Looking at the horrific, old-fashioned, badly-coded website for The Rocket Science Group, makes me think that some very wise outsiders were brought in on the MailChimp project. Somebody signed off on a lot of money for what could so easily have been written off as front end fripperies – congratulations to whoever that was; it was worth it.

Howies Winter 2009 catalogue

With a simple clothing catalogue, Howies have done a good job of creating a ‘feel’ for themselves. Though much of this is what’s to be expected – product imagery with clear descriptions and price/size information – the ’sales’ pages are interspersed with some awesome photography, lovely illustrations and enough random text to keep the out-and-out commercial nature of the book in check. This is skilfully done, and makes me wonder just how such a wide range of stuff was brought together, without losing focus or the clean and clear underlying structure that’s used. It might be just a catalogue, whose aim is to sell, but I appreciate that whoever signed it off had the foresight not to insist on curbing the ‘oddness’ – resulting in something that made me not only buy clothes, but that made me think more of a company.

Cross-browser testing and Adobe’s BrowserLab

Getting web page designs to render identically (or, more accurately, how we’d want them to render) on different browsers and platforms is one of the long-standing headaches of putting a website together.

Anybody who’s got even close to the edges of web design will have come across one of those situations where things look spot on in a development browser – which in my case is normally Firefox 3 on a Mac – and then go extraordinarily tits-up in another browser – which is normally Internet Explorer 6 on Windows. I realise that it’s more of a problem for Mac developers testing on PC than vice versa; but Mac developers are inherently more exacting and therefore will demand a higher standard of quality. Ahem. Smiley face.

Even with some of the popular arguments against the need for exact cross-browser design matches, such as…

• Progressive enhancement, meaning that better browsers’ users get a better experience;
• Stats, meaning that not that many people (and less every day) are using IE6/some other browsers any more;
• It’s just designers (and/or stakeholders) being petty and picky about everything looking like some perception of the perfect layout;

…I don’t think anybody would argue with the fact that at least a quick test of a page design in a few browsers can very quickly highlight (and therefore let you address) some significant problems that might exist.

That’s why I’m not more surprised that Adobe’s BrowserLab product isn’t more widely banged on about. All it does is let you view (in static image form) a page on the internet in a limited set of browsers (including IE6 thru 8, Firefox and Chrome; but no Konqueror, Opera, Flock etc). This allows you to spot obvious cross-browser mistakes: weird padding/margin stuff, floats gone mad, opacity not working, transparent PNGs acting up, and so on. A very simple task, and one that has been possible in other ways before – most popularly using something like Browsershots which does much the same thing. The main positive difference (even in spite of Browsershots’ wider range of target browsers) is the sheer speed of delivery of BrowserLab images. Browsershots has been known to take up to ten minutes to return a set of results, but BrowserLab has – at most – taken sixty seconds. Combine that with some other features…

• easy reload of images after changes have been made
• the overlay of different browser images on top of eachother to compare changes between each
• get time-intervalled reloads that attempt to show dynamic elements

…and it’s got me ‘on board’.

It’s never going to be as instant and useful as having a full test suite set-up locally, as it’ll never do the following:

• work with local files, to let you repeatedly hit ‘refresh’ after making miniscule changes, without the need to upload files to the internet
• Let you fully view interactive/dynamic/AJAXified page content in different browsers, in real time*

Those things aside, it’s a fantastic resource and I’d say a semi-essential for anybody wanting to put web pages together quickly and without access to a full-on development and testing environment.

*Browsercam can do this by giving access to a remote desktop on one of their machines – it costs money, it can be slow, and like BrowserLab it only works with files on the internet, but a cheap and convenient halfway house towards buying several computers and installing several browsers…

Hard copy proof… on your screen: Pantheon Graphic Novels

I stumbled across this layout style for Pantheon’s Graphic Novels website, and it made me smile. Having worked in print for a long time before moving more internet-wards, I’m all too familiar with getting proofs for checking and signing off, and so I like the cheeky use of things like the colour bars, ‘Okay to print’/'Need new proof’ form and crop marks that have been neatly arranged amongst the site’s content. I’m also happy to see the attention to detail that’s at work, with the ‘paper’ having a folded corner at the bottom right hand side of pages, and the crop marks and repeated colour bars also appearing at the base of the content.

Obviously, this is a pretty simple layout, but it’s a good example of how a simple layout can combine with a nice idea to result in something that looks fresh and original. Poking around in the source code I see too that’s it pretty clean and semantic. The only concession to tableism is in the header (containing breadcrumb, search box and some navigation), in order – I presume – to have the elements matching exactly the background to complete the required effect. This site is also one of the best and most appropriate uses of the Courier font that I’ve seen!

MdN Designers File 2009, Rikako Nagashima and MdN Interactive

This is 250+ page collection of portfolio samples from a huge number of Japanese designers, illustrators and photographers. Beyond the relentless barrage of interesting stuff to be seen by simply flicking through, there are a couple of aspects of the book itself that I really like:

• The spine: A textured, white-coloured ink strip has been printed onto the cover, wrapping around the spine and creating contrast with the grey cover stock. I don’t think that this is anything to do with the binding, as it seems to me that it wouldn’t affect anything if it weren’t there. So; a bold use of refined printing techniques on the smallest percentage of the cover, for no reason other than visual effect. Got to love that.
• The type: The cover type is nice, a scrappy felt-tip rendering of what would normally appear as a refined typeface (something like Belizio perhaps). The letters are also embossed to add to the feel of hand-produced lettering. The type is by Rikako Nagashima, who is herself featured in the book.

MdN stands for Macintosh designers Network, and is the name of a Japanese graphic design magazine and website. Google does a pretty decent job of translating the website copy; it seems to cover a lot of interesting stuff. More info about the book here.

Jaw-dropping typographic linocut

An insane amount of work must have gone into this, Mark Webber’s 1.5m x 1.8m linocut map of Paris, hand-rendered in type. Sometimes people’s dedication to a project is just mindbending in its relentlessness!

Giant Paris linocut, at Creative Review

10 Principles Of Navigation Design

I just came across this really good article about good navigation design, principles behind it and why they matter. This stuff should be week one reading for any aspiring web or interface designer. I think that over the past few years the internet has ’settled down’ from earlier, more experimental days, and a few basic fundamental rules of good practice have been proven – this article sums up a few of them in a succinct and clear fashion. Obviously there are times when rules can and must be broken, but there’s more often no need to reinvent the wheel and it shouldn’t be a problem to accept good practice.

Google’s Tetris logo

Now, I don’t want to come across as a Google fanboy – I already praised a recent bit of clever branding that they carried out – but I just love the Tetris-themed logo they’re running on site today. Apparently it’s 25 years since Tetris first appeared. I’m pleased that a megahugecorporation like Google still bother with these fun fripperies, and aren’t so precious about their branding and logo to not mess with it from time to time. I guess that’s the value of having an incredibly dominant brand – even when it’s pretty much unrecognisable people still connect with it.