As one of Google’s randomly selected usablity testers, I get to see a lot of upcoming developments before they’re released.

Google’s latest feature is a preview tooltip of each website. Looks like their screengrab tool doesn’t render HTML canvas properly, as shown by the missing text on Siteroom. It also highlights where Google gets its snippet text from:

‘Brenda’s Easy-to-swallow cookbook’ has a deep personal connection – it was written by my late mother, Brenda Brady, who suffered from mouth cancer for over four years. An active fundraiser, she collated the recipes from fellow sufferers, and celebrity chefs including Rick Stein and Nigella Lawson. Also included are tips for and from mouth cancer sufferers – many of whom have trouble eating (hence the title and purpose of the book).

So far the book has sold over 500 copies, about which we’re very pleased. Although most cookbooks have gone to recipients in the UK, they’ve also been delivered to addresses in the US, Canada, Australia and Scandinavia!

Copies can be ordered from the Mouth Cancer Foundation website

I know my mum would have been over the moon about this nomination, and it’s a great legacy to her memory.

The awards ceremony is on Tuesday 9 November – wish us luck!

You can read the story online here

Visit Em’s site

Siteroom was originally conceived as a way to offer high quality websites at reasonable prices, for small businesses and startups. In the last 18 months there has been a revolution in the way in which WordPress (a popular web platform) is used to create websites. Developers can create powerful sites in a fraction of the time, using web templates. There are thousands available, but the quality varies widely. We’ve cherry-picked the best, and entered into agreements with the template authors, so we can show you their designs in Siteroom. Unlike other website developers, we decided to make the process transparent – and our clients can pick their designs, and decide if they want any custom features and add-ons. And unlike other website template sites – you don’ty have to spend days and weeks trying to put your site together – we build it for you. But that’s just the start …

When we got our heads together we realised that SMEs often need more than just websites to grow and promote themselves online. Some of our clients would be ready to go live with their new website, then a delay would occur because they didn’t have the text (web copy) ready. Others needed branding or marketing advice. So, we decided to also offer the key supporting services that small businesses needed to make their websites work, and, more importantly their business grow, online. Take that a step further and Siteroom is a one-stop-shop for small businesses; marketing, branding, copywriting, design, websites, SEO and free business advice, all ‘under one roof’. A key difference with Siteroom is that we try to remove the hassles – and let our clients get on with their core business, not tasks such as website development or copywriting!

We have lots of exciting plans, new additions and ideas in the pipeline. We’ve also got happy customers already. But enough blather from me; take a look at Siteroom, version 1 and let us know what you think – we value your feedback!

Visit Siteroom

p.s. sign up for our free advice for small business, including tips and insights from leading business authors

Step 1 was to create a list of URLs that needed screengrabs. I wrote an small PHP that printed a list of URLs (one per line) which I then saved to a text file:

http://www.siteroom.co.uk/

http://www.consil.co.uk/

The first tool I came across was WebShot. The GUI interface is simple, but there’s far more flexibility using the command line. This is the command I used to run a batch of screenshots listed in the text file I created earlier

webshotcmd.exe /in "C:screenshots.txt"

The tool worked well and uses Internet Explorer to render the web pages (so make sure you have the latest version!). You can also add parameters to your batch list too. I wanted the width of the image to be 1280px wide, rather than defaulting to the width of the web page, and also to use custom file names.

/url "http://www.siteroom.co.uk/" /bwidth "1280" /out "C:screenshotssiteroom.jpg"
/url "http://www.consil.co.uk/" /bwidth "1280" /out "C:screenshotsconsil.jpg"

Unfortunately the free version only renders screengrabs in black and white.

I settled on Grab them all – a Firefox addon. Although it doesn’t have advanced features like watermarking, it does boast enough options for my needs. You’ve also got the benefit of Firefox’s web page rendering engine, which means screengrabbing the page with all the good-looking CSS3 features.

Options can be tweaked by going:

Tools > Add-ons > Extensions > Grab them all ‘Options’ button

I was able to change the filename from Base64 to the URL and set the width of the window. To run the program go to:

Tools >> Grab them all

Pass it the simple list of URLs (one URL per line) and let it run its magic!

Andy Clarke gave a great talk at DIBI

Great selection of speakers including (in reverse chronological order, for no good reason!) Andy Clarke who talked about ‘Hard boiled Web Design’: designing for the best browsers (i.e. webkit) and providing “appropriate” alternatives for lesser browsers. Some interesting points on how to avoid making your website look the same in every browser, and generally inspiring designers to do their best work and not be held back by Internet Explorer and others. I’m really looking forward to seeing Andy’s presentation again when the videos are released.

