SPRINGBOX / Insights

Rating the 2016 Presidential Candidates' Websites: Part One

by Springbox, January 5, 2016

Make the Internet Great Again.

With the 2016 presidential election hot on our heels, the Springbox ladies of Content Strategy thought it would be a fun exercise to examine each candidate’s website in terms of performance, content, and general user experience. We were inspired by a July 2015 Vice Motherboard article, Obama’s Web Designer Breaks Down the 2016 Candidates Based on Their Websites, and decided to take the ball and run with it.

According to an infographic from Webjunction, 54% of U.S. adults went online to get information or participate in the 2010 midterm elections. Considering this statistic along with principles of digital inclusion, we were curious how the 2016 presidential candidates’ websites performed on mobile, how quickly they loaded on desktop, and whether they were accessible to low-vision and blind users. While accessibility is a major factor in digital inclusion, optimizing a site for mobile and making it load quickly are also factors that affect users without broadband connections, or those who only visit the web via smartphone. Cost is the most-cited factor for not having broadband, so having a mobile-friendly site that loads quickly is the best way to ensure your message reaches everyone.

We graded the general user experience for each site by trying to accomplish several tasks: find the candidate’s position on issues, attend an event in Texas (since we are located in Austin), make a donation, and subscribe to a newsletter. When giving our grades we considered information findability, the experience on the page (was it too wordy, or overloaded with calls to action?), and the overall look and feel. We also wanted to evaluate the candidates’ messaging; accordingly, we used a tool to analyze written statements for tone and style.

Tools

We utilized Google’s PageSpeed Insights to evaluate each site’s performance on mobile and desktop platforms. This tool measures how a page can improve its performance on time to load above-the-fold content and time to load the page in full. A score of 85 or higher (scale ranges from 0-100) indicates the site is performing well.

We also used Google’s Mobile Friendly test to rate every candidate’s website. According to Google, a page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:

  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don't have to scroll horizontally or zoom
  • Places links far enough apart so that the correct one can be easily tapped

All candidates’ sites did well on the test, and were designated as mobile friendly.

In terms of accessibility, we evaluated each site using WAVE, a tool developed by WebAIM. The WAVE tool checks for sufficient contrast, alt text, labels, suspicious links, and other elements that are critical for low-vision and blind users to navigate the site.

Leveraging IBM’s artificial intelligence technology, we used the Watson Tone Analyzer to evaluate portions of each site’s written content. The Tone Analyzer uses linguistic analysis to detect emotional tones, social propensities, and writing styles in written communication. To collect writing samples, we navigated to the first issue or stance mentioned on each candidate’s site. For many, this was a position statement on tax reform, immigration, trade policy, or the economy. If there was not a substantial amount of content on the first issue, we also included their statement for the next issue listed on the site.

We used SimilarWeb to estimate desktop web traffic (visits per month). For the Democratic candidates, Bernie Sanders’ website received the most visits in November 2015 (1.8M), Hillary Clinton’s site received 1M visits, and Martin O’Malley’s site received 85K visits. Among the Republican candidates, Ben Carson topped November desktop web traffic with 720K visits. Donald Trump came in second with 660K visits, and Ted Cruz received 440K visits.

Finally, we scanned the sites and noted anything that stood out, like a couple of Republican candidates whose sites displayed nagging popovers (beware!), Marco Rubio’s (call to) action-packed two-column layout, and Donald Trump’s highly distracting use of mixed fonts. The candidates are presented below in descending ranking within each party, according to early 2016 National polls.

Disclaimer: This blog post is not intended to be an endorsement of any candidate or political party by the authors or by Springbox. Nor is it meant to be take (too) seriously.



Candidate Breakdown

Hillary Clinton
1M visits in November 2015

hillary clinton 2016 presidential election website

User experience grades:

  • Finding their position on the issues: A-
  • Attending an event in Texas: A
  • Making a donation: A
  • Subscribing to a newsletter: A-

Hillary Clinton received an "A-" for Finding their position on the issues because we were able to quickly navigate to the issues page from the primary navigation at the top of the site. However, she received the minus because her list of issues is quite long, and the page doesn't provide a way to search or filter the issues. We found it easy to subscribe to Clinton's newsletter, but she received the minus because we were prompted to sign up in a roadblock modal that displayed upon visiting the site for the first time.

Homepage load time (85-100 considered good):

  • Mobile: 52
  • Desktop: 55

WAVE detected the following:

  • 6 Errors
  • 58 Alerts
  • 12 Features
  • 26 Structural Elements
  • 17 HTML5 and ARIA
  • 19 Contrast Errors

Sample tone: https://www.hillaryclinton.com/issues/plan-raise-american-incomes
Percentage of words per tone:
hillary-tone



Bernie Sanders
1.8M million visits in November 2015

bernie sanders 2016 presidential election website

User experience grades:

  • Finding their position on the issues: A-
  • Attending an event in Texas: B+
  • Making a donation: A-
  • Subscribing to a newsletter: B

