andy rutledge

andy rutledge

Andy Rutledge has been an inspiration for me ever since I focused my attention on web standards. Over that time, I’ve seen him do more than a couple redesigns, and the latest incarnation is one of the best. One of the things that I admire most about his redesigns is the dutiful attention to keeping all the content you’re used to seeing, adding and removing little, even though the visual updates range from subtle to extreme.

type as texture

Detail shot of typography being used as a texture
An underused technique, the small blocks of script help create an aesthetic feel, even though their verbiage is somewhat erroneous. In tandem with other graphic elements, this creates the overall mood for the site, both professional and sharp. The icing on the cake is that this mirrors Andy’s writing style and topic choice. Reading the same content in Trebuchet just wouldn’t be the same.

left to right

Detail shot of size being used to visually distinguish time
The main page boasts the newest three articles in prime real estate. As you move from left to right, the content gets smaller as it becomes older. I’m a bit torn on this, because I love the visual feedback of age, but feel that it creates some awkward visual balance issues.

…visual feedback of age

break it up

Detail shot of a blockquote
Many of us fall into the trap of writing lengthy articles or blog posts, and many times they don’t invite much for imagery. Andy is no exception but makes excellent use of summaries, pull-quotes, and headlines to create visual interest within his writings. The technique to do so is pretty simple, and improves the scanning capacity of content as well.

Detail shot of a headline


It’s hard to criticize much on the site, but there are a few sections that could use a bit more attention.

The footer seems ripe for a bit more character, as the grey background color tends to emphasize it from the rest of the lower content, and I’d love to see more of the elements from the masthead used here.

Detail shot of the questionable hand written typeface

The other thing that sticks out to me is the type choice within the graphic examples used in some points. While it’s aiming to feel hand written it doesn’t quite jive with the rest of the design. Perhaps sticking to Georgia or Helvetica here would produce a more consistent feel.


Minor nit picky things aside, Andy’s latest redesign has some great typographic techniques to examine, I’m also curious to see how he’ll redesign the page for his podcast, The DesignView Show, which I highly recommend. But now I’ve rambled on enough, over to you.

  1. Kevin Zak

    This is a wonderful design. On the main page, I think either a color gradient for each article or a font size reduction alone would suffice. Using both makes the technique seem overdone and redundant. I would probably opt for removing the color change and keeping the size reduction.

    For some reason the first image is the same as the second on the homepage. The first time I loaded it, I saw the appropriate image for the first article. All subsequent page loads, it was replaced with the second image. I’m not sure if it is a coding issue or if my browser is at fault, but it looks a bit odd.

    I’m not fond of the footer. The tab system on the bottom looks like hell on an otherwise awesome design. There either needs to be some padding for the text on the active tab or (better yet) it needs to be redone completely.

    Other than those two things I (shockingly) have nothing to complain about. It is a great design in terms of typography, usability, and overall feel. Not only is the design impressive, but Andy’s posts are some of the most well-written blog publications I’ve seen in a long time. Very nice choice of sites, Kyle.

  2. Zinni

    I too am a huge fan of this site, the only comment I can make about the redesign is the removal of the pullquotes that broke the grid structure. While not necessarily a bad decision to put them within the body of the content, I always thought that the breaking of the grid was a great way to add interest visually.

    Overall a solid redesign…

  3. Benek

    I really like the design. I agree with Kevin Zak that probably just the size change and not also text color would be enough of a visual clue for age.

    I also completely agree with your one criticism about the brown handwriting text. They stick out like a sore thumb and just look silly and unprofessional compared to the great attention to detail of the rest of the design.

  4. thumbnail free checks group xxx

    xxx free downloads group thumbnail games thumbnail xxx group free