Most recently, this site used Wordpress as its content management system (CMS). As is often the case, there were aspects of my previous website that I was not happy with. So I began a project to redo my site. Then I became involved in a move to another state, and essentially nothing happened for over two years. Once I was happily settled in, I dusted off this project.
A new CMS
I then ran across this new flat-file CMS named Statamic that seemed to fit my needs exactly. It imposed no preset look or content organization on me. At its core, Statamic is a PHP processor that builds a website from the content sitting in a file structure that I created to suit my specific needs. It uses a set of tags to pull content from my file structure. It also has a very robust template system, so I only needed to code up things like headers, footers and basic page layouts one time, and then Statamic assembles each page from these components with the content embedded in it. Think of the templates as Bunny Bread and the content as the peanut butter and jelly.
This CMS seemed to me to be a Goldilocks system: not so technically demanding that it would take weeks of coding to cobble together a simple site, and not so stupidly simplistic that I couldn’t do a fair bit of customization. For me, it was just right. So that’s where the overall framework comes from.
The design stuff
I also wanted to use this redesign as an opportunity to make this site responsive. This is webspeak for “can use easily on smartphones and tablets”. The whole site scales and rearranges itself depending on whether you are sitting in front of your computer monitor or have pulled out your smartphone because you are bored and standing in a long line at the supermarket.
Additionally, I wanted to make the site look less bloggy than most Wordpress sites I see. I don’t need sidebars, or widgets or advertising. I’m not trying to induce you to click-through on a link so I can collect 0.5 cents from Google. So I was free to design the layout to feature just the content I am presenting.
So the website you see in front of you has been stripped down a great deal. I admire simplicity (just don’t look in my garage), so I deliberately set out to create a very visually minimal site that still contained all the content that I needed, and little else.
That cloud thing
Another thing that has radically evolved over the last few years is the so-called Cloud. Essentially it allows me to let other services store a great deal of the information that heretofore would have needed to be stored locally on my site’s database. All the photographic imagery is being stored and served up by Yahoo’s Flickr service. I just have my web page call up Flickr and ask for a delivery of all my photos - and hold the onion. Flickr then delivers the photos to the page from afar.
Same thing goes for comments. At the moment, I have not incorporated comments on this website, mostly because I don’t care. But on another site I am building that has a more community-driven sensibility, I am using a hosted comment service named Disqus that handles storing comments for me. I still can moderate them to keep out the Haters and Spambots, but Disqus deals with all the user registration and confirming if there is an actual human being attempting to make a comment.
And videos are delivered by Youtube and Vimeo. This works in a similar way. When you click on one of my webpages that has video content, a call is made to one of those two services to deliver the video. All I needed to do is give them the ID for the video I want to display.
So nowadays, many websites behave like a conductor, directing a baton toward the woodwinds to retrieve some photos, then adding a subtle twitch toward the brass section to bring out small whisper of video, and finally frantically waving down an overenthusiastic comments section back there with the tubas. This website is a merely a tuxedo-clad pompous ass of a conductor with a hired orchestra.
As far as tech stuff goes…
I am using the Hoefler & Frere-Jones cloud service to serve up my fonts. The sans-serif headline and body typeface is Gotham Narrow. I played around with using a serif font for the body text, but this super simple and austere layout seemed to work better with just a single typeface.
I use the SASS CSS preprocessor for all my style sheets which is an amazing timesaver. I experimented with several complete frameworks packages such as Twitter Bootstrap and Zurb Foundation, but they all seemed like massive overkill for what is just a simple photoblog, and I ended up writing all my CSS for typography and grids from scratch, and incorporated many of the ideas used by Adam Kaplan and Richard Rutter.
I use Sublime Text 2 for editing the files.