Hutchhouse

We are looking for a top class Front End Developer!

Written by: jstiles

March 17, 2014

We are looking for a top class Front End Developer! featured image

If you’re a talented, enthusiastic Front End Developer looking to join an ambitious and successful digital agency then we want to hear from you.

What are we looking for? Well, we want someone who loves Front End Web Development, who understands the importance of user experience and who can own Front End for Hutchhouse. We are looking for a top-class front end coder that has a real passion for HTML, CSS (Compass, Sass or Less), Javascript frameworks like backbone.js and uses TDD techniques.

Ideally you have:

  • A deep understanding of HTML5, CSS3, Javascript
  • A thorough knowledge of Javascript frameworks such as Backbone.js, Knockout.js, Knockback.js
  • Am understanding of Javascript unit testing and web browser automation tools such as Selenium
  • Worked closely with Back End teams

About Hutchhouse:
We are an expanding interactive agency based in south Oxfordshire. Formed in 2003 by two leading industry figures, we have launched countless successful websites that delight our clients and give pride to our team. Our clients range from small/medium sized businesses to high street brands. Projects are amazingly varied and exciting, with new challenges keeping our approach fresh and innovative. We’re growing and evolving and we want people with the right skills and a great attitude to join us on the journey.

Sounds like it might be for you?
Full details of this role is available to download 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.

Are you catering for the needs of your mobile customers?

Written by: Annette Taylor

June 27, 2012

Are you losing potential from your website because some visitors are turned away by a user experience that does not suit the mobile web? This is a question that nearly every website owner should be asking themselves since a study conducted by Google and Ipsos found that as many as 79% of top advertisers do not have mobile optimised landing pages.  By not being one of those people your site will be in the top 21% amongst mobile users and the rewards are huge as we will discuss.

Who needs Flash? Javascript is King!

Written by: jstiles

December 7, 2011

Who needs Flash? Javascript is King! featured image

Once upon a time in a galaxy far far away, Flash™ used to rule the roost. If you wanted to achieve anything ‘sexy’ in terms of animation or user interaction then you were more or less forced down the Flash™ route. I’m happy to say that things moved on a while ago with improvements in how browser’s handle Javascript and the emergence of libraries such as jQuery. Flash has quietly slipped away.

Creative Design meets Creative Development

Written by: Mitchell Renton

August 18, 2011

Creative Design meets Creative Development featured image

The introduction of HTML5 and CSS3 means less design restrictions, more interaction and a better user experience . The bridge between design and development is diminishing and this can only be a good thing for the web design community.

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

Tips on choosing the best web design agency

Written by: jstiles

July 8, 2011

Tips on choosing the best web design agency featured image

When you first set out employing an agency to design and build your website, there are many factors which come into play. We have tried to come up with a few pointers on choosing a web design agency and some warning signs to look out for.

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.

Hutchhouse (London) move to a new office

Written by: jstiles

April 19, 2011

Hutchhouse (London) move to a new office featured image

Just a quick post to let you all know that the London team have moved to new offices. We took a considerable hike to our new location… right across the road! Seriously, we were able to walk our stuff across the street. Very handy.

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

5 web design techniques to wow your users

Written by: jstiles

April 7, 2011

5 web design techniques to wow your users featured image

It’s easy to forget some of the impressive, interactive ways in which to wow your users when you are designing a website. Designing in Photoshop or Fireworks (or whatever you design in) does not always give you the scope to easily illustrate how the site actually works, how it feels to use and how to introduce creative elements of interactive design. That’s why we always try to identify ways in which to display and present content and functionality outside of the ‘standard’ toolset of any website designer.

Here are 5 techniques which we love to use:
Content Carousels

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

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

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

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

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

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.

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

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.

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.

1 2

Feature

We are looking for a top class Front End Developer!

Talented?
Ambitious?
Experienced?
We are looking for a strong Front End Developer to join our team!

We are looking for a top class Front End Developer! 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 »