February 7, 2007

Happy Cog Redesign

After the announcement of the new Happy Cog Philadelphia office we knew we needed to go back and spruce up the Happy Cog site a bit. Well, we managed to steal some time here and there to put one together, and it’s now my pleasure to present the new Happy Cog website!

The design is very much one of necessity; we wanted to highlight not only our growing portfolio and give better representation of our speaking and publishing efforts, but we figured it was high time we had a proper way to announce Happy Cog doings. With two offices full of hard working Joes (and Janes), we have a lot more to talk about these days. We even have an RSS feed. I hear it’s all the rage.

A brand spankin' new Happy Cog website

On the visual side, I went with a very simple layout, topped by a vibrant visual of a watercolor wash (provided by friend and ALA illustrator Kevin Cornell) to set the palette and lead visitors through the site. The nav is a bit unconventional—and perhaps my favorite part of the site—serving as a strong masthead, mission statement, and flavor copy. It’s simple enough to serve as coherent navigation, but is creative enough to offer something more. Lastly, we edited down some of our portfolio to contain mostly recent work and to make way for the soon-to-be-live sites coming down the pike.

We are all very excited to get this online, and really jazzed about it. Designing for yourself, or your company, is often the hardest stuff to do, but I have to say, with a solid crew like this, the site came together surprisingly quickly. I’m responsible for the design of the site, Happy Cog Philly’s Dan Mall put together the gorgeous markup (and slick print styles), Mark Huot (also of HCP) migrated the new site over, and Zeldman directed the whole production while picking up the writing duties. But, all of the Cogs pitched in at different intervals with bits of help, production, and advice.

I’m very proud of the site and of all the talented people I get to work with these days. Thank you all; I’ll see you at the water cooler. Obviously, we tested this thing pretty thoroughly, but if anything is sparking or fizzing, feel free to speak up. When you’re done kicking the tires, drop by Zeldman’s post about the new digs and Dan’s write-up of the site’s smooth markup.

Happy Cog Philadelphia Open House!

For those in and around Philadelphia, we will be holding open house festivities next Thursday night. This event is special because we are celebrating the new Philly office and the launch of the Comhaltas redesign (mentioned in a previous European adventure). But that’s not all! We’ve invited a local Comhaltas chapter to come and help us christen the new site with some live Irish music! A good time promises to be had by all, and the Guinness will flow like… well, nothing quite flows like a Guinness. You can also try and take us to school on the office Wii. Bring it. The event is open to attend, just drop me a line and I will send you the details.

Commentary (76):

1. Eric Meyer says… feb 7, 2007 | 10:44 am

‘Tis a thing o’ beauty, laddie. Be proud.

2. Mark says… feb 7, 2007 | 10:46 am

Freaking awesome!!! Just gorgeous. Love that opening sentence BEING the navigation.

3. ManxStef says… feb 7, 2007 | 10:51 am

I really like that nav, it reinforces what you’re about every time you click on it, yet it’s simple enough to be functional without appearing awkward. Lovely!

4. Liz Danzico says… feb 7, 2007 | 11:03 am

Wow. I would have never thought of doing navigation this way. It totally works, and really shows off how Happy Cog does design and editorial with clarity and style. Nice work.

5. steve says… feb 7, 2007 | 11:07 am

Very nice layout, clean, clear and concise. Great work to the team!

6. Scott says… feb 7, 2007 | 11:07 am

Yes, the nav is great… and it’s sure to be something replicated by others.

7. Andrew says… feb 7, 2007 | 11:13 am

So much for conforming to web standards and making sure things validate… with the First try, I found a validation error. #branding { font-size: 12pt; font-weight: normal; text-align;center; … }

Nice redesign anyway! :)

8. Jason Santa Maria says… feb 7, 2007 | 11:19 am

Thanks for the kind words everyone!

Andrew: Relax man, we just launched less than an hour ago :D

Thanks for catching that! The problem was a semi-colon thinking it was a colon.

9. Andrew says… feb 7, 2007 | 11:25 am

http://www.happycog.com/accessibility/’s title tag is wrong. You know, you could hire me as a consultant to point stuff out like this, or you could double , hell maybe even triple check your work like they taught you in high school math.

