Fordsport Car Club mini-site - single-page scroller site with Zurb-foundation base theme

The hero image on the Fordsport website.
The top elements of the homepage in mobile viewports.
An example of the gallery page.
The contact form in mobile view.
The Zurb Foundation theme provides an attractive, clean base to work from.
The modules listing page - the visual tweaks come courtesy of Module Filter.
The Fordsport car enthusiasts club is a relaxed, nation-wide way for owners of all makes of Ford, both performance and standard models. The owners wanted a simple-to-use website which let new members find out how to join or get in touch, and to help funnel traffic to their Facebook page.

This was a website build with very little in the way of specification or design; club owners Paul and Shelley don't have a technical background, so they asked me to design something which I thought would suit their needs. After a chat over a cup of tea to work out what materiel if any they already had - which turned up the club's logos and a stack of photos - we agreed that I would design a set of wireframes for a simple website which listed the club's activities, how to join, showed some photo galleries, provided a contact form, and linked to the club's Facebook page.

I used Balsamiq Mockups to draft the layout for a long scroller page, with each item of content sized to fit approximately 80% of the viewport on desktop browsers, so that visitors are encouraged to scroll down the page to discover more content, while in mobile-sized viewports, the content collapses to occupy less space, reducing the need to scroll unneccessarily.

With approval from Paul and Shelley for the wireframes, I then used Drupal 7 with the Zurb Foundation theme as a basis, creating content types for the homepage, galleries, a contact page, and regular content pages. The homepage template saw the most work as it rolled a custom content type - with uploader fields for large photos - together with some custom templates in the theme layer.

The feedback from Paul and Shelley was very positive, which is great news. :o)

Modules in use include: Administration menu, Administration views, Backup and Migrate, Better Formats, Block Class, Block Title Link, Boost and Boost Crawler, Breakpoints, CAPTCHA, CDN, Chaos Tools, Contextual Links, Dblog, a collection of Date modules, Disqus, Entity API, Fences, Field collection, Field UI, Gallery Formatter, Global Redirect, Google Analytics, a special-sauce Greyhead Customisations module, Hide Input Formats, HTTPRL to allow Boost's crawler to index pages using multiple threads, Image and a collection of image management modules, Imagecache and a collection of image handler modules, IMCE-WYSIWYG bridge and IMCE, jQuery Update, Lightbox, Logintoboggan, Metatag, Module filter for administration friendliness, Page Title, Pathauto (and the Pathauto Persistent State module), Picture, Real Name, Robots.txt, Search 404, Strongarm, Submitted By, Transliteration for uploaded filenames, Views and a collection of Views extensions, Webform, XML Sitemap, and a few other less-interesting modules to boot.

Hosting and administration: the site is hosted on a small Digitalocean "droplet" (about the size of an Amazon EC2 Micro instance), running a very vanilla LAMP stack, and administered using Webmin/Virtualmin. It has a free SSL certificate issued by StartSSL.


What's this then?

When I’m not trying to kill myself in the gym or in a swimming pool, or trying to take photos which usually look like they were shot during an earthquake, I tend to push pixels around webpages and - occasionally - posters, newspapers, magazines and other paper-based mediums. Sometimes, I even get paid to do it… ;o)

Apparently, I'm not-too-bad at putting together websites; that means that, once we've worked out what it is you want your website to do, and roughly how you want it to look, I take a content management system (usually Drupal), assemble and configure the various plug-ins needed to make your site do what you want it to, whip up the site's theme via some slicing and dicing in Potatoshop (that's Photoshop for normal people), test it, add in any content you have, and show you how to use the site in a one-to-one training session (well, that's roughly how these things work, but there's always some room for flexibility of course).

If you like what you see here and would like to have a chat, please get in touch.

This is just a small selection of my past work, and I must admit I've been pretty terrible at updating my portfolio with some of my more-recent work. So, while this page isn't necessarily the best or the brightest of my productions, I hope you'll be able to get an idea of my style and how I like to work.