About this site

The design

My site is designed so that you can use all the latest trendy buzzwords when describing it. Buzzwords like ‘grid design’, ‘fluid’, ‘responsive’, and ‘online’. The grid is sixteen columns across, with narrow gutters between each column. Because the design is ‘responsive’, elements of the layout adjust themselves as the width of your browser window narrows, or if you are using a smaller-screened device like a mobile phone or tablet.

I don’t mind very much if the site doesn’t look quite right in older versions of Internet Explorer. If people are still using those decrepit versions after all these years, they either can’t upgrade their browser (perhaps because of some restrictive corporate environment1), or won’t even if I were to brow-beat them here. So, my message to you is: enjoy your crappy experience all over the Web!


Most browsers—even decrepit versions of Internet Explorer—should display this site using custom Web fonts. The serif typeface is HVD Fonts’ Livory, and the sans-serif typeface is Kostic’s Breakers.2

Wherever I’ve tested it so far, Livory looks really good for text—a Renaissance-style serif typeface with some modern features. What I like about Breakers is that it works for text at all sizes, from the small text in the footer to the large ultra-bold text I use for the photo galleries’ titles on the home page.


Since 2007 this site has been published using ExpressionEngine, a commercial and very powerful CMS. I previously used WordPress, but switched to ExpressionEngine when I found that it is a much more flexible system with easier template syntax.

Version 4 of richardflynn.net, which you are looking at now, is the first version of this site to use ExpressionEngine 2.

My photo galleries are hosted externally, by SmugMug. SmugMug’s customization tools are still not as powerful as I would like, but I have done my best to make the SmugMug pages look like the rest of my site.

The server

This site runs on a Linode VPS running Ubuntu 10.04, Apache 2, MySQL, and PHP5. This VPS is located at Linode’s data centre in Tokyo.

The Statistics

I use Shaun Inman’s Mint to gather and track statistics about how people use the site—the pages they visit, the browsers and operating systems they use, and so on.

The workflow

Back end: templates, CMS files

I host a development version of the site on my own computers, which run MAMP Pro. I do the majority of the coding for templates etc. in Coda 2.

I write my style sheets in LESS. The stylesheets are compiled into standard CSS on my own computer (every time I save the Less file, in fact) using Bryan Jones’ Less.app.

The source code for the site is managed by Git. On my server there are two Git repositories for the site: the main working tree (from which the site is actually displayed to visitors), and a ‘hub’ repository which I push to and pull from. When I am ready to make changes on the live site, I push them from my computer to the Master branch of the hub repository, and the working tree repository then pulls the changes from the hub. My Git workflow is based almost entirely on that outlined by Joe Maller. On the Mac I use Tower to manage my Git workflow. I’m still quite new at Git, and am still learning. I refer quite often to Scott Chacon’s Pro Git ebook.

Front end: blog posts and other text content

Ultimately all the text posted on the site goes through the standard ExpressionEngine admin pages. I have tried using other ways to push text into ExpressionEngine, but nothing is as flexible as using the publish forms which I’ve laid out for myself. I draft text locally, either using TextWrangler or nvAlt (on the Mac) and Elements (on iOS). I write in ordinary HTML rather than in Markdown.

Photos: from camera to Web

I do all of my local photo management in Aperture. When I have chosen photos to publish in a gallery online, I add captions and other metadata within Aperture and then upload the gallery to SmugMug using either David Holmes’ ApertureToSmugMug plugin, or more recently NZWidgets’ SmuginProForAperture.


  1. My advice? Leave the job and find somewhere where you can use a proper modern browser. Or if you’ve really got to do that browsing at work, pull out your smartphone.
  2. If you follow these links to the MyFonts website and end up buying these fonts—or just about any of MyFonts’ large library—I will get a small commission. Thanks!