Websites with left and right arrow keyboard navigation

Posted in on 5 March 2010 | Comments [2]

Over the last week or so I have come across several websites that allow users to navigate using the left and right arrow keys. I think this is an interesting approach and I really like this method of navigating a website. Perhaps it’s just me but I like using keyboard shortcuts (because they seem to allow me to do things faster) …. so it’s interesting to see websites using the left and right keys in this way. Here are the website examples I have spotted that use this method.

There is an adding keyboard navigation tutorial at jQuery for Designers which explains how a similar effect is achieved with an image slider. The jQuery Tools website has Scrollable which enables a content slider to be navigated with left-right keys.

There may be disadvantages to this method but I’m keen to find out more about it so if you know of other websites that use this approach, let me know.

Should I use web templates and themes?

Posted in on 23 February 2010 | Comments [1]

One thing that I have been pondering recently is whether to use web templates or (WordPress) themes more regularly in web design projects. Yes, you might view this as a cop-out or some indication of lack of creativity. On the other hand, if you want to jump-start a website design and get straight into the front-end build CSS and HTML, perhaps a theme/template is a good starting point?

Whilst I was thinking on this, imagine my surprise (perhaps surprise is too strong a word but you get the idea) when Sabrina Dent, a designer whose work I have often admired, wrote this blog post called Confessions of a Template Whore where she outlines some of the advantages of using templates. One of the main reasons cited is for clients who don’t have a large budget. Hey, I get that all the time!

In my experience, a client is rarely satisfied with a template off-the-shelf and customisation will always be required. However, when a template or theme ticks most of the boxes, customisation becomes easier than starting from scratch. In addition, you can always learn from the way that another designer does things. Just because you always float a specific element does not mean that is the only way of doing it!

Now, I’m not saying you just choose any old template here. The client’s objectives, budget, and type of business will all influence your choice of theme. You might decide to spend quite some time at the start of the website design process choosing one or more themes or templates. Although a template can be a quick start for your web design process, don’t rush the template selection process. I like to look at a variety of themes and assess which might be best.

So, what’s your take on this? Are templates bad for web design or are they a smart way of getting the basic structure and design established quickly, with client customisation to follow?

Related: ThemeForest has some high quality templates and themes.

How to work with an old logo

Posted in on 17 February 2010 | Comments [2]

Here’s the story: Not so long ago, I was asked to redesign a client’s website that, to be frank, was long past its sell-by date. Great! An exciting new project and I was looking forward to it! Unfortunately, there was some ‘baggage’ with the job, namely the client’s logo. Without going into detail, it needed a redesign as well but this was not within the project scope. So, how should I work with the logo? Here are some options that I explored:

  • Use high quality images in combination with the logo. Professional stock photography, as long as it is not too clichéd, can enhance an older logo. A montage effect, although not very original, can confer an attractive surrounding or background for the logo.
  • Modify part of the logo to minimise its effect. Perhaps there is an element of the logo that can be removed to improve the overall look without detracting from the company’s identity?
  • Make the logo a smaller part of the overall design.
  • Add an attractive background colour or image to the element that contains the logo.

In an ideal world, none of these options would need to be considered because a logo redesign would be part of the website work… but small company web design isn’t always like that.

What have you done when faced with this situation? There may be better options than mine. Let me know if you have other suggestions.

Website case studies are a great way to learn

Posted in on 27 January 2010 | Comments

I like to browse a lot of websites with the aim of learning from how others do things. I figure that this is part of my job as a freelance web designer/developer. However, sometimes it is difficult to know what went on during the design process of any website you look at. That’s why I particularly like blog posts, articles, and other case studies, where a website design is explained. Normally, this will deconstruct the website in question and I find these really useful. Here are a few case study ‘design stories’ that I have been reading recently:

  • Simon Collison recently redesigned his personal website and in this blog post called Redesigning the Undesigned he explains the design process, including the eventual idea to base the design on a miscellany/journal approach, why he chose Times New Roman (brave choice?) as the main font, and the use of black and white animal illustrations. I must say that I love the design of this website and it’s great to see it explained.
  • CoffeePowered is Paul Stanton’s personal website and he describes the redesign process in this post. I like the description of the font choices, the colour palette, the use of Modernizr, and the description of the sketching and design approach that was used.
  • In the new second edition of CSS Mastery (» Amazon USA · Amazon UK) by Andy Budd, there are two case studies by Cameron Moll and Simon Collison (him again) that are well worth reading. For example, these studies (Roma and Climb The Mountains, linked from the CSS Mastery website) include explanations of new CSS methods, the grid structure, style sheet organisation, and the typographic choices.
  • Jeremy Keith explains the design and build of Workshops for the Web including why he ditched the initial design idea and the use of HTML5 and microformats.

All these chaps are talented designers and more than likely they will also do things differently to you. It makes sense to try and learn from them….

Attribute selectors for image styles

Posted in on 3 December 2009 | Comments

I have been reading several articles recently, and reminding myself, about attribute selectors. In case you’re wondering, attribute selectors in your style sheet allow you to style an element based on an attribute and value. This means that you can set-up style rules without the need to add class names to your (X)HTML. Cool! For example, you could style all external links by using a selector that targets the href attribute and matches any href value beginning with “http”.

Read more ...


Stop looking at my bottom