Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

A Frosty Redesign

Some uninspiring notes on the graphicPUSH redesign. Nothing technical, but I do discuss the color blue, the Category Merging Initiative and the penguin.

Well, here we are. The fourth design of graphicPUSH in two years. Back to a more colorful layout, back to a fixed width size, back to a more cohesive layout. Back to basics.

Textpattern (duh)

Textpattern now drives 100% of the site, period. No more PHP includes, no more static content, no more lingering .shtml pages wandering around. I’ve said it before and I won’t go into it anymore here, but suffice to say TXP’s architecture is more flexible than a coked-up monkey in zero gravity.

You are looking at a clean install of version 4.0.1, which so far has been a flawless upgrade and conversion. Like Jon Hicks said, I feel like I’ve backed a winner by using Textpattern.

The Design (Gosh It’s Awfully Blue)

Although I had not intended this at first, the design took on a distinctly winter theme. Lots of cold blues, steely greys and darker, conifer greens. These are the colors I’ve used since the first iteration, but the previous designs have had much more white. Maybe too much. Frankly, I’m kind of sick of white.

Version 4 of graphicPUSH is one of the few sites I’ve designed that uses reversed body text on a dark field. I’m not 100% convinced it’s the right direction, but hey, my wife likes it and that’s always a good sign. I used Verdana to make sure it was readable, but I’m curious to see what kind of feedback I get from the general readership.

Much of the other typography was left untouched. A healthy Georgia for subheads, Clarendon for the masthead, Tahoma in the secondary sections like comments and the contextual info on the right.

The Penguin

There is a penguin. I like him. He kind of looks like he’s sliding sideways like Fred Astaire. Or maybe he’s staring at my large “G.” Most penguins haven’t seen gratuitously sized Clarendon specimens before. Obviously they should visit Starbucks more often.


The theme of this design is simplification. The main navigation no longer has nested items—just five sweet little links that cover the width and breadth of the site. (Extra crap is thrown into the footer.)

All news items, reviews, tutorials and so-called “articles” have been condensed into one central library, simplifying the archive and making browsing through all this stuff a lot easier. In the past, book reviews, tutorials and articles would not appear on the home page when I posted them because of TXP’s fickle way of driving the default template. This was annoying. Well, instead of doing research, wielding my fearsome PHP hackery (ha!), customizing plug-ins and pouring a vial of ox blood into a pentagram, I’ve solved the problem with the bluntness of a mallet by simply erasing any categorical distinctions.

This new Category Merging Initiative also allows people to comment directly on the articles and tutorials themselves, something I should have done two years ago when I posted “The Pricing Wormhole.”

The “Externals” links list now only appears on the home page and its archive tab, so there is less noise to distract from reading the actual articles. (Yes, the Google links are still there. I’ve got to pay for the hosting somehow, people. Now go click one.)


The comments have seen a few upgrades. Version 1.0RC3 of TXP was plagued by a dirty little bug that kept breaking the MySQL tables that controlled comments—hopefully this is fixed, so the two people that actually read this site can post their feedback. We now also have live previews and Gravatar awesomeness.

The site also uses more complex CSS than previous versions. Abundant floats plague the site. There are transparent PNGs that require mentally deficient filters to display properly. IE breaks some pages without explanation or justification, but I’m not worried—seriously, who still uses IE anyway? Opera and Firepoop get the site right. When IE7 is released, it will probably get it right too.

Finally, An Apology

So I redesigned and relaunched this entire site in a week. That’s two days of designing, one day of stylesheeting and several days of running around Textpattern like a drunk guy doing donuts in the mall parking lot.

Because of the kamikaze approach, the past week has seen some spectacular display weirdness as I slowly bent the stylesheet and Textpattern to my will. Thank you for your patience, and I hope you guys and gals like the end result.

Big shouts to the TXP development community. I have no idea who you are, but this CMS would be nothing without you. Fuck Wordpress. TXP i3 teh 5w33tne33.

commentary + criticism


wrote the following on Sunday October 16, 2005

I am really digging the redesign. I esp. like the ‘g’, very nice use of negative/postive space.