I’m not trying to be an ass here, even though I’m coming off as one, but the entire web-design world looks up to you guys and mistakes like these shouldn’t be published by you, period.

10. Jason Santa Maria says… feb 7, 2007 | 11:30 am

Andrew: I appreciate you testing out our pages, but you are being an ass. Period. We are human just like you, and we make mistakes. Get over it.

11. Jacob Patton says… feb 7, 2007 | 11:51 am

I love the new site, especially the typography and the way the watercoloring creeps out beyond the masthead—congratulations!

Tell me, did Meg’s site inspire the sentence-as-navigation?

12. Jason Santa Maria says… feb 7, 2007 | 11:55 am

Jacob Patton: No, but her site did come up when we were discussing the new nav. We thought the idea was such a string visual and also a great way to simply state what we are all about. It was deceptively complicated to write something that needed to be so simple.

13. Christian Ready says… feb 7, 2007 | 12:21 pm

Jason, this is truly beautiful work. As to the mistakes, I think the rest of us are relieved to know that you guys are human as well. Magnificent job!

14. Jeff Croft says… feb 7, 2007 | 12:32 pm

Great work, Jason, Dan, Jeffrey, and everyone else involved. Beautiful site.

As for Andrew: anyone who validates someone else’s code for no good reason probably has way too much time on their hands. But if you must find mistakes in other people’s code, must you publicly berate them over the errors? Couldn’t you politely e-mail Jason or Dan?

And if you *do* insist on publicly berating others other their mistakes, there exists about a billion websites that make no effort at all towards web standards and best practices online. Perhaps they should be the target of your abuse, instead of sincere efforts by the design studio of the man who literally wrote the book on web standards?

Seriously — where do you get off ripping into people over one validation error when some of the biggest tech companies in the world have hundreds of errors on their sites?

Happy Cog is on your side, man. Lighten up.

15. Olav says… feb 7, 2007 | 12:36 pm

Wow, that’s definately one of the best designs I’ve ever seen. Love the navigation and type.

I’d love to see some posts on different design descisions you’ve made in the process. You know, the details. :)

16. Alberto says… feb 7, 2007 | 12:45 pm

Beautiful redesign! Congrats. According to Mr. Zeldman, WordPress was used for the News section and everything else is PHP includes on otherwise static pages. I wonder why you did not use a “cool” development platform (RoR, Django) or simply a modern CMS, such as Expression Engine.

17. Dan Boland says… feb 7, 2007 | 12:54 pm

Very nice!

18. Dan Mall says… feb 7, 2007 | 12:55 pm

@Alberto: Honestly, a CMS seemed like overkill for a site like this. There wasn’t a huge need to repurpose the content or store it in a database, so we decided on static pages. We’re all for appropriate solutions to appropriate problems, and this was the best approach for the job.

19. apartness says… feb 7, 2007 | 1:07 pm

Jacob: I hadn’t visited Meg’s site in a while, so hadn’t seen her redesign; we discovered her verbal navigation after coming up with the same idea ourselves.

We debated doing something else, but kept coming back to the sentence because it was the right solution.

20. Jared says… feb 7, 2007 | 1:11 pm

This looks great - the typography, the navigation, the watercoloring, everything. I know it’s hard to design for yourself or your company (I’m trying to find time to redesign both of my sites, as I’m really not happy with either), but you all pull it off with such finesse.

Looking forward to Boston!

21. Ian Muir says… feb 7, 2007 | 1:12 pm

Very nice, I’m a big fan of the sentence navigation. It’s funny because sites with a simple IA can often pose the biggest challenges for useful navigation.

Your photo on the About page is great.

22. Dan Wilkinson says… feb 7, 2007 | 1:20 pm

37 Signals did a Screens Around Town with some similar text navigation a while back. I like your take on this technique and think it fits your needs well.

Nice job!

(Now can we see the design that sucked?)

23. Jacob Patton says… feb 7, 2007 | 1:22 pm

Jason: I can understand just how hard it would be to write a sentence for the nav strap that’s short enough but has the right feel—I just tried doing it for my site ;-)

