At Hutchhouse we believe the site administrator should have the ability to manage all of the content on all of the pages without the risk of breaking the site. This is a difficult balancing act between allowing clients the level of control they desire whilst delivering a site with a framework that can cope with most eventualities.

If you believe your site carries a lot of value at the front end and all you lack is the ability to manage the content via a good reliable backend CMS system – Hutchhouse can reverse engineer any website and provide you with a usable, intuitive system that will control the content on your site. We believe in giving clients the ability to make updates and additions as often as it’s required without compromising design or functionality.

Adding pages, articles, galleries, events and videos are just a few examples of elements you can manage on your website all sitting within the framework of great design that you’ve already had commissioned.

Thank you! The service you have provided us is awesome!

Adam Waller, APT Personal Training (we plugged in a CMS system to Adam’s site to great effect)

If we can help you with your website then feel free to get in touch.

It occurred to us that this has been ever so slightly taken for granted here, as we have been using Javascript in this way for years now, and that we ought to recognise the Javascript revolution that’s gaining momentum every day.

‘Anything is possible’ website user interfaces

On a recent project our client was not only impressed with how we produced a complex user interface without using Flash™, it opened their eyes with regard to what is possible using Javascript. This made us think. ‘Why do we take this stuff for granted?’.

Being in an agency where new technology is embraced daily and gets incorporated into client projects at every opportunity, is a lot like watching your kids grow up. You don’t notice them grow, learn and mature as much as everybody else because you see them every day. But the truth of the matter is that during the last few years HTML, CSS, Javascript and user interface design (in general) has hit puberty, grown a bunch of muscles, and, with the full adoption of HTML5 and CSS3 by most browsers in the next year, will have come of age. The shackles are literally going to be off.

But it’s not farewell to you yet Flash™. You’ve still got your uses… well maybe. We could just about think of one good reason to use Flash™ nowadays. There is still one niche that Flash™ currently occupies well. The space between online and offline – Adobe Air. This uses a mixture of languages including HTML, CSS, Javascript and Flash™ to deliver rich applications which are not reliant on your web browser. One such application that uses this service is the BBC iPlayer download service.

Not content with his lot, James though about striking out on his own and creating his own company. It’s still early days but it’s going really well and James’s business idea seems to be taking off nicely.

This week James was invited onto the Today Show. A popular lifestyle show that seems to be similar to our very own One Show. Anyway, the segment was put together really well and James is shown in a great light.

Visit msnbc.com for breaking news, world news, and news about the economy

Looking at the analytics for his website the figures speak for themselves. For the last 28 days papthequesiton.com has been getting around 50 visitors a day. The day James was on TV this shot up to 1,145 visitors which is a massive increase. It’s now the following day and the visitor numbers are already returning to normal. However it’s clear to see the positive impact that a small appearance on TV can do for you and your business and I’m sure James will be getting a few orders out of the coverage he’s received.

Good on you Jimbo!

For more information on the project go here.

All too often we see websites that perform lots of tasks adequately, but rarely fulfil the objectives of a) the site user and b) the website owner.

Websites, especially business to consumer or business to business websites, need clearly defined objectives, backed up with simple user journeys in order to effectively complete visitor’s goals. It’s all well and good providing huge amounts of detail on what you do, who you are, where you work and why you are great, but without a clear call to action signposting visitors to your key objectives, this content (however painstakingly produced) becomes much less valuable.

What do you want your website to do?

Ask yourself this question constantly as you address the website’s design and structure and when writing the content. Keep the key objective(s) close by and remember them whenever you make a decision about the site. It’s easy to get suckered into feeling that everything is equally important – that you need to shout about all you have to say. Unfortunately from a designer’s perspective this is impossible to do effectively. You need to be strict, ruthless even, and concentrate on the key website objectives. This will help you understand and prioritise content in terms of the website design and content structure. Design techniques like the large ‘hero’ style banners are great on your homepage as they grab the attention of your users. We’ve heard it mentioned that this is simply a trend and that next year we’ll all be doing something else but the concept is deeply rooted in design tradition; that form should follow function. In the case of the homepage ‘hero’ these call-to-actions provide a great example of how well structured hierarchies in design and content can prioritise your content and help your visitors to make easy decisions on what’s important.

Getting what you want from your website

Below we have tried to identify two of the common objectives that work for most business owners:

Driving sales enquiries

So you want the website to keep you or your sales team busy? That’s a clear and concise objective and is especially common on what we label as ‘brochure’ style websites. The user experience of this type of site should be about instilling enough confidence in the user to click on the ‘Get in touch’ or ‘Get a quote’ button.

