MrColor – A PHP colour manipulation library

Written by: sholloway

May 30, 2013

MrColor – A PHP colour manipulation library featured image

Over the last month I’ve been working a colour manipulation library for PHP called MrColor. Please forgive the American spelling, it is the language of the web after all.

The library is built around the idea of having an easy way to work with colour data. Once a new Color object is created you can populate it with colour values, edit those values, use those values to generate new data, and retrieve the colour in the format you require. You can download it or fork it from GitHub here:

Responsive web design webinar notes

Written by: jstiles

August 28, 2012

Responsive web design webinar notes featured image

Thanks to all those that attended the responsive web design webinar on Tuesday the 28th of August 2012. It was great to share our understanding and experience of responsive design, thanks for your questions and feedback. We’ll be incorporating some of them in an updated seminar.

Where have the Giraffes gone?

Written by: jstiles

November 26, 2010

Where have the Giraffes gone? featured image

With a tear in our eye the new Hutchhouse site replaced the well loved ‘Giraffes’ which have really established us amongst the css blogging community. Ok… maybe there weren’t that many tears, we love the new site!

The Giraffes concept was a step in the evolution of our brand and has done us proud over the past two years – however it’s time for a change, or rather it’s time to grow up a little.

We’d like to say a very big thank you to all of the websites that listed us in their design galleries over the time that the Giraffes were around. If you’ve been sent to this site from one of these galleries then I hope you like the new site just as much.

Managing your CMS – The right way

Written by: Mitchell Renton

November 11, 2010

Managing your CMS – The right way featured image

Giving our clients the ability to manage the content on their website is something we take very seriously and we always go above and beyond to allow them to control as much content as possible. This leads to very happy users, expansive dynamic sites and less involvement from ourselves once the client takes the reigns.


As they say… “With great power comes great responsibility” and when careful thought isn’t given to the creation of content on a site very bad things can happen.


Images seem to be one of the biggest stumbling blocks for clients, contributing to some pretty horrific results when it comes to size, ratio, placement, positioning and cropping. Each of these elements needs careful consideration.

The majority of CMS systems will give you positioning options such as ‘align left’ or ‘align right’, these options add classes to the image container that, when applied, will add styling.  Here’s two examples, the first an image with ‘align left’ applied and the second, ‘none’.

Managing your CMS the right way - Correct Image Placement

This image has a stroke, separating the image from the content. There are margins to the right and bottom to give the image breathing space and the paragraph wraps nicely around the image.

Managing your CMS the the right way - Image alignment

This image has no alignment and therefore no styling. This results in a block element that spans the width of the container forcing the copy below the image with no breathing room.

Scaling of images can also be a problem.  All too often we’ve seen images taken from Google that have small dimensions, they are then scaled up and the results can be horrendous. We recommend using stock image sites for professional full size images that can be scaled down without losing any quality. Stock Xchng is a free stock imagery site but has a limited catalogue, for a more complete solution we recommend iStock.

As a side note on this issue, the composition and quality of images is important too. You might have the most fantastic design and awesome CMS but neither will magically improve a poorly taken or badly composed image and make it look great on your site.  Poor quality images simply cheapen the investment you’ve made in a new websites, its technology and its design. All for the sake of the price of a stock image.


Pasting-in copy from Word Processing software can be a real problem when creating content. Most commonly, when copy is pasted into a WYSIWYG editor via a Word Processor (Microsoft Word for example) the WYSIWYG will honor the styling that was attributed to it in the original Word Processing software. This is one that will really agitate the designers out there.

For example, if your sites stylesheet dictates that the primary body font should be Arial and you paste in copy from Word that is more than likely the native “Times New Roman” then the WYSIWYG in certain circumstances may honour that and add inline styles to override the CSS styles.  Line-height, font-size and font-colour will all be honoured in the WYSIWYG if pasting directly from word processing software.

So how do we prevent this?  There are a few methods that ensure that no legacy styles are carried into the WYSIWYG. Firstly, in WordPress for example, there is a small icon (shown below) that is specifically used for pasting in text from a Word document. This opens a modal window that allows you to paste in content from Word without bringing any pre-formatted styles with it.  This method is certainly an option but is not always foolproof.

Use this button to paste from word stripping the text of any styling.

The best way to prevent this problem is to either write your content directly in to the WYSIWYG.  Obviously this can only be achieved if you’re online so the best solution for when you’re offline is to ensure your Word Processor is in a “Plain Text” mode.  This means that no formatting will be applied and you can paste the content into your WYSIWYG without a care in the world.

A well designed site will always have a well thought out stylesheet, that’s why we encourage our clients not to use some of the WYSIWYG styling functions such as font size and font colour, allowing the stylesheet to dictate the look and feel of the site.

Structured content for web please!

Often you’ll load a web page and… wallop!, you’re presented with a full page of paragraph text and no indication what it’s about other than a rather vague title…

