Latest Work

Recipe Cards with Media Queries

Growing up with my mother’s cooking was a blessing. I was well and truly spoiled with good food. Meals and snacks were happy results of her passion for perfection in the kitchen. After leaving the home nest in college, it was not uncommon for me to call my mother and ask for directions to what would likely end up as a futile effort of recreating a memory.

After years of repeating the same questions, my mother shared with me a Google Doc she wrote so I could reference a link instead of reaching for speed dial. For her birthday last year I decided to make her something.

CSS media queries are such a special thing. The majority of people who use them do so to deliver a consistent experience for users no matter what device they may be using. Easily the most overlooked feature of media queries is how they can target printers.

Think of a cooking website, a recipe website. Think about printing a recipe from a website. Think about what that awful, bloated, waste of paper and ink looks like.

My birthday gift to my mother was a website for the same recipes she shared with my in that document. Unsurprisingly, each page represents a different recipe. The magic happens when you print the pages. When you look at the page delivered by the printer what you see is a classical three-by-five-inch recipe card. This was one of my most memorable presentations of a website. To my mother I delivered a wooden recipe box containing dozens of recipes she wrote. When she took a closer look at the cards she noticed a small referential link back to her website, pamrecipe.com. Eat your heart out, Martha Stewart and allrecipes.com.