Inside The Candidates' Code: What The Campaign Websites Say About Obama And Romney

Both presidential candidates say they can slice the budget and make better use of national resources. So who is smarter and more efficient on the Web?

A political campaign website has a singular purpose: vacuum up personal information and donations. How they do it is a matter of priorities. Content-heavy sites are slow to load and expensive to operate; running one in a cost-conscious manner means eliminating unnecessary server requests, tracking user behavior, optimizing every interaction and shaving kilobytes off pages. So who does it better, Barack Obama or Mitt Romney? The answer could provide yet another clue into how effect each man would be leading the country's economic recovery. A side-by-side comparison reveals that neither site is perfect--and that they are not very similar.

To measure up the candidates’ online properties, FastCompany tapped Daniel Lacy, lead front-end engineer at the dating site HowAboutWe in Brooklyn’s DUMBO neighborhood, and an expert on website minification and accessibility. To examine the candidates’ websites, he’ll be using the Safari Web Inspector in Mac OS X, a Javascript performance tool called DOM Monster, Yahoo's Yslow speed diagnostic tool, and the Web development utility Firebug.

Under the Hood: MittRomney.com

At first blush, Lacy isn’t impressed. “Romney’s using Typekit for custom fonts to get a typeface that looks exactly like Arial,” a font you don’t need Typekit to get. “There’s also a lot of boilerplate geo-location stuff which the site doesn't seem to use much of. And for some reason, he’s using a version of J-query which came out in 2009.”

Deeper under the hood, things get better. The code is pretty clean, if a little disorganized, and most of it is appropriately commented, or annotated by the developer, to make it easy for other engineers to understand. Load times are a little long, and both the landing pages and the homepage are fairly heavy at 706k and 1.4MB respectively. They could also stand to make fewer server requests.

“It looks like it was built by a standard IT firm that hasn't been creative in a while.”

Romney’s site relies largely on a personal site-library stocked with a whopping 8,000 lines of custom code. Some of it is minified, making it leaner and faster-loading, but that’s still a ton of code. Smartly, the landing page caches all the stuff for the Index page, making it load faster, and it performs its loading asynchronously, in a nice non-blocking way.

“This site is competently made, but there's a little engineering bloat,” says Lacy. “It looks like it was built by a standard IT firm that hasn't been creative in a while.”

Romney’s site does have some cutting-edge components. For one, he’s using CommonJS, a modularization system built for using Javascript libraries outside the browser. The way Romney's site uses it, CommonJS helps streamline packages, requiring less work for the server to load the page. It also uses scripting to discover data dependencies in the code, which can help the page load faster. Storage is on an NginX server, a flexible and high-performance open source server solution developed first in Russia. It’s badass compared to Obama’s more old-fashioned server.

The Republican candidate’s site is not thoroughly optimized, but not half-bad for a site this size with this much content. “Romney’s site is well planned out and fairly well packaged--much better than Obama's site in that way,” says Lacy.

Romney’s site also improves the user experience by setting a far future Expires header: this means the page will cache on your machine, so it can re-load faster the next time you visit. However, that doesn’t mean you’re necessarily seeing the same version of MittRomney.com as your neighbor; the site contains analytics code for Optimizely, an A/B testing platform that lets you compare different versions of your site, and rollout the one people like the best.

Under the Hood: BarackObama.com

For the most-part, Lacy says, Obama’s site uses more modern components than Romney’s, but it also seems to forget some of the basics.

"The bloat in Obama’s code owes itself to Facebook and Twitter integration; code for connecting to those networks accounts for about half of all the code on Obama’s site."

Moustache.js is a library popular with front-end developers right now because it provides sites like Obama’s with visual templates that require less coding to implement. It also uses Modernizr, a component which detects support for modern browsers and lets the site load conditional Javascript and CSS based on the capability and vintage of your particular computer. Another friendly addition is wide use of Polyfills, which allow older browsers to run newer site features. Obama's site also features a more recent version of J-query.