Apartness: Great minds sometimes do think alike, don’t they? Whether a coincidence like this or blatant imitation, sometimes a good design element is just a good design element!

Thanks again for the great work.

p.s. I’m interested in hearing your reasoning for nixing microformats, too.

24. Michael Hessling says… feb 7, 2007 | 1:31 pm

Dan goes into details about “why no microformats”.

25. Jason Santa Maria says… feb 7, 2007 | 1:36 pm

Dan Wilkinson:

(Now can we see the design that sucked?)

I don’t think so :D. In all seriousness, I wouldn’t call it a real “design”, it was my attempt to get us headed in a direction. I presented it (and prefaced it as such) knowing that it wasn’t right, but that it was a start, and that’s all we needed at the time. The only thing that really stuck from that first attempt was the nav concept, and even then, we only reworded it a little.

Jacob Patton:

p.s. I’m interested in hearing your reasoning for nixing microformats, too.

Dan posted a comment about that over on his site.

26. Kevin Tamura says… feb 7, 2007 | 1:39 pm

Very nice.

So I’m curious as to what the first design looked like from Jeffery’s comment:

His first effort sucked. (I was secretly relieved.)

27. apartness says… feb 7, 2007 | 1:41 pm
28. Andrew says… feb 7, 2007 | 1:45 pm

Mr. Croft: I second the fact that the site is indeed a nice site and deserves the utmost respect. However, Happy Cog is web standards, accessibility and best practices and work by them should, I think you would agree, reflect that. Publishing an error is tolerable, but an organization who’s CEO and founder wrote the book on these topics should conform to them.

As for the fact that “there exists about a billion websites that make no effort at all towards web standards and best practices online,” your missing one important fact— they didn’t write the book on it.

By publishing a site with errors, the efforts put forth by Mr. Zeldman and his team of “crusaders” is somewhat thwarted. Publicly “berating” them this time (which I must point out, that Mr. Santa Maria didn’t have to publish), will most likely mean that they won’t make the same mistake again, which obviously sets the bar at the correct position.


29. Dale Cruse says… feb 7, 2007 | 1:47 pm

The best just got better. Wow. Well done.

30. Alberto says… feb 7, 2007 | 1:47 pm

@Dan Mall: In my opinion a custom built CMS based on a web framework is not really overkilled in this case. I see three core content areas (portfolio/clients, news, events) where a database backed CMS could be very useful. I’m not a programmer but in my agency we’re building custom CMSes (with Rails or Django) in a matter of days. Django has already a beautiful automatic admin interface and you can concentrate on the front end of the site. The only problem with these solutions is that finding an affordable and reliable shared host is not so easy. But we have our server so this is not an issue.

31. Jason Santa Maria says… feb 7, 2007 | 1:56 pm

Andrew:

By publishing a site with errors, the efforts put forth by Mr. Zeldman and his team of “crusaders? is somewhat thwarted. Publicly “berating? them this time (which I must point out, that Mr. Santa Maria didn’t have to publish), will most likely mean that they won’t make the same mistake again, which obviously sets the bar at the correct position.

I published your comments because I believe in honest discourse here. It’s sad that you think you are doing anyone a service with this elitist idiocy, and I have to imagine that you are no treat to be around if you find the need to hold everyone up to such standards, all. the. time. We rigorously test and retest all of our work, and I’m sorry if you find that what we do isn’t good enough. I might feel worse if I was confident that you had never made a mistake in your life, but even your site has validation problems. The plain fact is, you have gained no respect here for your lack of etiquette, and have only served to embarrass yourself with your comments. Come down off your high horse and realize we all make mistakes.

32. Lee says… feb 7, 2007 | 2:03 pm

Jason, beautiful site, I especially like the watercolor masthead, gives it an organic/natural feel. The navigation bar is also great, as has been pointed out by everyone else.

I really feel like an ass bringing this up in light of Andrew’s tirade earlier, but when I tell you I noticed a teeny weeny mistake, it’s only to speak up “if anything is sparking or fizzing.” I was looking at the print preview of the design page, and on page two the first sentences of the paragraphs were running on top of the images. That’s all. I put up screenshot here. This is running Mozilla Firefox 1.5.0.9.

