A few details about the way in which I approached the development of this website.
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.
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.
- 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
- 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
- GreenSock (GSAP) – A suite of tools for scripted, high-performance HTML5 animations that work in all major browsers
- Masonry + Infinite Scroll – jQuery plugins for creating flexible grid layouts and dynamic content loading
- 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
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
This site has been tested on the following devices/browsers:
- 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)
- Google Chrome 31.0.1650.63
- Safari 7.0.1
- Firefox 24.0
- Opera 18.0.1284.68
- Opera Mobile Emulator
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
- Responsive Web Design – by Ethan Marcotte
The Elements of Content Strategy – by Erin Kissane
- Content Strategy For Mobile – by Karen McGrane
- Mobile First – by Luke Wroblewski
- HTML5 For Web Designers – by Jeremy Keith
- CSS3 For Web Designers – by Dan Cederholm
- Prototyping: A Practitioner’s Guide – by Todd Zaki Warfel
- Web Form Design: Filling in the Blanks – by Luke Wroblewski
- The Mobile Frontier: A Guide for Designing Mobile Experiences – by Rachel Hinman
- Content Everywhere: Strategy and Structure for Future-Ready Content – by Sara Wachter-Boettcher