With the rise of the mobile web making your website work on smartphones and tablets has gone from a “nice to have” to a “must have”. While it is universal understood at this point to be important, best practices haven’t completely emerged yet as to how best to build for the mobile web. Speaking generally, there are two common approaches to optimizing a website for mobile:
- Implement a responsive design that automatically adjusts the dimensions of the site based on the size of the display window.
- Design and implement a dedicated mobile site.
In an election season defined by a lack of civility, it is unsurprising that the Mitt Romney and Barack Obama have taken opposite approaches to building for mobile. The Romney campaign has created a mobile-specific website while the Obama team has implemented an ambitious responsive design.
When I noticed this a few weeks ago I got really excited and began writing a blog post using the Romney and Obama websites as a jumping off point for a discussion of the merits of the two approaches. As I was doing research I came across this incredible post by Brad Frost on the topic. His post is far more thorough than the one I was planning to write, so, humbled, I scrapped my piece.
However, his post didn’t cover one thing near and dear to my heart: donation pages. So as a supplement to Brad’s post (which you should go read), I’m going to take a quick look at the mobile donation pages on the two candidate sites. Here are the candidate’s pages, side-by-side.
To start off, I think both campaigns have done well here. These are well designed pages that I suspect enjoy good conversion rates. Some specific observations:
- In the header area I like that the Obama team has removed all site navigation elements other than the account information. All distractions have been removed. All the user has to focus on is filling out the form. If I were the Romney campaign I would remove the social sharing options. You want users to donate, not update Twitter. Encourage people to share after they make the donation.
- Team Obama has included some intro text and a photo on the donation page, while the Romney campaign focuses on getting users into the form process as quickly as possible. I’m torn here. I know from desktop testing that pages with good photography and messaging enjoy higher conversion rates than pages without. But on a smartphone my instinct would be to minimize scrolling and get users to the form as quickly as possible.
- I like that both campaigns have touch friendly interfaces for choosing donation amounts. Interestingly, the Obama campaign’s max pre-selected donation option is $1,000 while the Romney campaign goes all the way up to $5,000.
- I think the layout of the form itself is superior on the Obama site. The Obama form uses large fonts and form fields, making everything really easy to see on a mobile phone. The fonts on the Romney form are a little too small and the spacing of the elements are a little too tight. From a usability perspective the Obama form is better.
- On the plus side for Romney, his form is more compact and requires less scrolling from beginning to end.
- Like the rest of the site, the Obama donation page is responsive and looks completely different on desktops than mobile phones. Indeed, the desktop version of the form is a four stop process while the mobile version is simplified down to a one step form. As a developer I really appreciate the degree of difficulty here. I’m positive that getting the page to work this well was a time consuming and challenging endeavor.
- According to Mobitest, both pages load in around 10 seconds on an iPhone 4. However, the Romney page is 446 kb versus 266 kb for the Obama page.
Overall, I would give the slight edge to the Obama form simply because it is easier to read. Post election, it will be interesting to see if campaigns release mobile donation data. I’m interested to find out how much was raised on the various devices and to see if Republican or Democratic voters are more likely to give via mobile device.