But again, let me bow down, beautiful site. Also happy to hear that you guys are in Philly, I live in near Rittenhouse myself.

Congrats again, and take it easy.

33. Jason Santa Maria says… feb 7, 2007 | 2:09 pm

Lee: Great catch! It seems to be something wacky with the pagination.

For the record, the only problems I had with Andrew’s comments were the way he presented them. Not the fact that we made a mistake, but that we are setting back the cause of standards by doing so. All of the errors he mentioned, and more we found ourselves, have been corrected thus far. Now, off to inspect that print bug.

I used to live right off of Rittenhouse Park! Are you coming to the open house next Thursday?

34. Andrew’s Third Grade Grammar Teacher says… feb 7, 2007 | 2:12 pm

Andrew, son, you misspelled “you’re” in your post.

…your missing one important fact…

Please proofread you’re work. Oops. Your work.

35. Kirk says… feb 7, 2007 | 2:15 pm

Outstanding.

36. Justin Kilcher says… feb 7, 2007 | 3:02 pm

Very nice! Im hoping to attend the open house, Im definately dropping you a line about it.

Show Happy Cog Philly what its liked to get worked in Wii Bowling :).

37. Ross Johnson says… feb 7, 2007 | 3:28 pm

Damn it, another design that reminds me I have much to learn and my abilities can grow.

Very very impressed, and angry ;-)

After all, if everyone sucked I would look much better. ;-)

38. Rodrigo says… feb 7, 2007 | 3:32 pm

Great work Jason! Very “in your style”. Lovin’ this, bloggin’ it :)

39. Kristofer Baxter says… feb 7, 2007 | 5:11 pm

Man, I really like that watercolor wash at the top.

But the thing that stands out the most to me is the writing. So many sites seem to push such heavy marketing speak to describe themselves. You guys avoided that and made something quite enjoyable to read.

40. yani says… feb 7, 2007 | 5:19 pm

Great redesign guys, excellent work!

41. Jim Renaud says… feb 7, 2007 | 6:04 pm

Congrats on the site! Hey I used to live near Rittenhouse too! At 21st and Market. I loved Rittenhouse Square especially at Christmas time with the light balls from the tree. If you are ever in Philly during Christmas check it out as I am sure JSM knows!

Back to the site. I love the line you guys are walking organizing and designing the site in a simple way but it’s not about being simple. The site has a depth of character to it that many of these “we do simple, clean sites” often miss. The illustration and color scheme is warm and the sites mix CSS and graphics very nicely. It’s hard at times to pull it off.

In any regards, I look forward to meeting you at SXSWi next month and get some bowling on!

42. George says… feb 7, 2007 | 6:09 pm

Congratualtions on the relaunch. I hope you are celebrating.

I must confess I’m not bowled over, but I like the approach of keeping it simple and letting the content do the talking, which it does.

I’m sure you are all glad to have it up there so well done.

43. Jason Santa Maria says… feb 7, 2007 | 6:10 pm

Jim Renaud: Thanks very much for the kind words! I took some photos of those Christmas light in Rittenhouse Park a few years ago. Unfortunately, this past Christmas they switched to some lame white lights. they really pale in comparison to the colored ball-lights.

Anyway, if you are still in the Philly area, you should swing by the open house next Thursday night. Drop me a line to get the details.

44. Kevin Barnett says… feb 7, 2007 | 7:11 pm

Well done on all fronts. I will say that in the bag of Happy Cog tricks, Mr. Cornell is your ace card. His illustrations elevate web sites from pixels and bits to something hard to convey in a digital world: organic love.

It’s too bad that your streak of perfection was ruined by a single validation error out of the box. At least you know who to hire for that “Validation Nazi” position ;-)

45. Bob Monsour says… feb 7, 2007 | 8:20 pm

I’m afraid that the “sentence branding” at the head is something worth stealing, er, I mean borrowing.

Georgeous job!

46. cpawl says… feb 8, 2007 | 12:54 am

I love the header image and the use of what seems to be your favorite color palette. The italic type is snoozeworthy, reminds me of a bad resume written in MS Word. Should of got Rob on the typography (or maybe you did). Congrats and here’s to happy coggin’ in philly.

