In the Beauty of the Lilies

Unless you’re using IE8 or below or you’re on a smartphone, you’re probably looking at 2-4 bright lily pads right now. Why? It’s really a lesson in self-editing.

Screen shot from Illustrator with flower shapes from this site design

Drunk on the heady possibilities of CSS3 and jQuery, my original vision for this site was to have no main navigation. It sounds great already, right? And it gets even better: Each corner of the screen was going to feature a lily pad that was going to serve as a link to a main content section (Blog, Work, etc.). If the user were to click on a lily pad, the requested content would appear to rise up from the depths of the pond (through animating the box-shadow property via a sketchy plugin I found), after which — wait for it — a jQuery-powered carp would appear from beneath said lily pad, elegantly fading out as it reached the middle of the screen.

I think if I’d written out the concept like I just did, I might have realized it was fundamentally uh, not good. But, of course, I didn’t. Instead, I saw the idea through to completion in a WordPress theme — and thus ensued many of the classic stages of grief as I clicked around my painstakingly created masterpiece: denial, as I tried to convince myself it was fun, different and even intuitive to use lily pads for a site navigation; anger, as I rued the precious hours I’d spent putting it all together; and finally, acceptance, as I came to terms with my site’s fundamental flaws: it wasn’t very usable (users want to navigate a web site, not a pond), and it wasn’t at all scalable (what if I wanted to add another main content section?). It was basically an awful Flash site from the early 2000s, just done in semantic html and javascript.

As you will read in my About section, I pride myself on keeping content top of mind when I’m working on a design. It’s not rocket science, but I’m of the opinion that design template of any kind — print, web, whatever — should never, within reason, dictate the content. It should always be the other way around. You know what I’m talking about — those websites you have to work on early in your career where “you can only add five lines of copy to the I Love My Cat section, otherwise the layout will break”. This I believe, so realizing that I’d got so carried away with some minor design garnish that I hadn’t given much thought to the greater goals of the site was a hard pill to swallow.

Anyway, this is a very long-winded way of saying that I had to suck it up and go back to square 1. Or actually, square 2, because I found myself with a bunch of very nice lily pads and other pond-themed PSDs I’d spent hours creating for the non-starter version. And so this site design was born – I kept the lily pads, but went with a more conventional, scalable navigation. I scrapped stupid gratuitous stuff like content sections rising from the watery depths. The carp is no longer jQuery-powered, but if you’re reading this at over 768px, you might see him make an appearance. What can I say? I like carp. No, really, I do.

CSS, JavaScript, Nerdy Web Stuff

Comment on this entry

* = required field

HTML nerds can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Browse by entry

Browse by topic

Browse by date