Website Redesign 2013

I suffer from an affliction that most designers I know share. A few months ago I looked at my website and couldn’t stand it. It was time for my annual tradition of overhauling the website. This time I decided to do some IA changes that I had been putting off along with the redesign. With the IA changes it seemed like a good time to try a new CMS. As you can see, the process quickly spiraled into from a visual refresh to something much more significant.

Design

One of the things that began to bother me about the previous design was how contained and constricted everything felt. There were borders and rules and all the content felt very boxed in, especially the portfolio section. The design was responsive but the design shifted at different sizes in ways that seemed very forced.

The solution to these issues was to vastly simplify the layout to a single column which would shift type-size and margins as the browser resized. This puts a renewed focus on the content and allows me to find ways to create visual interest through the content itself instead of relying on a clever layout (which is rarely clever at all). I decided that the site would focus on text and imagery. These are the two most important elements of most content so it seemed appropriate.

All the imagery in the work section extends the entire width of the browser in order to give the viewer as big an experience as possible. The headers for the blog posts do the same. In order to make sure these large images would not effect download speeds unduly I decided to use Filament Group’s suggestion of heavy compression on larger images, as they are often smaller in download size than more technical solutions. Between heavy compression on JPGs and ImageOptim I found that the loading speed on my anecdotal testing is acceptable.

One potential issue with the design moving forward is the requirement for blog posts to have a header image. This has not been an issue so far, but some older posts simply don’t have a header image. We’ll see how this design decision pans out.

CMS

I had been using Wordpress for the site and had a few problems with it:

1. My designs called for custom fields often enough that Wordpress seemed limiting. As far as I know there is no way to make a specific custom field show up automatically in the dashboard for every new post without even more 3rd party plugins (a constant pain point for continued maintenance).
2. I also knew that I wanted to simplify the IA so all posts would be formatted as blog/post-title. Wordpress was organizing everything by category. Don’t ask me how or why I got it to do that, I have no idea.
3. I don’t know how bloated Wordpress actually is, but I realized that when I looked through my template code I did not understand half of what was going, never a good sign. I needed something more straightforward.
4. One other issue is that I wanted something that would stick fairly close to the static templates I would use for my front-end development and my Wordpress templates were almost unrecognizable to me.

I decided to go with Kirby, a static site generator, for the latest revision. It addressed each of the four issues I have listed above:

1. Each post is a plain text file in a subfolder of its appropriate section (work and blog in my case). This file contains the title, date, text, tags, categories, plus any other custom field you might want. It’s as simple as typing out another field in the appropriate syntax. If you template code calls for that field any post that has content for it will just work.
2. IA is dead simple. It’s just folders. I have a blog folder and a work folder, and all the posts are subfolders in one of those. The URLs are built off of this structure. My URLs make sense again. There’s even some simple instructions on how to deal with broken Wordpress URLS. Did I mention there’s a Wordpress importer? A related advantage is that loading time is quick because there is no database to query.
3. It is pretty easy to understand everything that is happening in your site’s structure and template code. It’s still PHP so some base knowledge is helpful, but there is some great documentation and tutorials that made me feel pretty confident pretty quickly.
4. The lack of extraneous template code makes it really easy to go from a static template to a working site. I used Hammer to build my templates and very quickly had all the pieces together for Kirby. In fact the static and site code are close enough that I can still do CSS changes in my Hammer project and then just copy it straight over to the Kirby site without worrying about breaking anything.

There are disadvantages to Kirby, the panel is still in public beta so there are some bugs when creating new posts through the panel (the fact that folder numbers are not appended for new posts seems like an oversight and results in posts being listed out of order in the control panel). Most of the time I post using FTP, but am planning on upgrading from a shared host to a VPS in order to setup git deployment. Another small quibble is kirbytext, a slight variation on Markdown. It has enough small differences, the way links are written for example, that there could be potential content portability problems in the future should I want to move off of Kirby. It will parse plain Markdown so how big an issue this is remains to be seen.

Overall I am very happy with Kirby and could easily recommend it for personal sites, blogs, portfolios, etc. to people familiar with building sites. It is something that I would not feel comfortable handing over to a client as there is not an easy, reliable dashboard. I would recommend something like Expression Engine to clients with bigger more extensive needs, although I am itching to try out Craft. For smaller, personal scale sites, I would recommend something like Wordpress (although the need for constant 3rd party plugins is a huge pain) or Squarespace (I used Squarespace for The Way Station and am happy with it so far) for a client.

I am currently pretty happy with my new site. We’ll see how I feel next year.