New Site Design

Posted by Michael | Comments ↓

Time for something new

Building a new theme for this website, has been one of my goals for a long time. The blog began with a theme I found while looking at WordPress’s free themes, it never satisfied me. So I switched to the 2012 theme a few months ago. I’ve never really promoted the site and no one, but apparently spam bots, visit regularly. So I knew I had time to work on something nice.

Inspiration

I’ve honestly been working on this theme for a while, starting and stopping, never being pleased. My goals were to create something clean, easy to read and modern.

Someone sent me a link to David Simon’s new site sometime last year. He created the awesome show The Wire. When I first saw it, I was drawn to the dark colors and the white background for text . I like color, and use it often when building websites for people, but if I’m building a site for myself I wanted something dark and simple.

Color

Grey is my favorite color, which I guess is weird. But something about the color has always attracted me. It’s neutrality, and simplicity, a mix of black and white. So I knew I wanted something with shades of grey in it.

As you can see in these notebook sketches, I started with the background. I wanted a harsh gradient that slowly disappeared responsively, as the device width changed. Figuring out how to implement this, without images, took a long time.

I tried wrapping the page in three, divs that stepped down in size, but that didn’t seem efficient and I knew there would be a way to do it with CSS. A few months ago, I stumbled on Lea Verou’s 24Ways article on CSS Patterns. Jackpot. Using her article as a starting point I added the background with stops at certain points.
Background gradient code in SCSS and Compass:

  background: $darkgrey;
  @include background-image(
      linear-gradient(left, 
          $darkgrey 33%, 
          $midgrey 33%,
          $midgrey 66%, 
          $lightgrey 66%),
      linear-gradient(left, 
          $lightgrey 33%, 
          $midgrey 33%,
          $midgrey 66%, 
          $darkgrey 66%));
  background-size: 21%;
  background-repeat: repeat-y, repeat-y;
  background-position: left, right;

Basically, I have two mirrored gradient blocks that come in from the left and right. When the viewport get’s smaller, the gradient stripes fall behind the main content block, creating a unique pattern on the left and right. It’s sort of complex for a background, but it get’s the job done.

Also thanks to Hampton Catlin, creator of sass, and the team at Compass. I’ve been using sass for about six or seven months. It completely changed the way I write css. The variables, mixins and everything else save a ton of time.

Logo

The logo came together by accident, kind of . I found the logo font, Liberator, on LostType. When I first saw it I knew I wanted to use it for my logo. The font is retro and bold, I modified it slightly in the logo block. The squiggly line was supposed to be just a squiggly line, but I then thought that looks like a robot, I animated the logo to chomp on hover. If you’re on a desktop, hover over the logo…I’ll wait.  The animation is a simple css3 hover animation, I hope to improve it in the future.

The other fonts are some I matched on Typecast. I love the way Open Sans looks on retina displays, it’s matched with Muli a really good reading font. I feel that they compliment each other well and offer a good contrast with the blocky Liberator Font.

Reponsiveness

Making the site beautiful and readable on every device was one of my main goals. I wanted the logo to resize and still chomp on all viewports. I haven’t quite accomplished the chomping on mobile devices at the smallest size. But I plan to continue working on it.

To create the chomping effect I used two images(top half/bottom half). Those images are absolutely positioned from the top of the menu. The menu buttons shift from both sides of the logo to the right side on mobile.