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.
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!
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.
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.
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.
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…
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).
I love this, cutesy music as performed by two crocheted characters with very specific personalities. The animation is subtle but really accomplished, and it matches the music superbly!
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!
