Happy Cog redesigns, 2/7/2007

Mr Mancini, my high school science teacher, grew a mustache when he began to dye his grey hair black. The dye job progressed by degrees. He was a little grey, then less grey. Nobody noticed; his mustache mesmerized us.

On the day Mr Mancini went all black, he shaved his mustache. All we noticed when he bounced into the classroom was his big, smooth-shaven face. He had to tell us that he’d changed his hair. As a man, he wanted to protect the secret of his vanity, but as a science teacher he felt morally obliged to explain the psychological trick he’d played on us.

Good redesigns work like my teacher’s hair. They are always an opportunity to fix or change a lot of things that aren’t obvious on the pretty new surface. Happy Cog has just redesigned.

It started with a sentence

The new version of Happy Cog’s website had to better convey how our agency’s business has diversified. We are first and always designers for hire. We are also publishers, whose micro-empire is expanding. And we have lately co-founded a high-profile event series.

The old site told the “design for hire” story. The redesign had to tell all three stories.

Usually this would be done by creating a navigation bar with labels like “We design,” “We publish,” and “We present.” But labels don’t connect; they separate. Navigation labels could point to three separate story-lines, but they would not make the case that ours was a holistic enterprise—that our conference, our publications, and our client services business were one.

For some time, I’ve been thinking about the primacy of words in the user interface. A sentence, I felt, could present our three businesses, and by its very nature, connect them in the reader’s mind.

The primary navigation interface had to be a sentence. And so it is.

The drawing board

One sentence led to another. I found it easy to write the new Happy Cog and easy to spin an organic architecture out of the opening sentence. But hell if I could design the thing.

I’d always designed Happy Cog; it was my baby; but every time I opened Photoshop or took crayon to paper, the results were a muddle. Maybe it was because my brain was barreling along on architecture and copy. Or maybe there are only so many times a single designer can take a new look at the same site.

I tapped Jason Santa Maria (or maybe he tapped me). Jason has one of the keenest minds and two of the freshest eyes in the business. He makes legibility beautiful. What the Ramones did with three chords, he does with two system fonts. His designs always spring from the user and the brand proposition.

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

A month later, Jason came back with pretty much the design you now see at happycog.com. (I rejoiced.) The painting at the top, which makes the design, is by A List Apart illustrator Kevin Cornell.

The group

We fleshed out all the pages in Photoshop or as “copy wireframes” and then called on Happy Cog’s Daniel Mall to create lean, semantic markup, beautifully optimized style sheets, and all required PHP and JavaScript contraptions. Dan also set up the WordPress blog.

Dan is as good as anyone I’ve worked with. He is super-fast yet also deeply thoughtful. We spent many a mini-session debating such things as whether the About page and its subsidiaries should include microformats. We decided not.

Mark Huot migrated the new site, a job that involved considerable strategy as well as expertise. Rob Weychert contributed additional art direction and Jon Aldinger offered additional programming.

The redesign tells our story and gives us room to breathe and grow. It is also (I think) quite pretty and thoroughly appropriate. We hope you like it, and we invite you to subscribe to Happy Cog’s RSS feed to stay abreast of all matters Coggish.

Other perspectives

Jason Santa Maria and Daniel Mall have written their perspectives on the Happy Cog redesign. They’re swell! Jason’s writeup includes information about the Happy Cog Philadelphia Open House, featuring the live music of Comhaltas. If you’re around, please visit.

[tags]happycog, design, redesigns, webdesign, jasonsantamaria, danielmall, danmall, zeldman[/tags]

