nemoorange.com

Textpattern Refresh

This story begins several weeks ago, when I created my first plugin for Textpattern. The plugin enables the user to override the default stylesheet and instead use a custom stylesheet for the Txp admin, similar to hpw_admincss. Before I release it, I’m building up some custom styles that can be used in conjunction with the plugin. In creating these stylesheets, I foolishly saved-over the main CSS for this site. I basically flushed away all that work I did 7 months ago. The funny part is that I actually committed this act of mindlessness twice, the first time working on dropshado.ws. While I was frustrated that I made such a stupid mistake, I took the loss as an opportunity to clean things up.

nemoorange.com has been running on the same Textpattern installation since I first registered the domain back in July 06. Since then, my collection of styles, forms, and pages had grown numerous. In constantly tweaking and revising the site, I created more and more code snippets to make it work. For example, the (now-defunct) daily photo section used 7 different article forms, 2 page templates, and 40 lines of CSS. On top of that, all those forms and styles were developed a bit recklessly, back when I was just beginning as a web designer. Since it was all put together piece-meal, the code was getting ugly. Everything worked separately, but as a whole it was incoherent . My goal during the last revision was to clean all of that up, but I only addressed the CSS. If I really wanted to make this site all bright and shiny, all the elements—the forms, styles, pages, and how they interfaced—would haved to be inspected.

Going through the Txp installation allowed me to work some new web-designer muscle groups. When I made revisions in the past, it was directly to the live site. This is a bad practice, and is not a valid option in the professional field. This time around, I started by creating a new sub-domain with a fresh Txp install for the maintenance mode. I copied the database over so everything would match. But as a matter of happenstance, I soon discovered MAMP —a development environment for my Mac, so my local computer would act as the server. My thanks go out to Jonathan Stubbs, for putting together a terrific walkthrough of getting Txp running locally. As a web designer, this meant one basic thing: I didn’t have to worry about bandwidth or waiting for page refreshs. Before I started eliminated the cruft, I backed up all the forms, pages, and styles with hcg_templates. Now that all the furniture was moved out of the house, I could start knocking out walls and get to re-construction.

Cleaning house

First order of business was to delete anything that wasn’t being used. Old page templates and article forms and custom styles all got the ax. With the crud out of the way, everything had to be re-built. Surprisingly, putting it all back together was relatively easy. I was overhauling everything, so I didn’t have to worry about making sure something old would fit into the new scheme.

I first implemented YUI Reset CSS to start stylin’ tabula rasa. I then created my own grid CSS based off of Nathan Smith’s awesome 960 grid system. Mine’s 920 pixels wide, separated into four columns. Yes, the previous version employed the same grid-based layout as well, but now I have all the styles for that grid separated nice and neat. If you pull up a view source, you’ll see lots of classes of col1 and col2. After that, the workflow was fairly haphazzard, jumping from form to page template to CSS.

To you, the difference between the design two weeks ago and today should be barely noticeable. My aim was not to put a new skin on the design, but work with the skeleton itself. I basically employed all the good practices I’ve learned in the past six months. The result is a much cleaner site, with less clunky forms, a significally smaller CSS file. I also separated some of the special CSS for certain sections into their own files.

Now that I identify myself as a web designer, it’s integral to my professional livelihood that I have something that reflects my talent. The previous version—while it did work just fine—was a rat’s nest if you looked under the hood (I apologize for mixing metaphors). Now this site is something I can be proud of. All the same, it will be interesting to see how I will feel about that six months down the road.