Recipe test

A friend asked me for my Banana Bread recipe recently, so I’ve spent the intervening time thinking about the details for how I want to display my baking recipes. I’ve been adjusting and adapting my style on paper for several years, so my recipes are a mess of sloppily hand-written notes in a variety of formats. Even with the last couple of weeks to think about it, I’m still not set on a final design, but I wanted to try out one style I’d thought of, which could be relatively-easily implemented in HTML, so here’s my Banana Bread recipe (adapted from Alton Brown’s old recipe), in a hopefully-comprehensible display format:

The basic philosophy of my attempts to better-design the recipe format is built around the fact that I don’t like having a separate ingredients list; it feels like a waste of space, but also makes cooking like trying to look things up in a glossary every few words. The instructions say “combine flour, baking soda, and salt,” and I have to access the reference table (the ingredients list) to know how much of each thing. Instead, I’m trying to make the ingredients required obvious (so you can gather them before beginning) but also built in to the instructions wherever possible. Baking recipes make this the easiest, I’ve found, though I’ve adapted similar designs to cooking recipes with complicated instructions, as well.

Additionally, I like having time & space color-coded and/or clearly delineated. So in this example, all three sets of ingredients should be mixed at the same time, in three different bowls (the blue steps), then the two sets of wet ingredients should be mixed (the green step), and then the wet and dry ingredients should be mixed (the yellow step). On paper, I usually put the ingredients along the left, and the “MIX” on the right with an arc (a bowl shape) curving around the ones which go together (and then larger and larger arcs as various ingredient sets are combined), but doing it this way seemed like a clear enough compromise for HTML and unordered lists, without doing a lot of custom/difficult web design.

My preference would be to have an iPad app where one could easily switch from a “gather these ingredients” form of the list (like a traditional ingredients list) to one where the ingredients (complete with their measurements) flowed/slipped down into the appropriate places in the instructions, and where individual instructions could be expanded (for further explanation, and/or illustrations, photos, and even videos) when clarification was needed. And when there’s a basic recipe with various alternate versions (something like “for a cranberry almond bread, leave out the bananas, then gently fold in 2 cups fresh cranberries and 1/4 cup sliced almonds at step n and sprinkle an additional 1/4 cup sliced almonds on top after pouring into the loaf pan”), a tap or two should simply switch the recipe entirely to the alternate version, rather than creating a secondary lookup table to refer to. Being able to switch to an alternate timeline/timing view would also be a boon, especially when planning a complex meal; imagine your recipe app was able to coordinate all the steps for a multi-course meal into a single comprehensible set of instructions.

(Unfortunately, there’s a lot of metadata missing from most recipes to make such a system easily adaptable to having the end-user’s recipes added. How long does this step take, and how far in advance can I do that step before moving on to the next, and what do you call this bowl of half-mixed things to differentiate it from that one, et cetera? Most recipe books I’ve seen barely have enough information to produce the food, let alone meaningful metadata; plenty don’t bother with overall prep/cooking time estimates, or even number of servings, let alone time-per-step, nutrition data, or easy substitutions for unusual ingredients.)

Anyway, I’m still working on it. No recipe book/app coming from me, any time soon. But putting things on this blog is part of how I think things through. Plus, that banana bread recipe is pretty-much foolproof, and delicious.