A few weeks ago, Rachel Sugar, one of my coworkers, had an idea—based on a book called Jews and Shoes—to present some illustrated factoids about footwear in Jewish tradition. Staff favorite Vanessa Davis was nominated for the art portion of the project, and I asked if she’d be interested in working on what was then still a very vague idea. She was game, fortunately, because she rocks.
We were originally thinking that there’d be just a drawing of a shoe with callouts to Rachel’s notes, but when she pulled together the actual text, few of the factoids corresponded to a particular part of a shoe or foot. So it seemed more sensible—and a better use of Vanessa’s talent—to have a shoe surrounded by bunch of vignettes.
I didn’t get the draft of Rachel’s text until just over a week ago, so I was afraid Vanessa wouldn’t have time to do the drawing after all—I try to give artists at least ten weekdays’ turnaround, and our office is now closed every couple of days for various Jewish holidays. Some of the shoe-related traditions relate to Yom Kippur, which is this Thursday, and the story was pegged to that date. Vanessa came through, however, toiling over the weekend for us. She sent a sketch late on Saturday night, which I approved on Sunday, and the final artwork arrived on Monday evening.
Well, sort of.
Yes, you can make text pop up when you roll over an image, using nothing but pure, clean, fresh HTML and CSS. Does it display properly in any version of Internet Explorer, though? Not according to Browsershots it doesn’t. Besides which, I couldn’t get the layers to stack in the right order. (Does anybody know a workaround for this problem? I had an image split into nine rectangles, with the z-index on each set to zero, and then a text rollover on each using Eric Meyer’s method, with the z-index set to 100. Theoretically, all the images should be under all the text rollovers. In practice, however, each rollover was stacked beneath whatever image chunks appeared further down in the code.)
Oops—I don’t have the Flash program at home, because I got the standard version of Creative Suite 3. (I did discover the free, Web-based Flash tool Sprout Builder, but I didn’t have the energy to learn another new piece of software at 10 pm, when I got home.)
So I spent the morning today finishing the thing: cutting up and swapping in the final art, figuring out how to style the pop-up window the way I wanted it (mostly—I didn’t have time to figure out how to embed fonts), figuring out how to make the pop-up window usually disappear when you mouse off of the image. None of this would have been possible if I hadn’t spent the last month learning Processing, a programming language that’s almost identical to Actionscript. Look! My grad school education is already paying off!
And then I lost another hour of my life to making a header for the home page that incorporated both Vanessa’s drawing and the awkward artwork for today’s other feature.
Finally, at 3 pm, everything was posted. Then lunch, then class.