My latest Squarespace website project was a site makeover for nu funk record label Boogie Boutique. Having already created and managed their website with the Squarespace platform, they wanted me to give the site a fresh new look with a bit more polish and design flair than their existing site had. My job was to bring to light the great content (photos, audio tracks) that they already had, and to create a framework which they could easily work with moving forward. They also wanted to integrate Facebook like buttons, embedded audio and video players, and generally smarten things up with a bit of subtle animation/movement. Before & after screenshots are below…

After: new homepage – the fruits of our labour
(click to check out the live version with subtle animation – hover over the boxes on their homepage)

Before: their old homepage

The only real struggle was getting Squarespace to play nicely with some of the more advanced additions such as the fancy Jquery sliders. We had to do some workarounds, but the overall result still looks good. I am really looking forward to the release of Squarespace Version 6 – which apparently is coming very soon – as I hope that the new version will have addressed some of the current system’s limitations and make it even easier to create professional-looking, easy-to-use websites in future.

If you’re like the Boogie Boutique guys – finding it hard to make Squarespace look pretty, or stuck with a boring cookie-cutter template – drop me a line and I’d be happy to work with you to help improve your site’s look and/or user-friendliness.

My lovely and rather clever client Helen from Where There’s Smoke contracted me to help her showcase the work that they do in a fun, engaging way on their website. Rather than just telling in words what they do, how they do it, why and for whom, we worked up a tabbed slideshow which uses toys and other objects to not only illustrate these concepts, but also reflect what Where There’s Smoke is about: thinking creatively and coming at problems from a different angle.

My job was not only to design and build the website, but also to help figure out how to structure the site and to create all of the slides – as well as feeding back whenever certain bits of text content might be tweaked or improved in order to make things really simple for people to understand. This is my favourite kind of project: something I can get involved with at many different levels, calling upon my photography and artworking skills, as well as my web brains. It’s nice to get to flex all those muscles in one go

I used a handy jQuery slideshow rather than Flash, so it’s smartphone friendly and can be easily updated in future. jQuery is so cool, it’s my new favourite thing. I love how such a small, lightweight little bit of code can produce pretty animation. It makes both my tech geek and my design geek happy.

The site is built on Squarespace once again, and you can check it out here.

If you need to replace your Flash website with something more mobile-friendly and easier to update, or if you like the look of Squarespace, why not drop me a line.

Squarespace is a great CMS that is really easy to use, but sometimes it takes the hand of a design pro to make it look just right. Recently I was contacted through my Squarespace microsite by a client who had been using Squarespace for a while, but needed some help in making the site look more professional.

The client is a professional golfer from Canada, so he needed something that reflected a more polished image, but didn’t cost the earth – every sponsor/fundraising dollar counts when you’re a young pro. Squarespace is perfect for this, as I can turn out a polished design very quickly and easily, keeping the costs down. He also needed to be able to update his blog while on tour, without having to log in and think too much about the technology. Once again, Squarespace already has an ‘email-to-blog’ function built in, so all we needed to do was turn it on, and he was able to create blog posts just by sending an email to a special email address. Squarespace automatically turns those emails into posts. Easy as pie, and it means he can keep his focus on the golf rather than having to fiddle with logins and whatnot.

The cool thing about the project was that the content was mostly already there, it just needed to be restructured, finessed and brought into a more user-friendly navigation. I also helped create more search-engine-friendly page titles and descriptions, so things look a lot better on Google now. And because the client was already familiar with the Squarespace system, it didn’t take much training, and we were able to handle the entire project by email smoothly, across 3000 miles.

Here’s the end result, after my work:

and here’s what the site looked like before:

We’re both really pleased with the transformation.Why not pop over to Will Mitchell Golf yourself and have a look?

If you’re in a similar situation – finding it hard to make Squarespace look pretty, or stuck with a boring cookie-cutter template – drop me a line and I’d be happy to help improve your site’s look and/or user-friendliness.

P.S. We also took the opportunity of working together to professionalise the way his email newsletters were being sent. He had been using PDFs attached to an Outlook email, but now he has a stylish email newsletter template which matches his site branding. He can now track email opens, clicks, and easily add new subscribers. Sweet.