Great work overall. Enjoy the webshine..


47. Blake Haswell says… feb 8, 2007 | 1:51 am

Hi, nice job on the design Jason!

How did you get the watercolours to blend so well with the background? I imagine they were painted on a white background, so I’m curious as to how you did it and made it look so smooth…

48. Matt says… feb 8, 2007 | 2:24 am

I’m shocked. So simple and yet so beautiful. Fantastic job! Thank you!

49. RonaldB says… feb 8, 2007 | 4:35 am

At first, I must say I was slightly underwhelmed by the redesign—until I started to pick it apart. Simple, elegant, visually appealing, great use of flexible yet consistent column layout: inspiring work.

50. Jason Santa Maria says… feb 8, 2007 | 7:35 am

cpawl:

I love the header image and the use of what seems to be your favorite color palette. The italic type is snoozeworthy, reminds me of a bad resume written in MS Word. Should of got Rob on the typography (or maybe you did). Congrats and here’s to happy coggin’ in philly.

I’ve been consciously trying to avoid using this sort of parchment-colored background on sites (because of its use here), but the site’s palette drifted that way. The original design’s palette was very different from the final design. The palette you see now was heavily derived from the first watercolor background I dropped in, I then got Kevin to whip up a few better ones with the palette I previously set.

As for the italic type, it depends on what platform you are on. If you are on a Mac, it looks authoritative and classic, if you are on a PC it does indeed border on a crappy MS Word resume. Such is the case for Windows screen type rendering. At least the people on Windows are used to seeing type that way. And, all the type/design was by me. Rob and I did go to the same school, ya know :D

Blake Haswell:

How did you get the watercolours to blend so well with the background? I imagine they were painted on a white background, so I’m curious as to how you did it and made it look so smooth…

Just a simple “Multiply” layer effect in Photoshop to drop out the white.

51. porcupine says… feb 8, 2007 | 7:51 am

Excellent work, congrats to everyone involved.

I love when modern companies are so open minded and they ‘re not afraid of adding color or following such a simple yet powerful navigation scheme.

Just a suggestion: couldn’t visited links be different than the not-visited?

52. byron says… feb 8, 2007 | 8:39 am

Really nice job Jason (and Happy Cog and Kevin). I’m a jerk, so I like to disable images, bump up the font size a couple hundred percent - but it still looks great.

My only complaint is that the layout is a little broken on my Commodore 64 (I know, I know there’s a 128 out there now).

53. Wayne says… feb 8, 2007 | 9:36 am

Call it a restructure not a redesign. Looks like you recycled elements from AListApart.

54. Jason Santa Maria says… feb 8, 2007 | 1:56 pm

Wayne:

Call it a restructure not a redesign. Looks like you recycled elements from AListApart.

Sorry, but I won’t. It is very much a redesign, from content to architecture to visuals. I didn’t borrow anything from A List Apart, this is a new design.

55. bearskinrug says… feb 8, 2007 | 2:11 pm

I just want to chime in here and say Stan deserves probably more credit for the header than I do - he asked for a couple of watercolor elements, and I put a couple together for him to play with; he essentially composed the image himself, which is most of the work!

Go Stan!

56. Hazel says… feb 8, 2007 | 2:20 pm

I’d call it a redesign, in the ‘Cog house style :)

57. Silus Grok says… feb 8, 2007 | 3:30 pm

Lovely, lovely redesign.

And it’s nice to see you guys aren’t perfect… wabi sabi is the way of the future.

:)

And Andrew: had you not been trying to capture the limelight, your (useful) error catching would have been better-done via e-mail.

No matter how hard you test, some errors make it through… it’s just how things work.

58. Rachel Maxim says… feb 8, 2007 | 3:35 pm

Very nice! I think the entire look of it is fresh. Great job.

59. Mayuresh says… feb 8, 2007 | 4:47 pm

Inspiring!

I’m no designer but I’m a sucker for well designed and above all, well thought out websites.

Well done.

60. Hamish M says… feb 8, 2007 | 10:13 pm

I must commend the excellent work of the Happy Cog team, You guys did a great job! You’re the kind of people a young designer like me looks up to.

