Web Design for Sara Ryan

In January, I got an email from Sara Ryan, asking if I would be interested in designing a website for her:

Hi Scott — I found your site while searching for Portland web developers who use WordPress, and I really like the look and feel, as well as your focus on CSS and web standards.

I’m contacting you to ask if you might be interested in redesigning and enhancing my web presence, which I’ve been hand-coding since 1995. (Yeah, I’m old-school.)

About me: I write books and comics scripts, and I have a day job as a librarian. My second novel, THE RULES FOR HEARTS, is coming out in April from Viking. My main site is, straightforwardly enough, sararyan.com. I’ve recently also bought empressoftheworld.com and therulesforhearts.com, (my book titles), and I’d like to set them up as subsites, and run everything with WordPress.

I checked out her websites and found that she has written several well-received mini-comics as well as a Hellboy comic which I have a copy of. So a local author who also writes comics and hand-codes her own website is interested in a web-standards Wordpress site and sought me out? Cool.

I’ve been working on the site off and on (mostly off) for over six months, and Sara has been incredibly understanding about the glacial pace at which her site was coming together. (If you’ve done your math you’ve realized that I started on this site just before Zoe was born, so I was understandably busy.)

I’m very proud of the finished work. I don’t really consider myself a designer anymore, but it was fun to dust off the old photoshop skills. The scrapbook-like style was something I arrived on after several conversations with Sara, and it was a challenging break from my normal design style. One thing that made it much easier was that all the paper textures you see on the site are scans of actual old bits of paper and book linings that Sara had stashed away. With building blocks like that, it was easy to get creative.

I’m also pleased with the code that’s running the site. About 80% of the markup is the same as the template I use here on my personal site, but the challenge came in the CSS with all those overlapping layers. If you’re interested in CSS at all, I would consider this some of my best work, and on par with the stuff I do professionally at Pop Art. Due to the ballooning filesizes of transparent PNGs, I had to resort to some old-school trickery with transparent GIFs aliased to the background, but I think it was the right way to go given the 300k+ filesizes of some of the PNGs.

Some parts that I’m particularly proud of are the headlines set in Clarendon Condensed (using sIFR), all the bits like the header which are a little bit crooked so it doesn’t look too grid-like, and the expanding art in the background. You have to be on a pretty big monitor to appreciate it, but the art in the background slides in and out under the main “page” as the browser expands and contracts.

Now that it’s finally done, I can shift my focus to all the other projects that have stacked up in the meantime. It was a much bigger job than I originally thought it would be, but I’m happy that I did it, and I’m very pleased with the results. Check it out, and let me know what you think!