Benjamin Charity

New design

January 14th 2011

It took almost two full years to finally finish a new look for my site. I say a new look rather than the new look because I went through several looks that never made it to development. Sometimes it can be insightful to see the path taken, so I've included some pictures at the end of this post of one of the designs I thankfully scratched.

I only had a few parameters in mind for this design:

  1. Minimal
  2. Simple colors
  3. Slick fonts
  4. Incredibly minimal posts list
  5. Focus on copy over design

Spinning wheel

The idea for the rotating home page came while chatting with @scottopherson about one of his recent projects Entry #3. I had been mentioning how I wanted to keep my site incredibly simple, but was a bit bored with the standard scrolling one-page sites. Then it occurred to us how sweet it might be if a website functioned the same way that his rotating clock did.

jQuery CSS3 Rotating Clock
The u-oh.me home page

The whole site is built in WordPress, so it is one of the most customized WordPress themes that I've ever made (right behind TheCampusStyle). Then, even more customization came into play because the rotating site worked very poorly on the iPhone. I basically had to do a full CSS reset and start again creating a simple vertical scrolling site.

As crazy as it sounds, the blog was the first three column layout that I have ever done. I have always opted for a two column layout, but in this instance I think that the three columns worked much better.

No Categories

Another big change was the decision to completely omit categories from my blog. I decided instead to go only with tag. With this setup, I of course needed to cut down on what tag I use so that they carry more weight; but again, cleaning everything up was a big part of this redesign.

When I decided to add the code snippets section of my site I actually needed to use categories to organize them without creating more tag in my main filter. As I add more code snippets I will eventually need a better navigation system for them like CSS-Tricks:

An accordion navigation system for code snippets.
Code snippets navigation on CSS-Tricks.com

No light-boxes or popups

In honor of keeping things minimalistic I opted out of using any light-boxes or popups anywhere on the site. They are used for just about everything lately so I decided I would avoid them in favor of simple scrollers.

Classic.

Well, enough from me. I hope you like the redesign/restructuring!