Remember that your visitor’s time is precious so make finding the info they require easy. Their time is also fickle and it’s guaranteed that if it’s easier to find somewhere else then that’s where they’ll go. Your website isn’t a book in their hand, they don’t have time to invest in reading everything you have to say – so be helpful and provide content indicators by using sub headings. Try to divide the content into small chunks and make sure you provide simple headings for each section. A page with dozens of paragraphs of text with no sub headings is off-putting to say the least – a page neatly arranged with sub headings appropriately placed means the user can scan and read what’s relevant to the User.

External Links

Clients will often take every opportunity to link to other websites on the understanding this is what gives them a google search ranking. This is actually counter-intuitive to your goals (presuming your goals are keep your users on your site) and can have a detrimental effect on your returning visitors. We fully understand the SEO benefits of link building and we are also aware that there are often situations when linking to an external site is warranted. However, that said, it should be a tactical approach.

We always recommend wording links to external sites carefully and if the subject can be talked about on your site as a pre-amble to linking to an external site then this is the way to do it. A page on your site which summarises and puts into context the subject matter is of much more use to your visitors than simply sending them to another site.

This is not something we justify just to keep visitors on your website. Much of the time your visitors don’t expect to be taken to a new site in the first place – so let’s not confuse them.


When it comes to managing your site’s content, the worst results show themselves when the process is rushed and not thoroughly planned. Starting with good relevant content is a must, ensuring that the formatting is correct at all times by using the preview function in your CMS. By all means embellish the site with imagery, but think about the use of the image, how it sits with the content and whether it adds value. Above all remember that your site is for your visitors, so make it easy for them to navigate around, find what they want to read, and then they will actually read it.

To Hatch – Hatched

Written by: jstiles

November 5, 2010

To Hatch – Hatched featured image

Hutchhouse help launch a new charity website which facilitates good practice within fertility. The website also provides a mass of info on the processes and pitfalls.

Founded by Camille Strachan, To Hatch provides support to it’s members via a website (designed and developed here at Hutchhouse). Membership is free and users get access to an online community of advice and resources, including a full database of fertility clinics which can be compared with their local counterparts as well as being rated by members.

There are a few extra special benefits of becoming a To Hatch member – not only the great advice and information on offer, but also access to the To Hatch debate. On becoming a member, you get access to the TH_Community Twitter account which (combined with the live To hatch Twitter feed right on the To Hatch site) provides the ability to chat and debate about the current issues and provide support for other members.

A unique area of the site will also offer a lottery to its members with fantastic prizes that will have everybody excited and taking part.

The charity provides a fantastic service and we hope will be a huge help to everyone out there that needs support and advice on fertility treatments.

Our hats off to Camille on her dedication to the project and overwhelming positivity in the face of sleepless nights whilst pulling all the various parts of the charity together.

Visit the website: to-hatch.co.uk

Running a business on cloud computing

Written by: jstiles

August 3, 2010

Running a business on cloud computing featured image

For years we’ve dabbled with the best methods of file sharing, calendar management and email setups. It’s been a long road but we’ve finally reached our ‘Mecca’.

So, after years of dabbling with POP3 iMap, exchange, Samba shares, Webdav calendars, hardware backups and endless disappointment, have we found the perfect business setup? Well we think so and we’d like to share it with other smaller business owners that want all the bells and whistles of what was formerly the domain of large business – the company intranet, file sharing and remote working… it’s now oh so easy.

With the advent of cloud computing comes a new era of accessibility – and here are the tools to do this (or the ones that worked for us at least):

Google Apps

By far the most efficient and cost effective (the Standard Edition is free) route to getting things kicked off is Business Edition of Google Apps. This suite of tools from Google provides just about everything you need in terms of business communication. The suite includes:

  • 7GB of email – which is easily used with any email application, although we love the web based interface and ‘offline’ feature which uses Google Gears to cache your emails locally.
  • Public, Private and Shared Calendars – This is so powerful. Create as many calendars as you like, and share them with whoever you like. The system has a great interface and also supports the event invite process used by most of us to confirm meetings.
  • Shared documents – not file sharing you as you might know it but an online collaborative tool – fully compatible with the Office suite. Collaborate on documents in realtime and have them for easy access online anytime. We can’t remember the last time we needed to open Excel.
  • Contacts – Each User can store their contacts using Google Contacts. This easily syncs with smartphones and other address books so you never have to worry about losing anything.

We wouldn’t be exaggerating if we said that every small business should start off using this – it’s an essential tool, it’s absolutely free and takes an hour to set up on your domain.

File sharing with Jungle Disk

After initially using the usual suspects (Samba and VPN) to share files we’ve now moved everything to the cloud (Rackspace and Amazon S3). This means that we have a repository of live files as well as several backups securely stored and available whenever we need them. Moreover we automatically sync with this repository on every machine we have – be it a laptop, desktop, Mac, Windows or Linux based machine. We use Jungle Disk to do this which is a background program which essentially watches the cloud repository (online storage) which you’ve set up and linked to a directory on your local machine. If any of us make a change on one then we see the new files on the other machines as long as it’s using the same repository in the same cloud.

