View all essays

In Need of a Haircut

Responsive viewsExample of responsive redesign that launched in August of 2014. [link]

Last month we launched some updates to Serious Eats - the site hasn't had a major visual overhaul in a few years, and we wanted to address some immediate issues while working on a larger reorganization and redesign project in parallel. We weren't adding any new features, if anything we were focused on paring down and identifying what could we do based on what already existed.

The percentage of visitors on mobile and tablet devices has steadily increased and, although our overall traffic has been going up, the time spent on the page has slowly been decreasing. A few years ago we had experimented with a mobile site that served stripped down pages from a mobile sub domain. It became neglected as it was a completely separate set of templates, which meant double work to keep feature parity. We wanted to stop using the "mobile" templates, make the existing design responsive and have one canonical URL for any given piece of content.

Going responsive was an immediate fix, with the goal of increasing the time spent on page and more pages per session. But going responsive for a publishing company doesn't just mean adding media queries to the stylesheet. We had to consider how advertising was going to be integrated at various widths. We settled on using an asynchronous loading method so we could load the correct size depending on the screen width. And given the timeframe, we settled on a single breakpoint at 768px. To solve for the less than ideal width in portrait view on tablets, the viewport metatag is omitted to force the viewport to zoom out to display the (wider) site within the screen. It's a handy hack!

The site was also badly in need of a cleanup; over time, pages had become cluttered with unnecessary widgets, colors and scripts that were just adding visual noise and slowing the page down. There was also a proliferation of styles as various projects were launched, and we wanted to make the styling more consistent across the board. Internally we dubbed this project "the haircut". We wanted to get out of the way and let readers read!

 And finally we had to change our templating system. (Not a small task, props to Paul!) We had already built a number of projects with ChApp and we were finally ready to cut the cord with using Movable Type to render pages. MT is now set to publish JSON feeds while ChApp handles all the rendering logic. ChApp gives us more flexibility and we no longer need to rebuild the entire site, we just push the templates via git and restart the server only if settings have changed. 

But we had to do it in two stages: first recreate every template in ChApp that mirrored the old blog structure, then we worked on consolidating the templates. We now have a single template that renders stories and one that renders recipes; we previously had one story template per blog. There are still a few dynamic templates like user profiles and registration that MT handles, but for the most part we're now on a much more flexible platform where we can make changes much more quickly and easily. It cut our launch time down to about an hour - compare that to the last major update, which took four or five hours and then a site rebuild over another day or so. And it gives us the ability to make much quicker releases rather than having to wait to rebuild the site to reflect any changes. 

So the big question is: how effective has the haircut been? It's consistently more than doubled the time on page and decreased the bounce rate by about 10%, and the page load time has decreased on average by 4 seconds. Readers are thrilled that the content is optimized for reading no matter what kind of device they're on. 

For the future, we want to continually focus on performance. For instance, we want more control over displaying images so we can serve the appropriate size according to bandwidth and screen capability. We're also in the midst of a larger taxonomy project to dramatically improve the search experience, especially for recipes. And we're making a bigger effort to surface evergreen content - we started doing this with a custom-built related content widget at the bottom of posts - and will extend to bigger projects like what we've been doing with our holiday collection pages. So stay tuned! 

  • Making Sandwiches

    I do admit that I get to work on some fun stuff at Serious Eats. The process for building the sandwich page was a great example of a successful collaboration between editorial and the design/dev team. It was a quick process - Kenji came to me and Paul…

    Thanksgiving 2.0

    Last year the product team focused on just getting *something* together for Thanksgiving on a tight deadline, but this time we had the luxury of an existing code base to work with, a year's worth of experience making these pages, and a much longer lead…

Featured essays

Editorial Design is a Team Sport

How designers can foster a collaborative environment Read more

Why I'm a Designer

Whenever I tell people who know me as a designer that I'm working on a restaurant, I get some puzzled looks. "Don't you make web sites or you're in tech or something? ", their expressions seem to say. Yes, and the web is simply a medium. What I'm… Read more

In Need of a Haircut

Last month we launched some updates to Serious Eats - the site hasn't had a major visual overhaul in a few years, and we wanted to address some immediate issues while working on a larger reorganization and redesign project in parallel. We weren't adding… Read more