It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill. Since then, the canny chaps have been working hard to implement the design and @RellyAB has been working her strange magic on their copy. Yesterday the new CannyBill site went live.
CannyBill’s previous home page
It was a pleasure to work with a team of smart people who really get it. They encouraged me to push the design as far as I needed and went with me in using HTML5 and CSS3 extensively. As client‘s go, they are also some of the bravest in allowing their design process to be open to the public.
With the site live, I thought it time to recap all of the entries that made up that open design process.
While open to the public redesign projects have lately been popularised by Mark Boulton Design’s work for Drupal and by Happy Cog‘s work for Mozilla, it’s rare to find a commercial company involved in an open project.
I have to confess that when I’m designing, I often don’t take too much notice of a company’s peers or competitors.
Liked most of my projects these days, I’m designing the next iteration of CannyBill‘s front of house site in a browser rather than making static visuals of page layouts. I know I’m in danger of sounding like a broken record, but I genuinely do find the process to be faster and better at scoping ideas and demonstrating them to clients. So I thought I’d share the start of this process and the files that I use.
After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.
Relly Annett-Baker guests on And All That Malarkey.
A fascinating look at Relly Annett-Baker‘s process of writing copy for CannyBill and finding its voice.
When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.
With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.
A complete set of browser screenshots on Flickr.
Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.
Relly Annett-Baker on first draft copy for CannyBill.
The redesigned CannyBill home page
Head over to CannyBill to see the final result for yourself and of course, your comments are still welcome.
24th Mar 2010A big thanks to you Andy and Relly. I’m over the moon with the new site and can’t thank or recommend you both enough.
24th Mar 2010The visage and concept improved very much. Thank you for sharing.
24th Mar 2010Nice work - as always. And thanks for sharing the process - always educational.
25th Mar 2010Inspiring as ever and great to see the site out in the wild. One minor issue though: the contact form submits without any validation although I would guess that’s outside the scope of your involvement.
25th Mar 2010Congrats! Looks amazing as always. Now it’s time to view source but to only view and maybe learn a little something new!
Looks great Andy. It’s got your style written all over it. I am however quite surprised at the differences between Safari and Internet Explorer. OK I understand the whole ‘not the same in every browser’ but surely it should be the ‘best it can be in each browser’. I mean just a couple of 1 pixel width images to use as gradients for backgrounds surely couldn’t harm anything. I understand there would be less flexibility but it wouldn’t be that bad.
(This comment was left on For A Beautiful Web)
29th Mar 2010An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.