Time.com, Responsive Web Design

When TIME.com approached appendTo in the second quarter of 2012, they were seeking to launch a responsive redesign of their website in time for the 2012 election. They planned to handle all of the design but needed appendTo to set the direction for the technical responsive approach and build a strong foundation for their internal team to pick up and carry to completion.

We wanted to embrace our existing advertisers, not limit them – so we set a guideline for the use of traditional advertising sizes. The ads, however, needed to work in a fully responsive environment. appendTo produced a custom wrapper around TIME.com’s existing advertising solutions. This made the ad regions aware of the available real estate so the correct advertisement could be loaded on all devices. We’re happy and our advertisers are really happy.

Davina Anthony
Time.com Design Lead

Challenges

In addition to the straightforward problems facing a responsive design, a few areas proved to be more challenging than others:

  • Both the header and footer menus needed to go through multiple transformations from the max width of 1122px down to 320px. In addition to displaying menu items in a different number of columns at different widths, the header menu needed to become a dropdown menu when the page started to become narrower.
  • The ads had the most restrictions and required the highest level of functionality on the side redesign. The ads themselves would remain at fixed sizes, but the page would need to load the correct ad for the device type (mobile, tablet, desktop) as well as one that fit in the available size. When orientation changes occur (users rotate their mobile devices or tablet)s or the browser window width changed, some of the ads that fit previously would no longer fit on the page without breaking the layout.

Solution

TIME.com’s design team, led by Davina Anthony, provided appendTo with comps of the various pages and components at a number of breakpoints from desktop (1122) to mobile (320). During the implementation phase, appendTo’s Joel Glovier and Doug Neiner matched the designs as closely as possible.

One consideration by TIME.com’s design team made the work a lot smoother than it would have been otherwise: they gave appendTo the ability to make minor design decisions to unify variations between comps. Managing more than 200 PSD files is not only tedious, but it can produce minor discrepancies between comps of the same page at different breakpoints. Allowing appendTo to excercise judgment in unifying the comps saved a lot of back and forth with the TIME.com design team.

During the build, appendTo solved an important communication issue that materialized. While a designer may provide comps at various breakpoints, the finished design may not line up exactly as expected between breakpoints. The goal with responsive design is to make a website work in as many places as possible. It’s insufficient that the design looks nice on an iPad. It needs to work equally well on a tablet or device released a year from now. appendTo followed a simple philosophy: When a component visually breaks, insert a breakpoint and have it match the comp for the next smaller breakpoint. The menu bar, for instance, switched to the “768” layout at around 950px wide because the menu bar items wouldn’t work at any width lower than 950px.

Primary Navigation and Footer Navigation

The primary navigation on the TIME.com site begins as a normal menu at full width, and as the page grows narrower, its functionality shifts. The large number of menu items collapses into a “Sections” dropdown. Those items, some of which previously appeared as a horizontal navigation bar, become five columns. As the page continued to become narrower, the five columns become four, then three and eventually one column at a mobile size. A similar situation appears with the navigation links in the footer.

Another core approach appendTo took in working on the TIME.com site is to favor CSS solutions over JavaScript where applicable. The goal was to keep the “heavy” JavaScript interaction to a minimum and leverage the heavily optimized CSS rendering engine.

Using a combination of CSS media queries and some crafted selectors, appendTo was able to achieve all the column layout changes without JavaScript intervention and still retain the expected reading order of top to bottom, left to right. (The simplest of CSS solutions would have had the items reading left to right, top to bottom – not the expected information flow of columnar data).

Pseudo Responsive Advertising

Have you considered your advertisers in scoping your responsive design?

True responsive advertising serves ad creatives that follow the same responsive nature as the website. As the page area shrinks, the ad transforms to meet the demand – leaving the same creative to appear at the different page widths and devices.

Not wanting to limit their existing advertisers, TIME.com wanted to use traditional advertising sizes, but the ads needed to work in a responsive environment. appendTo produced a wrapper around TIME.com’s existing advertising solutions that made the ad regions aware of the available real estate so the correct advertisement could be loaded.

As an example, a user with an original Kindle Fire in portrait mode has a page of only 600px wide. Loading a 728px wide banner creative would make no sense as the entire ad could not be displayed on that device. Instead, a 468px advertisement could be requested for that advertising slot. If the user then rotated the device, the 468px ad would remain visible as it still fit on the larger width available.

Adding to the complexity was the advertising teams desire to target mobile, tablet and desktop browsers with potentially different advertising. Since the layout and existing code written by appendTo was device agnostic, a solution had to be leveraged to detect the work. appendTo ported an existing server-side solution to JavaScript so that determination could be made at the client level, allowing pages to be cached appropriately without data specific to that user being rendered into the page.

The final challenge with the advertisements were that the ads needed to be refreshed without a page reload and still support all the other responsive functionality. Leveraging some existing concepts from the TIME.com team, appendTo was able to deliver this functionality.

Technical Overview

Technologies

  • HTML5 – Though HTML5 video was leveraged by the TIME.com team, appendTo’s use of HTML5 extended only through the use of semantic elements like <header>, <nav> and <article>.
  • CSS3 – CSS3 visual enhancements such as rounded corners, shadows and gradients were used to lower the number of image components needed for the design.
  • SCSS + Compass – Using a CSS preprocessor allowed appendTo to produce more maintainable code during the development phase. Compass mixins were used for CSS3 vendor prefixed code, and custom functions were used to assist in responsive web design calculations.

Libraries

In addition to custom code, appendTo leveraged many existing libraries to assist in the delivery of this project. A few of those technologies were:

  • Modernizr – Assists with a feature-driven development approach. Though some “browser sniffing” was required by TIME.com business requirements, the majority of the development used feature tests to leverage the latest technologies on browsers that supported those features. We even added a custom feature test for one specific design requirement from TIME.com.
  • RequireJS – Assists with managing file dependencies during development and provides r.js for producing combined, optimized output.
  • Backbone.js – Backbone Views provides structure around widget type components on the page.
  • jQuery – The most popular JavaScript framework in the world found its way into this project to help primarily with cross-browser DOM manipulation tasks and event binding.
  • Respond.js – Brings media query support to older versions of Microsoft Internet Explorer