This is actually an old version of For the latest and greatest, check out the new site.

The Agency Formerly (and Currently) Known as Happy Cog

For a long time, Happy Cog has been known has one of the premiere agencies in the web standards world. Owned and run by grand master Jeffrey Zeldman from NYC, we recently expanded to take the Philly region by storm. Today, our site gets a long overdue refresh.

Skillfully crafted by design hammer Jason Santa Maria, I’ve gotta say: this new one is gorgeous. Of note is the fact the whole site uses web typography as a driving design element. There's only one text-replaced image: the logo. Impressive! I could go on and on about how well designed it is, but I’ll leave that to the man himself. Have a look at JSM’s write-up.

Overseen by the man himself, Zeldman coordinated the content direction and overall voice of the site. An extremely pleasant soul to work with, feel free to check out Z's side of the story.

Marked up and styled by yours truly, this was certainly one of the best projects I’ve worked on. The code is lean. The styles are abstract and extensible. A playful combination of positioning, floating and Well Educated CSS really make it come alive. It works in IE6. It works in IE7. It works in IE5. Mac.

To top it all off, the site now has an RSS feed, you can you stay up to date on all the HC mischief you can handle.

I couldn't be more proud to be a part of this great project, and great team.

Ladies and gentlemen, the new Happy Cog site!

(In case you're in or around Philly, you’re more than welcome to crash our official Open House! Hit me up and I’ll let you know where and when.)

Update: Matthew Pennell has pointed out a better way to structure some of the markup. Thanks Matthew!


Steve Ganz said:

Great job, Dan! Your markup is beautiful. Very nicely structured and clean as a whistle.

In Jeffrey's post he said...

We spent many a mini-session debating such things as whether the About page and its subsidiaries should include microformats. We decided not.

I have to ask. Why not?

Posted on February 7, 2007 11:18 AM

Dan Mall said:

@Steve: Thanks! Great question about the microformats. 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.

Posted on February 7, 2007 11:32 AM

Jeff Croft said:

Great work, Dan!

Posted on February 7, 2007 12:19 PM

Christian Ready said:

Beautiful work and really nice markup & CSS!

It looks like you went with a fixed 800x600 layout. I am curious as to how you arrived at that decision? Were other layout approaches considered (e.g., fluid, elastic, etc.)?

Posted on February 7, 2007 12:26 PM

Dan Mall said:

@Jeff: Thanks!

@Christian: Other approaches weren’t really considered. When Jason showed us the design, we never questioned the decision for 800x600. We always design for content, and, since the content fit well within that resolution, we didn't really need to get much bigger.

As far as the fixed vs. liquid/fluid thing goes, images are always the huge battle there. Because the content is so image-rich, fixed was the best approach in order to keep the grid intact.

Posted on February 7, 2007 01:00 PM

Kirk said:

You should be really proud. A superb result on every front.

Posted on February 7, 2007 02:24 PM

Dale Cruse said:

Outstanding stuff. Well done.

Posted on February 7, 2007 02:26 PM

Lee said:

Dan, good stuff, definitely gives us n00bs something to learn from.

Btw, I spotted a tiny mistake and posted about it on Jason's site. Nonetheless, excellent work (really like your site as well).

And oh, greetings from a fellow Philly resident!

Posted on February 7, 2007 02:49 PM

Dan Mall said:

@Kirk and Dale: Aw shucks! You guys are the greatest!

@Lee: Thanks for catching that! Not sure why that was happening, but putting a margin-left on the paragraph worked like a charm!

Posted on February 7, 2007 03:35 PM

Dan Boland said:

I had to swing by and commend you on something I always appreciate when it's done right -- the print stylesheet. Great markup overall.

Posted on February 7, 2007 04:21 PM

Christine said:

Beautiful site with fantastic mark-up.

But...what about IE 5.5 Windows? Because if you're going to go the trouble of making it work in IE 5 Mac you might as well make it work in 5.5 Win. Although it looks like your only issue is the centering.

Still, fantastic job to you and the whole HC crew.

Posted on February 7, 2007 06:48 PM

Jon said:

What's the trick to getting the site to work in IE6 and IE7? Site looks great!

Posted on February 7, 2007 09:42 PM

Dan Mall said:

@Dan Bowland: Thanks! I had fun with that!

@Christine: IE 5.5 Windows (as well as IE 5.2 Mac) were really not a priority for launch. It just so happened that I got lucky when my style coincidentally looked good in IE Mac for the most part. I had to add 2 lines to get it totally in shape, so it wasn't a huge time commitment. We'll eventually get to supporting IE 5.5, but, seeing how less than 1% of our users are browsing with it, it's not at the top of the list.

@Jon: How'd we get the IE family to play nice? Conditional comments, the 3 pixel jog fix, and a little bit of luck. If you’d like a more detailed explanation, drop me a line and we’ll chat.

Posted on February 7, 2007 11:56 PM

Matthew Pennell said:

Nice work, Dan, but I'd question some of the markup choices you've made.

Individual definition lists for each news item doesn't seem like a suitable choice; if the news items are a list, they are all items in one list, not a series of individual lists with one item in each (IYSWIM). Also, surely the news headings should be marked up as such with H3 elements?

A structure like that (OL containing multiple LIs, each with an H3 and a series of Ps) is more representative of the semantic structure of that section of the page (IMHO).

Posted on February 8, 2007 04:43 AM

Dan Mall said:

@Matthew: Just as design is subjective—“I love blue!” vs. “I hate blue!”—I see markup as being just as subjective. While each way has pros and cons, none is wrong. (For the record, I don’t really think you were saying that my markup is wrong; I just wanted to point that out.)

I had originally considered the markup that you suggested. It has better search engine benefits than the way I ultimately did it. However, the advantage of a definition list is that data can be associated. With an H3 and a P, there’s no direct relation between the two elements.

If you look through the markup, the date (a DD) comes after the post title (a DT). Using positioning, I moved the date to be visually displayed before the post title. Ideally, I would have loved to make all of the posts a single definition list. However, I needed a parent element for each post to position relatively in order to make the dates appear in the proper positions, hence the individual DLs. It’s definitely a presentational decision. While CSS has its limitations, it’s simply a means to an end. For me, the compromise was so small that it was a no-brainer.

Posted on February 8, 2007 02:20 PM

Matthew Pennell said:

Dan - glad you took my comment in the spirit it was intended. :)