And I just have to say, (from the footer)

XHTML and CSS keep us crispy in milk

Haha, I love that.

61. Malarkey says… feb 8, 2007 | 10:21 pm

Stan.

I’m up north of the border at Web Directions North. I wanted to let you know that words like ‘beautiful’ and ‘exquisite’ are being bandied around the hallways about Cog’s redesign.

:)

62. Jason Santa Maria says… feb 8, 2007 | 10:58 pm

Thanks to everyone again for the kind words! And Malarkey, that is good news indeed :D

63. 27 says… feb 9, 2007 | 7:31 am

It’s been said already, but I love the masthead copy serving as the navigation.

64. Leonardo Melendez says… feb 9, 2007 | 1:25 pm

Slick, simplistic, effective.

We likes it … the precious.

65. Kasra says… feb 9, 2007 | 9:04 pm

Damn, you’re good! Awesome job.

66. M@estorm says… feb 10, 2007 | 11:53 am

Wow! This is nice redesign! Validity is too OK.

67. Pete says… feb 10, 2007 | 1:52 pm

Love it. Smart layout. Navigation reminds me of edgeofmyseat.com. The watercolor touch is beautiful. I knew you guys were in the process of a redesign. What a good one.

Hope to make it to ALA Boston. Take care.

68. Neil Kelty says… feb 11, 2007 | 11:32 am

Looks pretty good - especially the way you’ve set up the columns inside each of the pages (erm…publish is gorgeous). I just hope your “sentance navigation” doesn’t set off a ripple effect with people using (wait, misusing) the idea. Using and idea for inspiration is one thing, misusing it is another.

Off topic and (rehtorical?): Does anyone else only watch this preview box when commenting, or am I the only one?

69. steve says… feb 13, 2007 | 1:41 am

Incredible as always… Why is it every time I am trying to roll out a new site - I see something new from this camp and I hate everything I just did?

I wish I had a client base that would understand “web standards” and not keep demanding “flashy” sites. I fight all I can, but at some point I have to pay the mortgage…

Neil Kelty says…
Does anyone else only watch this preview box when commenting, or am I the only one?

Thanks for making me look! ;P

70. Angelo says… feb 13, 2007 | 4:52 pm

I like the new design. I’m a fan of getting away from the ‘blog’ feel for design sites; we can do better!

Also, now I feel super un-original for my homepage. Thanks a lot.

:-P

71. Tim says… feb 15, 2007 | 12:48 am

A new benchmark, congrats!

72. Jauhari says… feb 15, 2007 | 2:02 am

The New Design is very nicely look and easy interface also contain beautiful color.

I like it

73. Aaron says… feb 16, 2007 | 8:15 am

Congrats on the design Jason, everything is really well thought out and well designed. Just one quick question concerning your comments above:

If you are on a Mac, it looks authoritative and classic, if you are on a PC it does indeed border on a crappy MS Word resume.

When designing, are you aiming for people using Macs or do you design for all platforms / browsers? Are(n’t) there better font / size combinations you could have used so that it didn’t border on the crappy Word resume look on platforms other than a Mac?

74. Scott says… feb 17, 2007 | 7:51 am

Jason and gang.… lovely site. Fantasticly gorgeous.

While I’m a bit disappointed in some of the tone in the responses of this thread, I guess it’s the price you pay when you’re exceedingly good at what you do - gives people an opportunity to take a crack at you. Hope you don’t let it get you down, you did a rather bang up job. It’s quite a marvelous and clever navigation structure.

As for Andrew’s Third Grade Grammar Teacher.… brilliant! Got a good chuckle out of your comment.

75. RR Anderson says… feb 19, 2007 | 8:45 pm

I believe in this redesign. Go Hyper Team!

76. Seth Aldridge says… feb 25, 2007 | 4:52 pm

It’s not every day that you see a design that makes you completely rethink how you work, but this design did just that. It takes what every site needs and presents it in a way that is easy to understand and shows how creative the company really is. I look at the site at least once a day and still can’t get over the genus navigation. That is by far my favorite part. I’m waiting to see how long it takes people to rip it off. My guess is that it is already happening. :)