Recently I was contacted by Sarah Louise Dix, a rather chic couture upholsterer and designer of stunning bespoke furniture. Like many small businesses/sole traders, Sarah had a website which had been created by a friend, and she got in touch because her friend was no longer able to update the site. Although she initially wanted me to take over the updating, after a chat over hot chocolate, it became clear that the best approach in the long run was for Sarah to move to a system where she could control the site herself, without having to pay someone to do the updates for her. With the increasing popularity of iPhones and iPads, it also made sense to move away from Flash, which her site used for its image galleries, as Apple still seems dead-against supporting Flash on these platforms. It’s no good creating amazing furniture if people can’t see it.

While there are many low-cost tools out there that could have done the job, Sarah wanted to keep most of her existing site’s design, and these tools would not have been able to replicate certain features such as the style of the image galleries she had for her products. And as she makes bespoke high-end products, she needed the site to keep its polished and professional feel, which is not easy to achieve with something like Google Sites or ClickPic. And I like to ensure that even the little things are covered when it comes to design, such as the little favicon which appears in the browser next to the web address… to me, details like this are what set apart professional sites from ‘off the shelf’ sites. And it’s all about detail when it comes to Sarah’s target market.

Luckily, the style she had on the site closely matched what Squarespace could do, with a little tweaking. So I created a custom Squarespace template, migrated her existing site content into the new system, and took the opportunity to also freshen up a few things and add some functionality like a News section. We also added a private area for Press, which meant she could direct media contacts to her own site rather than sending them emails and large files via DropSend.

A couple of hours of training, and Sarah was all set to take control of her site in future. I’m sure I’ll still pop over to the site from time to time, if only to drool over her amazing creations.

Now that the internet as we know it has been around a while, you’d think that people would have stopped making truly horrible, un-usable, unreadable and downright ridiculous websites. You’d THINK that, but you’d be wrong. The aptly named Webpages That Suck has pulled together their top 25 worst websites of 2010, which is a great place to look for some holiday season laughs. My favourite has to be number one on the list: Yale School of Art (pictured above).

Having been to art school myself, I totally understand that they are doing a post-modern interpretation of a website, parodying those early 90s websites with the same tongue in cheek that Duchamp, Warhol or Koons had when making their art. I get it, OK? But the difference between a website and a piece of art is that a website such as this has to perform a functional duty: to disseminate information to the viewer in an accessible way. Art doesn’t have to perform this task. Art can therefore be as sublime or ridiculous as the artist wants it to be, without necessarily infringing on its raison d’etre in any way. Sure, art can disseminate information, but usually this is not essential factual information that the viewer has come to the art piece looking for; generally, the message of art is that of conveying the artist’s viewpoint or evoking emotions on something.

Websites are different. Now, I am not saying that all websites have to conform to the norms of usability and accessiblity. But websites that act as the one and only online interface for any business, organisation or individual should. There are laws about this stuff for a reason; defying these on informational websites doesn’t make you clever or creative in the eyes of your audience: it simply makes you annoying and stupid. Can you read – or even FIND – the school’s address on the page shown in this image on the right? Click it to view a larger image…

Don’t get me wrong: I *love* online art. I have contributed to sites such as SITO’s HyGrid (one of the earliest online art collaboarations) and I think The Johnny Cash project is a brilliant combo of art and wiki culture. And there are plenty of great sites which push the boundary between art and design. But the boundary between these two areas is really quite important when it comes to websites such as the Yale one. I would have no problem whatsoever if the Yale folks decided to make an online art piece. And I’d be fine with them creating a website as unreadable as the one they have, so long as they made it easy for people to opt out of that design and view the site in an alternate version.

My problem with the Yale site is that this illegible beast is the only place you can find the information, and they have made getting it pretty damn difficult and frustrating. I don’t care how cool or PoMo it looks, to me, this is bad design. The goal of design should be to enhance the use of an object, not get in the way of it. If you bought a can opener designed by a product designer, no matter how beautiful it was, if it didn’t open cans you’d be chucking it in the bin. If not, you could hang it on your wall and call it art. Art isn’t meant to be useful; design is. Anyone who has ever clicked ‘skip intro‘ or ‘view HTML version‘ buttons on a Flash website knows this.

The funny thing is that the Yale site used to be even worse: it used to have a flashing animated background (check it out here – warning: may cause seizures!). I am guessing some poor unsuspecting epileptic made the mistake of visiting their site, and the resulting lawsuit* forced them to change it

* I don’t really think this, but it sounded more intriguing than what probably actually did happen.

Useful Arts

