In 2009-2010, CLCV invested significant resources into a website redesign and rebuild in Drupal 6. Because it was planned and executed just before the worldwide explosion in mobile web traffic, the design was not optimized for mobile devices or screens of varying sizes.

Four years later, I initiated a project to re-theme the Drupal site for mobile audiences, using a platform-independent responsive approach with @media queries in CSS. It was essentially unchanged at desktop screen sizes (though I rebuilt the CSS from scratch in order to fix some alignment errors in the old theme), but it would gracefully degrade at pixel widths of 960 or fewer.

The intent was to make the site more effective for its fastest-growing audience, with as low a learning curve for users as possible. CLCV was in the middle of a separate campaign to grow its list of online supporters, working with several outside vendors, and thus a consistent look throughout that time period was optimal. From a design perspective, the re-theme was a nearly invisible shift for some users and a radical change for the better for others. My design process was methodical; I edited each major page template for smaller and smaller widths, figuring out natural breakpoints depending on the individual page elements. As screen sizes got smaller, I figured out which elements to suppress and which to move down on the page. I ensured text was legible at all widths and on all screens.

The result was a huge uptick in mobile engagement. Pages/session, a key engagement metric (and one that can be compared most easily between the prior and current themes), went up significantly for all traffic, not just mobile and tablet traffic; at times, it was actually higher on mobile devices than any other platform. Donations and online activism also increased significantly on all platforms.

There were several kinds of pages I had to carefully lay out for maximum effectiveness. Over time, we refined our action alert pages (hosted on Luminate Online, thus no longer preserved) to maximize click-through as well as post-action donations.

From start to finish, the tools I used were hand-coded HTML, CSS, and a bit of jQuery (coded in TextWrangler, my text editor of choice), not to mention Adobe Creative Suite 6, primarily Photoshop and Illustrator. I attempted to test the layout as exhaustively as possible, using as many versions of Chrome, Firefox, Safari, and Internet Explorer as I could find on Mac and Windows, and a wide variety of browsers on several phones and tablets.

Visit the archived site (which was in use until the summer of 2019) on a variety of devices, or simply change the size of your browser window, to see the results. (Note: I was not involved in adding any content to this site after July 2016. However, I did set up the processes and templates to facilitate doing so.)