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.
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.
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.
Pseudo Responsive Advertising
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.
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.
- 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.
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.
- Respond.js – Brings media query support to older versions of Microsoft Internet Explorer