Bernie Sanders received his lowest score, a "B", for inundating us with a roadblock modal (primarily a newsletter signup prompt) every time we visited his homepage. At least Hillary remembered us (or our IP address). Sanders received an "A-" for Making a donation because it was very easy to find and navigate to his donation page, however he uses the labels "donate" and "contribute" interchangeably (which may confuse the reader). "B+" for Attending an event in Texas because we couldn't find a link to help us do so above the fold.

Homepage load time:

  • Mobile: 54
  • Desktop: 76

WAVE detected the following:

  • 12 Errors
  • 14 Alerts
  • 10 Features
  • 96 Structural Elements
  • 24 HTML5 and ARIA
  • 65 Contrast Errors

Considering the high number of contrast errors (which primarily affect colorblind users), we’re guessing Sanders may never have actually looked at his own website.

Sample tone: https://berniesanders.com/issues/income-and-wealth-inequality
Percentage of words per tone:
bernie-tone



Martin O'Malley

85K visits in November 2015

martin o’malley 2016 presidential election website

User experience grades:

  • Finding their position on the issues: A
  • Attending an event in Texas: A-
  • Making a donation: A-
  • Subscribing to a newsletter: A-

Martin O'Malley's site architecture allowed us to find information quickly, and we easily accomplished our tasks. But we found the newsletter sign up form in the hero space followed by a sticky header that changed opacity upon scrolling dizzying. Also, the site's dropdown menus looked cool but in fact weren't very readable.

Homepage load time:

  • Mobile: 65
  • Desktop: 80

WAVE detected the following:

  • 23 Errors
  • 8 Alerts
  • 0 Features
  • 19 Structural Elements
  • 6 HTML5 and ARIA
  • 2 Contrast Errors

Sample tone (issue is on increasing the median net worth of American families): https://martinomalley.com/15-goals/goal-1
Percentage of words per tone:omalley-tone



Donald Trump

660K visits in November 2015

donald trump 2016 presidential election website

User experience grades:

  • Finding their position on the issues: A
  • Attending an event in Texas: C
  • Making a donation: A-
  • Subscribing to a newsletter: B+

How many different fonts can you spot above the fold? We struggled to find an event near us (peep the micro-sized Events link in the top-level nav bar), but then found a link for Texas under States (in the second level nav bar), which took us to a signup form to get involved in Texas. Huh? Also, who decided this was a good idea?

Homepage load time:

  • Mobile: 70
  • Desktop: 87

WAVE detected the following:

  • 2 Errors
  • 10 Alerts
  • 15 Features
  • 22 Structural Elements
  • 3 HTML5 and ARIA
  • 2 Contrast Errors

Sample tone: https://www.donaldjtrump.com/positions/us-china-trade-reform
Percentage of words per tone:trump-tone



Ted Cruz
440K visits in November 2015

ted cruz 2016 presidential election website

User experience grades:

  • Finding their position on the issues: B-
  • Attending an event in Texas: B
  • Making a donation: B
  • Subscribing to a newsletter: A-

Cruz scores some inclusion points with the prominent "En Español" button in the upper right corner, which translates the site into Spanish. However, these points are almost immediately negated by the four calls to action (all in red, to boot!) that appear below the email and ZIP capture form. Cruz obscures his issue statements under the vague label "Proven Record" in the primary navigation, hence the "B-" score.

Homepage load time:

  • Mobile: 51
  • Desktop: 63

WAVE detected the following:

  • 36 Errors
  • 38 Alerts
  • 16 Features
  • 31 Structural Elements
  • 8 HTML5 and ARIA
  • 17 Contrast Errors

Sample tone: https://www.tedcruz.org/cruz-immigration-plan-summary
Percentage of words per tone:cruz-tone



Marco Rubio
330K visits in November 2015

marco rubio 2016 presidential election website

User experience grades:

  • Finding their position on the issues: A
  • Attending an event in Texas: F
  • Making a donation: A
  • Subscribing to a newsletter: A-

Rubio's site displays a popover that requests permission to allow notifications. The popover's labeling is vague, so we inadvertently clicked “Allow” and were super-annoyed by the result -- spammy popovers that followed us even after we left the site. We had to tinker with our Chrome settings to get rid of notifications like this:

rubio-popover

Rubio's call to action-packed, split-column layout made our heads spin. His web designer must not be familiar with the F-shaped eye-scanning pattern readers' eyes follow when scanning a web page. Finally, when searching for an event near us we looked for five minutes and then gave up.

Homepage load time:

  • Mobile: 51
  • Desktop: 32

WAVE detected the following:

  • 71 Errors
  • 60 Alerts
  • 41 Features
  • 35 Structural Elements
  • 74 HTML5 and ARIA
  • 6 Contrast Errors

Sample tone: https://marcorubio.com/issues-2/china-the-challenges-and-opportunities-in-the-new-american-century
Percentage of words per tone:rubio-tone


 

We'll continue with our analysis of the remaining 2016 Republican Presidential candidates in Part Two of this series. Stay tuned for more spills and chills, including Mike Huckabee's mobile-first misstep, Ben Carson's tone, and John Kasich's propensity for popovers.