“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?

Video For Everybody! (at last…?)

I have a strange inkling that Kroc Camen’s project ‘Video For Everybody!’ will become important. I’m not sure how, or who’s going to instigate this elevation to importance, but I think it’ll happen. The project addresses a requirement that has sorely needed work for some time, and in an elegant fashion that’s just begging for core inclusion in all manner of content management systems as well as hand-crafted websites. It also bridges the gap between HTML5 (the future – when it happens) and HTML4.01/XHTML1.1 (ie, what’s in common use right now) whilst simultaneously addressing the increasing demands of clients/bosses who must have video without knowing what that might involve, or how it’ll be handled by all kinds of browsers and mobile devices.

Briefly, the project’s output is a code snippet that will display video on site. Sounds simple? Try doing that and you’ll very quickly come up against all kinds of problems, issues and hurdles. This snippet handles all of those, pretty much – by bubbling down through a set of possibilities for playing video files based on your browser:

• HTML5 ‘video’ elements, or if that’s not supported…
• Quicktime, or if that’s not supported…
• Flash, or if that’s not supported…
• A static image and links to download video files.

It manages all of this without JavaScript and in a relatively compact manner. This means that as long as you’ve got video available in a few different file formats (which shouldn’t be difficult), you can be confident that it’ll play out on your website whether it’s viewed in a fancy modern HTML5-supporting browser, on an iPhone, or even (my word) on IE6. I think that’s pretty cool.

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…

Firefox error page

Now, this I like. An unexpected benefit of major computer issues recently – basically, my computer shutting down at the drop of a hat with no prior warning – is that I’ve inadvertantly come across this error page upon restarting Firefox after a crash. They’ve gone a step beyond simply restoring the windows and tabs that were previously open, and put together a message to display if that can’t actually be done. That’d be good in itself, but I love that ‘Well, this is embarrassing’ line: it helps me out when grappling with computer problems to come across a bit of software that doesn’t take itself too seriously, and doesn’t blame me for it not working as well as it could (cf. anything to do with Microsoft).

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!

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.

Real life Google Maps marker icon

Check this out: a real-life Google Maps marker icon used to help people find the location of the current Google I/O Developer Conference. How cool!

iPhone Peggle loading screen

(Excuse the awful quality photograph. Who knew that digital cameras can’t focus on iPhone screens?)

Now, I’m not talking about the Peggle game itself here – although I should mention that it is great and their recently-released iPhone version captures everything that made the original version so much fun. What I’m focussing on is the loading screen that’s displayed as the game starts up. As the software is doing its business, a selection of randomly-selected ‘actions’ are displayed. Things like:

• ‘Hoping this works…’
• ‘Generating flow…’
• ‘Maximizing fun factors…’
• ‘Coming up with witty sayings…’

…for example. Might not seem like a big deal, but I admire greatly the fact that Peggle’s developers took the time to implement these messages. They do a number of things:

• Sum up the light-hearted nature of the game
• Gently poke fun at the game
• Remind the user of some of the phrases and events that are part of the game
• Reinforce the ethos/tone of the game’s makers
• Passes the time!

In short, it gets the user in the mindset to enjoy the game, and distracts from what would otherwise be a boring ten-second wait. This kind of thinking can also be applied to design, and especially interactive design. Recognise the fact that users might get inevitably bored, and come up with a way to prevent this. Reflect the core purposes of your design at every level. It’ll only ever result in users feeling more warmth towards your product.

YooouuuTuuube

This is awesome. YooouuuTuuube: feed it the URL of an existing YouTube video and it’ll show you a crazy Flashed-up sequence of every single frame from the video, in some kind of brain-melting modern take on the zoetrope. Remember the days when the internet was more of a playground, with less commerce and more experiment? This reminds me of those days. I’m especially pleased that they’ve included the means to show a randomly-selected video. Hours of fun trying to work out what the video actually is based on all of its component frames.

YooouuuTuuube