I’ve been watching the redesign as it happens, it’s been an interesting evolution. Why change the dark blue in the header was too heavy perhaps?

Anyway, here’s to you and the new site.

PS, loving the live preview of this comment.

Sebastian Schmieg

wrote the following on Sunday October 16, 2005

Looks interesting (in a positive way). I’m glad you got rid of the ice in the upper right corner although it was there no longer than a couple of days.
The reversed body text on a dark field makes for easy reading.

But while TxP might rock your world its lack of tab-index for the comment field really sucks. What’s the point of making me jump from the http-field to the search box?

Patrick Johnson

wrote the following on Sunday October 16, 2005

Site is looking Very Nice!

I love the new graphics the most, and the live comment preview is REALLY COOL.

Also the way the comments look is very very nice!


wrote the following on Sunday October 16, 2005

Wow. Very nice. (Love the penguin.) Nice shading; beautiful blues. Subtle and soothing.

Noelino Volaire

wrote the following on Sunday October 16, 2005

The redesign is absolutely stunning. Inspirational.


wrote the following on Sunday October 16, 2005

Thanks for the feedback, everyone.

Sebastian, good catch. Admittedly the forms processing in TXP leaves a lot to be desired (took a lot of yelling from the userbase to get label tags in there), but I fixed the order of the tabindex attributes so it should work now.

And yes, the ice went quickly. It was a brief experiment with absolute positioning and transparent PNGs, but the love affair was short-lived.


wrote the following on Monday October 17, 2005

Very nice.

I especially like the way the comments are formatted.

Brad Wright

wrote the following on Monday October 17, 2005

Nice work, Kevin.

One thing though – see:

Your code samples are a little low contrast. Maybe you’ve been designing on an LCD screen?

As mentioned – otherwise all good. TxP is the r0×0rz.

Brad Wright

wrote the following on Monday October 17, 2005

D’oh! I forgot about Textile.

If Else

wrote the following on Tuesday October 18, 2005

Didn’t get an opportunity to see the ice but this is a fantastic redesign.

A lovely colour scheme coupled with a fantastic layout. Great stuff!


wrote the following on Saturday October 22, 2005

Your site is splendid, Kevin!

However, when viewed in Opera 8.5 Win, the header extends indefinitely towards at right.

I’m new to txp and I have some doubts about sections and categories. If I understand your framework in your case: – the sections are Home, Archive, Icons, lInkage, Colophon, Contact – the categories are Book reviews, Browsers, Business, etc.

Another question. In book reviews entries there is a book information box: is it a custom field or part of the article body selected and positioned with a class?

Thanks for the inspiration!


wrote the following on Sunday October 23, 2005

To answer all your questions, in order:

I know the header extends all the way to the right. This happens in every site I develop, and since it does not occur in any other browser, I am convinced it is either a bug in Opera or some weird CSS thing that I do not understand. It happens with both floated layouts and absolutely positioned ones, and I have seen it on other websites as well.

As far as TXP, sections are used for the main sections of the site, and in this case, you are right: for GP, the sections are “news” (for all the blog/articles/tutorials stuff), “archive,” “icons,” “linkage” and “colophon.” By seperating these into sections, TXP allows me to assign each its own template, which is valuable for unique things like Icons and Links. You are also correct in assuming “book reviews,” “web development” and all the other things that appear in the top blue field are Categories, which is really only applicable to the “news” section since all the other sections are not broken into categories. Hope this makes sense.

As far the book reviews, inside the template for “news,” there is tag for if_article_category that checks to see if the category is “book reviews.” If it is, then it displays the book info, which is input via custom fields in the article section. The table is simply wrapped in a div that is set to float right.

Hope this helps.


wrote the following on Sunday October 23, 2005

Hi Kevin,
your explanation is very useful to me. Thanks.

I have only a doubt regarding the ‘news’ and ‘archive’ sections. I would place all the blog/articles/tutorials stuff in the ‘archive’ section. ‘News’ section is, in my opinion, redundant. (Home page of course is a ‘default’ TXP section you can’t delete.)

Why did you use the ‘news’ section?