Welcome to The Art of Manliness Redesign

by Brett on July 5, 2009 · 39 comments

in Blog

I’m sure many of you noticed that The Art of Manliness was down for maintenance this weekend. In between scarfing down burgers and watching fireworks, we were busy rolling out the redesign of the site. Welcome to AoM 2.o.

I’ve been wanting to redesign the site for awhile now. When I first started AoM back in 2008, I did the design myself. I thought it was pretty good for a law student who had a few months of HTML under his belt, but I knew it could have been better. So I decided to call in long time AoM reader and bad-a web designer, Eric Granata to help me give Art of Manliness a facelift. Eric did a fantastic job. He’s a talented and smart designer who had the ethos and feel of Art of Manliness down pat and was able to deliver us a redesign that knocked our socks off. If you’re looking for a graphic/web designer, definitely check out Eric. I wholeheartedly recommend him. Thanks, Eric!

So, what’s new?  Here’s a quick rundown:

  • Simplified layout. We tried to make things simpler and cleaner looking.  We got rid of the magazine style layout and replaced it with a simple chronological layout like you see on most blogs. At the top we put a featured post rotator where we can put some of our favorite posts front and center. Underneath that you’ll find a list of posts in chronological order. Much easier on the eyes, if I do say so myself. We’ve also moved to just one sidebar column instead of two to further clean up the design.
  • Better Navigation. We’ve done some things to improve navigation on the site. At the top we’ve added a nav bar with all our main categories. If you’re just interested in a particular subject, just click on a corresponding link at the top and enjoy the archives from that category. We’ve also included a tab box in the sidebar where you can easily see our most popular and most recent articles. Finally, on each individual post, we’ve included links at the bottom that  easily let you navigate to the previous or next post and also related posts.
  • Vintage design. Art of Manliness is known for it’s old timey manliness vibe. We upped it a bit with some nice visual flourishes like the manly wood paneling on the sides and top and the cool vintage engravings in the sidebar.
  • Barbershop Locator and Community Buttons. We wanted to make our famous Barbershop locator easier to find, so we had Eric whip up a cool looking button for the sidebar. Also, he made a nice looking button for our manly community section on the site. Just one click and you’re interacting with thousands of men who are interested in manning up.
  • Featured Video. We’ve been doing more how-to videos, and we wanted a place where readers could have easy access to them, so we made a featured video square in the sidebar. Anytime we put out a new video, look for it there.
  • Gravatars in the comments. These were added to give more of a community feel to the comments.  Basically, it’s just a little photo or picture next to each comment. You can go to Gravatar.com to sign up for a free account (you just give them your email, not anything personal) and add a simple photo. You don’t have to sign up for a Gravatar in order to leave a comment. If you leave a comment without a gravatar, a default John Sullivan icon will be left.

For those of you who blog, we’re now using the Thesis WordPress Theme. Check it out. Very easy to use and customize and it’s great for SEO.

That’s pretty much it. We’ll be tweaking stuff over the next few days and adding some finishing touches. Let us know what you think!

{ 38 comments… read them below or add one }

1 Andrew Galasetti July 5, 2009 at 10:25 pm

Hey Brett,

Love the design!! It’s so much cleaner and easier to navigate.

Congrats on it!


2 Shaun July 5, 2009 at 10:29 pm

Looks good…now let’s see if this Gravatar thing works…

3 Shaun July 5, 2009 at 10:30 pm

Yay it works! Great job guys!

4 James NomadRip July 5, 2009 at 10:35 pm

Looks great!

5 Alex Chebykin July 6, 2009 at 12:20 am

Great job on the site overhaul. I like the wooden paneling in the background, gives it a nice manly vibe.

6 Craig July 6, 2009 at 12:37 am

The site looks killer!

7 Bernie Franks July 6, 2009 at 2:24 am

It’s probably just my computer, but the new design appears a bit wonky. The right column with all the ads and whatnot kind of dominates each page by overflowing the edge into the red and also overflowing on top of the content to the left.

I can however comment on the only thing that appears correct, and that’s the new banner/link list, which both look swell.

8 Marko Saric July 6, 2009 at 2:28 am

Wow great redesign… keep up the good work! Thesis is really a great Wordpress theme, I use it on my blog as well.

9 TheManRevolution July 6, 2009 at 2:56 am

Great redesign guys. Looks and functions a lot better than the last one. It’s a helluva lot easier to navigate as well!

10 Hutch July 6, 2009 at 5:50 am

Looks great Brett, keep up the great work.

11 Mgnbtsn July 6, 2009 at 8:42 am

I am new to AoM and I love the new design.I am still checking it out and find it easier to navigate.My only problem is that I can’t view pictures.All I see is the frame with the red ‘x’.Can anyone offer some help here?I’d appreciate it.

12 Tim Buck July 6, 2009 at 8:50 am

