The Portfolio of Chris Boyle

What follows is a selection of my work.

  1. Web design

    eCommerce Web Design and Development for Valley Optics Opticians

    eCommerce web design for opticians

    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”!

  2. Web design

    Winter Campaign for von Essen hotels

    Hotel web design portfolio entry

    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.

  3. Web design

    Christmas Campaign for von Essen hotels, Featured in CSSmania.com Web Design Gallery

    Hotel web design portfolio entry

    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

  4. Web design

    Responsive Custom Grid Based Design Featuring 26 Hotels

    Hotel Web Design in Bath

    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:

    cssmania

  5. Web design

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

    Hotel web design

    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.

  6. Web design

    One Page Website, using AJAX to reveal content

    Hotel web design portfolio entry

    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.

  7. Web design

    elderlyactivities.co.uk: Concept, Web Design and WordPress Theme Development

    Elderly Activities Web Design Portfolio Entry

    Bupa, a customer of The Consortium, kindly gave us lots of activities ideas they had collected from their care homes. We decided it would be a good idea to use them as a free resource that we would give away online, helping attract links and start the development of an online community for carers, looking for materials to help them in their jobs.

    We had already done a lot of research on keywords in this area and found to our surprise that the domain name elderlyactivities.co.uk (based on a top keyword) was available. In two days I had the website online, having found the domain name, designed the website around the content and built the WordPress theme.

  8. Web design

    Shareandinspire: A forum built on WordPress

    Share&inspire Website design portfolio entry

    I designed and built this website from start to finish from logo to forum build. Initially the brief was to build a blog for early years practitioners, to help promote our early years websites and to learn more about our customers’ needs. However, after I had completed the website I was told to make it more like a forum; so I used a WordPress plugin and changed the structure of the website making it function as a simple forum.

  9. Web design

    Tru-Green: Static XHTML/CSS Website Design

    Tru-Green Website design portfolio entry

    This is an example of a simple static website I built for the Tru-Green brand, a green envelope producer based in India. I used several layered Photoshop brushes to create a slightly crumpled envelope look for the background of the website. I designed and built the whole website from start to finish in one working day.

  10. Web design

    Early Years At Home: Logo Design and Web Design

    Early Years at Home Website design

    I was asked to design a Business to Consumer website for ‘at home early years practitioners’. I designed the logo and the website for an external web development team to use on an eCommerce platform they had previously created. My design was restricted slightly by the need to make it compatible with the eCommerce platform.

    The company were extremely happy with the result and the quick turn around. They went with the first design I produced.