CLCV mobile optimization

ecovote.org pre-optimization
BEFORE
ecovote.org pre-optimization
BEFORE

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.

scorecard page in 2015 on an iPhone 5
AFTER
scorecard page in 2015 on an iPhone 5
AFTER

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.

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. (During and after this process, whenever I walked past a Microsoft store or an Apple store, I would test the site on their demo devices.)

Visit the live site at http://www.ecovote.org/ 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.)

At a glance. Visit the live site at ecovote.org.
At a glance. Visit the live site at ecovote.org.