We’re making Cook Smarts responsive, and sharing the journey

Over the next month or so, I will be working to make the Cook Smarts meal planning service responsive. I’m going to share with you each phase of the project, challenges and all.

The Cook Smarts meal planning service has grown rapidly since its launch in May of this year. In a recent survey of its users, one of the most top-requested features was a mobile app.

Here’s a preview of what we’ll be addressing in this responsive redesign:

Setting up the grid

Exceptions to the grid, and how to handle them

Responsive images (people love pictures of food, and they need to look good on every screen size)

Responsive navigation

Typography

Integrating social

Analytics

I have already begun the project, and am using the Zurb Foundation framework. There is a debate in the web community about when to use front-end frameworks. Many designers I greatly respect do not think they should be used at all.

There are a few reasons we’ll be trying Foundation on this project:

We want to deliver mobile-friendliness quickly, and reliably. Foundation allows for rapid development by handling boilerplate that applies to most use cases, and is tested across multiple browsers.

We will be rapidly adding new features as Cook Smarts’ user base grows. Foundation takes care of the basics and provides tools for implementing many of the features that are planned – for instance, responsive video.

There are two important aspects of the tech community that also steer me toward a framework:

We share ideas, and use one another’s ideas in our projects. A framework that has been battle-tested on many sites, like Foundation, can also benefit Cook Smarts. We don’t need to reinvent the wheel.

Abstraction helps development move faster. On the back-end, Cook Smarts is built in Rails, which abstracts many common development tasks (database connectivity, basic security, etc.) so that we can focus on what’s unique about Cook Smarts. Front-end frameworks provide the same sort of abstraction for the user interface, allowing us to focus on value for users instead of reinventing a grid system that has been done thousands of times before.

Be back soon with an exploration of grids. We’ll talk about how Foundation’s grids work most of the time on their own, and how to customize them when they don’t quite fit.