Archive for jstiles

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.

Free Responsive Web Design Webinar

Written by: jstiles

July 9, 2012

Free Responsive Web Design Webinar featured image

Free Webinar: Responsive Web Design

Are you losing potential from your website because some visitors are turned away by a user experience that does not suit their mobile or tablet device? This is a question that every website owner should be asking themselves.

A study conducted by Google and Ipsos found that as many as 79% of top advertisers do not have mobile optimised landing pages. This means that these websites are almost certainly not converting their goals as effectively on handheld devices as on desktop computers. Responsive web design offers a very efficient way of tackling this problem quickly and effectively.

Join our free webinar to learn about responsive web design. Hutchhouse’s Managing Director John Stiles and the team will explore the features and benefits of this ‘device agnostic’ approach to web design and describe the key processes involved.

Web Developer wanted for Wantage, Oxfordshire

Written by: jstiles

March 1, 2012

Web Developer wanted for Wantage, Oxfordshire featured image

Opportunity: Web Developer
Location: Wantage, Oxfordshire
Type: Full-time

You’re a talented and enthusiastic developer looking to join an ambitious and successful digital agency. You love solving creative, complex challenges with high quality, reliable development solutions. We are looking for a top-class coder who knows LAMP like the back of their hand. If you have the minerals to take a brief, question it, shape it and suggest ideas that can help the team deliver what the client expects then you’ll want to work with us.

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.

Writing hierarchical web content with clear objectives

Written by: jstiles

October 10, 2011

Writing hierarchical web content with clear objectives featured image

A website’s user interface ultimately needs to fulfil a purpose. Often it can have a single goal such as creating an enquiry or can often need to perform a selection of useful functions like searching, booking and purchasing. However big or small your requirement might be, well structured user interface design and a considered website content strategy will always come into play.

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.

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.

Web font rendering techniques

Written by: jstiles

June 6, 2011

Web font rendering techniques featured image

Having been limited to using the ‘web safe’ font set (Arial, Verdana, Courier, Georgia and Times New Roman) since the dawn of time, it’s been refreshing to see the emergence of several font rendering techniques over the past few years. Here’s a summary of the three most popular solutions.

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.

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

Previous page

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!

Responsive web design webinar notes 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 »