Obama vs McCain: Web standards and open source

I've been knee-deep in some heavy javascript development the past couple weeks, and I thought I'd take a few moments to share my observations on the adherance to web standards and the use of open source vs. proprietary frameworks on each site.

I will try to write this for a general audience, and explain the significance of each item I am nitpicking, and how it relates to the different philosophy of each campaign.

This is not an exhaustive review (read: long rant), and only concerns the front pages:

http://www.barackobama.com/...

http://johnmccain.com/

Here's a hint: there's a true 21st century campaign and a true 20th century campaign.

I became curious about the animations and visual effects on Obama's site a few weeks ago; initially I was concerned that they were created using Adobe Flash -- a problem because Flash is proprietary and not based on any externally, open, and well defined standard. That is, the Flash format changes at the whim of Adobe, based on their commercial needs, and not based on community input and best engineering practices. Dependency on Flash is similar to dependency on Microsoft Word -- sure, it may suit your needs at the moment, but you are locking yourself in to a commercial product sold by a vendor whose goals could easily diverge from your own needs, a situation easily compounded by a number thorny intellectual property issues. But an even more potent criticism of using Flash for elements that are integral to your website is that Flash seriously frustrates efforts to build an accessible web -- a system that is accommodating of users with visual disabilities. This is because unlike HTML, which is a structured markup language that contains semantic meaning along with literal meaning, Flash is an unstructured format with a black box for an interpreter. Simply, this means that the structure of the page itself provides a context for understanding the content on the page. This is useful if, say, you built a new web browser that was specialized for those with visual disabilities -- the browser could determine which elements of the page carry more meaning than others and make them more prominent, or prioritize the order of a text-to-speech engine. Flash lacks this structure; extracting elements out in any meaningful way is impossible. (video is a marginally acceptable use of Flash, until HTML5 properly supports embedded video without depending on plugins.)

Instead, web standards -- (X)HTML, CSS, SVG, etc. -- are defined by an open consortium and cannot be unilaterally changed by a single member. They are designed to work together to provide a set of standards for building the modern web. Well designed standards level the playing field -- it doesn't matter if you're using Firefox, Internet Explorer, a mobile device such as an iPhone, or clients not yet conceived -- things will always work as long as both the designer and browser follow the rules. Using proprietary formats puts us back in the thick of the mid-90s internet, where user experience was explicitly dependent on browser behavior and how well (or not) it implemented certain features.

::

So, investigating possible inappropriate use of Flash, I was delighted to discover that instead, Obama's site is built upon (more or less) standards compliant HTML, written by someone who understands the power of clean, well structured markup. Although it's not perfect (it does not pass w3c validation,) it is a good model of best practices for applying web standards.

I'll attempt to explain the essence of this statement. In the bad old days, the structure of a web page -- title, headlines, content, navigation elements, etc. -- was inseparable from the presentation -- how big this font is, the color of a background, placement on the left or right. This was a nightmare in many ways: it made standardization difficult, it required the people creating content to also understand how the design was implemented, it made it difficult to redesign containers for information, etc. To overcome this limitation, all presentation information was removed from the HTML itself, and placed into a (CSS) stylesheet. HTML was essentially reduced to the barest of elements, without rules for visual appearance: paragraph, list, link, box, image, headline... The author would create a document that showed the information structure and relationships between pieces of content, without worrying about the actual visual presentation. Someone who can focus separately on the visual design of the page would then create the stylesheet. It contains a series of declarations that specify how each element in the document's structure should look. For example, the stylesheet might say: all links in front page stories are red, stories are 3 inches wide and have a orange border, all links in the navigation bar are blue... A major advantage of this approach is that a site can specify multiple stylesheets depending on the context -- if you're viewing in a desktop browser, on a mobile device, or dead tree printing. The HTML document stays the same and different stylesheet rules are applied to give a completely different appearance.

::

Effective use of all these modern techniques and principles does require the author to adhere to the principles outline above -- separate content and structure from presentation. A quick browse of the markup source for BarackObama.com shows a reasonable effort to follow these principles. The markup structure embraces a modern approach: relatively shallow, easy to understand and parse even for a human, page elements defined inside semantically correct containers (e.g., "this is the headline, this is the story, this is important, this is peripheral"), and almost all presentation is placed in the stylesheet. The code is elegant and most likely written by a human editor instead of a tool that automatically generates the markup based on a predetermined visual arrangement.

