Candidates' Websites Case Study
Regardless of the topic, it is important to keep websites accessible to as many people as possible. This especially applies
to websites of those running for political offices, as they are the best places to get details on the candidates' platforms.
Unfortunately, both Barack Obama's and John McCain's websites are anything but accessible. In this case study, I'll examine
a few areas where their web designers went wrong. This article was originally written before the end of the election, but I am keeping it
on the site even though the election is now over.
The biggest problem with both websites is their sheer size. Both candidates' homepages are about 1200 kilobytes, about four times the size of the average webpage (and fourteen times larger than my homepage). Although each of their homepages loads in under fifteen seconds on broadband connections (which is still quite slow compared to other pages), dialup users can expect a minimum wait of 2 minutes, 45 seconds. Subsequent page loads are not as long, because many of the title images and other components do not have to be downloaded again, but even in this optimal scenario, both sites require several hundred kilobytes of additional downloads. In spite of this smaller size, dialup users can expect waits in excess of 40 seconds on subsequent loads.
The speed at which the page loads is very important, because if somebody on a dialup connection is trying to access either candidate's platform, he or she may give up because it is so inconvenient browsing the page. 40 seconds may not seem like much, but if you have ever had to use dialup when a broadband connection was unavailable, you know how frustrating the slower page loads are, and the least the candidates can do is make them shorter. To do otherwise would disenfranchise those with slower internet connections (who likely live away from urban areas and are already underrepresented).
So what problems caused these massive page sizes? Many things are to blame and quite frankly, it would probably take a book to cover them all. A quick analysis of the sites with Yahoo's YSlow shows many issues with both sites, and it wouldn't hurt either of their webmasters to check out Yahoo's best practices for website optimization. Specifically, both sites should add expires headers, combine javascript and css files, compress all text, move javascript to the bottom, and minify javascript. McCain's site needs to not serve ETags and Obama's site needs to stop serving CSS expressions to Firefox. I won't go into detail about these issues as they are easily examinable with the YSlow extension I mentioned earlier.
The vast majority of their size, however, comes from the many images both sites contain, and unfortunately, both sites do a rather poor job of keeping image size down. McCain's site has the browser download large images, which are then scaled down in the browser, rather than scaling them before they are sent. Images that are not scaled have larger dimensions and a bigger file size, so they take longer to download. Somewhat similarly, the background image for Obama's homepage has rather large dimensions, despite the fact that only a small portion of it is visible. It could be broken up into a few smaller images and aligned with the edges of the content, eliminating the unshown portion. One large non-image component of McCain's website's file size is the inclusion of redundant CSS within the HTML. Basically, this means that the code that is used to style his web page has to be re-downloaded every single time you request a new page, since it isn't separated from the page's content, despite the fact that it is the same for every page. As far as I could tell, Obama's website doesn't have this specific issue, but it has a similar problem caused by the fact that many of the subpages within his site have different styles. This means that for many of his subpages, you still have to download style information again, it's just that the information is for a different style.
Aside from the issue of disenfranchising those with slower internet connections, there aren't too many problems with the sites.
For those who are blind and therefore must use screen readers, both sites are fairly accessible. They provide text alternatives for pretty much
every image, and Obama's site also provides helpful skip to navigation links. One qualm
I have with these particular skip links, though, is that to prevent them from being displayed to non-blind users, the display:none attribute
is used. This creates problems because screen readers will not read text which has this property set. Even if this code were in the screen
stylesheet, rather than unceremoniously plopped in the page, it would still create the same problems because many screen readers do not
adhere to web standards.
Additionally, both sites' video players do not appear to offer subtitles for the deaf, nor the ability for blind users to easily control playback. This aspect also means that they do not conform to Section 508 of the Rehabilitation Act. Although they aren't legally required to conform (though I am not a lawyer, so this is not a legal opinion), federal agencies are required to conform to it, so it seems like it would have behooved them to conform to it, since they are running for a federal political office, after all. Another non-size accessibility issue with both sites is that their layouts are fixed-width (meaning that resizing the browser window does not cause the website to resize). Both of them really have no excuse for not implemented a fluid (non-fixed-width) layout, even though it is slightly more difficult. From looking over their websites, it appears that both of them found somebody who knew how to design a site in Photoshop and slice it into HTML, but failed to ensure that the person was competent at tweaking the resulting code.
The methodology used to get information about website size was originally running YSlow, but YSlow double-counted some of the images on
Obama's website because his staff feel the inexplicable need to use the same images in both CSS and
<img> tags, so I used a bandwidth monitoring application instead and loaded the pages in the latest version of Firefox
3. This does introduce one potential source of error, namely I was using a wireless access point and the bandwidth software may have counted
TCP Retransmissions, slightly inflating the absolute (but not relative) web page sizes.