Dan Rubin gave a great talk about his usability / user interface experiences and was kind enough to expand on this for me later whilst we enjoyed the free bar at the after party. (I nearly made him miss his pizza, but thankfully more turned up. Phew!). Dan had plenty of real world examples of what works in usability testing, and how to quickly iterate during testing (hint: PNGs!). As with other speakers, I found the case studies fascinating.

Dan Rubin at DIBI 2010 (by Maykel Loomans)

Simon Collinson focused on the theoretical aspects of design, including semiotics and the basics of visual language – I hadn’t covered semiotics since university, and to be honest I’d never made the conscious connection re web design, so that was particularly interesting. He joked it was a bit “70s Open University”, which it did veer into occasionally, but with far better designed slides, and no elbow pads Interesting stuff though.

Great insight into user interface design, iPhone app development and the general Apple approach from Sarah Parmenter (btw every single design speaker mentioned Apple at some point, at least in passing – always positively. A few iPads floating about too …). Tim Van Damme is an uncompromising designer, and his presentation was themed around 2001: a space oddysey (he did the rather splendid design for Gowalla). Tim felt that within a few years we’d all have moved away from Photoshop and Fireworks (the implication being that these were suffering from bloat), and that some small software company was on the verge of revolutionising the creation of web graphics. He was no-nonsense about web designers needing to keep their skills honed.

Good presentation too from Adii Rockstar (Mr Woothemes) on design and how it should pervade everything, can be the difference between two otherwise well-engineered products/services. He was making the point that design is more than aesthetics. Dan Rubin later made a similar point – compared web design to product design; you’re not just making it look pretty, it has to work well, solve a problem and hopefully be a great experience for the user. I’m going to remember that analogy next time I’m explaining web design to a client!

Jon McLoone's Keynote talk at the DIBI 2010 Conference

Wolfram Alpha was given an overview by Jon McLoone, and it’s potential for interpreting the world’s ever-growing mountain of data is nothing short of extraordinary. Learned that there are a number of embeddable apps for using WA, and that it can compute some complex maths, and give you the nutritional content of any recipe you make (amongst many, many other things!). Interestingly, Wolfram Alpha is entirely self-funded (100+ employees) so is unconstrained by the demands of VCs.

Lots of talk of user experience and whether older browsers should be supported. Had to smile when Andy Clarke showed us what he puts forward for IE6. Think print style sheet. I’m sure he’s inspired everyone who was there into not being held back by older browsers.

Great after party, lots of banter, chatted with most of the Woothemes guys, and everyone was very down to earth and friendly.

All round great conference, free food and beer always go down well too (or is that too well? …)! Well done to Gavin Elliot and Codeworks for putting on a first-class event.

Strangest moment: seeing 4 or 5 people in the back row sniffing their laptops (and one iPad)!

Conclusion: A+++ will go again.

Update: great write-up on minute44, and somehow I’m in the middle of the main photo!

Update 2: Lots of DIBI 2010 photos here

… already bought my ticket for DIBI 2011

Delta Airline's existing boarding pass

This inspired Tyler Thompson to have go at redesigning the Delta Airline boarding pass. Tyler’s designs look great, a across between movie poster lettering and art deco, although they don’t take into account some of the realities of boarding pass printing. Tyler invited others to create their own designs and he lists some of these in the updates at the bottom of the page. A couple of notable examples are shown below.

Tyler's redesign

Timoni Grone addressed the redesign in a more practical way, ie. acknowledging the limitations of the current printing techniques and typefaces available in thermal printing machines in airports.

Timoni's redesign

But this is my favourite, as it is so conversational and simple:

Graphicology’s boarding pass redesign

So, since they’re getting so much free design advice, it will be interesting to see if any airlines actually want to improve their customers’ experience …

The framework, originally written by Jason under the name ‘fluid1′, has been used on our client’s website, IEMA.net, since 2005. The aim of the project was to make it accessible to all the common browsers, whilst keeping the HTML markup as semantic as possible.

Currently the script only supports a maximum of 3 columns, but there is no reason why the algorithm can’t be extended to support any number of columns.

Ionic has its own microsite under development where you’ll be able to grab the latest releases and find out more about the framework. The link is:
www.consil.co.uk/ionic.