Penciled In

About 10 months ago I started working on a redesign of Focal Curve. It was to be inspired by two things I love: science fiction and comics. It was to be drastic and fresh and cool, rich in color and detail. It was to bring with it technological advancements, enhanced functionality and long-desired features I couldn’t previously be bothered with. I’ve tinkered at length, scrapping and restarting at least half a dozen times since the seed was planted. Numerous bursts of productivity interspersed with long droughts of slack, punctuated by occasional spasms of disappointed frustration. Nearly a year later and Suckswuh approacheth fast, tick tock, pressure to relaunch before all the standardistas gather. The redesign must be completed in time!

This is not it.

By mid-February it became clear my scope was too broad and timeframe too narrow to possibly finish by mid-March. But I really wanted to get something new online. I was never satisfied with the previous incarnation, mainly because I rushed to get something online in the weeks before SXSW05. So not wishing to half-ass it again, yet still wishing to freshen things up around here, I decided to simply wipe the slate clean, to strip the thing down to its component parts, to gesso the canvas.

Presenting “Sketch.” Borrowing from Doug Bowman‘s interstitial Bleached version (borrowed in concept only, all the work here is mine), Sketch is minimalist and transitional. This will be a placeholder while I continue slowly slogging on the as-yet-untitled real deal.

A few notables:

  • I’ve gone liquid! Semi-liquid, actually… with min-width: 500px; max-width: 1100px;, so perhaps “gelatinous” or “slushy” would be a more accurate term.
  • Removed a few straggling presentational ids on structural divs, replaced with names which describe their function. #sidebar is now #subnav, #footer is now #sitemeta, and #header has been redubbed #branding, with a hat-tip to Malarkey.
  • Grayscale, baby. The only color here is that dusty blue on unvisited links, the lovely and popular #069.
  • Trebuchet. No further comment.
  • The drawing seen in the site header at launchtime was quickly scribbled and scanned around 5 AM today, scant hours before I disembarked for the airport. And while I said I didn’t want to half-ass, well, yeah, I half-assed. I had to draw something before I left my scanner behind, so I did this and slapped it in. It’ll do, but I don’t like it, and will draw something else when I get back from Suckswuh. I scanned a new drawing to replace the previous “malformed robot hand reaching for a gumball” art. Perhaps I’ll continue occasionally swapping out header doodles for the duration of this design.
  • Completely rearchitected CSS files. The previous design had a master style sheet and numerous area-specific sheets with names like “header.css” and “work.css.” I’ve now broken the sheets apart by function: layout.css, typography.css, color.css… as well as keeping a few section-specific sheets for rules that need not be included until called for. It’s the first time I’ve taken this approach and I have to admit there’s a variable cost-benefit ratio. While it’s nice to know exactly which file each property lives in, having multiple rules scattered to the four winds but all applying to the same element can sometimes offset ease of maintenance with pain of getting-stuff-done.
  • I’ve also been organizing my individual properties in a more orderly manner, working on each element from the outside in and back to front: display, position, margins, dimensions, borders, paddings, background, foreground, typography.
  • Finally upgraded WordPress, running 2.0.1 now. I’m a late adopter. Some of the plug-ins I had grown quite attached to no longer work and haven’t been updated, so I shall have to find equivalent alternatives.

I’m launching this live from Austin, comfortably ensconced in the downdown Hampton Inn watching free HBO and sipping a $2.00 PowerAde from the vending machine. Since this whole design was produced start-to-finish in about a week and a half, QA time has been minimal. It’s as yet untested in Mac browsers (gotta get me one of those some day), nor in old browsers. Feel free to report grevious bugs in the comments. There are a few I’ve already spotted and shall address in a timely manner, but right now I must rest up for the week of unabashed geekery to come.


  1. Here’s that Mac perspective you might be after…

    Looks and feels good in Camino 1.0 (and the rest of the Gecko gang: Firefox 1.5, Flock 0.4.1, and even Netscape 7.2), in Opera 9.0, in OmniWeb 5.1.3, and in Safari 2.0.3. Some very strange things happen in IE 5.2 for Mac (no surprises here). Just in case that bothers you though, here’s the run-down: your #branding div all but disappears (only the border remains with what looks like a couple of pixels of padding), while your #primenav (#info, #work, and #blog) wrap into a vertical list on the left-hand side – pushing down your content. Under your content is the #subnav – looking fine, except for its position that far down the screen. Your actual content, or .post, looks normal. As does your #commentform and footer (#sitemeta). This may, or may not bother you (personally, I buried IE 5.2 for Mac, and finished mourning its passing, about 6 months ago).

    That’s it. I’m out of browsers… nice job! I’m looking forward to seeing subsequent sketches.

  2. Yeah I totally need a Mac, if only for site testing. In my experience, Gecko renders very consistently across both Windows and Mac, but Safari is the real bugbear (unless someone knows of a Windows browser using KHTML/WebKit as a rendering engine?). IE/Mac is officially on the low-grade support chart. If the content is accessible and it doesn’t crash, I probably won’t go to any further lengths to correct layout issues for that browser.

  3. I love the new sketch! Very cool :-)

    Also very impressed at how very cool your redesign is given the time you dedicated it. Too often the opposite is true (*cough*lookatmybrotherinlawsredesign*cough*) — people spend forever doing a redesign that is just, well, uninspiring. Or downright crap.

Comments are closed.