Here is some of the work I've done recently that I'm most proud of. Although these sites all look completely different, the one thing they all share is a modern code base. If you look under the hood, you’ll find lean, mean, standards-compliant XHTML and CSS. If you have any questions, feel free to email me.
33 Beers
BS Brewing approached me in November 2009 to produce this simple site to sell a beer tasting notebook. They already had the design, and needed me to quickly produce the site so they could start taking orders in time for the holidays. Over a single weekend, I was able to create this standards-compliant site that uses lightbox to feature product images, and twitter and facebook links to allow fans to share the beer journal with like-minded friends. This site is an excellent example of how using standards and out-of-the-box solutions, you can produce a fairly sophisticated site quickly.
Pop Art Blog
In mid-2009 we started redesigning the company blog to more closely match the design of the main site. In the process, we converted from an old Community Server installation to a shiny new Wordpress site. Working as both front-end and back-end developer on this project, I really wanted this site to serve as a showcase of the flexibility of wordpress as a platform. Building off early work from my Dojo wordpress theme, I incorporated CSS3, social media, custom author profile pages, and heavy twitter integration.
Talk Like Warren Ellis
(Warning: adult language) In August 2009, I had the idea to create a page that would randomly generate a greeting in the style of famed author Warren Ellis' tweets. I made a simple comp for a single-serving-site, took a first stab at parsing the grammar, and then got a programmer to create the back-end logic. Knowing this site could possibly attract a lot of attention, I integrated a lot of social media features, including a "Post to Twitter" link that would include a hashtag and a link back to the website. Within a day, Warren Ellis had linked to the site, and our traffic went sky-high for a few days.
Freightliner Trucks
In early 2009, Pop Art started working on a redesign of the Freightliner Trucks homepage. Although we had created the previous version, over the years their needs had shifted, and they now wanted the ability to promote multiple truck models, vocations and campaigns. They needed to be able to easily swap out promotions while keeping it simple for users to find what they were looking for. We upgraded their flash slideshow, added more promo boxes, and added the jQuery navigation boxes that overlay the flash. This site is also a nice example of progressive enhancement, using transparent PNG images to layer drop shadows and transparencies on top of the truck images, and switching to hard-edged GIFs for older browsers.
Pop Art
When Pop Art decided to redesign in late 2008, it was an opportunity not only to update the design and messaging to better match the brand, but also an chance to turn the site into a showcase for modern coding practices. We rebuilt from scratch using .NET templates, jQuery enhancements, and a fully dynamic "river of information" on the homepage. With the support of the Pop Art creative and development teams, I guided our creation of a minimal content management system to handle our news and job postings, while keeping as much content in static files as possible to keep the site easy to manage in the future. Our focus was making a site that would not only effectively deliver our message, but also one that we could be proud of behind the scenes, and I'm happy to say that we accomplished that goal.
Dojo Wordpress Theme
In mid-2008, I began work on an ultra-minimal web-standards Wordpress theme. My goal was to create a theme that was flexible enough to allow me to use it on every wordpress blog that I manage. The finished product has two dynamic sidebars and an editable "about" blurb. An options page in the wordpress admin area allows the user to customize various aspects of the theme (such as copyright statement and byline placement), and support for several popular plugins was written into the theme. All the user has to do is enable the plugin, and it will automatically be used. Support for custom stylesheets was included, allowing the user to override the default minimal look with any design they like. This theme is currently in use on Space Ninja, using the custom stylesheet feature.
Detroit Diesel
The 2008 redesign for this site features a strong grid and an emphasis on images. I worked closely with the creative team at Pop Art to make sure that the code I wrote matched that grid and gave them the ability to easily add images to any page without having to write custom styles. We also approached this site with a “bottom-up” mentality by designing the inner pages first. This allowed us to focus on the little details that help every page, like consistent styles for headers and body copy, and a standard look and feel for elements like pullquotes or photos with captions. This library of core styles meant we had to spend less time on traditionally design-heavy areas such as landing pages.
Sara Ryan
Local Portland novelist Sara Ryan contacted me in early 2007 to design and build her a website. In addition to blogging and posting upcoming appearances, she wanted a dedicated section listing her publications, as well as a biography. Over the course of the next six months, I built her site in two phases. First, I set up a fully functional Wordpress installation using the default theme, so that she could start adding content while we worked on the design. Early on, I discovered her passion for old books and paper, and we agreed on a scrapbook theme for the site. Try resizing the page — there are several background elements that slide in and out under the main content well.
Space Ninja
In late 2006 I reworked my personal site for “widescreen” users. Previously, I had a two-column layout that was designed for visitors with small monitors. My logs showed me that visitors with 800×600 pixel resolutions or lower accounted for less than 5% of my traffic, so I changed the design to a three-column layout that would make better use of the available space. At the same time, I completely rewrote the markup in my Wordpress template to slim it down and be more standards-compliant.