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.
Sara Ryan
Local Portland novelist Sara Ryan contacted me in 2012 to redesign her website. The overall look was intended to feel more clean, professional, and more focused on typography, with fewer distractions (like social media sharing links). In particular, the books page was redesigned to emphasize her novels, while allowing her to feature comics and anthology work in a more clear way. This project took place over several months, beginning with wireframes and proceeding through full photoshop comps and a full wordpress theme. This is the second site built using my Flatline parent theme.
CityEats
In early 2011, I joined the team at Burnside Digital building CityEats, a restaurant reservation and review site for Scripps Network, the parent company of the Food Network. For the first six months, I was the sole front-end developer, responsible for implimenting the entire theme. I built a styleguide, constructed reusable classes the developers could easily add to style pages without needing to know much CSS, and worked closely with the design team. I also built out a complete set of mobile web styles and coordinated the front-end team as it grew.
CityEats Blog
Following the launch of the main CityEats site, I was asked to develop a wordpress theme for use on their blog network. Each city in the network had their own blog, but they would all share the same theme, which required some creative theme hacking to allow the theme to display the city name and proper twitter link, for example. The theme includes a custom header that displays the most recent posts in the featured categories, as well as custom archive pages displaying featured images for blog posts. This is the fourth site built on my Flatline parent theme.
Burnside Digital Blog
After Burnside Digital rebranded, I revamped the company blog. Working closely with a designer, we created a responsive layout that collapses down for mobile devices, and expands outward in a creative way for widescreen displays. The posts needed support code samples from a variety of sources, including github gist snippets as well as inline code. This is the third site built using my Flatline parent theme.
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.
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.