Skip to content

Colophon

A few details about the way in which I approached the development of this website.

Overview

The ambition behind this redesign was much more than just skin deep.  As my knowledge of responsive web design, content strategy and user experience has widened over the past few years, I wanted to fold these new learnings into this redesign.

This has meant an entire site overhaul. Not only the look and feel, but also the way in which content is structured, pages built and the way the experience is served up to the end user. Everything has been re-rewritten from the ground up: content, front and back end code. As the Beatles once said, it’s been a Long and Winding Road.

Technologies

This site was hand coded in (reasonably semantic) HTML5 by yours truly. It uses CSS for presentation, jQuery for interactivity and PHP on the back end to output the HTML. It probably won’t validate and its not certainly not perfect, but it at least is a step in the right direction.

The following open source components were indispensable whilst building this site and rapidly sped up the development cycle. I’d encourage you to go and check them out if you haven’t already.

Code

  • WordPress – Used in this instance as a CMS rather than a blogging tool
  • Simple Fields  – A WordPress plugin that allows you to extend the admin interface of WordPress
  • Better WordPress Minify – A WordPress plugin to optimise the delivery of CSS and JavaScript files
  • Instagrate – A WordPress plugin to automatically post Instagram images to WordPress
  • WP Retina 2x – A WordPress plugin to provide support for retina and adaptive images
  • Twitter Bootstrap 3.1.0 – A responsive front end framework for its responsive grid and various UI patterns
  • jQuery – A JavaScript library for HTML document traversal, manipulation, event handling and animation
  • GreenSock (GSAP) – A suite of tools for scripted, high-performance HTML5 animations that work in all major browsers
  • jRespond – A JavaScript plugins to provide a mechanism for executing JavaScript functions at specific breakpoints
  • Masonry + Infinite Scroll – jQuery plugins for creating flexible grid layouts and dynamic content loading
  • h5f – A JavaScript polyfill for HTML5 form validation
  • Fancybox – A jQuery plugin for basic light box functionality
  • Font Awesome – A CSS icon font to provide scalable UI icons
  • Google Fonts Montserrat + Open Sans for custom typography

Software

Naturally this site was developed on a Mac. Both a late 2013 Haswell 13 Inch Retina MacBook Pro and a late 2013 Haswell 27 inch iMac.

  • Sublime Text – A sophisticated text editor for code, markup and prose
  • Panic Coda – A great one window web development tool
  • Cyberduck – A handy FTP client
  • MAMP – An extremely handy tool for running a local web server
  • Dropbox – The extremely popular file sharing service
  • Google Chrome + Dev Tools – For testing, debugging, profiling and more

QA

This site has been tested on the following devices/browsers:

Devices

  • iPhone 5s (iOS 7)
  • iPhone 3GS (iOS 6)
  • HTC (Android)
  • iPad 3 (iOS 7)
  • 13 Inch Retina MacBook Pro (OS X Mavericks)
  • 27 inch iMac  (OS X Mavericks)
  • 21 inch iMac  (OS X Lion)

Browsers

  • Google Chrome 31.0.1650.63
  • Safari 7.0.1
  • Firefox 24.0
  • Opera 18.0.1284.68
  • Opera Mobile Emulator
  • IE11
  • IE10
  • IE9
  • IE8

Resources

I’ve also learned a great deal through reading the following publications and would thoroughly recommend getting your hands on any that tickle your fancy.

A Book Apart

Rosenfeld Media

Online