Posts Tagged ‘User interface design (UI)’

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.

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.

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.

Why should you develop a website and a mobile site?

Written by: Mitchell Renton

September 14, 2011

Why should you develop a website and a mobile site? featured image

With the emergence of mobile web in recent years, having a mobile site for your business or charity is becoming more important than ever. Here’s a couple of reasons why…

“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

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.

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 »