With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.
- Candidates were selected based on their performance in the primaries at the time of this writing.
- Candidate names are displayed in alphabetical order.
- The messaging and imagery of candidate sites can (and do) change on a daily basis.
- Content may appear differently depending on when you view the site.
- The websites were viewed in New York City using Google’s Chrome browser. Content may appear differently depending on where you are.
With the exception of Donald 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 Donald Trump, who does not have a splash page at all, Hillary Clinton has the least obtrusive splash page -- mainly because it isn’t truly a splash page. Most times her site displays a small, easily dismissible pop-up, over a full-screen, transparent background. On rare occasions, after clearing cookies for the site in order to view it as a first time user, an actual splash page appears, asking for donations.
Ted Cruz and Bernie Sanders sometimes display a splash page to promote an upcoming state’s primary or to gather support and collect donations after a win.
Marco Rubio appears to have a persistent splash page for first time visitors, which is always displaying a donation module.
Splash Page Comparison
Home Page Structure
All the candidates, except for Bernie Sanders, have similar homepage structures. They include a top nav, a large hero image of themselves, join and donate call-to-actions, 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.
Marco Rubio has an excessively long and seemingly unending cavalcade of news articles, videos, and other ungrouped information. The content is briefly interrupted by a small social and donate section that resides 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 Marco Rubio news.
Bernie Sanders' website sports a left nav embedded into the hero image. In place of a top nav resides a narrow informational bar containing information 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 ~140 people.
News about upcoming primaries are updated on a regular basis and are usually found above the fold. Donald Trump’s site seems to be updated less frequently than the other candidates.
Desktop Homepage Structure (color-coded by section type)
As noted previously, all of the sites, except for Bernie Sanders', utilize a top navigation. Donald Trump’s primary navigation, however, shoulders 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 Nav items from left to right (such as Trump’s site) - tertiary importance
Last, I used that information to build the infographic below:
Main Navigation Item Importance
Every candidate’s most important item was “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 Ted Cruz, whose “Shop” link is styled similarly to his donate link. This is the primary differentiator between the Republican and Democratic candidates.
Donald 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 web designer place these items in the secondary nav, assuming that he was actually giving them more importance by positioning them higher on the page? His assumption would be logical, but not after factoring in the diminished secondary nav height, the cooler background color, and smaller font size. An examination his mobile navigation reveals 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 breakpoint:
And since the ordering of the items at the mobile breakpoint is different than the order at desktop, we can rule out the possibility that when the browser reached its mobile breakpoint, the navigation items just stacked conveniently into a single column because of their ordering in the HTML.
Bernie Sanders' main navigation is the only one containing a link that revealed an expansive, secondary set of navigation items:
Clinton, Cruz and Sanders all clearly display an “En Español” link in their nav or near the top of the page.
Surprisingly, Marco Rubio’s site only displayed this link at the bottom of his “Meet Marco” page, which resulted in the article’s content changing to Spanish.
There weren’t any “En Español” links on Trump’s site, perhaps consistent with his position on immigration.
User Experience and Visual Design
Bernie Sanders' site takes advantage of flat design elements, utilizes 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 homepage 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' design team attempted 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.
Hillary 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, utilizes 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 breakpoint, 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 however (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. I think that 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 they cough 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.
Ted 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 begin to get wildly out of proportion, such as oversized videos that dwarf their accompanying thumbnails, or enormous quotes that bracket small chunks of information.
Cruz’s Oddly-Proportioned Elements
My initial impression of Marco 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 by red and blue. A few articles near the top of the page are laid out in a 2x2 grid, each containing a different color button, which makes me nostalgic for the 1980’s memory game, Simon.
Donald Trump’s website is by far the most poorly designed. This should come as no surprise, as he’s been quoted 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 1200px)
- 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 Donald Trump that he completely overhaul his site.