2014-06-10

Co.Labs

The Technology Behind The Food Porn Boom

As gourmet bloggers build more sophisticated sites, more and more eaters (and investors) are taking notice.



Ten years ago, searching for a recipe online may have turned up a few results from the Food Network, at best, and miscellaneous entries from amateur cooks, at worst. A few years later, swelling activity on blogging networks began to proliferate communities of food bloggers. Fast-forward to now, and food bloggers have become brands, sharing the same online publishing space with innovative food websites.

In just a few years, the online food publishing industry has gone from standard photo-and-text blog posts to full-blown interactive websites. To gain a competitive edge, food websites, whether run by bloggers or bigger brands, now leverage the latest web tools in the online food world.

The Tech And Food Worlds Hook Up

“It was only a matter of time before Silicon Valley started looking into the food world,” says Dave Feller, CEO and cofounder of the recipe search site Yummly. Grassroots websites started to become profitable businesses over the last few years. CNet acquired the online food forum Chowhound in 2006, which eventually became CBS Interactive’s CHOW. Other online-only food publications fell in line, like Food Republic and Eater.

Feller’s story is not much different. After working in marketing and strategy for a few tech companies, like StumbleUpon, Feller created Yummly as a tech startup, receiving funding to build his team of developers. Startup investors were taking notice of the online food world.

Aside from attention in the startup world, social networking has driven a lot of growth in food sites, especially among food-blogging communities. One online food enthusiast knew this early on. Babette Pepaj started her site, BakeSpace, as a tech website first and a food website second. She recognized the need for other foodies to be able to use the tools of social media to connect on one site. She describes its original concept as a sort of Facebook for food bloggers.

Eventually, Pepaj started the food-blogging conference TECHmunch to teach bloggers how to best utilize web technology to bring their content to wider audiences. The conference recently took place in New York City and will roll out in Chicago on June 27th.

[View the story "TECHmunch NY 2014 in Pictures" on Storify]

At TECHmunch, food bloggers benefit not only from socializing with their fellow bloggers but also from learning directly from tech and marketing experts on how to improve their craft. A lot of the learning curve involves mastering cross-posting across different social media outlets, like Vine and Tumblr.

“Most bloggers are really good at one or two things that they have mastered. Like they know how to use Twitter and how to use, you know, Instagram, or to write a great blog post. They know how to take a great photo,” says Pepaj. “But there’s always one weakness.” Pepaj says that her conference helps food bloggers improve on those areas that might be lacking.

Another big lesson for food bloggers to learn, she says, is understanding search engine optimization and leveraging keywords within blog posts. “Just knowing to use a few key words makes all the difference,” Pepaj says. Focusing on a few topics can motivate a blogger to generate more specialized recipes, better interact with her audience and drive readership, she notes.

Sites like Google Analytics and SEMrush can help food bloggers understand where they stand in the blogging space, relative to their competitors, as well as understanding how keywords affect their web traffic. Pepaj also recommends that bloggers try out different themes for their sites before launching. A useful tool to do this, she says, is ThemeForest.

Algorithms

When he created Yummly, Feller knew he wanted to create a central place where picky people with any food preference could find recipe ideas with ease. Feller is a self-proclaimed mustard hater.

“We’ve mapped the food genome,” Feller says. Yummly’s search algorithms contain variables like spiciness, taste, and cuisine, which make its database of recipes searchable from several angles. Essentially, he and his team have turned food into data. The company’s research scientists frequently muse on the character of certain dishes, like which characteristics make some foods more Super Bowl-friendly than other foods.

Yummly’s most popular searches by day of the week, screenshot. Check out the interactive graphic here.

Yummly’s team can parse other sites’ hrecipe formats to extract recipes onto its site, locking onto information like the ingredients used, cooking instructions, and cooking time. But Yummly mainly uses machine-learning techniques based on a graphical model to scour the web for good recipes to feature. Still, Yummly invites users to submit their favorite recipes from elsewhere on the web to the site.