First of all the website needs to look and feel good. It needs to inspire confidence in the user in the same way an Aston Martin inspires more confidence than a rusty old camper van when getting you from A to B. The user also needs to get a sense that you care about what he or she thinks of you. You have a reputation to maintain and you don’t want to blow it because there was a broken link on your website homepage.

Secondly, they must be able to contact you (via an enquiry form, by telephone, etc) and it should be done in a way that makes them feel like you WANT them to get in touch. How many times have you been on your bank’s website and found yourself searching for a phone number so you can simply call them?

Thirdly your content needs to reinforce your professionalism and succinctly tell the visitor that they are in the right place. Refer to things consistently and in the tone that works for your business and brand. Make sure there are no typos and your grammar is spotless. It doesn’t hurt to go the extra mile and have a professional write your content because it’s that important (and difficult!) to get right.

If you do use a contact form, then be clever about it. Users don’t like to be asked a hundred questions. Forms that are too long are too time consuming to complete and it’s infuriating if the page is lost halfway through filling it out. Leave the detailed questions to your sales staff and focus on getting the visitor’s basic details right in an easy and friendly way. Ideally you’ll want to inject the enquiry into your CRM as a lead and notify your sales team to get back to them promptly. If you are getting too many poor quality enquiries then you can use the form to qualify the leads by asking pertinent questions and effectively putting off the poor quality leads.

In summary, put as few barriers as you possibly can between you and the visitor by having a clear design and content hierarchy that funnels users towards making that enquiry. A direct user journey with a single click to the enquiry or contact page is a great tool to drive sales enquiries and should be a given for this type of site.

Make more online sales

The typical objective of E-Commerce websites is of course to sell more products. So feature your products in the best light possible.

It always amazes us to see E-Commerce website’s which don’t clearly display products on their homepage, or feature new products and best-sellers, instead featuring other content (such as news) in pride of place.

John Stiles, MD, Hutchhouse

Important as your non-product content is (and news for example is very very important), it does not directly help your visitors find what they are looking for and, ultimately, make a purchase. This is where you can really help your visitors by identifying the main product categories, displaying good product imagery and encouraging visitor loyalty by displaying strong guarantees. Merchandising your shop online, as you would one on the high street, is very important. If your products don’t look exciting or if they don’t grab your visitor’s interest then the likelihood is that the desire just won’t be there to make the purchase.

Making the purchasing process as easy as possible will also promote sales. Don’t ask too much of your visitor, allow quick and easy ordering. It’s fine to give your visitors extra options like leaving feedback or displaying related products, but it’s not the key goal and is non-essential. The idea is to clear away any hurdles and allow your visitors to complete your objective(s)

As the buyer’s journey often starts with a search engine, make sure that your product pages are well optimised so they can be easily found. Follow the same journey through yourself, making sure you’re happy with the process and that it feels right. Make sure it’s easy for visitors to get all the information they need to make a decision on the product detail page and they’ll ultimately buy from that page.

The role of website analytics in meeting your website objective(s)

To coin an often poorly used phrase; launching a website is an ‘evolution not a revolution’. Now this isn’t something we are trying to hide behind, we are simply stating the fact that your website should be changing and growing continuously. You should be looking to keep your website in peak physical fitness in terms of its content, design and technology. There are a number of tools at your disposal to help you make the right decisions about the direction you should be taking. If your budget permits extensive usability testing and focus group research then it’s invaluable stuff and you should take advantage of it where you can, but for the majority of website owners the best aid for guiding your strategy will be with website analytics.

Website analytics such as Google Analytics provide a great insight into how your visitors use your website. You can use the analytics to make decisions about tone of voice, layout, content priorities and also the exact language used to label important calls to action. By measuring your objective conversion rate and by making simple changes (like changing ‘click here’ to something more relevant like ‘get a free quote’) you can radically improve your objective conversion rate.

There’s much more we could talk about here, but needless to say, analytics should be regularly referred to as a quantitative and qualitative guide to improving your website’s conversion rates.

“There are currently 14 million mobile internet users in the UK. This figure is expected to rise to 17 million by 2012 and 19 million by 2013.”

Source: Google

“It’s estimated that by 2015 more people will be browsing the web via a mobile device than a desktop PC”

Source: Morgan Stanley

The decision to build a mobile presence brings with it many obstacles and queries:

• How to develop a mobile site for Android, iPhone, iPad, Blackberry and Symbian users?
• What is the cost for developing a cross-platform mobile site?
• How many different handheld and tablet display sizes are there?
• Will I have to update my website and mobile site separately?
• Do I build a dedicated iPhone/iPad app?

