The Portfolio of Chris Boyle

Responsive Custom Grid Based Design Featuring 26 Hotels

admin — Fri, 26 Aug 2011 08:29:59 +0000

I’ve been using grids in Photoshop for years and I’ve been using ems in CSS for years. But this is the first design in which I’ve properly combined using a grid with ems and a ‘vertical rhythm’ (AKA a baseline grid). This is quite an advanced CSS technique, which is probably only used by the top 10% of web designers in the world. 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 users 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 amendmends 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 implimented by my colleague by my instruction. I’m aware of most Javascript uses but have always had a devloper colleague to help impliment the more advanced features. I always make sure that advanced features gracefully degrade so that all content is accessable 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 Googles 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 gallery, cssmania.com:

Skills/Software Used

Photoshop
XHTML 1.0 Strict and CSS 1-3
Cross browser compatibility and graceful degradation
Grid based layout
Responsive design
Search engine optimisation

View website live

View more email marketing entries

Email Campaign Concept, Copy, Design and Implementation for Luxury Family Hotel Brand

admin — Fri, 26 Aug 2011 07:47:04 +0000

At this stage of my work for von Essen hotels I was developing the email marketing strategy from concept, through copy, to design and implementation. A headline that invokes curiosity through a question that connects with the target audience and makes them either want to answer the question or at least see why it is being asked, is a powerful copywriting tool for increasing email opens and encouraging interaction with the content. The headline is hugely important in all marketing and especially in email marketing, where it is all they can see and all that drives their decision to open the email (through the subject line) — and if recipients don’t open the email, you’ve failed.

Skills/Software Used

Photoshop
Email marketing strategy
HTML email design
Cross email client compatibility
Copywriting for web

View full size email design

View more email marketing entries

Designing and Building a Microsite with over 75 pages worth of content in 5 days

admin — Fri, 26 Aug 2011 07:29:11 +0000

This website had to be made in 5 days from start to finish, to coincide with a press-release. The visual design is very simple and took less than a day, but it was a challenge to get all the content on the pages in the remaining 4 days. However I comfortably met the deadline.

Skills/Software Used

Photoshop
XHTML 1.0 Strict
CSS
Cross browser compatibility
jQuery

View web page live

View more web design entries

How to Present 11 Hotels, 66 Images and 70 Local Attractions on One Page Without Overloading the Visitor with Information

admin — Tue, 14 Jun 2011 23:50:46 +0000

The challenge with this landing page design was displaying images, prices, local attractions and calls to action for eleven hotels. I wanted to put a lot of information on the page so that everything visitors would need to get a good overview of all the hotels and their local attractions was there in one place. This makes the page a good reference point for email campaigns, banner ads and social media marketing. It’s also useful for agents who work on our behalf and need a quick reference point for all the hotels in each of the hotel sets.

Because there is so much content on the page we used jQuery to hide much of the content, only revealing the content on click. We also added some script that enabled us to link to an anchor on the page and display some previously hidden content automatically. So if we linked to an anchor from an email we could display all the images and details for one particular hotel, while all the comparable hotels remain a short scroll away. This helps give visitors plenty of options without overloading them with information — they are able to digest details at their own pace.

Skills/Software Used

Photoshop
XHTML 1.0 Strict
CSS
Cross browser compatibility

View web page live

View more web design entries

Killing Three Birds with One Stone Using Email Marketing, Tweetdeck and a Facebook RSS App

admin — Tue, 14 Jun 2011 22:05:19 +0000

We featured culinary events local to the hotels that attract sufficient attention from people who would be interested in such attractions and may also require accommodation. We linked each event in with a special break at the nearest hotel and linked the email up with these special breaks. The email is informative and interesting to the target audience, to the extent that it’s worth reading whether the target audience is planning a hotel break or not. Therefore they’re are likely to have an interest in the content of the email whether they are in the research or buying phase or not. Either way the offers and events are attractive enough to peak the interest of the reader.

Although it is fairly time consuming researching the events, writing the copy and linking them to the most suitable and available special breaks it’s well worth it. After creating these ‘demand generator’ based emails, I create a tweet for each event and schedule it to post at a suitable time using Tweetdeck. These tweets also feed through to our Facebook page using an RSS feed. We therefore saved time by creating content for our email and our social media accounts at the same time.

Although this email features large images at the top of the design, if you view the email with images turned off, you will see styled headings and text because the images are contained in span elements, which contain inline styles that style the alternate text on the images. Emails for a luxury hotel brand need strong emotion provoking imagery, but using the styled span tags and the alt text helps get around the problem of seeing nothing when you first open the email — instead you see the email headline, which is a key hook to catching the readers attention.

Skills/Software Used

Photoshop
HTML 4.01
Email marketing
Social media marketing

View full size email

View more email design entries

Organising content for 10 hotels around key demand generators

admin — Fri, 06 May 2011 21:15:22 +0000

The challenge with this email newsletter was finding key demand generators based on calendar events for ten different hotels, selecting the most relevant/interesting ones, while also weighing up which hotels needed featuring more than others based on booking numbers – and then organising these attractions into an attractive and useful email. One of the keys to hotel marketing is understanding where demand is in the surrounding areas of the hotels and marketing around these demand generators. You’re then able to plan email campaigns, social media marketing and SEO around these demand generators.

Skills/Software Used

Photoshop
HTML 4.01
Email marketing

View full size email

View more email design entries

Landing Page Featured on CSSmania.com

admin — Fri, 06 May 2011 21:00:13 +0000

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.

Skills/Software Used

Photoshop
Web Standards based XHTML 1.0 Strict
CSS

View entry on cssmania.com

View more email design entries

Landing Page Featuring Fading Background Image jQuery Slideshow

admin — Thu, 05 May 2011 22:17:40 +0000

This was the first time I had written the CSS for a full-width background image slideshow. We had some trouble figuring out the positioning of the background images in Internet Explorer 6.

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 are loosely based on the famous romantic duet, “Baby, It’s Cold Outside”, popularized by Nat King Cole and Nina Simone.

Skills/Software Used

Photoshop
Web Standards based XHTML 1.0 Strict
CSS

View this website live

View more web design entries

One Page Website, using AJAX to reveal content

admin — Thu, 05 May 2011 20:58:56 +0000

I was briefed to design a one page website that listed all the spas in the von Essen hotels collection, including photos and the facilities at each spa! It was quite a challenge to get all that content on one page in a very short time frame. We decided to use jQuery to reveal content when it was activated by either a click or by use of a search filter.

Skills/Software Used

Photoshop
Web Standards based XHTML 1.0 Strict
CSS

View this website live

View more web design entries

A Little Reminder: Christmas Gift Vouchers Email

admin — Tue, 03 May 2011 21:44:02 +0000

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 is also a highly effective method of marketing with Google Adwords.

Skills/Software Used

Photoshop
HTML 4.01
Email marketing

View full size email

View more email design entries