About the Site

Hi! Welcome to my Web site! I made it! This page explains the details, both visual and technical. The goal of the recently-redesigned site is to make it easier, faster and more delightful for me to create content in areas I care about. I know people use RSS readers. I know that most people will never really look at the site once they’ve been here once. But it still pleases me to put effort into it.

Overview

This site is built with the open-source WordPress publishing platform. I’ve been working with WordPress for a few years now, and have come to enjoy it.

The vast majority of the elements on this site were built from scratch. In a lot of cases, this wasn’t necessary—a lot of talented folks release great plugins for WordPress, for free—but I did it anyway.

The design

The new Lyza.com uses a WordPress theme (visual and layout treatment) I designed from scratch.

Imagery: My own

I am not a proficient graphic designer, so building and editing the photo illustrations throughout the site took me an estimated 100 hours. No, really. Nearly all of the items you’ll see in the images as you bop around the site are photos of objects in my home that I have some attachment to: books, anachronistic tools, papers, brass weights, engravings from old books, knick knacks and rocks. As time goes by I hope to build on the graphic elements even more.

The wood effects, navigation rollovers, three-dimensional shelf effects, et cetera, were all created by (my) hand with varying degrees of success. It probably goes without saying that almost all (my hunch is: probably all but I don’t want to make a mistaken statement) of the photography on the site is my own.

Imagery: Credit where it’s due

There are a few exceptions: the following images on my site are from other sources:

• The “magic book” at the top right of the navigation was purchased from iStockPhoto, as was the ribbon illustration that forms the basis of the page title treatments on most pages (though I manipulated both considerably).
• The weather icons used on my projects & hobbies page were created by Wojciech Grzanka of ICONBEST.com.
• The texture for the background of my header and footer (water stained effect) is based in part on “Splat Texture” by irisb477 on Flickr.

Typography

Typographic design on the site emphasizes workhorse traditionalism and elegance simultaneously. Those browsing the site who have the Caslon font on their computers will have the best experience: the entire CSS font stack is based on Caslon, though there are tolerable fallbacks for Caslon-less systems.

I chose Caslon for the new site based on one thing: I own Caslon type, as in, the metal kind, for my letterpress hobby. It’s a font I chose for printing because of its staid reliability and dignified presence.

Layout

I used the Blueprint CSS system to create a grid-based layout for the new site. Despite the relatively organic, even slightly grungy tone, there is a lot of balanced grid work underpinning it.

Technology

Tweaking WordPress

I generate a lot of what are called “custom loops” in WordPress, both for fun and profit (at work). That is, I poke WordPress in the right direction such that I can use posts and post metadata all over the site, in ways that I feel like. So much so that I actually released a WordPress plugin called LyzaLoop in case anyone else wants convenience in creating custom loops. You can also read about Lyza Loop on this site.

For the photos you see throughout the site, as well as the two interactive photo viewers (on the home page and the photos page), I re-purposed the PHPFlickr library written by Dan Coulter into a WordPress plugin. I extended his PHPFlickr class to do some WordPress-y things like database caching and some short code support for posts. Bottom line is that I can produce and distribute content faster, and that’s important. I haven’t released this plugin yet and am not sure if I am going to (would require cleanup and documentation work).

I also wrote a generic data retrieval and caching functionality (primarily for XML or RESTful Web services) to pull in other things you’ll see around the site. I plug into the Amazon API to provide links to relevant books and grab cover images. I use the Twitter API to provide Twitter feeds, and I call the Weather Underground API to get recent readings from our weather station.

Taking advantage of new WordPress features

I developed the site while WordPress 2.9 was still in development and used the early beta versions on my development site. As such, I was able to take advantage of some of the new features, including post thumbnail images.

Widgets and stuff

I created the photo viewer at the top of my photos page on my own, using a combination of my hand-hewn Flickr plugin, AJAX and the jQuery JavaScript framework. It took a while because I insisted on writing everything myself: the animations, the crossfades, the logic. I did use the jQuery plugin Tipsy for some tool-tip support.

Optimization and Validation

The site, while visually intensive, scores an A on Yahoo!’s YSlow scale. To achieve this I’ve focused on GZIPping content, concatenating and compressing JavaScript, using CSS sprites and other tactics to improve performance. So now I’m dependent on Dreamhost servers being zippy, which sometimes seems to be a hit or miss affair.

Update: Argh, I installed the IntenseDebate plugin for commenting features and it includes a lot of JavaScript, bringing my YSlow grade down to B on most pages. Still, I’m doing what I can for performance across the site overall.

Update 2: Have now uninstalled IntenseDebate. Grade back to A (on small site/blog scale) for nearly all pages.

I’ve also aimed to create valid, clean, semantically appropriate XHTML, JavaScript and CSS to the best of my ability.