We believe the best solution to overcome most obstacles is to use responsive web design and media queries.

Responsive Web Design

This is a technique that enables designers and developers to produce sites that aren’t constrained by device, monitor or tablet - creative design meets creative development.

For example, why not produce a site that responds to the medium in which it’s being viewed?  Flexible layouts that responds to the users interaction with their device, whatever that maybe.

Media Queries

This allows developers to apply specific CSS styles depending on the size of the screen the site is being viewed on.  This ultimately gives lots of freedom to how elements on the page are positioned depending on the space available, resulting in the site rarely ‘breaking’.

Separate mobile websites

Of course, if your mobile users demand a completely different experience to the desktop users, then a separate mobile website is almost certainly going to be required This is can be easily achieved with our content management system of choice, and provides a great platform to deliver tailored or (often) priority content to your mobile users.

Having a mobile web presence that works on all modern devices and can cope with a multitude of display sizes is guaranteed to keep you ahead of the game in this ever changing world of web and mobile internet.

So what does this mean?

Ultimately, this means that your website is adaptive.  It means that managing your site doesn’t become any more complicated or time consuming than it already is.  You will still be using the same CMS that you know and love (WordPress of course).

But wait, I want an iPhone app!

Of course, if your target demographic is leaning towards heavy usage, an iPhone app could well be advantageous for your company.  A responsive website will work for you and is there to sit alongside your iPhone app, not replace it.

But, let’s not get carried away just yet. We’re still very much aware of the existence of pre-historic browsers such as IE6 and 7. Unfortunately, we can’t ignore them just yet but thankfully there are tools out there that will make these browsers play nicely.

A good starting point with any web design project is to scope out the existing audience for that particular site. Google Analytics does a great job of supplying us with the browsers that users to that particular site are operating on. Keeping an eye on the latest browser stats are also a must.

For instance, if you find that no users are accessing your site with IE6 then there’s no need for a PNG fix. Likewise, if nobody is accessing your site with IE7 then lets not hold back using more pseudo elements in our CSS. Good research into the habits of your users will ultimately mean less of a workload (and less costs) when it comes to development time.

With the emergence of degradable CSS3 techniques it’s now possible to get creative with code. One thing that has always been difficult in the design process is illustrating interactions in Photoshop or Illustrator. Yes we can create animated Gifs but when showing interactions on a full mock up of a homepage too much quality is lost and ultimately we’re not doing our designs justice.

We’ve considered leaving the interactions until the development phase, giving our clients that extra something they weren’t expecting. Hopefully they’re already over-the-moon with the outcome of the design process, and once they start interacting with their site they might find themselves left without words!

Role purpose:
• To maintain and service our servers; run scripts, configure and advise
• To assist/lead internal/external web development projects.
• Set team budgets, timescales and milestones

Skills
• Thorough understanding of PHP, MySQL, Javascript, HTML, CSS, XML
• Experience with performance optimisation and Apache configuration
• Experience with Web 2.0. technologies, and integration of social networking
• Knowledgeable with web related emerging technology and development
• Passionate about creating reliable and efficient websites and systems

About you
You can fit into a small team and thrive with no problem. Your personality means that you don’t give up easily and you’re not intimidated answering the phone or talking to clients. You strive to always maintain your cool and your ambition for ‘all things web’ is infectious.

Some other things we might like about you…
• Your 5+ years working with LAMP systems
• Your strong portfolio and proven track record
• The experience you gained working in a large agency

About Hutchhouse
We are a small interactive agency based in Central London and in Oxfordshire. Formed in 2004 we have enjoyed (and endured!) many web launches to date. Our clients range from small companies to high street brands which, in-turn, enable us to cover a range of disciplines, styles and techniques. We operate a small office in Oxfordshire where we are establishing a strong development team. The creative team work in a casual shared studio in Piccadilly and strive to maintain a healthy work/play balance.

Like most industries there are varying levels of competency and skill and – like much of the IT industry – web design and especially web development is scattered with jargon. There are definite pitfalls and signals which you should take heed of and certain traits that should be expected and applauded.

Good web design agency traits

• The project management team can answer your questions clearly
• Jargon and technical detail are kept to minimum and non-technical explanations
• The agency are upfront and transparent about their costs (both project costs and any ongoing costs)
• The web design process is clearly explained
• Clear milestones are provided with regard to the overall web design and development process
• The agency can quickly produce examples of work which is relevant to your project
• Any third party technology or input (if any) to the project is made clear
• The ongoing website support process is explained
• Hosting requirements are considered and options are discussed
• Clear points of contact are established

Poor web design agency behaviour to look out for

