foodgawker

foodgawker

We provide design, development, and scaling services for the high-traffic sites in the Gawkerverse. These include rich search and user features, extreme mobile device compatibility, and APIs to integrate with mobile apps; all built on WordPress.

Gawkerverse is a network of user-generated content sites including foodgawker.com, craftgawker.com, stylgawker.com, weddinggawker.com, and dwellinggawker.com built by chief gawker, Chuck Lai. We began working with Chuck in late 2011 with the original goal of enhancing the search functionality on his sites.

foodgawker-home

Getting Up to Speed

Since we hadn’t built the original sites, our first step was get access to the code and various servers, familiarize ourselves with the code base, and update each of the themes to a) be consistent with each other and b) work with current version of WordPress. While we learned about how the sites were built, we created documentation about the current architecture and began building a QA test plan.

While we have a set of project management best practices that we try to generally adhere to across all of our clients, we recognize that each client has specific things that are important to them. During this first initiative we worked with Chuck to establish a workflow that included:

  • methods for coordinating WordPress development with parallel iOS app development (separate but reliant on each other)
  • agreed upon deployment measures, timeframes, and steps
  • ways to prioritize development efforts based on immediate needs and long term goals

Improved Search & Filtering

The Gawkerverse sites were using the built-in WordPress search functionality, but as the content of the sites grew the search function couldn’t keep up. Search functionality is generally a weakness of WordPress. Search is one of those features really works best when it is customized for a specific site, so it’s complicated to try to “improve” it in a platform like WordPress that is used for so many things.

Since the Gawkerverse sites had outgrown the WordPress built-in search, it was time to bring in some better tools. In our first feature-focused project effort we set up Sphinx as a search replacement. Sphinx is an open source search engine that can be customized extensively to handle searches in the way that works best for a specific site. It’s also extremely fast.

foodgawker-search

Lo and behold – 3D transformations were the culprit! A change to keep phones and tablets from getting the fancy flip interaction and voila, the site runs beautifully across all devices.

After months of refining the UX across various browsers and devices, we launched the updated design and features at the end of April 2012. We got to do another redesign with more cool new feature additions that launched in May 2013 – we’ll have more on that in our blog in the future.

We set up WordPress to push content into Sphinx for indexing (including tags and keywords), tuned it to match the content of the Gawkerverse sites, then set it up to deliver keyword search results (yay!). We implemented custom filters to allow users to further refine their search results by category, tag, timeframe, # of times viewed, submitter (author), and exclusion terms.

This means we can search for that chocolate recipe, in the desserts and sweets category, while excluding “healthy” items. We can even sort the returned results by latest, most popular, most viewed, or random. We may or may not have done extensive off-site testing of the search feature from our respective kitchens on the weekends.

Scaling & Server Architecture

We’ve continued to expand our use of Sphinx. As the default MySQL queries started to strain unreasonably under the volume of content they were working through, we switched to Sphinx to deliver nearly all core WordPress queries. We use Sphinx to get what posts to show, then query the MySQL database for the actual content. We made MySQL behave more like a key-value service while allowing WordPress to happily hum along none-the-wiser about what is going on behind its back.

As the content and readership of the Gawkerverse sites continued to grow, so did the demands the sites placed on the hosting configuration.

We inventoried the various sites’ resource demands as well as the projected growth. From there we designed a more robust server architecture to employ multiple web app servers with Varnish in place to handle much of the heavy lifting (cache delivery and load balancing).

We also used multiple database servers, load balancing between them for redundancy (if one fails, another can keep going) and for improved performance. There is also a CDN delivering the site’s static assets including all the photos, JavaScript, and CSS files.

While this addressed the current needs for Chuck’s sites, we know that the work of scaling for the web is never done. As the sites continue to evolve and new tools and best practices become available, we continue to re-assess and improve the hosting configuration for the Gawkerverse sites.

Responsive Redesign

foodgawker-mobile-retina

Once things were working smoothly on the server side, it was time to tackle the Big Redesign. This brought a number of styling refinements, but most importantly it was to deliver optimized presentation across all devices (desktop, tablet, and mobile). Chuck loves his sites and knows them inside and out. Let’s say there were very specific parameters we needed to hit to provide users the best experience. For example:

  • We needed to deliver smaller, less detailed cards to mobile devices and larger cards to tablets and desktops where the beautiful photography could be better appreciated.
  • Most tablets had to show three cards per row regardless of orientation/width (resizing them to fit the display as necessary). This was a requirement for some of the ad features of the site.

As part of this redesign process we also took the opportunity to clean up some legacy code, leverage CSS3 where appropriate, switch to a Carrington Core-based theme, and transition to using parent and child themes. Whew!

While these changes increased the overall effort up front, that investment has paid off significantly over time. Whenever we are working on a project we try hard to balance short-term expedience with long-term goals.

So yay! A beautiful, new, responsive design. The site looks great! …and it’s crashing on our mobile devices.

The crash was related to the browser running out of memory on older iOS devices when zooming and rotating (first few times were fine, then BOOM!). To get to the root of this we constructed a test grid where we included one component at a time to find the one or many contributing factors to these crashes.

We worked with Chuck to agree upon what devices and browsers need to be supported. The result – a shared device matrix grid.

Gawkerverse Test Matrix

We love working with Chuck. He’s passionate about making sure his users get the best experience on his sites and we love the opportunity to build cool new features and push the boundaries of what can be done on the web.

We’ve come to know and trust the team at Crowd Favorite over the past couple of years and we consider them a big part of the gawkerverse team. With their project leadership, planning, and technical skills, we’ve completed several large redesign projects. We have pushed the envelope with infinite scrolling, responsive web design, enhanced search (Sphinx), scalability and site maintenance.

We’ve enjoyed collaborating with Crowd Favorite on new features and improvements. We appreciate the momentum a dedicated full-service team of web professionals can generate towards the growth of our sites. We whole-heartedly recommend Crowd Favorite for ongoing, complex web design and development work.

Chuck Laigawkerverse

Contact Us About Your Project

We love the opportunity to work with interesting teams on challenging projects. Our expertise in websites, web applications, WordPress and general best practices makes us a great partner for whatever you're looking to build.

Our team of professionals includes designers, developers and experienced project sherpas. Not only will the technical result be high-quality, but we will be your trusted guide throughout the process.

Get in Touch

Explore Other Case Studies