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 to maximize click-through as well as post-action donations. Here’s an example “click to call” action:
- The action page contains the minimum amount of information needed to initiate a call using the vendor Mobile Commons. Our action is set up with them to dial the activist’s phone immediately, determine the activist’s legislator, play an audio file that explains the action, and then redirect to another page.
- The post-action landing page includes talking points and is principally a post-action donation form. Our team found that activists are much less likely to unsubscribe, and at least as likely to donate, when asked to give after taking action than when asked directly in an email.
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.)