7 Feb 2007 10 am eastern

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]

Filed under: business, Design, events, fashion, Happy Cog™, Philadelphia, Redesigns, work

98 Responses to “Happy Cog redesigns, 2/7/2007”

  1. Eric Meyer said on

    I love it so much, I think I’ll rip it off for my business site. You won’t mind, will ya?

  2. Mike Cherim said on

    Very well done. I love that first sentence as it is really the sum of all the parts. That’s an effective communication.

  3. Henry Li said on

    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

  4. Jeffrey Zeldman said on

    under “Why Happy Cog” a line says “increasesd accessibility”.

    Not any more! Thanks, Henry!

  5. Garrett Murray said on

    Looks great–congrats to you guys. My favorite part of this post:

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

  6. Ben Kimball said on

    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.

  7. Mau said on

    Awesome!!! I like it a lot!

    A well deserved facelift to the site.

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

    Congratulations!

  8. Mau said on

    Nevermind, I should have read more carefully. =) WordPress it is! Outstanding!

  9. Jeffrey Zeldman said on

    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.

  10. Rick said on

    Yes, very nice indeed! I like the painting at the top a lot.

  11. Edward said on

    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.

  12. Dimo said on

    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 ?

  13. Jeffrey Zeldman said on

    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?

  14. Dan Mall said on

    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!

  15. brad said on

    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.

  16. Devon said on

    Smooth, very smooth.

  17. Dimo said on

    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.

  18. Dan Mall said on

    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.

  19. Dimo said on

    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

  20. Happy Cog Studios mit neuen Look - Netzwelt, Webdesign - pixelgraphix Sideblog said on

    [...] Und das ist in meinen Augen ein großer Schritt nach vorn. Mehr zum Werdegang bei Jeffrey Zeldman und Jason Santa Maria. [...]

  21. Dan Mall said on

    If you want to drop me a line, I wouldn’t mind continuing this discussion over email.

  22. Alexander Graf said on

    Beautiful, I love it.

    What I’d like to know, though, … why did you decide against implementing microformats?

  23. Brian Artka said on

    Simple, without the fluff, and Beautiful. Very nice job guys.

  24. Happy Cog Studios: News: Happy Cog relaunches said on

    [...] To celebrate our new Philadelphia office and to better convey how our agency’s business has diversified, Happy Cog today unveils its new design. Everything has changed: new structure, new look, new words, and new semantics. On their personal sites, the principals behind the redesign share their individual perspectives. Visit the homes of designer Jason Santa Maria, developer Daniel Mall, and creative director Zeldman for details. [...]

  25. Dan Mall said on

    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.

  26. A Source Of Inspiration» Blog Archive » Happy Cog redesigned - fresh ideas for digital creativity said on

    [...] Just moved to their new Philadelphia office, this sure is a peculiar way to start decorating a office. Find more about the redesign with Jason or Zeldman. [...]

  27. Jeffrey Zeldman said on

    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.

  28. Happy Cog Redesigns da Davide Bocci in… said on

    [...] Non credo esista un solo Sviluppatore Web che non andrebbe a lavorare in Happy Cog. È comunque terminato il redesign della web agency più invidiata del mondo, visto le personalità che ci lavorano. [...]

  29. Ryan Benson said on

    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.

  30. Edward said on

    Thanks for the comprehensive reply about the contact info. It makes perfect sense.

  31. cloudsoup weblog » Blog Archive » Facial hair as metaphor said on

    [...] Zeldman’s redesigned Happy Cog and his story about his science teacher suggests a tricksy, sly, and very clever man. [...]

  32. Happy Cog Studios: News: Happy Cog relaunches said on

    [...] To celebrate our new Philadelphia office and to better convey how our business has diversified, Happy Cog today unveils its new design. Everything has changed: new structure, new look, new words, and new semantics. On their personal sites, the principals behind the redesign share their individual perspectives. Visit the homes of designer Santa Maria, developer Mall, and creative director Zeldman for details. [...]

  33. Eddie Sutton said on

    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!

  34. Jeffrey Zeldman said on

    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!

  35. Alexander Graf said on

    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.

  36. Drew said on

    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!

  37. Brian R. Brown said on

    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.

  38. Adrian said on

    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.

  39. Dan Mall said on

    @Adrian: Great catch. We actually fixed this earlier in the day, but we accidentally erased the fix while trying to solve another problem. Both should be good now. Thanks!

  40. Sebhelyesfarku said on

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

  41. Parries > adamkhan.net said on

    [...] Zeldman’s take, after using the great anecdote of his high school teacher’s moustache, is sharply written: [...]

  42. Alexander Graf said on

    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.

  43. Daring Fireball Linked List: February 2007 said on

    [...] Zeldman on Happy Cog’s Redesign ★ [...]

  44. Lance Brown said on

    Brilliant…congrats!

    We’ll be following suit on the front page soon… :)

  45. Simple Man » Blog Archive » Happy Cog Anew said on

    [...] Happy Cog releases a beautiful new design, pushing the message that they are not just web designers but authors, speakers, and industry movers as well. More from the man who got the cog rolling, Zeldman outlines the process in a recent post. [...]

  46. rh. said on

    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.

  47. Simon Wiffen said on

    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.

  48. Jeffrey Zeldman said on

    I hate to be so harsh, but dear god… it pains me to see such back patting over something that looks so bad.

    Peel me another grape.

  49. Matt Albiniak said on

    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.

  50. Bronwen said on

    Raising the bar again! Excellent work & lovely design!

  51. Programming and Designing for the Web » FrogJS Javascript Gallery said on

    [...] Happy Cog RedesignsJeffrey Zeldman takes an new look at traditional navigations. [...]

  52. Semi-Blog » Blog Archive » Zeldman on Happy Cog Re-design said on

    [...] Jeffry Zeldman writes about the thinking and process behind the Happy Cog refresh. [...]

  53. The Tad said on

    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?

  54. Tecnologia: Design is pretty important - FernandoTrevisan.com.br said on

    [...] Design is pretty important     From: http://www.zeldman.com [...]

  55. John Lampard said on

    Nice work! What’s the font used for the permalink titles for each post/news item?

  56. Jeffrey Zeldman said on

    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?

  57. Binary Tales · Blog Archive » Happy Cog Redesign said on

    [...] So a few days ago web design ‘empire’ Happy Cog Studios launched a new website to celebrate the opening of their new office in Philadelphia, USA. When you consider some of the people who work for Happy Cog its not surprising that the new site is… I don’t really know a good word to describe it. I guess from my perspective as a student developer its awe inspiring. For me it is an example of doing everything right: beautiful design, extremely well written, and sincere semantic code. I wish I could make sites this good. [...]

  58. Inspiration, Insight Behind the New Happy Cog Redesign - Brainstorms and Raves, Weblog, Blog Notes on Web Design, Development, Accessibility, Standards, Typography, Music, and More said on

    [...] Especially after the privilege of working with Jeffrey Zeldman on the Web Standards Project Steering Committee, I’m genuinely happy for him to see how Happy Cog has evolved and expanded over the years, with offices now in New York and Philadelphia. [...]

  59. ikram_zidane’s digital playground v6 » Change is a good sign, right ? said on

    [...] Happy Cog redesignsThe happy cog, founded by jeffrey zeldman have been redesigned by the team. Its a sample of the great beauty of the modern, standard based design. [...]

  60. Alex said on

    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!

  61. links for 2007-02-11 « Brukskvalitet.no said on

    [...] Happy Cog redesignet Verdenskjente Happy Cog har redesignet nettsidene sine. Denne gang er hovedmenyen en setning. Morsom (og informativ) vri på primærnavigasjonen. (tags: blogroll happycog zeldman) [...]

  62. t8d blog » Blog Archive » EMs einfach berechnen - skalierende Schriften für IE said on

    [...] Auch der Internet Exlorer 7 unterstützt immer noch nciht das Verkleinern/Vergrößern von Schriften, die in px definiert sind. Dadadurch ist man gezwungen, für den IE die Schriftarten in em zu spezifizieren, was mühsam ist, da man die Pixelwerte aus dem Design mit Tools wie dem Em-calculator in Em umrehnen muss. Kürzlich bin ich bei zeldmann.com dazu auf einen interessanten Kommentar gestoßen: 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 [...]

  63. Opus // Blog // Catching My Eye said on

    [...] Zeldman explains it well in this blog entry.  I find it rather fascinating that the entire design was based around a sentence, that the design was written before it was actually designed, and that the navigation communicates as much as it helps people find their way around the site.  It’s such a different approach than I how I typically think of websites, and it makes for a more holistic, natural, content-centric approach that I find as refreshing as I do challenging. [...]

  64. » I predict the next big web design trend - Web Design - 3.7crea.tv Blog said on

    [...] Happy Cog is famed Zeldman’s company. With that much influential clout and such a great idea, you can be sure to expect this practice to show up on many websites from this point forward. [...]

  65. Howard C said on

    Great job!

  66. Joe Clark said on

    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?

  67. Craig said on

    3 words.

    I love it!

  68. Cogfan said on

    With 80 comments I am not sure if someone else have mentioned this, but Mr. Zeldman, were you aware of know the presence of http://crankycog.com ?

  69. Matt Hill said on

    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?

  70. CSS Collection » Blog Archive » Tell Us Your Design Story… said on

    [...] Zeldman tells the story of how he resdeigned his business site, Happy Cog, for the … oh a few times … and from personal experience, I know designing your own site is the hardest job. Writing content for my site was all anguish. [...]

  71. Jeffrey Zeldman said on

    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.

  72. Jeffrey Zeldman said on

    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.

  73. Brandon said on

    Beautiful and intuitive! Congratulations on an excellent job.

  74. Most Inspired | Home said on

    [...] zeldman.com [...]

  75. coda.coza - archive - 2007-02-16 11:50:28 said on

    [...] Read more about the redesign on Jeffrey Zeldman’s blog post, and continue through the comments. There are quite a lot but that number I assume includes the trackback stuff. Here’s one I read with interest: This is a trainwreck. What’s with all the recent web design accolades for sites following the unspoken WordPress/MT/etc. visual “stylebook”? [...]

  76. DESIGN82 INTERACTIVE » Blog Archive » Happy Cog Redesign said on

    [...] Happy Cog die Agentur von Jeffrey Zeldman, die z.B. hinter A List Apart oder auch ma.gnolia steckt, hat ein Redesign ihrer Website hingelegt. Meiner Meinung nach vor allem aufgrund der Neustrukturierung der Informationen wirklich gelungen. Weitere Infos zum Redesign kann man direkt bei Jeffrey Zeldman und Jason Santa Maria lesen. Tags: webdesign, redesign, website, happycog, agentur [...]

  77. Oliver said on

    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.

  78. Simon Wiffen said on

    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

  79. Roni said on

    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?

  80. Jeffrey Zeldman said on

    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).

  81. Jeffrey Zeldman said on

    @Roni: Thanks! And the removal of those examples was an oversight. We will restore the kc.happycog.com examples today.

  82. Roni said on

    Thanks! You are my hero! I have a lecture in an hour and it’s back up. :)

  83. Simon Wiffen said on

    @ 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.

  84. Simon Wiffen said on

    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.

  85. Communicate Your Services Succinctly  | Yclick.it said on

    [...] Founder and author Jeffrey Zeldman writes that this approach emerged from thinking about the primacy of words in user interfaces. The sentence in large text quickly clarifies the many aspects of their business. The red underlined links ask to be clicked. I think it works well to draw visitors in. [...]

  86. Guides > Web Design said on

    [...] An email newsletter is a great way to build relationships (for B2B businesses), get sales (for B2C businesses), and stay in the customers’ minds. But there’s such a thing as too much. B2Bs have to balance the number of promotional emails with informative emails. Too many promotional emails — readers will unsubscribe because it’s not worth being on a mailing list when there are far more promotions than good stuff they can use. 80/20 rule works here.By Meryl Evans, 0 RepliesPosted: Feb 15, 2007 09:23 AMHappy Cog RedesignZeldman tells the story of how he resdeigned his business site, Happy Cog, for the … oh a few times … and from personal experience, I know designing your own site is the hardest job. Writing content for my site was all anguish. [...]

  87. Chirag Rana said on

    Great Craftsmanship in Code. Lake of aesthetic.
    Navigation is suitable for your site. I fall in love when I saw sentence based navigation in http://www.boora.com in 2002.

    Well done!

  88. Netdiver NEWS archive -> February 2007 said on

    [...] Happy Cog Redesigns by Jeffrey Zeldman [...]

  89. Eric said on

    Jeffrey,

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

  90. Jeffrey Zeldman said on

    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.

  91. IE 7 does not resize text sized in pixels | 456 Berea Street said on

    [...] One new design that seems to have caused some confusion is Happy Cog’s. Dan Mall’s font size technique for Happy Cog was to use pixels for all browsers except IE; IE’s style sheet has font sizes in “ems”. Dan’s comments are here. [...]

  92. Dave said on

    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!

  93. Dan Mall said on

    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!

  94. Paul Buchhorn - Online Marketing News said on

    it looks very nice!

  95. Happy Cog Anew « Adrian Pelletier said on

    [...] Happy Cog releases a beautiful new design, pushing the message that they are not just web designers but authors, speakers, and industry movers as well. More from the man who got the cog rolling, Zeldman outlines the process in a recent post. [...]

  96. Happy Cog Redesign » Peter Unruh – News & Inspiration für Kreative said on

    [...] der Informationen wirklich gelungen. Weitere Infos zum Redesign kann man direkt bei Jeffrey Zeldman und Jason Santa Maria [...]

  97. Jason Santa Maria | Happy Cog Redesign said on

    [...] 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 [...]

  98. Blackfriars' Marketing: Happy Cog: communicating value in fourteen words or less said on

    [...] guys. And if you want to read about the philosophy behind the redesign, you can read it here at Zeldman.com.Technorati Tags: Design, Elevator pitch, Happy Cog, Strategic [...]

Comments off.