6 foot blog

Textplates: Why Working For Free Pays Well

posted in sitescore, textpattern, textplates, themes by Richard Glover on Fri Mar 3, 12:07 PM

Over the past week, we (by which I mean “I”) have been working on templates for the Textplates competition. I learned of the contest only recently via the Textpattern group on Ma.gnolia (which I recently reviewed). At the time when I first visited the site, there were only eleven submissions and I was fairly certain I could do better than what was there. There were prizes for 1st through 5th, so even if I couldn’t do better, chances were pretty good I’d walk away with something.

Inspiration

I discovered the competition on a Friday before a 3 day weekend, so when Eric and I left work, I told him we should submit something. He was busy working on the We.be.2.0.al.izr, so he told me to run with it (he always takes the easy stuff). I had a wonderful Friday evening with my girlfriend at a fine French restaurant, then woke up early on Saturday ready to make something beautiful.

I immediately hit the first snag. A template’s main goal should be broad appeal (otherwise it isn’t much of a template)...easier said than done. Designing sites for businesses and individuals isn’t so bad…at least you have a starting point. You interview your client to get a feel for their personality and practices as well as a direction they may want to go. Here, the “client” is a nebulous community. As with many things, the specific case is easy, the abstract is quite difficult.

Rather than starting with a color scheme, I decided to look for an inspiring image. Stock Exchange has a wide variety of images, and the “browse” feature will show you three at random with every page load. I spent the next 30 minutes just hitting “reload” and downloading images.
Note: Some of the images are not explicitly free (as in speech or as in beer). Some images require as little as notifying the author or attribution. Some require explicit permission. Be sure to check before you use an image.

Most of the images I was downloading fit in four categories: sun/sky, eyes, praying mantis, and flowers. I decided to go with the least common: mantis. From there things took form quickly. Colors would be shades of white and green and the mantises would frame page components (the sidebar and content). Of course, this doesn’t meet the first criterion above (broad appeal). In fact, in many ways, it is the antithesis, since most people find bugs of a mantis’ size and shape disturbing. Rather than making them background images (which would have simplified the actual markup significantly), they were going to have to be modular.

I started coding. Somewhere along the way I decided to go with a liquid layout. Fixed layouts are ever-so-vogue, and I wanted this design to stand out (it is the only liquid layout in the entire competition). This had an added benefit: the visual aspects of the page would be absolutely positioned, which eliminates most of Internet Explorer’s flawed box-model problems. For the first time in the entirety of my web-design experience, I coded a page for a standards-compliant browser, and it rendered perfectly in IE with no need for hacks! After some jubilation, I literally took a moment of silence. By the time I was finished, I only had one problem that required an IE specific stylesheet (there was a 1 pixel offset in the background image for the search bar).

The page I ended up with looked almost identical to the design I started with. To make your own comparisons, you can look at a low-quality image of the design and a high quality demo of the page. Pretty close, no?

Submission

In the two days (of intermittent coding) it took to finish and submit the template, there had been three more entries. I still liked my chances, but a new idea had surfaced: a template install that required no tinkering. While writing up the installation for the “Prayer Garden” template, it was painfully obvious how many pages, forms, plugins, and settings that needed to be altered to make it happen. Most people willing to do that much hacking don’t even need a template, they’ll just design their own. So I decided to make another design.

The first criterion for this design was that it seemlessly (CSS only) go over the default page for Textpattern. That it be broadly appealing was now secondary. Actually, I had decided that in the interest of the both criteria, the design should be wildly customizable (at least in color). In that interest, the design should be simple (actually, this is always a cardinal rule). I began to create a page with no images whatsoever…just colors and shapes. What took form was something like the Whisper Typo theme. Because it was lightweight and colorific, I went for the double entendre “Spectral”. But it didn’t look right…so I went back to square one.

One of the most successful themes for any platform has been the Kubrick theme for Wordpress. I decided to do something (loosely) similar: large, customizable header; clean, basic text. Furthermore, there seemed to be plenty of light, white layouts (lots of white, a splash of color, dark text). I decided to go the opposite direction: dark page, plenty of color, light text. Fortunately, I still had all of those left-over images from my previous search for inspiration. All that was left was to make it happen.

Again, you can compare a low-quality image of the design and a high quality demo of the page. I decided to keep the title “Spectral” (now only a single entendre), and add an explicit demonstration of the design’s customizability. Just a little work with a colorful image and you have a unique header.

Competition (Like the Block) is Hot

In the two days (of intermittent coding) it took to finish and submit THIS template, there had been four more entries…and there were two other entries on the day that I submitted (this was only a few days before the deadline). The competition was stepping up, but I had no idea what was in store. In the final two days before the deadline, no less than 21 more entries were made (almost double the entries when I started my first design). Clearly several people had the same light-on-dark inclination, as (depending on your definition) a quarter of those final entries incorporated it. I’ve largely abandoned hope of placing. I’m quite happy with my designs, and I think they are going to be competitive…but there are others with novel delivery and functionality that I think will take most of the cake.

What did this teach me? I submitted early and made my submissions strong enough to compete with what was already there. I tipped my hand, and ended up showing it wasn’t all that strong. In the future, I will wait for the deadline and spend that time making the design an unstoppable juggernaut. Why do “good enough” when you can do “perfect”?

In Related News…

Since making the submissions, site traffic has gone up dramatically (it is now starting to settle down a little). The perfection theme has also led me to fix some persistent errors in our business site even though it is due for a redesign soon. Those fixes boosted our Sitescore to a 9.6…which is currently good enough to qualify for #7 (out of 125,000)! Even if I don’t win anything, I feel like I’ve contributed something of value to a community that I love, and we’ve already begun to reap benefits. I should do this more often.