Designing Election Results on the iPad

Election results have been a staple of The Times’s web offerings for years, with the presentation growing in sophistication year by year.

The evolution of election results on NYTimes.com

The 2010 elections provided a chance to develop a custom version of our election results site, specifically for the iPad. In building it, we learned a lot about designing for a new class of computing devices, as well as how to leverage several HTML5 technologies. This post covers some of the more interesting lessons and discoveries.

Why a Custom Version?

Early on in the design process, Graphics Editor Shan Carter developed election results mock-ups that attempted to unify the web and iPad experiences. Ultimately, we decided that these designs sacrificed the desktop browser presentation. So we began building out the pages with a minimally altered iPad version in mind; the most significant addition would be an interactive HTML5 canvas–based results map.

We periodically checked how the site looked on the iPad, and along the way we discovered that many things simply did not translate well to the device. For example, navigational elements that appeared reasonably sized on the desktop were uncomfortably small on the iPad. This experience lead us to revisit Shan’s design so that iPad users would receive a more tailored experience.

Bigger Is Better

When developing for the iPad, it’s important to carefully choose the size of interface elements. In particular, critical navigational links work better as large buttons. So for the iPad, we styled our links as buttons, leveraging -webkit-border-radius and -webkit-gradient to give a rounded three-dimensional effect. This saved us the time usually spent cutting and deploying image assets.

#nytint-state-overview-map-nav {
   margin-bottom: 20px;
   height: 20px;
   -webkit-border-radius: 6px;
   border: 1px #bbb solid;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E7E7E7), color-stop(11%,#F5F5F5), color-stop(89%,#F5F5F5), color-stop(100%,#E7E7E7));
}

Compare the navigation bar for the standard Election Day page:

Desktop navigation bar

…to the navigational bar for the iPad version:

iPad navigation bar

With only one browser target, we made liberal use of the CSS2/3 selectors :first-child and :last-child, as well as the sibling selector.

Using Native Widgets

Multi-touch interfaces multiply the number of interaction states you have to account for. To complicate things even further, the conventions and behaviors of user interface elements differ significantly from desktop applications. So unless you have a lot of development time, you should defer to native user interface elements.

We adopted this approach with the pop-over menu for selecting different states. Rather than trying to build our own, we styled a standard iPad <select> form element. A tiny bit of JavaScript was required to prevent some undesirable default behavior, but in the end we achieved a much cleaner interaction.

iPad drop-down navigation

Developing the Interactive Map

The most exciting aspect of the iPad-optimized site is the interactive map. In the past, our election maps were delivered with Flash. Trying to recreate the finesse of the desktop Flash versions was quite a challenge on a resource-constrained computing device. Months ahead of Election Day, Times cartographer Matt Bloch researched and implemented a swath of JavaScript optimizations to improve load time as well as rendering speed. Some of these optimizations were quite novel, such as delivering the map geometry in a custom binary format. We also applied WebKit CSS transforms to improve the performance of zooming.

WebKit Transforms: High-Performance Animation

Shan reworked the exit polls pages, another component that relied heavily on Flash, using only HTML5 technologies. Instead of writing JavaScript to control the animation, we used WebKit CSS transitions. In our experiments, these worked quite well in a desktop browser. But they turned out to be miserably jerky on the iPad. Again, we turned to WebKit CSS transforms.

WebKit CSS transforms cover many of the features of WebKit transitions, with the added bonus of hardware acceleration. WebKit CSS transforms that define a Z-axis will automatically get shipped to the iPad’s GPU for processing. When many elements on the screen are animating simultaneously, WebKit CSS transforms easily outperform transitions on the iPad.

.ep-animate .ep-bar {
  -webkit-transition-property: left, right, width, -webkit-transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}

The release of iOS 4.2 brings a whole new suite of HTML5 technologies to play with — WebSockets, typed arrays, XHR support for blobs (binary data), ImageData, and more. We look forward to diving into these and implementing them in future projects that target WebKit-enabled devices.