Andy Laub

JQuery. I’m pretty sure that’s where this all started. A few months ago I redid my work site in effort to add a little more, well, pop. In doing so I had a little discussion with JQuery and we decided that it would be fun to hang out some more. Since then it’s been finding its way into more and more of my projects, as it’s proven to be remarkably useful.

As I become more familiar with it, it’s easier for me to see what it’s capable of (hint: everything), and as a result I started thinking about a redesign of this blog in an effort to completely and utterly abuse integrate some of those capabilities. As work progressed, I realized there were some other bullet points I’ve been wanting to hit as well. Here’s the laundry list:

JQuery

Like I said. In this case I’m using it mainly for the archive dropdown and the endless scrolling on listing pages. I played with some concepts that involved more horizontal scrolling, but decided to ultimately go a different direction.

Grids

I’ve been basing the various iterations of this blog off of grids for a long time, but this is the first time in awhile where said grid hasn’t been dictated by Flickr. In this case I decided to try a 960 grid system and ended up using a 16 column grid here, with each column equaling 50px with a 10px gutter. I used this CSS generator to develop the initial CSS.

I’m debating whether I’d use this technique if I were to do it all again as I had a couple of hangups with the process:

• I didn’t love the naming conventions for the various classes; I ended up replacing all the underscores with dashes because that’s what I’ve become accustomed to using in my CSS.
• The system falters somewhat if you’re floating multiple blocks inside of a larger block (for example, three .grid-3‘s in a .grid-9. You need to add .omega (to remove the right margin) to the last block in the line, which doesn’t bode particularly well for dynamically-generated content.
• It seems like an excessive amount of markup in general. Then again, I suppose that comes with the territory in a system that’s attempting to be somewhat universal.

Dynamic Stylesheets

I’ve been wanting to experiment with adding constants to my CSS files for some time now. One way of doing this is with LESS, a Ruby gem (also available as a WordPress plugin, thankfully). LESS basically allows you to define constants and nest classes within your stylesheets, which is a tremendously useful concept.

But in short, I hated it. I attribute part of this to the fact that I had already been messing with PHP as a way to dynamicize my CSS, but the LESS system ended up being a little too clunky for me to find useful:

• LESS does math, and that’s great. Except when it tries to divide my shorthand font declarations, and as a result the entire CSS becomes null and void.
• It seems that commas are no less of a hurdle, as I found LESS to stumble when I was trying to define the same set of properties for two different elements.
• As I mentioned, any issue with syntax will cause the entire stylesheet to be totally dysfunctional with no indication of what the problem is.

I ended including the CSS in PHP form, which has functioned in a much more predictable manner.

Color Editing

This is the third version of mine to feature theme-editable colors. In this case, though, I ended up going a slightly different route. I had been using a variation of the functions.php file from the old default Kubrick theme, which writes custom CSS in the header of the HTML to define the chosen color. Instead of that, I decided to make use of my newly-created PHP CSS and pass that new color to the CSS via a URL variable. Much cleaner.

In addition, I decided to make light and dark stylesheets from the get-go, which I can also switch from the admin.

Mobile Friendly(ish)

I’ve been watching with interest the recent developments in “responsive web design”. As such I decided to define an alternate version of the site for mobile devices and viewports smaller than the width of the normal site. It’s an early effort, but I’m pleased with it for now and like the rest of these points, it’s experience that I can carry forward to future projects.

And More Less

From a content standpoint, I really wanted to simplify my own presentation of myself. I decided to eliminate the “about” page for the first time in basically ever, opting instead to let my various (side) projects and social networks do the talking.

From a contact standpoint, you may notice that the comment form is no more. Existing comments have been preserved, but the ability to comment has been disabled (for now, at least). Same goes for the contact form, for similar reasons: anybody who wants to discuss an article or get in touch is someone I likely already talk to on a regular basis (or someone I would talk to). I get the whole public discourse thing, believe me, but that happens so rarely here that I felt it was no longer worth the inclusion.

So that’s it! Let me know what you think OH WAIT YOU CAN’T.

I launched version 14 of this site, officially, on May 1, 2007. That seems like a really long time ago, especially by my standards. I’m not sure how long I expected it to last back then, but I knew that I was pretty happy with it, especially considering how quickly it all went together.

Comparing the launch version to version 13 before it, it’s not hard to see what I felt was working and what wasn’t. A good portion of the content styles and graphic elements made it to the new site unscathed, while dropping the heavy-handed and overly divided feel of the previous design.

The Grid

Version 14′s major defining element was the grid based entirely on the Flickr photos at the top. Initial versions had nine 75px columns separated by 5px alleys, and in November 2008 I added a tenth. While it’s not a new thing for me to have grids defined by the size of my images (as evident in all of my site designs back when this was purely a photoblog), this was the first time I gave myself more than four columns to play with, and I really enjoyed that flexibility. I think the layout worked even better on pages where the Flickr photos weren’t visible; there was still a strong sense of grid and organization, but without the obvious indication of where it was all coming from.

Content Separation

The other major stylistic decision was the way status/blip/link posts were presented when compared to the regular journal entries. After experimenting with different options I ended up with the meta for the posts in the center column, while short posts would live on the right and full posts on the left. It worked best when it was populated evenly, but there were many times where compulsive Twittering would leave the home page entirely empty on the left column.

Then & Now

So how does this newest version compare to the outgoing iteration? You can see that while I haven’t done much with it yet, the grid concept remains intact.

In terms of visual carryover, though, that’s about it. The overall look of the new site was influenced heavily by those wallpapers I just did and my portfolio. I continue to use Helvetica for the headers, but I’ve moved back to Lucida for the body copy, which harkens all the way back to Version 8.x, as ever since then I’d pretty much used Helvetica for everything.

The dotted lines, which I have dearly loved for a very long time, are hanging on by a thread. Because I’m not using a white on white on white layout this time around, everything is divided by blocks of color and shading, which means borders as a whole just aren’t necessary.

Finally, the Status/Twitter posts have become the foremost bit of information on the new site, with Flickr taking the slot below that and the Journal even further down. This just seemed like the only way it could work, organizationally. I didn’t feel that the Flickr content was deserving of the most prominent spot on the page, and the Journal couldn’t be at the top simply because of length. As-is, most visitors should see all three sections when they visit and be inclined to scroll down. Or everybody reads this in RSS, in which case it doesn’t matter anyway.

All that said, I’m quite happy with this latest version, and I’m most interested to see what it evolves into as time progresses.

Bear with me; I’m going to head back to theatre-nerd reference land for a minute. I mentioned a few times that I was just in Gypsy, a show about a young girl who is pushed into burlesque and stripping by her overzealous, fame-seeking mother. There’s an exchange in the show between one of the strippers at the theater and the daughter in which the daughter explains that she “can’t be a stripper because she has no talent.” To which the stripper responds, “to be a stripper all you need to have is no talent.”

To be a designer all you need to have is no talent. Stop and think about that for a second. How many terrible designers do you know? People that have no artistic skill whatsoever but still manage to extract the dollars from desperate clients who don’t know that there’s a better act just down the street.

Near the end of the show, the daughter has accepted stripping and become quite famous for it. She makes a statement during her act about being an “ecdysiast”, or one who sheds its skin, and exclaiming that “at these prices, I’m not a stripper; I’m an ecdysiast!”

With that in mind, there are plenty of truly talented designers out there, and as is often the case, they have higher rates. But at the same time, you’ll find designers charging like they’re ecdysiasts when they’re not, and vice versa. Such is life on the internerd: anybody can claim to be anything.

I was putting a thing together at work today which, among other things, was featuring a new vendor of ours, ipath. Because of this, I ventured over to their site to check it out, and it is good. There is a section where people can send pics of their ipath shoes. One week, however, they were pretty light on images so they just took random photos of their office, which is probably the funniest thing ever – you don’t generally expect to see “isn’t this the coolest printer ever?” on an action sports site. Also notable, since I’m in this groove, is Alpinestars, as well as Seven2, whose initial ads (which are awesome) had no url on them so for a long while I didn’t even know what they were for. And finally, go get this magazine because it’s cheap and interesting.

I saw this movie/music thing somewhere and figured I’d do it too*:

• opening credits: Never Gonna Give You Up Cake
• dreaming / waking up scene: How It Should Be (Sha Sha) Ben Kweller
• happy friends scene: Bohemian Like You the Dandy Warhols
• driving scene: Hunter Björk
• action/fight scene: Horndog Overseer
• car chase: Date With The Night Yeah Yeah Yeahs
• happy love scene: Hotel Yorba the White Stripes
• mellow scene: Float On Modest Mouse
• sex scene: Stellar Incubus
• angry / bitter scene: Gone Ben Folds
• breakup scene: A Mistake Fiona Apple
• evil / revenge scene: Shiver Maroon 5
• contemplation scene: In Other Words Ben Kweller
• sad / breakdown scene: Look What You’ve Done Jet
• death scene: Flying High Jem
• funeral scene: Winter Tori Amos
• nostalgic scene: The Scientist Coldplay
• closing credits: Supreme Robbie Williams

*If you don’t already have iTunes, you live a sad, sad life.