Overview

In the fall of 2011, I decided a redesign was in order for my personal site. I had a few reasons for this. One, I needed to update the look of the site to better reflect my design ability. And two, I wanted to recommit myself to blogging and being actively engaged online. With a new design, I realized a proper logo was also needed, so I started there.

Logo

I began by sketching out several logo concepts in my notebook. With a name like “Bent on Creation,” I was making associations to earth, a sunrise, a tree, a starburst/big bang and industrial-era inventions. But none of these fit well.

I ended up going with a simpler abstract shape: two overlapping diamonds. This shape better reflected me, personally. As a web designer and developer, I work in the overlap of two disciplines. The outer portions of the diamond shapes form angle brackets, hinting at HTML and underscoring my web focus. The “b/c” is set in American Typewriter, which has a nostalgic, mechanical feel that reminded me of monospaced fonts (another hint at coding).

Design

I wanted a design that focused on content, incorporated fresh typography and used a color scheme I hadn’t worked with previously. I wanted a layout that was balanced and maintained good vertical flow.

I thought the basic layout of the original site was working well, so I kept it the same: one main column on the left, two smaller sidebar columns on the right. Logo centered at top of page and navigation elements to the right and left of it.

I used a 6px vertical baseline grid to maintain vertical rhythm throughout the layout. All type is set to this grid, as well as most other key elements.

I chose Rooney Web for body copy and Franklin Gothic for headlines, navigation and meta elements, both served up by Typekit. I used Gedy Rivera’s social media icons for the Dribbble, Github and LinkedIn links.

Responsiveness

From the beginning, I intended to make the site design responsive. With the original three-column layout already set, I worked down from there to the smallest layout. I set breakpoints that would allow the sidebar columns to stack at the first breakpoint, then drop below the main content area after that. I decided not to use flexible widths on containers because I wanted to ensure optimal text line length for reading. I decided not to go any wider than a 960px layout at the largest because text line lengths would be much longer than recommended, with no added benefits that I could see.

Code

I coded the design in HTML5, using HTML5Shim for IE7 and IE8. Since this is my personal site with an audience skewed toward modern browser usage, and since time was limited, I opted for the Universal IE6 CSS stylesheet as a baseline stylesheet for IE6 users.

To maintain the 6px vertical baseline grid I used in the Photoshop comp, I created a repeating transparent png with 6px vertical rules that overlaid my web layout until the CSS work was finished. I finished up by creating a basic WordPress theme out of the design with two widget areas for the sidebar content.

Final Analysis

After a month or so, I’m still fairly satisfied with the new logo and design. I’m very happy with the responsive layout and intend to improve it for smaller viewports (specifically, the navigation). There are a few site sections and additional sidebar information yet to be developed, but those will come in time. I had hoped to write a small Rails CMS to run the site, but couldn’t fit it in the schedule. WordPress already does everything I need and is easy to install and create themes for.

Anyone else notice a problem in the new Gmail, with the Google Docs gadget not showing up properly in Firefox?

Here’s a quick fix that worked for me, using the awesome Stylish extension.

1. Install Stylish if you haven’t already

2. Go to Gmail, in the bottom left-hand corner, click the Stylish icon > Write new style > For mail.google.com…

3. Add a name. Then, inside the brackets, add the following:

 #remote_iframe_0 { height:160px !important; }

So it looks like this:

4. Save the style, et voilà!

Problem is, if you’re using Pow, you’re going to have trouble hitting plain-old Apache for those PHP or static sites you are working on.

In my case, I’m working on multiple front-end development projects at once, and they often start in plain HTML/CSS. But to get them working with web font services, like Typekit, and to be able to do testing on other platforms (e.g. Windows through a virtual machine), I need them served up by a web server.

So what can be done? I did some googling and came across Ted Kulp’s post on this very issue.

Basically, you switch Apache to listen on port 8080, and then create a config.ru file somewhere that acts as a proxy to Apache.

I took his code and modified it slightly to fit my own needs.

#http://tedkulp.com/using-pow-for-php-or-anything-on-apache/
require "net/http"
class ProxyApp
  def call(env)
    begin
      request = Rack::Request.new(env)
      headers = {}
      dir = ""
      env.each do |key, value|
        if key =~ /^http_(.*)/i
          headers[$1] = value
        end

        if key == "HTTP_HOST"
          dir = value.chomp(".dev")
        end

      end
      http = Net::HTTP.new("localhost", 8080)
      http.start do |http|
        response = http.send_request(request.request_method, '/' + dir + '/' + request.fullpath, request.body.read, headers)
        [response.code, response.to_hash, [response.body]]
      end
      rescue Errno::ECONNREFUSED
      [500, {}, ["Server is down, try $ sudo apachectl start"]]
    end
  end
end
run ProxyApp.new

I put this config.ru file in my Apache document root (/Library/WebServer/Documents). Then, whenever I start work on a project, I drop the folder in that directory.

The last part (a little tricky) is that I create a symlink in my .pow directory named after whatever folder I just dropped in the Apache document root, but the symlink points to /Library/WebServer/Documents. For example, if my project folder was called “newsite” I would create a symlink called “newsite” in .pow that points to /Library/WebServer/Documents. Then, when Pow receives requests for newsite.dev, it sees the symlink pointing to /Library/WebServer/Documents, finds the config.ru file there and that file acts as the proxy to Apache, which serves up the files in the folder I dropped into Apache’s document root.

Trust me, this is way easier than managing Apache conf and /etc/hosts entries.