My Dirty Little Secret About a Career-Launching Design

The new Copyblogger, based on the Cutline frameworkIt seems ridiculous to call something that was created in February of 2006 an “old classic,” but here we are.

Just 9 short months ago, an anonymous Joe by the name of Brian Clark contacted me about designing a site for a little side project he had in the works. Now, at the time, all I knew of Brian was that he knew where to place a comma in a sentence, so to put it another way, I liked him already.

Of course, the snarky copywriter lowballed me into near slave wages, and a week or so later, I emerged with the original Copyblogger design. Although I had no idea at the time, that design would basically end up serving as the foundation for a career niche that I actually enjoy.

I have no clue how many emails and referrals I’ve received from the little link at the bottom of that site, but I can safely say that it probably rivals the attention I’ve received from all my other designs combined. The one thing that nobody seemed to notice on Copyblogger, though, was…

My dirty little secret.

The truth is, that design was held together by rusty nails and duct tape, and Brian was constantly IMing me with claims that the sky was falling.

Of course, the sky was firmly intact, but whenever Brian tried to do anything new with his site, a rusty nail would pop out here or there, reaffirming the fact that my design skills progressed a bit more quickly than my coding skills.

9 Months Later…

Fast-forward to now, and that “anonymous Joe” behind the Copyblogger mask is essentially an A-lister by just about any conceivable metric. And, as we all know, popularity and fame breed opportunity, and Brian finally hit a point where my crappy code was preventing him from scaling out his Web site to meet his growing needs.

Fortunately, I’ve learned a thing or two since February, and I knew it was time to fix Copyblogger’s gallstones, intestinal disorder, and renal failure. Oh, and I had to get rid of the duct tape and rusty nails, too — you know, with all the fear of tetanus, 100% fatality rates and whatnot…

Copyblogger now runs on the outstanding Cutline framework for WordPress

The New Copyblogger

With surgical precision, I took the piddling mess that was the old Copyblogger and turned it into the lean, mean, page-rendering machine that you see now…

Actually, the truth here is that it required very little precision and/or expertise in order to get the job done. In fact, I coded everything up, including tweaks, in 5 or 6 hours by utilizing the Cutline framework. By 1999 standards, that’s ridiculous for an entire working Web site, but that shows you just how far we’ve come since then.

Although the site looks much the same as it did before, everything under the hood is completely new. It’s like dropping that six fo’ Impala on an entirely new chassis, cause now you ballin’, cuz.

WordPress is the platform that makes it all possible, and open-source themes like Cutline allow you to make the most extensible use of an already-amazing piece of free software.


Brian’s outstanding blog is growing by leaps and bounds, and so are his opportunities for revenue and expansion. By adapting to a design that adheres strictly to established Web standards, I think he’s making a very intelligent, very savvy move that will prepare him for the road ahead.

I hope other A-list-quality sites will take notice and follow suit, but then again, I always have been a bit of a dreamer.

Whether you are a site owner, a designer, or both, it’s absolutely key to ensure that your site is not only ready for today, but also for tomorrow.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:

25 comments… read them below or add one

Ben October 6, 2006

Actually…by 2002 or 2003 standards that’s pretty damn fast :)


Chris P. October 6, 2006



Jim October 6, 2006

Interesting to note that you set the width on copyblogger to 820px. This offers nice white space, but also requires a horizontal scroll bar on monitors with 800X600px resolution and leaves bunches of left and right margin at 1024px width. What was your logic for selecting 820 for the width?

I just downloaded Cutline and intend to change it from the standard 770px width to about 960 or so. I need the extra width for text and images in the right column. The 800X600 folks will just have to live with it.

Thanks for making Cutline available for free. It’s a great design.


Chris P. October 6, 2006


Brian had two spatial requirements for the “redesign:”

  1. a wider content area
  2. an updated tagline

The old layout was 800px wide, so accommodating a wider content area was inevitably going to increase the width of the “page,” unless I tightened the spacing between the two columns.

In my opinion, the design needs room to breathe (which is a big part of its appeal), so I didn’t really consider tighter spacing to be a viable option.

Next, the new tagline contains bigger words than the old one, which didn’t have a word longer than 5 letters. The new one is a little tougher to work with, and I had to make a wider sticky note to accommodate it.

Unfortunately, the design receives much of its balance from the sticky note, which is really the dominant visual element on the page, save for maybe the big, black email box. In order to maintain that balance, I had to expand the gutters on either side of the sidebar, which in turn made the design slightly wider.

I do try to take special care to satisfy the 800×600 crowd, as both of my WordPress themes — Cutline and PressRow — are 770px wide (perfect for 800×600). In this case, it just wasn’t in the cards.

I suppose one could make the argument that I could make the content column fluid down to a minimum width that would accommodate 800×600 users, but the amount of coding required to make that work in IE (which would be the browser most 800×600 users would have, I presume) is hard to justify. On top of that, the number of users at 800×600 shrinks by the day.


Ben October 6, 2006

Nice. I plan on posting about Cutline since I’ve popped the hood and had a good look around. You’ve done great work and Cutline is MUCH easier to mod than K2. BTW, your statements on 8×6 screen resolutions are spot on…and that’s why I went with a 900px wide design. That and I like a FAT sidebar.


Lawton October 7, 2006

Chris, I’ve started my own copywriting, marketing and general News You Can Use blog over at .

It used to be a songwriting advice and tutorial blog but my interests have expanded. Any advice, cries of horror and anger at my blogging skills, or any other praise would be most welcome.


