In a mobile media world, screen real estate is precious - which is why we're excited to introduce a new Tempest innovation called off-canvas menus. Off-canvas menus give mobile and touch devices an incredibly useful and beautiful reading experience without getting in the way. They are positioned outside of the browser's viewport and slide into view when activated.

Our particular version of the off-canvas menu improves the experience for mobile readers with access to the top navigation links, a search field, social buttons, and more. The off-canvas menu also replaces our current topics page and reuses its (≡) link in the top nav. Our goal is to make sure that the menu opens quickly and smoothly across desktop, tablet and mobile devices and provides our readers with an experience they’re used to seeing across the Web.

The navigation bar at the top of our sites is compact by design, so most sites don't have the space to list all the content they would like their readers to access. By adding an off-canvas menu, it allows us to take advantage of the horizontal space on the site and add as many items as editors would like to highlight.

Another problem our off-canvas menu solves is the ability to nest items under a specific section or category. In the old navigation menu, this task would be impossible without the addition of drop down menus per category or section. On sites like Fashionista, we can now support a listing all of the cities (Paris, Milan, New York, etc) where "Fashion Week" took place while still having a clean and focused user experience.

Our off-canvas menu is a heavily modified (and AngularJS-ized) version of the popular codrops method and has the possibility of enabling several different CSS transition effects, per site if necessary. We also remove the typical 300ms tap delay for touch devices. It’s challenging to get a layout like this working across such an array of devices so we also took advantage of feature flags. Feature flags let us present and get feedback days before it’s released to our millions of readers.

We hope our mobile readers enjoy the new menu!

Nicole Penna, a UX designer at Say Media, also contributed to this article.