Bon Appétit

Serving up a recipe for Bon Appétit's digital success after a rough transition from another platform.

Bon Appétit, an American food and lifestyle publication owned by Condé Nast Publications, presents “life through the lens of food” to over 1.5 million unique visitors per month. Condé Nast turned to NorthPoint Digital to repair and improve their newly built site after a rough transition from another platform.

Challenge

With servers crashing on a daily basis and a number of promised features never fully completed, Bon Appétit’s initial site launch left their staff hungry for more. NorthPoint Digital’s task was two-fold: resolving back-end errors and reducing unnecessary strain on the servers, while implementing front-end enhancements and responsive design. Bon Appétit’s slideshows-generally their highest trafficking pages-required special attention. Invasive interstitial advertisements were jarring to the overall user experience and prone to breakage, which resulted in driving many users away from the site. A fixed-width design also left out users on mobile devices-for slideshows and the site as a whole.

Solution

Drawing on NorthPoint Digital’s experience with high-traffic sites running on large PHP frameworks, a number of back-end improvements were made to eliminate unnecessary strain on the servers. Extensive server log analysis was conducted to pinpoint underlying problems in the system. Modifications to Bon Appétit’s 404 response page and SOLR search configuration also alleviated high server load and improved functionality. Improperly migrated data was cleaned up or removed, further freeing up resources and reducing errors. Redirect rules were also remedied to reclaim SEO value lost by the initial migration.

Once Bon Appétit was stable in terms of server performance, NorthPoint Digital turned their attention to front-end improvements-both visual and functional. WordPress taxonomy modifications made the site’s breadcrumbs useful, and a custom internal taxonomy was created for specially curated sections. In order to display these sections, a new page template was built to automatically aggregate article, slideshow and recipe content.

Bon Appétit’s main navigation was redesigned with variable ‘sticky’ positioning, smoother transitions and increased visibility for leaderboard ads. Search functionality was also integrated directly into the navigation, allowing for quick and easy searching from anywhere on the page. To improve the experience of users on mobile devices, the navigation was made fully responsive, and now accommodates devices ranging from phones to large desktop monitors.

A number of Bon Appétit’s page templates were redesigned to be fully responsive, as well. All landing pages (e.g. bonappetit.com/drinks), sub-category landing pages (e.g. bonappetit.com/drinks/beer), and special topic pages (e.g. bonappetit.com/christmas) have a new liquid layout along with dynamic hide/show features. Bon Appétit’s slideshow pages are also given a complete redesign, featuring a responsive layout, dynamic slide captions to improve ad visibility, and an image-centric recommendation section to keep readers clicking. LiveFyre commenting was also integrated into all content types to increase user interaction.

In addition to the many changes that benefit Bon Appétit’s visitors, NorthPoint Digital made improvements to the brand’s development workflow-improvements that continue to benefit the team maintaining the site. The process for updating code repositories was re-evaluated and the build process was streamlined, aiding both the in-house developers and offshore QA teams. New staging environments were created for internal testing, and Grunt was integrated into the front-end development workflow to save both time and resources. These optimizations help ensure ongoing code quality and prevent future regressions, ultimately protecting Bon Appétit’s investment.

Results

As Bon Appétit continues to attract more online visitors, their platforms have been repaired and renewed to handle increased traffic. The Bon Appétit site now caters seamlessly to numerous desktop, tablet and mobile devices. Further, there are no longer and server crash events, as the load caused by server errors have been alleviated. Bon Appétit can now focus on creating the world’s best content for the world’s most influential audiences, versus focusing on and being restricted by a platform that was unreliable and error-prone.