There’s an iPhone application which allows us to access files if we need to and a web based interface should we require it. It also allows the setup of individual disks in the cloud for users so they can backup and sync their data or even entire machine backups.

So far we’ve had few issues and it just works.


What would we do without it? It runs our phone system so we use it for external callers, it keeps us in touch via chat all day and it gives us the ability to conference call with clients and each other.

As previously mentioned we use Skype for our phone system. This is a fairly new thing but it works exceptionally well. We have decent internet connections so why not?

The way this works is that calls come into our central Skype account on a Skype-In number which then forwards the call to each of the Hutchhouse offices (using their Skype accounts thus also making them mobile). It also forwards to a landline just in case. If the call is picked up then great – if not then it goes back to our central Skype answer machine. This means we can pick up calls wherever we are. It’s been a real time saver.

Customer Relationship Management, WorkflowMax

A CRM keeps everyone who needs to be in the loop… in the loop. It’s a real time saving application and – because we would only consider a web based solution – it’s amazingly flexible.

Because we wanted to use a CRM which combined our sales processes (including quotations and estimates with our production process) we decided on using WorkflowMax. This works for us because it not only keeps us ontop of leads and jobs but it also does timesheeting and billing. It also fully integrates with our online accounts package Xero. This means we have an end-to-end business system underpinning our processes.  Notwithstanding there are several amazing CRM systems out there like Salesforce.com, SugarCRM, Capsule CRM and Highrise from 37Signals so go and try them out.

Online accounting, Xero

After years of being tied to our desktop based accounting package we have finally moved to Xero. As we currently run two offices we require multiple accounts in multiple locations. We couldn’t continue using the desktop software which had served us so well for years because (although very good) it just wasn’t flexible enough. We have to admit, the move has been refreshingly simple.

We now have a single touch point for all of our contacts, sales, quotes, invoices and reports. It’s revolutionised the way we work and frees up so much time that are able to expand as a result. All for a few pounds a month.

That’s it for now – we just felt compelled to write this as it feels good to have this stuff at your fingertips… and it’ll just keep on getting better.

Allworkedup HQ

Written by: jstiles

December 17, 2008

Allworkedup HQ featured image

Here at Hutchhouse we’re always trying to streamline our workflow to both maximize efficiency and keep the wasted design time to a minimum. Over the years we found a natural course for presenting our designs online which has culminated in the creation of AllWorkedUp: An online management tool for designers.

At Hutchhouse we predominantly design websites so it’s only natural that – during the design process – we should want to show these designs online. Like most agencies our clients are dotted around the country so it has proved really useful to upload our creative work to a protected area and have clients access them. It guaranties everyone is looking at the same design wherever they might be located.

When we had some spare time we added some further functionality to the system enabling members of a project to leave comments. This works great for both designer and clients as notes can be added when a creative is uploaded, and the client can then comment against them. Once a comment is submitted all members of the project are notified. This really helps small teams like ours react to client responses without having to always go through the Project Manager saving countless emails flying back-and-forth.

This week we put a Beta version live offering 200 free accounts on a first-come basis. We’re interested in hearing what people think of the system, whether it has some legs or whether it should be thrown out with bath water! Any feedback regarding tweaks, added functionality or obvious floors would be gratefully received!

Please, have an account on us!


Written by: bhutchins

December 11, 2008

befriendageek.com featured image

Give the gift of friendship this Christmas” is the message behind this latest viral collaboration from the Hutchhouse and White October team.

Dave Fletcher – inspired by the ‘Help the Aged: 1 is the loneliest number’ campaign – saw a need for some ‘geek love’ this Christmas and managed to get this great little parody to our screens. Follow the links tobefriendageek.com to find out more. Also, please take time to visit the genuine charities that really need your support at this time of year.

Been checking the Google search results to see what people are saying about the video. A great response thus far. We even got coverage in the Metro today! Links to articles below:

Metro – The Free London Paper
Reddit Geek
Geeks are Sexy
Escapist Magazine

Shop by colour

Written by: bhutchins

November 27, 2008

Shop by colour featured image

Along with our good friends at White October and Nonsense we have given ourselves 24 hours to conceive, design, build and promote a new web based start-up company. It’s currently 03:16am and the office is mostly quiet apart from the odd murmor from the development team and the tip tap of keys.

The project situation is pretty healthy. We have a name. Dr.Hue. We have a business idea (shopping by colour) and we have a brand. We even have a holding page Drhue.com. The main site is being templated, whilst the templates are being finished off and there’s a whole host of image manipulation trickery going on in development. In the background, accross the room, the marketing boys set about promoting the site and pulling together a campaign.

And of course… you can currently see it all unfold at 24hour-startup.com

1 2


We are looking for a top class Front End Developer!

We are looking for a strong Front End Developer to join our team!

MrColor – A PHP colour manipulation library featured image

Be better than your competition…

  • Increase online conversion rates
  • Get your brand on mobile devices
  • Take control of your web content
  • Create a winning digital strategy
Get in touch »