There’s more code bloat here than in Romney’s site, but some parts are well-compressed. The bloat in Obama’s code owes itself to Facebook and Twitter integration; code for connecting to those networks accounts for about half of all the code on Obama’s site. Still, the results speak for themselves: his page has earned over 31 million Facebook Likes, to Romney’s 11 million. (At right, Obama's sharing menu.)

The caching setup isn't as good as Romney's; no future expires on most components means your browser has to load it fresh, even if you just loaded the page a little while before.

“This looks like it was built by more modern people, but not using traditional optimization,” says Lacy. “They've forgotten basic optimization stuff: caching, minimizing requests.” His Javascript isn't packaged up well and his Index page needs three times as many server requests as Romney’s to a page that’s 40% smaller. The CSS page is a little sloppily written, too: the typical layout is styles at top, then a Javascript footer, then dynamic content written below. Obama’s code appears out of order.

Still, the Democratic candidate has a superior mobile site, if a little too clever. An initial login screen makes you think you need to be signed up for an account on BarackObama.com just to see the site, but a little clicking around and you can eschew it.

Like Romney, Obama uses a content delivery network to make the user experience on the site better; CDNs disperse your site’s resources to servers in various geographical locations, so the data takes less time to reach people’s computers. The components of Obama’s CDN setup are better organized, with one host server for each of the components, whereas Romney is loading it all from the same server.

Another category Obama wins: analytics. His site is kitted out with ChartBeat and New Relic for analytics. New Relic lets you pinpoint and solve performance issues with web apps, so each user has an ideal experience. Chartbeat lets you see peek at detailed metrics about how people are using your site, like how far they scroll down a page.

Lastly, where Romney's site looks like commercial code, Obama's site has a handcrafted touch: the ASCII art in the source code.

MittRomney.com: The Specs

• Drupal content management system with a toolkit library to fill in gaps
• Storage on NginX server
• Typekit for custom fonts
• Jquery 1.3.2 (circa 2009)
• Common.js
• Using CDNs, which do xyz
• Using Gzip to reduce the number of downstream data
• Has basic login plus Sharethis for social stuff
• Mobile-capable
• Clickable for display advertising
• Shortlink: Mi.tt

Analytics

• ShareThis
• Google Analytics
• Optimizely

Stats

• Splash Screen: 44 requests, 706k, 2.9 seconds 
• Index Page: 79 requests, 1.4MB, 4.3 seconds
• 11 million Facebook likes

BarackObama.com: The Specs

• Moustache.js templates
• Sweet ASCII Art
• Modernizer
• Up-to-date Jquery library
• Poly-fills to bring old browsers up to snuff
• Optimizely
• Custom fonts from Typography.com
• Gzip
• Mobile-friendly
• Shortlink domain: OFA.BO
• Storage on Apache server
• LucidMedia, Double-click and Adnxs for display advertising

Analytics

• Google Analytics
• Chartbeat
• New Relic

Stats

• Splash Screen: 74 requests, 633k, 3.7 seconds
• Index Page: 1MB page, 245 req, 9 seconds 
• 31 million Facebook likes

Source : fastcompany[dot]com

Limelight Survey Highlights Challenges of Managing Globalized Web Content

Are you actively engaged in a global digital marketing campaign? Or do you lack the resources to effectively manage multiple international sites? According to a recent survey of 200 U.S. based CMOs and VPs of marketing by Limelight Networks, more and more companies plan to add multiple regional websites and languages within the next year to build global brand awareness and drive revenue, but many still lack the resources necessary to make it happen.

The Challenges of the Global Marketplace

Participating within the global marketplace takes more than just showing up. For the purposes of this survey, Limelight defined the globalization of a web presence as the development, deployment and regular maintenance of distinct sites with regionally-specific content. Effectively maintaining and managing these sites requires more than the right tools; it also demands a commitment to global literacy of both language and culture.

More Regions, More Languages, More Content

The report showed that 24 percent of those surveyed actively manage 3 to 5 regional websites, while another 25 percent actively manage 6 to 10. Additionally, 65 percent are planning to add 2 to 5 more regional websites to the mix, with 56 percent intent on adding 2 to 5 more languages. Not only does this put more onus on website designers and developers, it also requires more access to translators and native speakers for content and marketing development, not to mention content managers who can adequately edit and manage the workflow.

Many companies are savvy enough to know that content developed can’t just be direct translations or recapitulations of existing content in order to be effective. The survey showed that a majority of respondents said that a significant portion of content — between 41-60 percent — is regionally-specific.

The result of their efforts is not in vain. Ninety-one percent of participants acknowledged that their globalization strategy has produced meaningful improvements in website engagement, lead generation and revenue.

Lack of Resources Abound

That said, the survey also highlighted the challenges that website globalization brings. A full sixty percent of survey respondents would add even more regional sites to bolster globalization efforts but cannot due to a variety of issues, such as budget and staffing constraints, and technical resources.

Being able to develop regionally-specific content is one thing. Being able to regularly update and manage it, is another. Respondents indicated that a considerable amount of content on their regional websites is out-of-date or behind at any one time:

• 25% answered that less than 20% of content is out-of-date or behind
• 26% answered that 21-40% of content is out-of-date or behind
• 27% answered that 41-60% of content is out-of-date or behind
• 18% answered that 61-80% of content is out-of-date or behind
• 3% answered that 81-100% of content is out-of-date or behind
• 1% answered that they are unsure how much of their content is out-of-date or behind

A Global Content Management System

Put together, the demands and challenges of website globalization identify the need for a reliable and agile Web Content Management (WCM) system that can enable multi-site management from a single account, while making it easy to share and reuse content, target content and changes across multiple web and mobile domains.

Whether the pressures of globalization are too great to bear, or dictating your digital marketing strategy, it’s important to put the right technology, tools and team into place before you start your global campaign.

 

 

Source : cmswire[dot]com