My observations/conclusions/insights (if you can call it that) can be found after the raw data.

Backend

Frontend

Frontend (cont)

Observations

I retooled this for 2012 based on how web development and the internet has changed as well as the data that’s available. The most noteworthy thing is that EVERY campaign uses open source. Perhaps it’s saving money in this economy? Windows Server isn’t free after all. Most use it extensively. Regardless who wins, that candidate would be very hypocritical to support the (unlikely regardless) “open source is communism” mantra. If this isn’t proof that open source is as mainstream as ever in America, I don’t know what is. Apache is a huge winner. So is jQuery, WordPress, Drupal, even Nginx and Varnish made a showing (they weren’t even on the radar in 2008).

Lots of websites are using the HTML5 doctype now. That doesn’t mean they are using HTML5, but many are moving in that direction. Web Fonts were spotted. Tables were very rare.

Shockingly, CDN usage and HTTP compression were pretty rare. Given Google will host popular javascript frameworks (jQuery for example), if you can’t afford the CPU to gzip data you could let Google host it for free. Lots of cloud hosting though.

Between popular CMS’s, and popular plugins/modules for those CMS’s, there’s little diversity in these sites this time around. It was obvious last time, it’s much more obvious this time. Mono-culture has set in regarding the technicals of these sites.

One thing that really stood out is the amount of analytics on each site. This election is really a data war. Knowing as much as possible about voters and the candidates base. Clearly this is an escalation from 2008. There is also a proliferation of real-time analytics usage this time around. Data is everything in the business world, it’s becoming that way in campaign websites as well.

Misc Notes

Data collection method: The data for this blog post was mostly done on the evening of August 30, 2011 and August 31, 2011 by myself. The character set was however Firefox 6.0 interprets the page. HTML validation was checked by submitting to the W3C validator. All other analysis was done by eye and using tools like cURL. Some things were a little bit of a judgment call, such as CSS layout. I didn’t generally penalize if a table was used, it depends how it was used, and the context. I viewed source on all of them, and spent some time looking around while collecting data. I didn’t view every page on every site, since that would drive me insane. The data is based on the homepage of the site however I did make a brief attempt to hunt for feeds since some only include a link on a “news” page. If I couldn’t find it quick enough, it doesn’t exist.

Secrets In Websites III?: Yes there will likely be a third installment. I don’t know when, I don’t know what will be included. I do have some ideas and notes. It takes time to put these together, and I’m not exactly drowning in free time these days.

* Roy Moore’s website is Flash in an iframe. For purposes of this analysis I’m using the page containing the flash object.

It has now relaunched using open source Drupal. Also interesting is that it’s no longer broadcasting any headers regarding it’s server. Considering Drupal is by far better tested on a Unix OS andApache, I’m wondering if they dropped Windows Server/IIS 6.0 in favor of some sort of Linux and Apache. I can’t find any hint at what they are using.

It’s noteworthy that Drupal was already used on recovery.gov and has been used in politics by way of CivicSpace for the Dean campaign in 2004.

Via Drupal it’s still using jQuery (verison 1.2.6). It’s also now using RSS rather than ATOM for feeds, which I presume is by way of the switch to Drupal rather than an intentional effort.

Another interesting change is they tweaked the doctype from XHTML Transitional to XHTML+RDFa.

Pretty much everything else is still the same including the design. Analytics is still done using WebTrends (holdover from the Bush administration) and Akamai still sits in front of their servers.

For CSS hackers: They still choose conditional CSS for IE compatibility.

Their pages don’t fully validate anymore, though there is no terrible markup either.

Video is still done using Flash, maybe they’ll consider adopting HTML5 video. They could do so and fallback to Flash. The latest versions of Firefox, Safari, and Chrome could take advantage of it today. The rest of the browsers would get the Flash experience. That would be the next major step in opening up. Mark Pilgrim has a good primer if they need.

Edit [9/26/2009 @ 1:45 PM EST]: Tim O’Reilly confirms it is indeed running on LAMP, specifically Red Hat Linux with Apache, MySQL and obviously PHP. Apache Solr is used for search.

