Website Redesign

A collage of screenshots of my website through the years

Welcome to my brand new website! I’ve worked hard to make this site, and I hope you like it.

My blog has been around since 2004. My first blog post was written about the PHP Community project. Back then, I used Movable Type as my blogging engine. WordPress was still young, having only recently been forked from b2. A few months later, I did switch to WordPress, and then many years after that, I decided to use a static site generator, so I switched to Octopress.

Why Redesign?

There were several things that prompted my desire to redesign this website:

For one, I was inspired by the branding efforts of Yitzchok Willroth, Chris Hartjes, and Chris Shiflett, and I wanted a personal web presence that would better communicate who I am and what I do.

Second, I wanted a project that would take me back to my web development roots, and I felt that developing a personal website with all the bells and whistles would do just that. Through this process, I’ve been able to learn more about HTML5 and CSS3, as well as responsive website development.

Last, I wanted to encourage and inspire others to follow suit. A decade ago, most web thought leadership conversations took place across blogs, and from blogs, leaders innovated and led the development of the Open Web. However, since the advent of closed, microblogging platforms, many (myself included) have left their blogs behind in the dust, and I feel we’ve lost some of that innovation and openness. This redesign represents the beginning of my return to the ideals of the Open Web.

/Purpose

Why do you do what you do? I am a web developer because I believe the web has the power to change the world. It is the biggest communications tool of our time, and it has the greatest power to effect change—if used appropriately. I have a passion for teaching web development because I want to encourage others to use these skills to change the world for good.

I have been inspired by my friends at Fictive Kin to create a /purpose (Slash Purpose) page, and I encourage you to think about why you do what you do and create your own /purpose page. Let it drive all that you do.

Here is my /purpose page.

IndieWeb Movement

Through Chris Shiflett, I found out about the Indie Web movement. Almost immediately, I felt a kinship with this community. I’ve already mentioned the Open Web philosophy. The Indie Web movement seems to be taking steps in this direction. I have followed their “Getting Started” guide to mark up my website with authorship information (h-card) and microformats mark-up for blog posts and articles (h-entry). This means my site content is easy to scrape, and it provides good identity information about myself that machines can read.

Chris has written a little about some of the practical applications of IndieAuth. I’m sure he’ll write more, so I encourage you to follow along.

Focus on Content

Previous versions of my website included only my blog and did not focus on my talks, articles, books, or projects. It is important to me to showcase this content, and so this new version of my site includes these and more. Just take a look under the Features navigation link up top, or follow these links:

Blog
I write about web development and related technologies in my blog. Usually, it has something to do with PHP. Occasionally, I’m off-topic.
Articles
Here you can find my published articles with some useful and current discussion in the comments.
Books
Here you can find more information about books and publications I’ve written and contributed to.
Talks
I speak about web development and related technologies at conferences around the world.
Projects
I organize, maintain, develop, and participate in many open source projects and communities.
Brews
I am an aficionado of beer and lover of coffee. Sometimes I write about them.

Simple and Elegant Design

I am a web developer, not a designer. I wanted something simple, elegant, and responsive that reflected my own personality, but I knew I would be unable to pull it off on my own.

For design inspiration, I turned to HTML5 UP. These are all clean and simple designs that are responsive, built with HTML5 and CSS3, and are licensed for free under a Creative Commons license. Through HTML5 UP, I learned about AJ’s other project, Pixelarity. From there, I found the Catalyst theme, which is the theme on which I based this website.

Thanks, AJ! I see you’re also in Nashville. Maybe I can buy you a drink sometime. :-)

Tools Used

I again chose to use a static site generator for this website. I was pleased with how well Octopress worked, and I was interested in the forthcoming Octopress 3. Octopress 3 is still in the development stages, so I used Jekyll as the base, with a mixture of Jekyll and Octopress plugins, as well as some of my own.

For the most part, I write all my posts and pages in Markdown, and I’ve been very happy with the kramdown Markdown-superset converter. Additionally, I’m a big fan of Pygments coupled with the Octopress Codefence plugin for marking up source code and providing syntax highlighting.

Before you ask why I didn’t use Sculpin, let me take a moment to explain. Sculpin is a static site generator written in PHP. I love the project and the community around it. In fact, to show my support for it, I began this project by using Sculpin as its engine. However, after spending several months with it, I decided it wasn’t going to meet my needs or help me accomplish my goals; I was spending far too much time hacking the engine and writing Symfony bundles for functionality that didn’t yet exist in Sculpin.

So, to Beau and the rest of the Sculpin contributors, I really do like what you’re doing and I encourage you to keep at it. I think it’s an exciting project, and in the future, I’d like to switch back to Sculpin. My wish list for Sculpin would include a focus on interop with Jekyll/Liquid and streamlined ability to create and install plugins.

Behind the Scenes

I’ve already mentioned HTML5 and CSS3, and in putting together this website, I got to learn the JavaScript framework Skel and I was able to play with the Sass CSS extension language. Both are used heavily by HTML5 UP and Pixelarity themes. In fact, I found Skel much more flexible and useful for defining and managing responsive breakpoints than the popular Bootstrap framework.

My website is hosted in Amazon S3, with many static assets being served through Amazon CloudFront. I deploy to S3 using s3cmd, and I manage redirects in S3 using s3redirect. I’ve tried to ensure that all old URLs in my site, from 2004 to present day, redirect properly.

Benramsey.com Through the Years

Here are a few links to my website as it has appeared through the years: