Usually a redesign of a one-page site of mine doesn't warrant a blog post, but this story is a little bit more interesting, mostly because of the work it built on. I haven't really told the story of a design before. I'm curious how this will pan out.
I was in my RSS reader last night after an ill-advised after-dinner coffee and saw Naz's post on Weightshift about the personal page...meme? Can we call it that? I had long since moved to a single-serving homepage w/ some text and an image. In the meantime about.me made it a big deal. (Nevermind that Dallas-based Magnt had a better offering since long ago.)
But let's face it, Naz's, and his imitators', looked better. And most importantly, he posted the source on Github. That meant that seconds later I had my own copy of his source on my computer and started replacing his images and text with my own.
It used a script called backstretch to position and size the image, also on Github, which I also forked and modified for my uses. Since I had already decided to use a wedding picture, I wanted to try and at least create two layers so the field grass could superimpose the text box. The original backstretch script could only accomodate one image which it threw far into the back of the document model. That was easily fixed in just a couple lines of code.
That got me thinking about the awesome Github 404 page. Maybe I could parallax the grass! Well I tried applying the parallax plugin to the elements in question and no dice. I tried a new page that didn't use backstretch and applying the parallax plugin there--still no dice. Last night I decided to stick to just the two layers--if someone had a window sized just right, they would notice the grass popping up over the bottom of the box.
Of course this morning I couldn't let it be! I read most of the parallax code and while it was pretty much what I expected, its need to accomodate for all manner of circumstances made it overly complex to just copy and paste to fit my needs. I ended up just hand-coding some simple code that moves the grass in the direction you move your mouse, after doing a single left-right sway once on page load just for good measure.
I'm far too pleased with the end result. Now I am considering trying to get the foreground grass to actually bend as it moves...in the meantime if you haven't you can check it out.
Thursday, January 06, 2011
Ftrain: The Web Is a Customer Service Medium. Paul Ford has been writing on the web longer than most and as usual this piece is excellent:
What sums it up best, to me, is this image published on the blog Kotaku (if you know where the image originates please let me know). The image was posted as a comment on a blog post linking to an article about British computer-industry millionaire Clive Sinclair marrying a younger woman. Here is the image:
Consider what that cartoon means in that context: It implies that the commenter feels—with some irony and self-awareness, I'm sure—that his opinion, in some way, is relevant to the question of whether Clive Sinclair should marry a particular woman. This is, for many obvious reasons, completely insane. And yet there was an image already sketched and available to that commenter so that he could express this exact sentiment of choosing not to be outraged at a situation he read about on the Internet. WWIC in action.