• Points made by the agency are littered with technical details and jargon and don’t make sense to you
• There are elements of the approach which lock you into using the web design agency (such as hosting agreements)
• Questions are not answered sufficiently or are skirted over
• The agency’s approach and processes are not explained
• The agency mask costs in technical jargon and do not explain the reasoning for them sufficiently (this can be especially true with regards to Search Engine Optimisation – there another blog post in the making on that one)
• You get the sense that the agency don’t understand your requirements. Each project is different and a ‘boiler plate’ (one size fits all) approach by the agency will make them money but won’t produce a site inline with your expectations.

What you should ask a web design agency

• Ask for examples of previous work including demonstrations if required
• Ballpark figures (or hunches) are easy enough to give with small amounts of information. These can easily rule out (or in) whether an agency will fit your budget and save time on both accounts
• Find out what the company recommends with regard to content management platforms (if applicable) and search engine marketing (social media, web copywriting, web page optimisation)
• Ask about the level of web accessibility the agency adhere to by default
• Discover the processes the agency will follow
• How much contact does the agency need from you?
• Find out about the key project milestones and what they mean in relation to any proposed timescales

Summary

Most of us will end up working with people we like, but that won’t guarantee a successful project. You should never be afraid to ask a question, even if your questions seem trivial. Any agency worth their salt will take their time to explain their proposal and make sure you fully understand their processes and approach,  without using over complicated technical jargon. Just like any other industry, you are employing experts, so you need to trust their judgement, but beforehand, they need to earn your trust.

Typekit

Typekit is a very simple method to implement alternative type as it is provided via a web service. Typekit has a library of fonts which you can license by purchasing an annual subscription to the service (there is a free plan but this is restricted for use on one website with Typekit badge visible on the site). There’s a wide range of typefaces available and the Typekit website allows you to completely configure fonts, font weights and styles using an intuitive interface. However it’s not all plain sailing…

The fonts available on the Typekit Library rarely match with fonts you might have locally for use in Photoshop or Illustrator. Quite often you have to settle for a close match, and this is not good practice with regards to brand guidelines etc. Often takes a fair amount of explaining to the client which is never ideal.

Another issue is that although the fonts render smoothly in modern browsers on Mac OSX, rendering on Windows falls way short with most fonts options. The fonts end up rendering badly and anti-aliased. Although Typekit does provide a good comparison tool to view the fonts using the various operating systems and browsers, this doesn’t help when you’ve designed with a font that Typekit renders badly for the majority of your site users.

The major benefit of Typekit is the freedom to use the font sets available without worrying about licensing. The major drawbacks are the lack of availability of certain ‘standard’ fonts and the render failures in Windows which really let it down. If it wasn’t for these issues it would almost certainly be the perfect choice for most web designers and developers.

Cufon

The beauty of Cufon is it’s limitations, or lack thereof, when it comes to which fonts it can render. The system works by rendering any specified text configured on the Cufon site. When the page loads the text is transformed using ‘Canvas’, a cross-browser element that looks and acts exactly as you specify in the website’s stylesheet. So far it sounds great doesn’t it.

Unfortunately – like most systems – there is a major drawback. It’s not a technical issue, it’s greyer than that and raises serious concerns over the legitimacy of using Cufon. Although Cufon can render any font using the Cufon configuration tool, site owners need to be assured that they have the right to use the font for this purpose (font embedding without Adobe Flash). Certain fonts require an extended license for this purpose, however it’s important to identify whether you can legitimately use the font or whether you would have to seek an additional license first.

@font-face

@font-face is a system which actually permits the render of any font from your webserver. Simply add the font files and reference them using ‘@font-face’ syntax and the font will render as expected. There are issues with regard to cross browser compliance, however all the major browsers appear to be addressing this with Safari, Firefox and Chrome having already adopted this method natively. There are other issues around licensing, but these appear to have become less prevalent with the birth of freely available @font-face kits. Such kits can be found at Font Squirrel.

Although not perfect, the @font-face method is a pretty solid solution. Fonts render perfectly, the nature of it’s delivery means there is far more choice regards font selection AND rendering speeds are faster than the Javascript or Flash™ based alternatives.

Conclusion

All the libraries mentioned here have their merits and all have their issues. There is, however, one clear winner. As the browser software companies adopt it, the @font-face method is likely to become the norm. That’s why we use it now and will continue until we find a reason not to.

So no great change of location then, we’re still in Soho and approximately 30 yards from our old pad. We’re really happy to be here. We’ve got windows, a lift AND a view! The new address is:

Hutchhouse @ Media Junction
2 Archer Street
Soho
London
W1D 7AZ