To continue the discussion, though, this is not entirely correct:

"WIth an H3 and a P, there’s no direct relation between the two elements."

According to the HTML spec, a heading "describes the topic of the section it introduces", and wrapping the heading and paragraph(s) in a block-level element (for example, the LI in my suggested structure) "associate[s] a heading with the document section that follows it".

You could argue that you've done exactly the same but with a DL instead of an LI, but from both a semantic and accessible pov, I prefer my way (consider a screenreader user, forced to listen to "LIST OF ONE ITEM, Happy Cog relaunches EQUALS To celebrate our...; LIST OF ONE ITEM A List Apart No. 232 EQUALS In Issue number...")

By using H3 instead of DT for news item headings, you're also facilitating browsing by heading, another accessibility win.

Posted on February 9, 2007 01:54 AM

Dan Mall said:

@Matthew: You’re absolutely right. Thanks for pointing me to that spec.

If you check the Happy Cog site again, you’ll see that the changes you suggested have been incorporated. No visual change, but structurally more sound!

I must say: I tremendously appreciate your attitude throughout our discussion. By not being overbearing or condescending, it made me much more willing to try out your approach.

Now that’s how you critique!

Posted on February 9, 2007 02:37 PM

Ken Hanson said:

@Mathew: Ya know, I've normally taken the exact same approach that you do, and even approached discussing it like you have. I haven't ever sat down and quoted out the screen readers though, and I've never really drilled into the specs, aweseome to know, I'm a fan.

@Dan: I don't think I've ever seen a pro swing into a new solution so quickly, I'm very impressed by not only your lean markup but by your attitude! You cogs are awesome! Congratulations on such an amazing redesign launch!


Posted on February 14, 2007 07:01 PM

Jim Amos said:

You guys really nailed it this time. Congrats. Especially pleased to see typography play such a huge role - so many designers dont think of textual elements as part of the design, which always befuddles me!

Posted on February 18, 2007 09:47 PM

Jim Amos said:

Btw, Dan, the validation script on this comment field needs a bit of a tweak. Looks like the regular expression match is not allowing the email field to include addresses that contain a hyphen such as my work address

Here's a regex I usually use:

Posted on February 18, 2007 09:52 PM

Dan Mall said:

@Jim Amos: I appreciate the suggestion for the regex. However, a lot of the comment spam I used to get contained hyphenated email addresses, so I had to put in a check for it. Unfortunately, it negatively affects all of the legitimate users as well, like yourself. I have yet to find a solution that can suit both needs, so it'll have to stay as is for now.

Posted on February 18, 2007 10:32 PM

Sorry: comments are closed.