Web development is a great field to work in for a lot of reasons, but for me the best reason is the variety. One day you’ll be adding a guest editor to a high-volume cooking website, the next day you’re adjusting the responsive menu on a drug-culture magazine, and the day after that you’ll be tweaking the careers page on a material handling solutions company’s site — it never gets boring.

Tumblr?

That said, when our director of client services asked who wanted to build a Tumblr theme, it was a bit of a departure. When he said it was for Wild Turkey, I could not type “Meeeee!!!” fast enough. Back when I was in a band, Wild Turkey 101 was our go-to drink. I have a deep fondness for the Austin Nichols brand.

The Wild Turkey Spiced comp

As for Tumblr, I was excited about the prospect of learning more. I had previously done a little blog editing on Tumblr, and was impressed by the flexibility and thoughtfulness of the user interface. After some research into the capabilities and limitations of a custom theme, we received a set of very stylized comps — background images, wood-plank navigation elements, and a set of high-res sample images/posts.

The site also needed an “age gate” to comply with a variety of alcohol and advertising laws. This would have to be entirely HTML/CSS/JavaScript, since Tumblr does not allow server access. I had presumed I could find an age gate solution on GitHub or via Google, but was surprised at how difficult it was to find. Nothing seemed to have all of the required elements, so we assembled/wrote our own in jQuery and dubbed it jQverify. Catchy, right?

Once that was working properly, the next hurdle was properly serving the images without making the site unusable for mobile devices. Adding to the complexity was the fact that the comp was delivered at 200 percent scale, for high-pixel-density devices (such as Apple’s Retina display). After another round of research, we realized there were no practical mobile-first/retina solutions with a pure client-side approach. So again, we wrote our own and called it sml-image to indicate the simple small/medium/large image approach we were using.

The way it works: All images are saved at 200 percent (lg), 100 percent (md), and 50 percent (sm). The small image is served by default (for mobile), the medium for desktop/tablet AND mobile retina, and the large for desktop/tablet retina.

The final site – best viewed on Tumblr to see the animations

Now that we had an age gate and way to serve images, the rest of the build came together quite smoothly. The last significant hurdle was the size of the static images used for the background, navbars, title, etc. These had mostly been PNGs, since they required a transparent background to render their drop-shadows properly. We were able to modify a few of these (purely rectangular) by removing the drop shadow, converting them to highly compressed .JPG format, and using a CSS drop-shadow. The irregular-shaped PNGs were a real problem though.

I mentioned the issue to my indefatigable spouse, Rachel Nabors. She promptly bestowed upon me a block of instruction in the fine art of PNG compression. I downloaded ImageAlpha and ImageOptim, and used them on all of the PNGs by opening them in ImageAlpha, and using the “Save As” command to route them through ImageOptim. The result was 75-80 percent file size reduction. As always, I am in the debt of my Good Lady Wife.

Conclusions

This was a surprisingly fun build overall. I’d presumed that the limitations of the microblogging platform would become frustrating, but Tumblr has some of the best development guides I’ve seen. The editing tools work very cleanly, and the platform itself allows a generous degree of freedom. About two-thirds of the way through the build I thought to myself, “No wonder Yahoo! bought them.”

The lack of server access was a nice incentive to build some useful tools, which, thanks to GitHub, are available to the community at large. Most importantly, the client was happy with the result. Head on over to the Island of Kentucky and check it out.

~ Joe Komenda – Senior Front-End Developer