Senator Kelly Ayotte (R-NH)

Philip James
Technical Majority
Published in
4 min readMar 24, 2015

This post is part of our continuing series reviewing Senatorial websites.

There is a special place in my heart for New Hampshire, driven entirely by the fact that Josiah Bartlett, the fictional President on The West Wing, hailed from The Granite State. So it is with excitement that I dig into the official Senate site for the next Senator on the list, Senator Kelly Ayotte.

Senator Ayotte’s site as of March 23, 2015

AESTHETICS

The eye is drawn quickly to the photo and caption, which is probably a good thing. It’s putting the Senator frontmost, and that’s more-or-less the point of the site. I think the color choice and use of dividing lines, especially in the article faux-carousel above the fold, look strange, and distract me from the content more than I would like. The call to actions are also more subtle, and make it harder for me to determine what the Senator would really like me to be doing on the page. Reading the articles? Maybe if I scroll down, more will become clear…

Hmm. The chronological blog posts are nice enough, they show the Senator has been keeping busy. The newsletter CTA is still not as prominent as I would have made it, and it seems like the focus of the below-the-fold content is trying to educate citizens on how bad the national debt is. Yep, that’s bad. No disagreement. A link to how the Senator is trying to fix it would be nice here, though.

Also, let’s say a word for gradients. I have zero expectation that Flat Design or Material Design has matriculated out of the world of startups and businesses that want to stay cutting edge. I’m not complaining about the existence of gradients on the Senator’s site. But these gradients are particularly ill-chosen. It’s possible I’ve seen better gradients in a powerpoint. The gradients around the “AT YOUR SERVICE” buttons seem particularly out of place. Why are we highlighting the corners of these clickable boxes? I’ll know they’re clickable when I try to click on them.

I’m not judging aesthetics in these reviews on any sort of scale, and I don’t have nearly the sample size to determine a scale now, but Senator Ayotte’s site is a solid “meh” for me. I’ve seen worse, but it could be so much better with a bit of work.

With the subjective out of the way, let’s move on to…

RESPONSIVENESS

Senator Ayotte’s site on an iPhone 5, March 23, 2105

As I mentioned above, I’m a big fan of The West Wing, to the point where I almost wish that universe was the one we lived in. In that universe, the show mentions on multiple occasions how President Bartlett attempted to build a tech boom in the Granite State, a small rival to the gravity well that is Silicon Valley. I know that the universe of President Bartlett is not the universe of Senator Ayotte, because the Senator’s site is not responsive. At all. The glorious age of pinch-and-zoom still lives with us, in the sites of our elected officials if nowhere else. At least the strange-gradient buttons are still large enough to click at this size.

It should go without saying that tablet is the same as mobile, but I’m going to say it anyway. Tablet is the same as mobile is the same as desktop.

PAGESPEED

Pagespeed results for the site of Senator Ayotte, March 23, 2015

Running the Senator’s site through Google Pagespeed produces roughly the same results as Senator Alexander’s. Compress assets, use caching, move asset loading out of the <head>. One major difference, highlighted in the Responsive section, is that Senator Ayotte’s site gets a much worse mobile usability score, and a little sad-trombone notification from Google:

Speaking of usability…

ACCESSIBILITY

WAVE evaluation results for Senator Ayotte’s site, March 23, 2015

As in the last post, I’m still uncertain whether Senate websites have to conform to the same accessibility standards put out by the federal government. They probably should be, because the ninety contrast errors WAVE has returned here indicate that the Senator’s site might be damned tricky for colorblind people to navigate. There’s also a not-insignificant amount of missing alt text and form labels, which is probably making things that extra bit harder for people trying to to use the Senator’s site with a screen-reader. Adding some simple labels and choosing a color scheme that is less green-on-green could probably go a long way towards making this site more accessible.

I’m left with overall feelings of “meh” about the Senator’s site. It’s a fairly close match to what I was expecting to encounter when I decided to start this series. The site gets the job done, conveys the information the Senator theoretically wants conveyed, but could be so much more.

Originally published at www.technicalmajority.com.

--

--

Philip James
Technical Majority

Philip primarily writes code. In his spare time, he writes novels, makes twitter bots, and gives technical talks. He used to run a webcomic.