This was a complicated project because we had to enable customers to select from hundreds of different lens variations for each product. Each product page had hundreds of variable outcomes to add to the basket. Since we had to include all of these options on the product page I designed the add to basket function to move as the user scrolled the page — we nicknamed this “the elevator”!

The concept behind this design was a transformation from a cold winter feel in image 1 to warm and cosy feeling inside the hotel in image 2. The words over the images (and inspiration for the design) are loosely based on the famous romantic duet, “Baby, It’s Cold Outside”, popularized by Nat King Cole and Nina Simone.

This landing page was designed as a place to view 30 hotel breaks on one page, as part of 3 landing pages for the Christmas period. The brief was to portray the feeling of the break on each of the three pages.

This design was featured on the internationally known CSSmania.com, a show case of the world’s best CSS based web design.

View entry on cssmania.com

Email marketing is a great way to subtly and fairly unobtrusively remind web users of coming deadlines, holidays and important dates. I believe emails shouldn’t just sell but should also be very useful to the end user. In this case, it’s just a quick, helpful reminder for anyone who hasn’t yet purchased Christmas presents for everyone on their lists, that they still have time to purchase a gift voucher online.

By using data analysis and email marketing software to see who showed an interest in a product but didn’t purchase, we can ‘remarket’ to those customers, reaffirming previously communicated messages, while leaving out the details they’ve already digested – so as to be helpful but not annoying. In this case we had already sent an email detailing our variety of gift vouchers and this follow-up email was sent to subscribers who had clicked but not purchased. Remarketing can also be a highly effective method of marketing with Google Adwords.

This was the first design in which I combined the use of a grid with ems and a ‘vertical rhythm’ (AKA a baseline grid). It means that whatever content you add to the HTML, the baseline of the content should always line up (in all columns). When you couple this with the horizontal grid I’ve used here, what you get is content that is easy to follow and digest without needing to use borders to show regions.

It’s a little more advanced still because this design is responsive, which means that if you load the page in a small device, such as a small laptop or mobile phone, you won’t need to scroll horizontally — the design will detect the user’s screen size and alter the CSS accordingly — in other words the web page responds to the user’s device. This is also a fairly advanced CSS/HTML technique, that is probably only being used by the top 10% of the world’s web designers (as at August 2011).

I’ve written the HTML in the most logical order and purely used CSS to arrange the content in to the layout. This means the content is in the perfect order for visually impaired web users and for search engines. It also means that it’s easier to make the web page responsive and future amendments are far easier to make, meaning the web page is very flexible.

The website uses a lot of JavaScript to improve the functionality. This JavaScript was implemented by my colleague by my instruction. I’m aware of most JavaScript uses but have always had a developer colleague to help implement the more advanced features. I always make sure that advanced features gracefully degrade so that all content is accessible to all users.

The website is optimised for search engines. I use the image alt tags to describe images using the exact language of searches. By researching keywords using Google’s keyword tool I describe images using the most popular long-tail keywords in many variations. This helps for pay per click and SEO. The images are optimised and the code is clean making the web page fairly fast, which helps with PPC and SEO.

This landing page has been featured in the prestigious web design gallery, cssmania.com: