Responsive redesign for Casey Trees

My work on a redesign for an urban forestry non-profit, in the early days of responsive web design.

This project was originally completed and worked on from 2011-11 to 2012-03.

In 2012, I managed a complete responsive website redesign for Casey Trees, an urban forestry non-profit dedicated to protecting the tree canopy of Washington, DC.

My primary responsibilities were:

My most important role on the project, however, was as an advocate for responsive web design. By responsive design, I mean that our goal was to develop a site that would cater to multiple screen sizes, without the false constraint of assuming only a “desktop” browser context.1 When we were planning to redesign the website in 2011, responsive design was not yet implemented widely. The web changes quickly. While the approach is now viewed by many leaders in user experience design as an essential part of designing for an uncertain future, back then we were taking a decisive step towards a more flexible experience, in our small corner of the web.

We turned the project around in only a few months, with design and content work starting in December 2011 and the website launching in March 2012.

The Casey Trees homepage on a desktop early on after the redesign, with a series of slides and all navigation items visible, including events and the Tree Report Card.
The Casey Trees homepage on an Android mobile browser

The need for a new website

The previous iteration of the website had been designed in 2008. We faced a few significant issues that I worked with my fellow staff to identify:

Results

A new content management system

We integrated more tightly with our existing Convio non-profit fundraising and sales tools, but we also had a new CMS to work with: WordPress. It would be easier to manage a larger website, and the interface was more approachable for staff, some of whom were already familiar with the interface. Importantly, we had more control over layout and design with the new site. With more flexible CSS, we had the ability to create more modular components and templates, and respond to organizational needs to change the information architecture.

An improved experience

Feedback from users of the site was very positive, and staff appreciated the easier management and new design as well. After a refresh of our events management and fundraising systems, it was far easier to get fully subscribed events. Mobile device visits went from being about 6% of visitors to 12% (and even higher later on) as device user trends changed, and as our website became more friendly to visitors with different types of screens and contexts. It is fair to say that we would have been turning away a significant portion of our audience without a responsive redesign.

Long-term gain

With ever-shorter life spans of websites, the 2012 redesign has so far lasted quite a while without the need for a substantial overhaul. As I write this in 2015, the site is entering its third year since the redesign. Nothing lasts forever on the web, but it is refreshing to see a smaller budget website last a few years before the organization’s needs outgrow the design.

One key to the relative success of the site was its forward-thinking approach: responsive design was the indispensable decision that allowed us to enter the next few years without feeling left behind by changes in technology and web design.

Responsive design is about more than merely reaching a diversity of screens.

This approach gave Casey Trees not only a better experience for visitors to the site, but more flexibility in presenting its mission, and more effective methods of communicating with people. Responsive thinking is a fundamentally more empathetic approach to an audience – one that can be felt directly regardless of user capabilities or the device they happen to be using.

  1. Technically, responsive design is about designing with a flexible grid layout, using fluid image widths, and using CSS media queries to conditionally control layout and presentation for different device sizes. As Ethan Marcotte put it in his foundational Responsive Web Design): “… design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs.”