We can argue until we're blue in the face over which presidential candidates have the best plans for health care, the economy, foreign policy, and more. One thing that is not up for debate: the quality of the candidates' websites. Here, I'll compare the designs of the official campaign home pages for the five leading candidates: Hillary Clinton, Ted Cruz, Marco Rubio, Bernie Sanders, and Donald Trump.
I selected candidates based on their performance in the primaries at the time of this writing. A few disclaimers: The messaging and imagery of candidate sites can (and do) change on a daily basis, so content may appear differently depending on when you view the site, and where. I looked at the websites in New York City using Google’s Chrome browser.
With the exception of Trump, nearly all of the candidates’ websites use a redirect to a splash page in an attempt to solicit campaign donations or get users to join their cause. All of these splash pages appear on a user’s first visit to the site and most contain a hard-to-find call to action to reach the actual website.
Besides Trump, who does not have a splash page at all, Clinton has the least obtrusive splash page—mainly because it isn’t truly a splash page. Typically her site displays a small, easy-to-dismiss pop-up, over a full-screen, transparent background. On rare occasions, after clearing cookies for the site to view it as a first-time user, an actual splash page appears, asking for donations.
Cruz and Sanders sometimes display a splash page to promote an upcoming state’s primary or to gather support and collect donations after a win.
Rubio appears to have a persistent splash page for first-time visitors, which is always displaying a donation module.
All the candidates, except Sanders, have similar home page structures. They include a top navigation, a large hero image of themselves, "join" and "donate" calls to action, followed by a main section that mostly includes news and videos. Clinton and Rubio have their main content split into two columns, while Cruz and Sanders are streamlined into one. All of the sites are responsive.
Rubio has an excessively long and seemingly unending stream of news articles, videos, and other ungrouped information. The content is briefly interrupted by small "social" and "donate" sections that are just above an oddly placed search field. If you manage to get to the bottom of his news feed, there is a "load more" button—if you remain hungry for Rubio news.
Sanders' website has a left navigation embedded into the hero image. In place of a top navigation, there's a narrow informational bar containing details about the next primary and a call to action for donations. Interestingly, unlike the other candidates, his hero image does not include an image of himself; rather it's a diverse mosaic of about 140 people.
News about upcoming primaries is updated on a regular basis and is usually found above the fold. Trump’s site seems to be updated less frequently than the other candidates'.
As noted previously, all of the sites, except for Sanders's, have a top navigation. Trump’s primary navigation, however, has a narrower secondary navigation.
I compared all of the menu items in each candidate’s website. First, I identified what they have in common. Next, I determined their importance using the following rules:
- Highlighted items (such as the donate button)—primary importance
- Unhighlighted items from left to right—secondary importance
- Secondary navigation items from left to right (such as Trump’s site)—tertiary importance
Last, I used that information to build the infographic below:
Every candidate’s most-important item is "donate," as it consistently appears as a button or is clearly highlighted on each site’s main navigation.
The item "shop" or "shopping" is not as important to candidates as the "donate" button; the exception being Cruz, whose "shop" link is styled similarly to his "donate" link. This is the primary differentiator between the Republican and Democratic candidates.
Trump’s website is an outlier from the rest, where the perceived importance of "about" and "schedule" is significantly lower than the rest of the group. One might say that this could be attributed to his inexperience as a politician. However, it's more than likely just a case of bad design, considering that both of those items appear in the less-prominent secondary navigation:
Did Trump’s design team place these items in the secondary navigation assuming that they were actually giving them more importance by positioning them higher on the page? Their assumption would be logical, but not after factoring in the diminished secondary navigation height, the cooler background color, and smaller font size. The mobile navigation is further proof that bad design is the likely culprit, as 75% of those secondary navigation items on the desktop appear at the top of the site’s mobile break point:
And since the ordering of the items at the mobile break point is different from the order at the desktop, we can rule out the possibility that when the browser reaches its mobile break point, the navigation items just stack conveniently into a single column because of their ordering in the HTML.
Sanders's main navigation is the only one containing a link that reveals an expansive, secondary set of navigation items:
Clinton, Cruz, and Sanders all clearly display an "en español" link in their navigation or near the top of the page.
Surprisingly, Rubio’s site only displays this link at the bottom of his "meet Marco" page, which results in the article’s content changing to Spanish.
There aren’t any "en español" links on Trump’s site, perhaps consistent with his position on immigration.
Sanders's site takes advantage of flat design elements, uses modern fonts (both sans serif and serif fonts) and, in my opinion, after you scroll past the hero image, has the most engaging design. Sections below the fold are well balanced and make good use of negative space. That said, I would not have chosen a mosaic of portraits as a hero image because it makes the home page look very busy and seem out of place with the rest of the site’s clean design. A consequence of using this background is that the main navigation gets a little lost sitting on top of it. Sanders's design team attempt to make the white links pop by darkening the background, but it could still benefit from a solid-colored backing. The hero image also has a wave cut through the bottom of it, which makes it look a bit dated.
Clinton's site is a close second and has the best top section of the sites I reviewed. Like Sanders, her campaign takes advantage of flat design elements, uses modern fonts, and displays captivating hero images. I really like the use of the right pointing arrows (just below the hero image) that guides supporters to "join the campaign" and "then donate." At the mobile break point, where the "join" and "donate" sections are stacked, the arrows still point right. They should point down or not appear at all.
My real criticism of this section (and this applies to most of the candidates) is that I don’t really know what to expect after I enter my email address and zip code to "join the campaign" or why I should donate. A clear directive here could go a long way. It might be obvious to a politician why someone should join or donate, but the average person might require a little cajoling before he coughs up a few hard-earned bucks. Sanders provides more clarity in his "join" section: "If everyone who visits this website joins our movement, there’s nothing we can't accomplish together." Clinton’s site starts to break down once you venture into the main content section. Her news feed is not engaging and feels incomplete; it is not as balanced as the top portion of the site.
Cruz makes good use of typography and employs a nice flat design, as do most of the other candidates. I also appreciate the fixed main navigation, as his page is long enough to benefit from its use. But as you start to descend further down the site, a couple of design elements start to get wildly out of proportion, such as oversized videos that dwarf their accompanying thumbnails, or enormous quotes that bracket small chunks of information.
My initial impression of Rubio’s site was that it's perfectly adequate. But that impression changed after I scrolled down into the main content portion of the site and was completely overwhelmed by an endless bevy of videos and images that vary in shape and size. Each one is mounted on top of a thick caption bar that alternates in color between red and blue. A few articles near the top of the page are laid out in a two-by-two grid, each containing a different color button, which makes me nostalgic for the 1980s memory game Simon.
Trump’s website is by far the most poorly designed. This should come as no surprise, as he’s been quoted as saying, "A website costs me three dollars." Here are a few of the design issues I’ve identified on his site:
- Gradients in the navigation
- A hero image that doesn’t scale well at large browser sizes (Trump’s body starts to vanish on widths greater than 1,200 pixels)
- A textured parchment paper background
- Dark, narrow drop shadows
- Bad typography
- A haphazard layout of the main content
While I think Sanders has the best website, it wouldn’t require much effort from either Clinton's or Cruz’s design teams to catch up. Rubio has his work cut out for him. He needs to simplify the visual design and organize the site’s main content into more digestible chunks. I would suggest to Trump that he completely overhaul his site.
This article was adapted with the author's permission. Read the original here.