In short, I think it pays in full that while I cannot afford to hire you right now, any advice on conten and or revenue design would be most appreciated.



Jordan October 7, 2006

Bravo! You’ve simultaneously introduced me to a great blog that I hadn’t run across before (Copyblogger, not your own, as I’ve been reading yours for several weeks now), and have inspired me to clean up my own code (which it does, admittedly, severely need).


Lawton October 7, 2006

Chris, what other blogs would you recommend?

Besides brians?

Oh, have you been to

It’s so funny and unique and true.


Nick Wright October 7, 2006


I love Copyblogger’s design… that’s actually how I found out about this site.

Also, I really like how you added the “Notify me of followup comments via e-mail” check box… small change, but incredible added value (in my eyes at least).

Nick Wright


Chris P. October 7, 2006


Brian actually added that himself, and I merely copied his move and added it here, too.

Until recently, I’ve always thought that opening up yet another avenue to receive email was annoying, to say the least. More and more, though, I’m beginning to see the light — it’s about making your content easily accessible to the largest percentage of your readers.

For my money, the Subscribe to Comments Plugin is a simple yet powerful way to add another dimension of accessibility to your blog.


Nick Wright October 8, 2006

Chris, the “Subscribe to Comments Plugin” is key… opening up another avenue to receive email is only annoying if people don’t want to receive email. But if they’re reading Brian’s blog, or, they want to be alerted when their comments are responded to… at least I know I want to be alerted.


Chris P. October 8, 2006

I totally agree.

It’s like, “Do I want people to come back or not?”

I’m both vain and narcissistic, so “Yes! C’mon back and read up on the comments, folks!”


Lawton October 8, 2006

Yes, I totally agree with Nick and Chris. Getting people to actually come back is key. Do you guys think posts like “blog post Part 1” and so on work or do you think people like all the information at once.

IE, my blog post on viral marketing with google video, part one. Do you think I should just do all 4 or 5 in one post?



Nick Wright October 8, 2006

I don’t mind “Part 1”, “Part 2” type posts, and the reason why:

If a post is going to be covering a lot of info, I’d rather it be broken up into more digestible chunks.

I have a short attention span.

Plus, if the content in “Part 1” is useful to me… I’ll definitely come back for the rest of the info. So the technique is a good teaser to bring readers back.


Lawton October 8, 2006

Nick, thanks man. I feel like I have a base of knowledge, but the way I present it hopefully is interesting to the people that come visit me. I want to narrow my focus down and not be all over the place…

Care to take a look and give comments and suggestions?

just click on my name



Esin October 10, 2006

Hey Chris,
I’ve been reading your blog, since the near onset, (how to kiss corporate live goodbye). Just wanted your thoughts on drop down css navigation. It seems like there are lots of quirks with it. Is there any simple way of creating them? I’ve searched all over but most solutions end up failing or messed up after I modify to my liking :/ . Also, your thoughts on em vs. px.


Lawton October 11, 2006

I agree think that this web design stuff is quite rad. I feel like I’m better at the graphics part than the coding but I’m trying….

I guess it just takes lots of time huh?


timbo October 11, 2006

CSS menus –
If you can bear to use 12 lines of javascript to help IE mimic :hover then I find the suckerfish menus have stood the test of time:


Chris P. October 11, 2006


JavaScript would have to be considered the “traditional” way to construct drop-down menus, but I actually prefer ones constructed in CSS.

You can find the most sound examples of such menus at CSSplay.

Sometimes implementing them is fairly tricky — I simply recommend that you actually test them on as many different browsers as possible.

Also, you can quote me here regarding my opinions on em-based versus pixel-based sizing…

Using ems is the only acceptable way to construct sizing on your Web site. In addition, I am quite partial to declaring vertical spacing with ems instead of pixels, except when declaring the size of an area whose height is known (like the headers in my sidebar, for instance, which are 30px high). Notice that I did not mention horizontal spacing — that’s best done with pixels (in most cases).

Using ems “liberates” your content, so to speak. When users resize text, the em styling ensures that the aspect ratios all remain the same, meaning that users will get receive the same visual experience regardless of their preferred text size.

On this site, text sizing is not a huge issue because it tends to run large. However, there are tons of sites out there that utilize font sizes of 10-12px, and for many users, that’s simply too small for easy legibility. I would argue, then, that it is both intelligent and generous of you to define everything in ems in order to allow the user to control their visual experience.

Don’t tie them down with inferior coding methods.


i-ming October 28, 2006

i am one of those who actually searched for the designer of the original copyblogger site.. being a graphich designer trying to make inroads to the web.. i really appreciated the great design. coupled with brian’s great copy….

to me the site is the PAR. or bar whicever you like.


Chris P. October 28, 2006

Since Brian’s a recovering attorney, we’ll say it’s the bar :)


dinu October 30, 2008

so, basically, copyblogger is now using cutline, and not the old copyblogger framework ?


Chris Pearson November 3, 2008

dinu — This was true in 2006, but as of October 24, 2008, Copyblogger is running on the incomparable Thesis WordPress theme framework.


dinu November 3, 2008

thanks :) hmm yes, I did see the footer link earlier today :) sorry for not checking it earlier ….


Susan March 2, 2010

Hi Chris,

Well seeing you’re talking about Copyblogger (no matter that it was a long, long time ago), how did you manage to get that Lijit Search field to say “To search, type and hit enter” and go back to that text after every search? I’ve had 3 developers work on it to no avail. And, Lijit is not particularly interested to solve my little problem.

Do you mind sharing your solution:)


Hoot and/or Holler

Previous post:

Next post: