Every Last Pixel: What I Learned Designing My Website with Statamic

Posted by Matt Birchler
— 3 min read

NOTE: I have since switched this site over to WordPress, but the same principles apply, even if a couple of the specifics are a little different. Although point #4 has changed a bit.

After almost a full year using Squarespace, I just moved BirchTree over to the static CMS, Statamic. I originally chose Squarespace because it was easy to use, had nice iOS apps, and ensured I never had to worry about things like “is my site up?” or “does my site work on all devices?” It was great, and is absolutely what I would suggest most people use. But I got a bug over the past month. I got the bug to make something my own, something I owned from top to bottom.

1. It’s all about the little things

I’ve customized themes many times over the year and I have pretty solid web design skills, so I figured I had this all under control. What I didn’t fully appreciate was how much the themes I had used before gave me for free. I was able to make the fun customizations, but I didn’t have to worry about the non-sexy stuff.

I used no base theme at all, so I had to style everything. This includes the 404 page, which now looks pretty sharp. It includes the formatting of the RSS feed. It includes figuring out how to manage the truncation of entries on the home screen. Those are some things that pop out, but there’s plenty more that needs to be addressed, and you don’t even think about them when you’re working from a pre-made theme.

2. Responsive design is tough

Along the same lines, building a website that looks good on all devices is really tricky. As I don’t have a big pile of test devices just sitting around, I had a bit of trouble figuring out how to figure out how my design would look on other devices. I designed for my Mac and my iPhone 6S Plus, but people view this site from many devices that I don’t have access to.

Safari has a responsive mode where you can simulate some devices, but I found this tool to be woefully useless. I looked at the site in this view and it simply didn’t look like it did on the actual device. If you have Xcode installed on your Mac, I highly recommend using the device simulator to pull up the site in that app because it actually renders things exactly as the real device will.

As far as getting everything to look right on other devices (Android phones, specifically), the best I could do was design with web standards and take reader feedback when things were broken.

3. A little help from your friends

Speaking of getting feedback from readers, this was a huge help in the development and deployment process. About a week before I launched the new design, I sent a live version of the site to about a dozen friends and asked them to quickly glance over the site and tell me if there was anything that was broken or looked bad. This had the benefit of getting the site tested on quite a few more devices than I had access to at home, but it also allowed me to get some feedback on the general look and feel of the site.

I got valuable feedback on what margins looked weird on certain devices, how some animations could break in some scenarios, how my pagination links were completely reversed, and much more. This external feedback is critical whenever making something as it’s hard to see everything yourself. There will simply be things that you either don’t notice or think that no one will notice that are actually important. There were some small tidbits that I didn’t love in the original design, but I thought no one would notice; boy was I wrong.

The feedback I received was encouraging, constructively critical, and (most importantly) helpful. This feedback is what gave me the guidance and confidence I needed to finish the job and release something I was happy with[1]. Even today, feedback is still valuable and is what guides a lot of the development for the site.

4. Using a popular platform would have been “easier”

UPDATE: I have since switched over to WordPress, but I developed my own theme so I still control everything. My only limits are what I can do with it.

It sure would have been easier to make this site with WordPress. I could have downloaded a theme, installed a bunch of plugins, and been rich with Google results for solutions to problems that came up during development. By going with Statamic, I had to do everything on my own. Many questions I had were answerable by the awesome Statamic community, but that is a tiny community comparatively and a quick search did’t always turn up an immediate result.

On the plus side this means that I had to do everything myself, which means that I know every nook and cranny of this site. I know how things are laid out, what elements are linked…I even know what each CSS class name is used for each element. If something is broken, I know where to go to fix it. This is wildly liberating and makes my site something that is totally my own. I might use WordPress for other projects, but for something as personal as a blog, I’m glad I have something unique.

  1. The site is always being updated though. You can see recent changes in the changelog.  ↩