Recently Dave Wieneke, a digital strategist from Boston who has a long-running and very popular business blog called Useful Arts, contacted me looking for some help on improving the look and functionality of his blog. I had originally started working with Dave about 18 months ago, when he got in touch asking for some technical maintenance help. His blog had been running really slow, and he had also lost some data on a previous upgrade, so he wanted someone who knew their way around WordPress to give him a hand. After giving his blog a good spring clean, upgrade and backup, the site was running smoothly and much quicker (you can read Dave’s blog post about this – including the great results – here).

Therefore, with everything being ship-shape from a technical perspective, it seemed a good time to reflect on the design and features of the site, especially as Dave had gradually begun to focus more on the strategic side of digital marketing – rather than the legal aspects – in his writing. The existing design and messaging were a few years old, so he wanted to bring things up to date across the board: in terms of branding & messaging, in terms of look & feel, and in terms of the features & functions that the site offered. Dave had a really good idea of what he wanted, so he created his own brief and we started the dialogue through Skype and email. This was really helpful to me, as clients often come with a ‘clean slate’ and no clear idea of what they need the site to do or say. But this was one time when the design questionnaire I usually send to clients was not really required.

As far as the look of the site, Dave wanted to bring the blog in line visually with his new speaking website DaveWieneke.com, while still imparting its own identity: the sites should be related, but more as ‘cousins’ rather than ‘twins’. Functionally, the site needed to maintain the existing Twitter feed, but should also incorporate/offer:

• Better sign-up options for RSS & email: make these more visible
• More ‘personality’: give the site a human touch, show the identity of the owner
• Social sharing: the ability for people to bookmark, email or otherwise share links to his articles
• Exposing deep content: the site has thousands of great articles, but they were hidden once they fell off the homepage
• Showcasing the main themes: make it easier to see the topics of the site to encourage further browsing

I used a combination of design layout, coding and plugins to tackle each of the requirements above, as follows:

• RSS & Email sign up buttons appear at the top of each page, with plenty of space around to make them stand out. I also included the WP Greet plugin, which displays a welcome message to new site visitors who arrive from Google or other search clickthroughs, encouraging them to sign up to receive updates.
• “About” content appears in the sidebar with a photo of Dave, as well as in its own page in the main page navigation. Each author on the blog also has a biog page, which you can view at any time by clicking on the author’s name. The use of handwriting fonts also bring a ‘human touch’ to the design.
• I used the number one bookmark plugin, Sexy Bookmarks, to add stylish social sharing buttons on each post page. The Twitter feed has also been brought to the forefront, and additional social links are in the large footer area at the bottom of each page.
• The site has a prominent “Featured” box at the top of the homepage, and a “You may also like…” box at the end of each article which shows related posts.
• We’ve used a strapline under the site logo to encapsulate the main theme of the blog, as well as a new ‘Topics’ navigation menu that Dave can fill with whichever article categories he wishes. He can also re-order and rename topics easily without affecting the underlying WordPress structure, meaning it’s possible for him to reuse existing categories – as well as create new ones as the blog grows or evolves over time.

The overall design uses elements from DaveWieneke.com, such as colours, fonts and other concepts – such as large colour blocks – but I think it maintains its own identity and works well as a standalone.

Visit the Useful Arts site >

I’m back in the UK after my long trip back to the States, and while I was away, my latest Squarespace site went live: IT recruitment and consulting service provider Populo. This time I had the pleasure of working with Katrina Dixon, aka The Marketing Lady, who is working with Populo on their marketing. It was great to have a partner on the project, and I think the results are a polished site that promotes and explains Populo’s offering in a really appealing and engaging way. I hope I have the opportunity to work with other marketeers this way in future.

This project was particularly interesting for me because the client wanted to use Squarespace in a somewhat unconventional way: the blogging functionality has been adapted to act as a job listing tool. While it may not provide all the bells and whistles of a fully-featured job engine, it certainly does what it needs to, and demonstrates that with a little creative thinking, web platforms such as Squarespace or WordPress can be adapted to work for almost any type of business or website.

Blogging functionality can be used to house any information that needs to be presented chronologically and/or categorised, whether it’s news, events, job postings, recipes or properties for sale – yet the word ‘blog’ has very specific connotations to most non-web-techies. I often wonder if there needs to be a rebrand of products such as Squarespace and WordPress, who are known primarily as ‘blogging’ platforms, because it’s sometimes difficult to get past the associations with this word when recommending these products to clients. Maybe in future there will be some clever term that sums up the capabilities of blog tools without the baggage of that word.