Hey Brett,
I’m using the new firefox 3.5 and there seems to be lots of stuff missing. It could be my java (which would be a shame, it’s a company machine and I can’t upgrade the java on it). The banner at the top is gone. I like the idea of “simplified” (I’m always a fan of K.I.S.S – Keep it simple stupid). Internet explorer 6 seems to have problems also (lot’s of little white boxes with red x’s in them).

13 Brett July 6, 2009 at 9:17 am

Yeah, we had a mishap with the images this morning, but things should be back online.

14 Tim Buck July 6, 2009 at 10:50 am

The new site looks fantastic!!!

15 Torrey July 6, 2009 at 2:06 pm

Way to go on the new look. Much easier to navigate. Thanks and look forward to more “manliness”!

16 Greg Go July 6, 2009 at 3:58 pm

Love the simplified look and feel! Thanks for making it easier on us. :)

17 Dennard July 6, 2009 at 10:07 pm

Thumbs up on the new design. Everything looks great.

18 Israel July 7, 2009 at 4:57 pm

New design is cool. Just 2 things though:

1. The top logo banner is too tall. You can shrink that a bit and bring the content up more instead of having such a large masthead/header (consider it since you have that large 728×90 banner above it, it pushes your content down too much in my opinion).

2. The main featured glider is too tall as well. I know you want to display the featured content as prominently as possible, but it’s just too massive. Shortening it and the masthead will allow folks to see a few more of your articles and content (unless your analytics reports tell you that most of your readers have a screen resolution size that makes all this mute). It’s also hard to tell or see the arrows on the featured content glider. Maybe make them stand out a bit more.

Now, if the above impressions were what you intended then perfect. Otherwise, I think it would be less IN YOUR FACE (unless that’s what you want).

19 Greg Molyneux July 7, 2009 at 5:12 pm

The manliness meter just rose several points. Great work on the new design Eric.

20 Cory Huff July 7, 2009 at 5:54 pm

Nice work Brett & Eric. I like the new site, though I miss the old look a little bit – call me nostalgic.

Brett – I’ve been reading via RSS reader for a while. Have you thought of adding RSS ads for monetization?

21 Chris McDonald July 7, 2009 at 6:19 pm

Hate to be a buzzkill but the Barbershop Locator button doesn’t seem to work. Leads to a broken link. Visually the new looks is awesome. Great work!

22 Sage Media July 7, 2009 at 6:53 pm

Looking good, guys!

23 Playstead July 7, 2009 at 7:04 pm

The redesign looks great … and manly. Nice work.

24 Ted Carnahan July 7, 2009 at 9:01 pm

I like the redesign, but want to suggest that eliminating autoplay on video ads on the site will make me a lot more interested in clicking through instead of just reading the RSS feed. I opened two or three tabs and got simultaneous audio from three different commercials.

25 Paul July 7, 2009 at 9:11 pm

This new design doesn’t scale well to widescreens – http://gear.dyndns.org/~paulgear/images/art-of-manliness.png

26 Ammon July 7, 2009 at 9:53 pm

Kudos on a simple, well designed layout and re-design! I especially like the vintage art throughout, it adds to the overall character of your site without being a distraction.

27 Herbert July 7, 2009 at 11:28 pm

Loving the new layout, and good to see the vintage photos stuck around. I can’t put my finger on why, but I just really like it.

28 Marcus July 8, 2009 at 1:09 am

Looks excellent. Well done.

29 Raghu Siddarth July 8, 2009 at 1:14 am

are you not going to change the favicon?…I believe the one up now is some kind of default one.

30 Brett July 8, 2009 at 9:00 am

Thanks for the feedback everyone!

@ Paul- I’ll take a look into the widescreen problem.

31 Kevin Cox July 8, 2009 at 11:31 am

Very nice!

32 Brett July 8, 2009 at 12:27 pm


The autoplaying ads only appear the first time you visit the site and then you’ll never see them again.

33 jason July 8, 2009 at 12:36 pm

nice job keep up the excellent work!

34 thehuhman July 10, 2009 at 8:43 am

Brett & Kate (and Eric),
The “re-design” is getting better all the time!

Thank you!

35 Frank Schnyder July 10, 2009 at 1:17 pm

Funny that this was the 200th AOM email I received, too!

Thank you so much also for putting the subject in the subject line. It’s been bugging me for months and I’ve been meaning to say something. It always says the subject is The Art of Manliness. Duh. Now it’s going to be MUCH easier to find a specific article to go back to. Very pleased!

36 focus15 July 13, 2009 at 9:11 am

Shortening it and the masthead will allow folks to see a few more of your articles and content

37 Matt Schonert July 15, 2009 at 9:35 am

Looks great, but I have one word to say about the audio/video ads: No.

38 Dan February 27, 2010 at 6:22 am

While in the Army in the 60′s the sargeants in basic training told us that Patton was set up by his own troops and killed in a jeep accident.

Leave a Comment

Previous post:

Next post:

Site Meter