When redesigning the Cook Smarts meal planning app, we knew we had to handle images in a smarter way. Pictures of food are very important to the site. They make it easier for people to navigate to familiar dishes, and give an idea of what to expect when cooking them.

We have hundreds of high-res images stored on Amazon S3. We were missing two things: thumbnail-sized images, and a way to determine which size image to serve based upon the user’s screen size.

reSRC took care of both of these needs for us. It is a service that sits between your high-res images and your users, scaling down your images to fit the users’ screens. We simply inserted the reSRC JavaScript, and that was about it.

I’ve prepared a screencast to show you how easy it is to implement reSRC.

Note: Here we are using Chrome’s JavaScript console to bring in reSRC. In the real world, you would place reSRC’s JavaScript into your code directly.

Plug-and-play solutions like this make it easy for any web site to use responsive images, without coding. We may eventually generate our own thumbnails and serve the proper sized images through media queries, but reSRC allowed us to go responsive with our images in less than an hour, for about $30/month. That is pretty remarkable.

The recipes on Cook Smarts include videos that explain techniques such as seasoning and tenderizing chicken, quick-cooking potatoes, and chopping eggplants.

Prior to the redesign, the videos were linked within the text of the recipe, bringing the user to the Vimeo page in a separate tab. On a phone, looking at a very quickly was a bit difficult, requiring switching back and forth between tabs.

We looked for a smoother way for people to enjoy videos, and found a few techniques that helped.

Label video links

We added a video icon after each video link, using a bit of CSS and FontAwesome.

This bit of code looks for a link to a YouTube or Vimeo video, and adds a video camera icon next to it. Show the video immediately, without leaving the page

Opening the YouTube or Vimeo page in a separate tab was a waste of the user’s time. Instead, we used FancyBox 2’s media helper to open the videos in a modal popup.

When the user clicks a video link, the video pops up in the same page and immediately starts playing.

We added this functionality purely with JavaScript.

First, we add a class called fancybox-media to all video links. In the future, we may do this in the back-end rather than on the client, but this was much faster and takes care of past, current, and future recipes.

The goal of this was to make video more seamless for the user. It works on desktop and mobile, thanks to FancyBox’s awesomeness and Vimeo’s and YouTube’s mobile support.

Embedding the videos on the page itself was of course another option, and we may still do that. But clearly-marked video links in the recipe, which do not require the user to leave the page, seemed to be a clear next step.

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.

Now, we’ll tackle tabs. Even with our new responsive layout, tabs on the page do not respond well to small screens. We’ll replace them Foundation‘s sections, which can auto-magically appear as tabs on a large screen and an accordion on a small screen.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

As I said in my introduction, I’m an IT consultant who has been developing intranet web sites, primarily in SharePoint, for many years. My goal is to dive into modern web development, front-end and back-end. I’m going to learn by doing, and share everything on this blog.

The Pitch

First, of course, I need an app idea. Here’s my elevator pitch:

People generally want to improve their skills in some area. Someone might want to become a better a cook, a better programmer, or a better gardener.

My app will:

Help you evaluate your current level of expertise in a certain area

Give you tips for improvement

Track your progress as you improve, and let you share your progress with others

Experts will create the evaluations that power the app, and gain exposure in the process.

Requirements

Here’s what the app might need to do:

Allow anyone to:

Take an evaluation on a certain topic

Get tips for improvement, based on where they stand now

Re-take the evaluation later, to see how much they’ve improved

Allow experts in a given area to:

Create an evaluation on a certain topic

Share the evaluation with others

See how many people are taking their evaluation

We’ll flesh out requirements more later, but this is the gist.

In the next post, we’ll start looking at the tools necessary to create this, beginning with the front-end or user interface.

I got my first computer at age 8, and fell in love with it. By 12, I had started my own web design company, stylishly named martin.web.design. I set up a web site for it, and began marketing my services to whoever was interested.

Somehow, I got clients. An anthropologist from Papua New Guinea. A small university in California. A realty company. The Internet was new and exciting, and big web firms hadn’t yet established themselves. It was the perfect time to bust out my Dreamweaver skills and start making sites.

Fast forward to now. I’m 27, and consult in DC, mostly on intranet sites. The primary tool I use is SharePoint, which I’ve found can do wonders for internal processes. But I miss web design, and in my very long hiatus from creating sites from scratch I have missed out on the advent of HTML5, CSS3, and JavaScript. Don’t get me wrong, I’ve used these things, but I haven’t really learned them.

In this series of blog posts, I want to understand modern web development inside and out. I hope you’ll come on this journey with me, as I learn:

How to start a modern web site front-end. Are frameworks such as Twitter Bootstrap and Zurb Foundation a good idea? When should one start from total scratch, and how? I’m going to create a front end, and share my experience.

How to start a modern web site back-end. What are the most popular tools right now? From platforms such as WordPress and Drupal, to languages such as PHP, Ruby, Node.JS, to frameworks such as Rails, to odd creatures that stand in between like Meteor… where is one supposed to start to code a web application? I’m going to create a web application, and share my experience.

Everything I make will be open source (I know, I’m already flattering myself assuming someone will want to use the code). This is a journey that I want to share in its entirety.

My next post will be about my idea for a web application. Then we’ll start creating it.

Follow me on Twitter (@coreyITguy) or by e-mail (click the lines icon on top of the page for the subscription form).

Did I mention this site will get a facelift as well?

Finally, I’d love to show you some of my early designs…

My web design homepage when I was 14Toward the beginning of Web 1.0, I loved to give advice…