Wuholic!

May 12th, 2011

Everything needs a name, deformed things moreso. “Wuholic” is what I’m calling the new theme on Gesine Kratzner’s website. It’s a fusion of Jeff Ngan’s lovely Wu-Wei theme for WordPress and the Flash-based design of her old site, courtesy of Picaholic.com . It launched today, just in time for Gesine’s big TV moment.

Picaholic offers a slick flash-based portfolio website to photographers. Gesine signed up there in 2008. Their template is nicely designed, looks great and is very useable once it finally finishes loading. But it’s implemented entirely in Flash, which means a bunch of bad things for us: the contents are unindexed by Google, iPads can’t see it, you spends hours waiting for things to load every time you click, et cetera.

Unfortunately, Picaholic hasn’t been very realistic about the web’s inexorable transition away from Flash. They recently added an HTML mode, but it’s pretty busted. So Gesine decided it was time to give them the heave-ho. Meanwhile, she already had a WordPress blog up and running. I proposed it wouldn’t be too hard to re-implement everything Picaholic does using plain old HTML, CSS and Javascript, and tie it into her existing WordPress blog. Instead of paying Picaholic $180 a year, she can buy me lunch. (That’s just one of the many awesome perks she gets for marrying me.)

Of course, “not too hard” is always harder than I think it’ll be. There were moments of profound despair. But I got it done, and I’m pretty happy with the results. It’s actually a luxury to re-implement a finished interface design; the sticky usability questions were already out of the way, so I got to concentrate on architecture & engineering.

For the WordPress nerds out there: the portfolio pages are just Pages organized hierarchically, containing plain old Galleries. The blog posts are just Posts — always were. I created a template for the gallery pages, fusing the Picaholic layout with the Wu-Wei text design, using Shadowbox (slightly hacked) and jScrollPane on top of the standard Gallery shortcode. The animation page uses Vimeo SimpleGallery, also slightly hacked. The front page uses Portfolio Slideshow. The animated menu is pure jQuery (featuring hoverIntent)

Flash is dead! Long live Javascript! So long, Picaholic! And thank you, WordPress.

Leave a Reply