Yummly has an API that lets developers customize their food-related searches, drawing upon its vast recipe database. Large sites like DuckDuckGo and Instacart use it. But smaller developers have used the API to figure out better ways to cook, like this site that educates users on how to use up indeterminable vegetables.

Interactive Design

Jason Jeffries had a solid background in programming and web design when he decided to venture out on his own. Together with his wife, who used to be the creative director at another design agency, he started the interactive design agency Blenderbox. Outside of programming, his passion lies in food. He owns two cheese shops in New York, one in Brooklyn and one in Manhattan. In a former life, he ran a coffee shop in Williamsburg.

So it is only natural that the company’s culture is culinary. Its client portfolio centers heavily on food. Blenderbox has done the websites for the Brooklyn Brewery, The Brooklyn Kitchen, and the artisanal food store D’Artagnan. Its corporate office in the Greenpoint neighborhood of Brooklyn also boasts gourmands. Blenderbox’s director of UX has published an illustrated book on cocktails, and employees there benefit from beer that is brewed in-house.

Jeffries takes the mobile user experience into careful consideration when designing sites for restaurants.

“Eighty percent of restaurant sites you go to, you know, they have these old, outdated sites that have a 10-megabyte PDF file of their menu or wine list that people would have to download,” says Jeffries. Or they would have Flash elements or a movie that would poorly transfer to a smaller mobile screen.

Blenderbox’s current method of tackling mobile is responsive web design. Responsive web design, or RWD, not only adjusts the content to the platform but also scales it for the screen size.

“The person is just sitting in the back of the taxi, and they just want the phone number or the address,” says Jeffries. Even Yummly’s Feller attributes a lot of the advancements in food websites to the surge in mobile Internet consumers, so designing for mobile is key.

RWD is an improvement on the dated practice of keeping a separate site for mobile, which one would typically recognize with the string “mobile.” or “m.” before the rest of the URL. Now, the ability to shift content by platform is ingrained within the CSS code for a single, main site, thanks to improvements in CSS technology, called media queries. Another feature that has come about with better CSS tools is the collapsible section, which is recognizable by three horizontal lines on a tab in the page, the “hamburger” in developer jargon.

Before concentrating on using RWD, Blenderbox relied on older CSS technology and parallax design. The sites were decidedly colorful, marked by the distinct static and moving components when scrolling up and down a page that parallax technology provides. One of these older sites, FiveThirtyBrew, was nominated for a Webby Award in 2012. Incidentally, the beers featured on the site are the ones that Blenderbox brews in its offices.

Whether the more technologically advanced food websites will usurp the text-and-picture food bloggers remains to be seen. Feller thinks that sites like his have a certain technical advantage over the ones that have fewer resources. “There are certain things that bloggers are never going to be able to do,” Feller says. Things like creating shopping lists and calculating nutritional information of a single recipe are second nature to the tech experts at Yummly.

Yet, Feller sees Yummly’s evolved search algorithms as a complement to standard food bloggers. “Really, Yummly allows those recipes to be discovered. You know, not just being able to discover a recipe but being able to discover bloggers, being able to discover them based on your tastes, but then we drive all the traffic to these guys,” he adds.

Sure, staying on top of the latest web design technology, social networking trends, and marketing tools has become a priority to food scribes on the web. But food experts don’t have to become authorities on online technology. In fact, Jeffries’s cheese shops’ website uses Shopify to integrate online shopping onto its site; he didn’t build that feature from scratch. The tools are out there for foodies to use. And the online culinary world only stands to expand its reach to consumers because of these trends.

[Image: Flickr user Ralph Daily]




Add New Comment

1 Comments

  • Check out the Food Porn Index. It trawls Twitter and Instagram looking for hashtagged mentions of fruits, vegetables, junk food, and keywords like ‘snack,’ ‘condiment,’ and ‘fried.’ It tallyed a few hundred million in it's first six weeks. It keeps a realtime count of two dozen items and regularly updates the standings as the numbers toggle between healthy and unhealthy foods. http://gigabiting.com/the-food-porn-index-asks-kale-or-cronuts/