Here is some my recent work that I'm most proud of. Although these sites all look completely different, the one thing they all share is modern code. If you look under the hood, you’ll find lean, mean, standards-compliant HTML, CSS and jQuery. If you have any questions, feel free to email me.
InFocus
In late 2010, we began working on a new website for InFocus projectors. In addition to a major design refresh, InFocus wanted a powerful Drupal setup to manage their products. I worked together with a developer and the designers to build a custom set of more than 15 templates using HTML5 semantic markup and CSS3 features like @font-face, rounded corners and drop shadows. The final site, which launched in February 2011, also includes many Drupal-specific enhancements like custom admin tab styles and messages.
FontFuse
Launched in January 2011, this site was built as Extensis' answer to Adobe's popular color-pairing site. As the front-end developer, I worked closely with a programmer to transform the design comps into a functional site that displayed dozens of @font-face calls on each page, used powerful voting tools, and pushed the bleeding edge of what's possible with CSS3 and webfonts. The result is a site that rests at the very edge of what modern browsers are capable of, and works well even in IE7.
Point Loma Nazarene University
PLNU approached us for a complete overhaul of their university website to be launched in time for the 2010 school year. Together with a developer who built a powerful back-end using Drupal, I created a series of 17 templates, each with multiple layout options and color schemes. The focus was not on bleeding-edge technology, but on stability, ease of use, and extensibility. The resulting framework allowed the PLNU webteam to port the university's entire web presence over the summer, launching only a few weeks into the new school year.
Metal Toad
Starting early in 2010, Metal Toad began investigating whether Drupal 7 was stable enough to use for client work, and converting our own site was the logical test case. I worked closely with the CEO to adapt a design concept to fit the entire site and overhaul our content to be more SEO-friendly. In particular, I paid a lot of attention to the blog, one of our primary sources of traffic. The new design has an emphasis on typography, with a large easy-to-read body font, and @font-face headlines.
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.
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.