• Running Microsoft-IIS 6.0 and ASP.NET 2.0.50727. The Bush administration ran Apache on what I think was some sort of Unix. Data is gzip’d.
• Whitehouse.gov is using Akamai as a CDN and for DNS service.
• Using jQuery 1.2.6 (someone should let them know 1.3 is out). Also using several plugins including jQuery UI, jcarousel, Thickbox. Also using swfobject.
• Pages tentatively validate as XHTML 1.0 Transitional! I’m shocked by this. I’ve checked several pages all with the same result.
• Using WebTrends for analytics. Bush Administration also did.
• IE Conditional Stylesheets and a print stylesheet.
• RSS feeds are actually Atom feeds.
• The website is setting two cookies that I can see WT_FPC and ASP.NET_SessionId which expire at the end of the session which is not prohibited in federal government as per OMB Guidance for Implementing the Privacy Provisions of the E-Government Act of 2002 (using Google Cache for that link since I can’t find it anywhere else, our government should really keep those in a more permanent location).

I should note that this is quite different in architecture than the Obama campaign site which ran PWS/PHP, no notable JS library, feed, and Google Analytics.

Update [1/20/2009 @ 9:00 PM EST]:

• Jason Kottke points out that the new whitehouse.gov sports a much slimmer robots.txt file.
• Content is now under Creative Commons license. Way to go Lawrence Lessig.

The Code

WordPress.com

You’ll notice a comment sure to make any web developer laugh on WordPress.com’s login page

	<link rel="stylesheet" href="http://wordpress.com/wp-admin/wp-admin.css?version=MU" type="text/css" />
	<!--[if IE]>
		<style type="text/css">#login h1 a { margin-top: 35px; } #login #login_error { margin-bottom: 10px; }</style>< ![endif]-->
	<!-- Curse you, IE! -->

The guys behind WordPress a while back took the site BrowseHappy under its wing. WordPress has always been a strong believer in web standards, so this isn’t surprising (though still amusing). Did you also know that the guys behind it (Automattic) don’t have job titles? Unless you consider “Chief BBQ Taste Tester” to be a real job title. Matt, I hope your job doesn’t kill you with a heart attack.

Facebook

The geniuses over at Facebook feel the same and put the following on the top of their IE conditionally included stylesheets:

/*  ------------------------------------------------------------------------
                    Facebook | IE/PC Hacks | getfirefox.com
    ------------------------------------------------------------------------  */

popurls

The ever so popular popurls has the following comment in the header of the page.

<!--

  __   __
 (  \,/  )
  \_ | _/  IN THE FUTURE EVERY URL WILL BE POPULAR FOR 1.5 SECONDS
  (_/ \_)                  - thomas and the wise popurls butterfly

-->

RedHat

RedHat was one of the earlier corporate sites to redo itself into a standards based design. They have great respect for those who came before them. In their master css file they have the following tribute as well as a little remark about Netscape 4.x:

/* 	redhat.com MASTER style sheet

	a tip of the red hat to Zeldman, Bowman, Meyer, Shea, Cederholm, Newhouse, Holzschlag,
	and many, many other css and web standards pioneers who have inspired us. 

	the css, layout and validation status of redhat.com is a work-in-progress. numerous
	web-building worker bees are working furiously to correct the bugs, minimize the hacks
	and validate the code. stay tuned. 

-------------------------------------------------------------------- created June 2004 */
@import url("global.css");
...
@import url("dig.css");

/* ---------------------------------------------------------------- ns4 styles - bah! */

table {
	border: 1px;
	}
...

Panic Software

Panic Software has a cool little piece of code for those who browse the product page for Coda (awesome product btw) with IE and don’t have at least version 6.0:

		<!--[if lte IE 6]><p id="iewarning"><img src="/extras/ripoff/images/ie-warning.gif" alt="IE Warning" title="We hear Firefox is nice!" /></p>< ![endif]-->

I hear it’s pretty nice too.

Panic also has a comment in the head of their homepage that reads:

<!-- This homepage design is not long for this world. Enjoy it while you can!   -->

Twitter

Twitter (who redirects to drop the ‘www’ btw) is a very popular service these days. In their html they mark which server served up the data. You’ll see it in the form:

  <!-- served to you through a copper wire by bennu.twitter.com at 24 Nov 19:08 in 11 ms (d 0 / r 8). thank you, come again. -->

Copper eh? No fiber in your data center? I won’t judge, as long as your bandwidth is plentiful.

WordPress.com

Here’s a bonus from WordPress. While many analytics programs use a 1px transparent “tracker gif” to manage statistics, WordPress did something a little different. At the very bottom on the left hand side, you can see the face of WordPress analytics in all it’s tiny glory.

Mozilla

This technically applies to more than just Firefox. You’d be surprised to see how many times kungFuDeathGrip is in the code base.

Many Sites using Google Products/Services

Many people have noticed strange Google tags on sites such as:

code
<!--googleoff: index-->
all
<!--googleon: index-->
over

This isn’t a “SEO” practice, despite some misconception on the web. This is used by the Google Search Appliance, a product made by Google which many websites use to power their own search engines to tell the engine what to read and what to ignore. It wouldn’t be practical for Google to use these “in the wild”. The reason is that spammers could effectively hide an alternate website within those comments. Google’s business is based largely on accurate search results. Spammers have already tried to abuse the css property display: none;. This would be even better. You can find code like this on Apple.com among many other sites.

Webmasters can however optimize their side for AdSense using a technique recommended by Google:

<!-- google_ad_section_start -->

<!-- google_ad_section_end -->

This tells Google to give weight to a certain part of your page when deciding what ad to display on the page. This is good for cases where you feel other material on your page is influencing the ads and resulting in off-topic ads.

Infrastructure/Platform

Microsoft

Microsoft‘s offering against Linux and Apache is IIS on Windows. Which one would expect they themselves use. What they don’t tell you is that they also have used Akamai (with over 25,000 servers), which uses Linux. They have used Akamai for many things like DNS, and caching files. Rather than “Powered By Windows Server” maybe they should append “hiding behind Linux”.

Myspace.com

Myspace.com was previously Adobe/Macromedia’s model customer because it was written in ColdFusion, and said to be the biggest ColdFusion site on the net (and one of the biggest sites on the net). Many think it still is, but it’s not. While many url’s suggest it might be because they end in .cfm it’s actually running ASP.net and has been since aprox, 2006. You can confirm this by viewing the headers on some of their pages. You’ll see:

X-AspNet-Version: 2.0.50727

MTV.com

MTV.com‘s site has search powered by a Google Search Appliance. MTV is also owned by Viacom who sued Google, the parent company of YouTube. The folks at MTV awesomely admitted the irony during relaunch on their blog.

Global Crossing

Tier 1 networking provider Global Crossing really wants you to know how fast they are. Doing a trace could turn up something like this:

  7    15 ms    13 ms    14 ms  COMCAST-IP-SERVICES-LLC.tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.58]
  8    14 ms    13 ms    13 ms  tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.57]

Yes that’s right, they use 10 GigE! Just FYI.

Goofy

Firefox 2.0

In Firefox 2.0, go to “About Firefox” (under the help menu for Windows, under the Firefox menu for Mac), and click on credits. You’ll notice Stephen Colbert. He wrote it single handedly, but added some other names because he’s a nice guy. Bonus: I’m on the list too. Above him because I’m better than him. That’s right, I said it.

Handy

Chase

Chase for some reason puts it’s login form in plain text. The submit url is https, but it doesn’t feel right. They do have a SSL enabled login page, but for some reason they hide it. Here it is for those interested:

https://chaseonline.chase.com/online/home/sso_co_home.jsp

Google

For some reason, most of Google’s services are insecure by default. By simply going to https, you can use SSL for added security.
Gmail: https://mail.google.com
Google Calendar: https://www.google.com/calendar
Google Reader: https://www.google.com/reader

On the next page is the 2008 US Presidential Candidate Campaign sites…