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.

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.

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

Here are 5 techniques which we love to use:

Content Carousels

Presenting information in a linear way presents problems. It takes up website real estate (page space to me and you) and can often make content look dreary and text heavy. Using a javascript carousel is a great way to combat this. You can present multiple slides of content which rotate automatically and can be controlled from the user interface. A good example of this is our own homepage hero banner. This is a great device for drawing attention to new content or new goals, it solves a number of layout issues and looks great!

Parallax Backgrounds

Background images and illustrations positioned behind your site are great if they are used properly. They provide depth, creativity and a visual richness that a pattern or colour will never achieve. But why not take them one step further. Using a technique known as Parallax you can make the background interact with user controls. Backgrounds can move on top of one another or seem to follow you down the page when the user scrolls or simply moves his/her mouse. It’s an excellent way to provide a subtle but sophisticated effect.

Web Font Rendering

Using a variety of different methods  we can now use many more fonts (in a web safe way) than have been previously available, meaning that sites can be ‘on-brand’, more original and less ‘standard’ in appearance. There are very few web safe fonts (Arial, Verdana, Georgia, Times New Roman, Courier to name most of them) which has limited the typography used on websites considerably. Before web font rendering services like Typekit became available if you wanted web safe fonts then you used these. Now we can utilise thousands of fonts and get creative with Typography in a similar manner to that of print designers.

Text Shadows

There are a multitude of new styles available with CSS3, however one of the best and useful is ‘text-shadow’. This allows you to specify a drop shadow on system text. Most browsers support it (notably Internet Explorer does not yet support it – even with IE8) and it provides the ability to add extra depth and creativity to site typography. No more flat fonts with boring contrast…

CSS Image Manipulation

Much of the time in order to make you website look fantastic we rely on well thought out and manipulated imagery. however by using techniques with transparent PNGs and new CSS3 values such as gradients we can now perform a lot of the visual ‘rules’ to imagery within the site templates. A typical example would be on a hero image (an attention seeking leaderboard type banner at the top of the page). You could spend your time in photoshop applying whatever effects you like to that image – but more than likely you won’t, so we apply the rules such as any gradients or floating, transparent text areas using images and CSS. It means less work for the content editor and more consistency from the designer’s perspective.

If you like what we are saying here and feel we could help with your web project then please do get in touch..

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.

But….

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

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’.

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.

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.

Copy

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.

Summary

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.

The design and development phase of projects can be hard to communicate to clients using the traditional routes. Whilst emails, meetings and telephone conversations are important it’s also necessary to provide access to the project at every stage of it’s development. This is how we overcome that particular problem and how we keep our clients in touch with progress at every step.

Web design communication

We have taken this so seriously that we’ve developed our own web application to handle it. Allworkedup is a design project management tool which neatly displays flat web design iterations (as they would appear in the browser) as well as providing a forum for comment and feedback. Once our designers have finished a web design iteration they upload it and notify the project stakeholders who are then invited to comment on the design and open up the discussion with others.

It really works for us and bypasses the completely unworkable situation where feedback is via email and iterations are presented over email. The main thing is that whenever is convenient our clients can log in and leave their suggestions and feedback in one place.

Keeping our clients in touch with (web) developments

The web development phase of any project can leave clients feeling like nothing’s happening with periods of ‘quiet time’, but only if we’re not managing it properly. We choose to give the client access to the project progression at every stage of the process so as a task is ticked off – the client is alerted of it.

We use a fantastic web development management tool called Pivotal Tracker which logs all the tasks as User Stories and shows which ones are queued for immediate development, which ones have been started, finished and delivered and which ones are coming up later on. This way our clients are always in-touch with progress and have a real handle on where we are and when we might be finished.

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.

Skype

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.