Now let's look at JohnMcCain.com. The designer of this site took somewhat of a back-to-the-future approach. Reading the markup reminds me of the late 90s. The layout of the entire page is determined using a set of nesting tables instead of the minimal markup required. Using nested table layouts are incredibly bad practice in 2008, when far better tools exist. Not only do they burden the author of the markup with excessive complexity and interdependence on elements, they chain him to the visual designer, who has to coordinate any effort at styling the page. They also make it much more complicated for the backend developer, who has to make sure that each module he writes to generate a portion of the page doesn't break the complex set of nested tables. There is also extensive use of in-line styles, which further violate content/presentation principles. The only reasons I can imagine using nested tables in 2008 is either lack of skill, or a requirement to have the page render to spec in obsolete browser software and computers. Given the competence of Republicans and love of corner-cutting, and the demographics of McCain's supporters (older people may not keep their software up to date), it's probably both factors. Given McCain's technological illiteracy, it's not surprising using modern, well designed markup is a low priority. After all, perhaps only one out of a thousand people will actually be interested enough to look under the hood at the construction of the site. A common attitude is that, "if it works, who cares how it's built." But this ignores the importance of a proper foundation, designed by skilled workers. To half-ass it speaks to one's personal philosophy.

::

If only the differences stopped here... but there's even more evidence of a 21st Century Campaign vs. a 20th Century one.

The visual effects on Obama's website are provided not with Flash, but rather built on top of "jQuery," a popular, open-source javascript framework. jQuery is basically a collection of utility functions that is the result of the collective experience of thousands of contributors. It is open-source, which means that is free for anyone to use in any context, as well as to modify and contribute improvements. As the community grows, so does the quality of the software. I happen to also be using jQuery for my own web development work, which was a delightful surprise. There are a number of competing frameworks -- prototype, dojo -- but they all follow the same open development pattern.

Copyright (c) 2007 John Resig (jquery.com)
Dual licensed under the MIT (MIT-LICENSE.txt)
and GPL (GPL-LICENSE.txt) licenses.

The spirit of open source has many parallels with the Obama campaign: people powered, democratic, idealistic, and open. The above license is as free as it gets.

Contrast with McCain's website. The values that power open source and Obama are anathema to Republicans -- no one is getting rich off fat contracts! no one owns the product! -- so with suitably lowered expectations it was hardly eyebrow raising to discover that McCain uses a number of proprietary, commercially licensed javascript modules for the animation/interactive components on their site. Compare with the jQuery license above:

hbx.js,HBX2.0,COPYRIGHT 1997-2006 WEBSIDESTORY,INC.
ALL RIGHTS RESERVED.
U.S.PATENT No.6,393,479B1 & 6,766,370. INFO:http://websidestory.com/privacy

Copyright (c) 2008 Cabel Sasser / Panic Inc
All rights reserved. * USE OF SOURCE ON COMMERCIAL (FOR-PROFIT) WEBSITE REQUIRES ONE-TIME LICENSE FEE PER DOMAIN.
Reasonably priced! Visit www.fancyzoom.com for licensing instructions. Thanks!

Not only "All Rights Reserved," but invocation of one of the great horrors of the American legal system -- Software Patents, a demon the EU has resisted with some success up to this point, in the face of constant pressure from the intellectual property cartels that operate in the US and wield enormous power here. Software patents are, in short, the enemy of open source. So it's perhaps a bit anticlimactic to see the notices above.

Both sites use Flash for presentation of video, but the Obama site's placement of this video is far less prominent on the main page than McCain's front-and-center video campaign ad.

::

This write-up started out as a minor check into the use of Flash vs. jQuery, but lead me down a path that shown the myriad of ways one campaign is looking to the future, the other looking to the past.

::

One last note. BarackObama.com has a mobile version that is stripped down and optimized for mobile devices. JohnMcCain.com happily stuffs the full-size version through a narrow pipe.

* note: I am not criticizing the use of commercial software in general (although I am denouncing patents), just using it as a point to illustrate the difference in campaign philosophies.