CM.net Version 3.0

One of my biggest weaknesses is resisting the urge to constantly redesign my site. I am a sucker for design, and chasemccoy.net has always been my visual playground.

I moved my site to WordPress last November because I was unhappy with every other platform that I had used. Posterous, Tumblr, and Scriptogram all failed me. I held out on moving to WordPress because I didn’t think that I had the know-how to set it up on my own server, but it was actually quite easy.

When I moved to WordPress I never mentioned it on the site. I had intended to write about my switch but it never happened. I spent a few weeks creating a theme for my site that was extremely simple. It took me a while to learn the theming system of WordPress as I had no experience with PHP.

My first theme was bare bones. The color scheme, if I remember correctly, was black and white. I was happy with it because I was simply able to do it. It wasn’t long, however, that I started to tweak it. I hardly ever do major revisions of my site, instead I tweak things here and there until it becomes something entirely new.

The next major revision came with a new color scheme and logo. Some of you may remember this layout. I was quite fond of its single column layout and appealing colors.

After this theme I must have gone insane, because my site evolved into what has been my theme up until today. You can see a screenshot here. This new theme was a mess. I featured a fixed sidebar, which is an insult to readers. It also had terrible responsiveness issues.

Most of the problems with this theme came from the fact that I had created it on top of my old themes, simply tweaking the files to get what I wanted. This was a terrible idea. My code was a mess. I knew that it had to change, and that the changes needed to follow these principles:

  1. The theme needed to step back from the content instead of stealing the show.
  2. The first priority should be readability and flow.
  3. The site should be fast and the code should be clean.
  4. The site should be responsive and look great on any device.

I took these principles and set off with the notion that I would write my own theme from scratch in order to keep my code as clean as possible. That didn’t go as planned, however, because while looking for inspiration I came across a theme that looked almost perfect for me.

The Less theme by Jared Erickson is a super minimal, clean, and basic WordPress theme that featured everything that I was looking for. I had to tweak the code a bit to make it work how I wanted, but it was a great starting point for my new theme that I am calling Less is More.

Layout

I am a big fan of blogs with single column layouts. I have never really liked sidebars, and most of my designs reflect that. Less is More is a single 685px wide column.

The header consists of simple text that occupies a fraction of the page. I opted out of a large header so that the content would stand out more than my name and the navigation. I also added my logotype to the right of the header.

Typography

All of the typefaces for my site are served through the amazing, wonderful Typekit

The header is simply my name in all caps set in Inconsolata. I applied a little extra letter spacing to make it more legible and clean. I use Inconsolata for all of the code on my site, and I chose it for the header because it was clean and easy to read.

In addition to being a monospaced typeface, the header is also relatively small compared to most sites. I wanted my name and “brand” to take a backseat to my writing. People come to my site to read, and I wanted to make sure that the body was emphasized more than anything else.

In order to draw attention away from the header and to the body, I decided to use a slab typeface called Museo Slab for post headlines. I had recently used a font very similar to Museo Slab called Arvo in another project, and it just so happened that Arvo was the default typeface in the Less theme for headlines. That decided it for me. I went with Museo Slab because it as a premium alternative to Arvo that is blocky with a bold serif.

I used Museo Slab to draw attention to the content, but the typeface for the body itself had to be extremely legible. I paired Museo Slab with it’s sister, Museo Sans set at 16px and a line height of 26px.

Colors

The main color scheme of Less is More is black, white, and blue. I use the same shade of blue that I used previously on my site (#1561A0).

The background is plain white and the text is plain black. Classic, clean, and legible was the idea here.

I also use some different shades of blues and grays for links and post dividers here and there. Nothing fancy on the color front.

Links

Link styles are important to me. I want links to stand out amongst regular text, but not interrupt the flow of reading.

Links in articles are blue (#1561A0 again) with a light gray bottom border. When hovered over, the blue text and the gray underline lighten slightly. I am using a CSS transition effect to make the color change as smooth as butter.

As you know, my blog has two post types: link posts and articles. Link post titles are blue, smaller than headlines, and are followed by a right arrow. Headlines for articles are larger and black. The date that rests below every headline acts as a permalink for that post.

Other Elements

Most of the other design elements of the site are pretty simple. Block quotes are indented, have a left border, and are set in a slightly smaller font size. Footnotes, tables, and code blocks are all pretty standard.

The original Less theme featured a circular, floating avatar image to the right of the header. I liked the look of this, but I felt that putting my face at the top of every page of my site was contradicting my ideals of content-first design. Besides, my picture is on the Colophon, and I think that’s plenty. Instead, I decided to use my signature lightning bolt logo floating to the right.

Come Take a Look

If you are reading this in your feed reader of choice, I encourage you to come on over and have a look at the new design. I am really proud of it, and I think that you will love it as well.

If you have any suggestions, questions, comments, or you see a problem with the site, feel free to shoot me an email.

Posted in: CMnet