redsky@night

Reloaded: www.patriotroad.com

May 22, 2008 • (1) Comments

If you’ve just wandered in, today, May 23 is the re-launch of Redsky@night, my personal blog and community bully-pulpit. This long-overdue makeover gives the site a new commercial-grade undercarriage, new layouts, new graphic treatment, and—as time permits—it will reflect my new commitment to publish regular content here. As my fulcrum in publishing, RSN won’t, perhaps, move the world, but it has been a useful place to try out new ideas and say things my kids don’t yet understand.

Why the makeover? The year-old previous edition was looking cold and homely and I lacked enthusiam for building Yet Another WordPress Blog. Sure, I’d installed a jazzy new template a couple of Januaries back. But the layout wasn’t my work and I’d never really liked the colors.

And frankly I’d been itching to rebuild the site atop ExpressionEngine and take advantage of a few more of the CMS’s blog-like features that don’t normally find homes in my commercial projects. So, when time presented itself during one of the kids’ school vacations, I knocked this layout together. It’s a fixed-width layout, a little wider than my recent work, but pleasingly proportional.

I set out using YAML ("Yet Another Multicolumn Layout"), a CSS framework, but grew annoyed at the system’s division of core- and browser-dependent stylesheets among several directories. I like to style my pages iteratively, working with live code, and found it hard slogging to determine which sheet produced which result, so I recoded the layouts by hand and tossed out the framework’s overhead. [Note: since experimenting with YAML, I revisited the Blueprint CSS framework and concluded that it’s a much more elegant implementation of the concept. I’ll revisit that in a subsequent post.]

I’ve been learning to color projects recently with subtle combinations of unsaturated colors, similar to the surprising harmonies found in nature. To arrive at a palette, I employed that familiar trick where you take a photo of something organic and then pixelate it harshly in Photoshop using the mosaic filter. The filter discards representational information and leaves you with irregular blocks of pure color, generally in proportion to their dominance in the photograph. For this site, I used a photo I took last summer of sea oats on a dune at Fripp Island and limited the mosaic to 16 colors. That left a jumble of harmonious light and dark colors in subtle variations that I would never have found doing classical color-wheel manipulations. I try to limit the list to six or seven in total, reserving a few darker ones for typefaces.  When I like the mix, I grab each color in turn and add it to my palette using ColorSchemer Studio, a little program that documents palettes very nicely and writes Adobe Illustrator and Photoshop resource files. I mocked the site up in Illustrator, then “polished” it with semi-transparent gradients and subtle borders and so forth. These add depth and a degree of visual richness that raw background colors don’t approximate.

I also implemented the open-source jquery javascript library and plugged in jTabber, a handy script that manipulates the DOM to produce interaction effects with no increase in page fetches. In this case, selecting a tab reveals or hides sections of markup that are composed once, when the page is generated from the database. I’m going to use the same tool for Wayne Aldridge’s http://www.river-of-life.com to create richly-useful landing pages.

I’ll probably circle back and document the project in more particulars at http://www.villagewerx.com, but in the meantime, welcome. I hope you’ll enjoy the occasional entries I post here. Comments are welcome.