98 thoughts on “Happy Cog redesigns, 2/7/2007

  1. Wow, pretty!

    Don’t know if this is the right place for this, but under “Why Happy Cog” a line says “increasesd accessibility”.

    And I thought I was done with copy-editing :-P

  2. Similar story: my dad used to wear a full beard and mustache. One day he decided to shave the beard.. All the next week people asked him when he’d grown a mustache.

  3. Awesome!!! I like it a lot!

    A well deserved facelift to the site.

    Hey Jeff, would you mind disclosing your CMS? WordPress?

    Congratulations!

  4. We use WordPress for the News section (also seen on the front page) and the RSS feed.

    Everything else is PHP includes on otherwise static pages. For real.

    And it works so well mainly because Daniel Mall is so good and so thorough.

  5. I really like the design, and the write-up above. One small criticism though is that the contact page doesn’t have any contact details! Yeah there’s the downloadable ‘project planner’ thing, but what if I just wanted to ‘phone you? Or get your address to mail you a payment?

    In terms of usability, if I click on Contact, that’s what I want. Simple, straightforward contact information. Not only is it not here, I couldn’t find it anywhere on the site.

  6. Hello,

    A good design, definitely. But speaking of increased accessibility, I dare ask a simple question: why on Earth the site uses font-size:62.5% and then all of a sudden all font-sizes are in pixels ?

  7. One small criticism though is that the contact page doesn’t have any contact details!

    That is a fair point but it’s always been that way, and it’s part of a strategy.

    We receive many more queries than we can handle. (I’m not bragging, it’s just what happens if you stay in business long enough and treat your clients like people.) So instead of needing to lure as many clients as possible — which is the goal of most business sites — ours needs to filter potential clients, so that don’t hear from organizations for whom we are not suited anyway.

    Obscuring certain kinds of contact info costs us some business, I’m sure. But look at the flip side. Our site asks potential clients to do a little something for us: namely, download and read a document, and fill in information. There are clients who won’t do that, and that’s fine — but they probably wouldn’t be good clients for us.

    Clients who are willing to meet us halfway are demonstrating willingness to work with us, rather than the kind of autocratic personality that dooms projects to failure. They are showing us they’re our kinds of people.

    People too busy to fill in a project planner will always be too busy. They’ll be too busy to give us approvals, too busy to get us logos, too busy to be the kind of collaborative partners we seek.

    So that’s why.

    Plus, if we post phone numbers and addresses like most agencies do, we’ll be barraged by head hunters and corporate raiders (not to mention vendors from print shops, etc.) Companies you have heard of are constantly trying to get Happy Cog’s people to work for them. I say, if you want to try to steal our people, do it the old-fashioned way, over drinks at SXSW. :)

    We already get so much spam (as I’m sure you do, too), we don’t want to add phone spam and snail-mail spam to the mix. So we obscure certain contact data to cut off unwanted communication and invite potential partnerships. Make sense?

  8. Great question, Dimo. The reasons are twofold. First, if you check the IE stylesheet, all of the font-sizes are specified in ems, since IE doesn’t resize pixels. Second, specifying font-size: 62.5%; allows us to specify ems in round numbers. At that measurement, 1 em = 10 pixels. Hope that helps!

  9. Gorgeous and clean, me likes it. My only nitpick has to do with “Why Happy Cog?” which is a question that can be interpreted two ways. I think because you (Happy Cog, not Zeldman) have an unconventional name, my first interpretation of “Why Happy Cog?” is “What is a ‘happy cog’ and why does this business carry that name?” The second interpretation is “Why should we do business with Happy Cog?” That’s the interpretation you use, and yet I’d argue that for most people it’s not the one they expect. How to fix? I dunno…you could change it to “Why Use Happy Cog?” but that’s dorky. I think the best solution would be to add a short explanation of the story behind your name right up front, and then go on with what you’ve got there already.

  10. Thank you for your answer, Dan, I admit I didn’t check the IE stylesheet since I expected it to contain only minor appearance fixes. The purpose of using 62.5% is clear, however, would you explain what is the benefit of using pixels for FF and em’s for IE? Did any problems arise with em’s in Firefox or Opera? Thanks in advance.

  11. No problem, Dimo. I’ve always had better luck with pixels than other types of units. Ems and percentages inherit, which sometimes make it a pain to specify. For instance, if you have a styles like li { font-size: 2em; } p { font-size: 1em; }, then if you have a paragraph inside the list item, the paragraph inherits the 2em from the list item on top of the 1em that it’s supposed to be. Pixels, on the other hand, remain consistent. Since text size in pixels scale in every browser except IE, it’s usually more convenient for me to use pixels where I can. At the end of the day, it usually just a matter of preference.

  12. I certainly hope I am not being a nuisance with our little discussion about em’s and pixels, moreover it seems like returning back to basics and this website is not the place to do that.

    I certainly agree with everything you said, Dan, it’s just that I am still puzzled and here is why.

    When you specify the font-sizes in em’s for Internet Explorer, you still have to solve the style inheritance issue, that you mentioned, and if you solve it for Internet Explorer, then you have solved it for all browsers. So for me it seems that this strategy is like doing a thing both the easy way and the hard way, when you can just do it once the hard way :)

    Thank you for your attention and quick responses.

    By the way, see you on the Event Apart :)

    Best regards,
    Dimo

  13. Great question about microformats, Alexander. We initially had vcards for every employee, but we realized that they quickly became obsolete since the only info would be name, bio pic, title, and URL. We felt the strength of the vcard was contact info, like address, email address, or phone numbers, and, because we weren’t publishing any of that, it seemed a bit like overkill.

  14. Right, refer to my earlier comment about contact info.

    Microformats are awesome when you want to disseminate everyone’s mobile phone number, email address, birthday, etc. I’m sure there are businesses that want anyone who visits the site to be able to add personnel to their address book with a couple of mouse clicks.

    But it wouldn’t be in our interest to broadcast every Cog’s email address and phone number. So for us, microformats would be of no use.

    Dan being Dan, he had microformats everywhere in the first draft markup. And they were cool! But after discussion, we realized that by the time we removed people’s phone numbers etc. there just wouldn’t be much point to the microformatted data that remained.

  15. I guess I am alone on this, but I don’t find it good at all really. I like the contextualized nac, but the text is way too big, and seeing it’s the only white thing on the site I find I keep getting drawn up to it, and cannot read the site till it’s off the screen. The red is unpleasing to the eye on that background. A green or perhaps a dull [bolded] orangy color would be more soothing. This makes me want to do the whole McDonald’s ideaology, get in and out asap.

  16. Very nice – inviting and tasty, all at once. I do have one question regarding your solution for site navigation. Did you entertain any concerns about providing navigation in a non-traditional fashion, thus making it potentially hidden to less-savvy, or impatient, website visitors? I certainly realize some of the strategy behind your ‘Contact Us’ page may apply – I’m mostly curious about things you considered during the thought process for the final site.

    Of course, I can’t emphasize enough how grateful I am that you share with us a peek at the inside of the redesign – very generous and greatly appreciated – thank you!

  17. Did you entertain any concerns about providing navigation in a non-traditional fashion, thus making it potentially hidden to less-savvy, or impatient, website visitors?

    Great, thoughtful question, thank you!

    We think the navigation is pretty visible (check the size!) but there were definitely design problems that had to be solved, particularly on inner pages. We tried many things before the “you are here” highlighting really worked — really communicated that this big box could indeed function as traditional navigation — on inner pages like Publish.

    Unlike with the Contact page, we weren’t trying to filter anyone out of the experience. :D We were trying to communicate, and the test of each design solution we tried in the sentence area was, is the visitor’s location within the site every bit as obvious as it would be with a traditional navigation bar? We feel we finally achieved this, but people using the site (or failing to use it) will let us know better how well we did.

    Thanks for asking!

  18. Jeffrey, thanks for clearing my questions on microformats up. In the article it sounded like you were specifically avoiding microformats, not contact details. I understand the problem, though! Thanks.

  19. Where are the gradients and reflections? I thought you were a web company.

    The design looks great. It feels very fresh, and the watercolor makes me think the page is tangible. I really like the sparing, deliberate use of color in the design; there’s a real elegance to the site’s simplicity. Hats off!

  20. Congrats on the new… well, look doesn’t even seem to encapsulate it.

    I’m still taking it all in… quite a shift from the previous look. But looks aside, after all, looks aren’t everything, I think what has put my mind to work most of all is the “sentence as navigation.” So simple, yet so profound. It certainly isn’t the solution to beat all solutions, but in this case, so beautifully executed it is now hard to imagine how any other approach would even be acceptable.

    Thanks for once again not only raising the bar, but changing the bar entirely and provoking the type of thought that makes the industry grow.

  21. Looks great, excellent job to all those involved. But where’s the hiring page, I want in! ;)

    One of those nit picky details that don’t really matter: under #branding on the print.css, text-align: center; needs a colon instead of semicolon after text-align. Looks like that will help validate the CSS as well.

  22. Uh oh. Looks like a blog with waterpaint graphics header. WOW. New chapter in the history of web design. Gimme a break.

  23. Oh and also thanks to Dan for answering my question. I accidentally overlooked your comment. I agree that hCard microformats are overkill if you don’t publish any contact info.

  24. This is a trainwreck. What’s with all the recent web design accolades for sites following the unspoken WordPress/MT/etc. visual “stylebook”? I’m all for standards-based design, but this is aesthetically painful. I know this circle of congratulation is easy to perpetuate, but can someone please think about the visual aspect of web design instead of slapping a country typographer’s theme on a well thought out site blueprint and then blogging their brains out about the result? I hate to be so harsh, but dear god… it pains me to see such back patting over something that looks so bad.

  25. I like it. Very nice, clean and simple. Does the job very well. However, the use of headers on the design page seems a little dubious to me. Considering your accessibility statement essentially claims AAA compliance (that’s a whole different argument right there) you might want to look at that.

  26. Wow. Talk about wearing your Vision on your sleeve. Brilliantly intuitive, simply brilliant. Thanks for again leading the charge and putting the community collectively on edge.

  27. Zeldman and crew have a tendency to polarize – I feel they are most likely comfortable with this by now.

    My question goes to the designer, and I hope it is more legitimate than negative. How do you continue to engage your curiosity in a two-column blog layout? How does formatting what is essentially a blog continue to fuel your drive for variety and a challenge?

  28. How do you continue to engage your curiosity in a two-column blog layout? How does formatting what is essentially a blog continue to fuel your drive for variety and a challenge?

    The Tad, did you page through the site? Your question makes it sound as though you looked only at the front page. The front page contains a news section powered by blogging software; the rest of the site is more in the nature of mini-case studies parented by overviews. Do you consider any web page with content and a sidebar to be a blog? What about the landing pages? Are they “blogs” too?

  29. What a pleasure to see your growing sucess Zeldman!!! What a pleasure! I am so happy!!! Keep making the web a better place! =)
    Sheers from Portugal!

  30. Keeping in mind that my Patrick Lauke redesign of joeclark.org opens with a sentence (with :hover effects, no less). Happy Cog… not the first, perhaps?

  31. Definitely something weird about having two H1’s — doesn’t that fail general common sense, let alone accessibility guidelines? You also have no H2 on the About Us page yet use H3 for the person bios. Please enlighten me how this meets recommendations?

  32. Joe Clark wrote:

    Keeping in mind that my Patrick Lauke redesign of joeclark.org opens with a sentence (with :hover effects, no less). Happy Cog… not the first, perhaps?

    Hadn’t seen it. Also hadn’t seen Megnut at the time I conceived the sentence navigation idea for Happy Cog. Don’t claim to have been the first or only person to have had this idea; just claim to have had the idea.

  33. Matt Hill said:

    You also have no H2 on the About Us page yet use H3 for the person bios. Please enlighten me how this meets recommendations?

    There’s an implied H2 on the About Us page. It reads “About Us.” We had it (or variations of it) in earlier comps and drafts of the page. In the template it said “Some headline needed here.” I removed it because it added no information. It wasn’t needed.

    Removing the H2 from that page doesn’t de facto bump the H3 headings up to H2. That would be semantic fetishism. If we bumped the H3s to H2 on that page merely because we removed the H2, we’d have to add extra CSS to make the H2s on the ABOUT page look like H3s on the rest of the site. A waste of time and bytes. No responsible designer would do it. Plus, we’d be creating false equivalences between H2s on one page of our site and H3s on another.

    W3C guidelines don’t say every page of your site must have all headings in descending order. You must look at the site in its entirety, across multiple pages. Across multiple pages of our site, there are H2s at the H2 level, and H3s at the H3 level. That’s as it should be.

    Even if your weirdly literal and narrow reading of W3C specs were an accurate interpretation of the HTML Working Group’s intentions, your question would still be off-base, for W3C recommendations alone do not make a good or usable website. Usability and design say this particular page is better off without an H2. W3C specs allow it. No harm and much good follows.

    Your earlier question is does trouble me, and we will discuss it amongst ourselves.

  34. I love it. Nice, and very thorough, indeed. I love the looks, but also how the pages are delivered, seen from a technical standpoint. Lovely. Great work. Again. Of course. Inspiring.

  35. Jeffrey Zeldman said:

    W3C guidelines don’t say every page of your site must have all headings in descending order. You must look at the site in its entirety, across multiple pages. Across multiple pages of our site, there are H2s at the H2 level, and H3s at the H3 level. That’s as it should be.

    Er.. that’s exactly what they say:

    Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers

  36. I Love it!

    But…

    Did you remove the examples from “Designing with Web Standards”? I use the book as a text in a course I teach on standards and I love to reference your examples.

    http://kc.happycog.com/ doesn’t show the archived version of the Kansas City Chiefs page. Can we find it somewhere else?

  37. Er.. that’s exactly what they say:

    @Simon, Please read my previously comment in its entirety and apply it to the spec as written. We do not “skip” levels site-wide. On one page, there is no h2, but for reasons I’ve already explained, we kept the h3-level headings consistent between that page and all the other pages, rather than artificially boost h3-level headings to “h2″ on that one page.

    Artificially boosting h3-level content to “h2″ to comply with a narrow and literal reading of the spec — a reading which fails to account for user experience across the site as a whole, treating each page if it exists in a vacuum — would cause consternation to screen reader users who navigate via heading levels. It would also add needless CSS bandwidth bloat, as I’ve already explained.

    As a web designer with some experience, I take the whole of user experience into account when interpreting W3C guidelines, and people who work for me do the same. You are of course free to interpret the specs as you see fit, even if that means not interpreting them at all. I know people who help create W3C specs, and they don’t think of them as sacred texts, they think of them as tools to be applied (tools that are continually evolving, partly in response to the practical experience of working web designers).

  38. @ Jeffrey

    I think we’d better just agree to disagree on this one. don’t want to seem like I’m spoiling for a fight. I really like the redesign a lot, just struck me that the header usage was a bit slack. I did read your post in full and I can see your point, I just don’t necessarily agree with it.

  39. Actually, sorry for the double post but I should explain I wasn’t insinuating that I thought header usage was ‘slack’ because of this 1 isolated issue, I’m not that anal. Just that there appeared to be a few headers not marked up as headers (for example the 7 projects on the /design/ page and the publication titles on the /publish/ page). Just thought I should clarify my previous comment a bit. Slack isn’t really the right word, just seemed to me that a few things had been marked up incorrectly.

  40. Jeffrey,

    I’m slightly disappointed that you had crankycog taken down. Are you now, strictly business?

  41. I’m slightly disappointed that you had crankycog taken down. Are you now, strictly business?

    I had nothing taken down. If someone wants to satirize us — even if the satire is meanspirited and unfunny — it’s no skin off my nose. I took no action against the anonymous creator of that rather witless parody.

  42. I was disappointed that you went private with the Dimo’s 2/7 Q re: px vs. em’s – I was learning new (and scary) things from that, and I would have enjoyed following the conversation to the border!

    About the Cog: Watercolor’s not really MY thing, but It’s cool, decent on the eyes, and apparently works quite well for you. I think it’s rude for certain folks to bash you for not appealing to their personal tastes.

    Still worthy of my bookmark!

  43. Dave: We actually never talked about it offline, but I have been getting a lot of requests to talk about the technique. I wrote an article called Soft Serve that should point you in the right direction. Cheers!

Comments are closed.