This article was written in 2016. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
I like food, a website
This week Evernote sent me an email in which they explained that from now on I can’t really use their service anymore, unless I start paying for it. I gladly pay for services I use. But Evernote is not really one of them. I only use it to store a few recipes I cook every now and then. So instead of paying 3000 dollars per century in order to read my recipes on any device I like, I decided to pay nothing, close my account, and host my recipes myself.
I thought about possible backend architectures for a while. I tried a few CMSes, but quickly came to the conclusion that plain old HTML (with a little bit of PHP for including the navigation and generating random colours) is more than enough.
So here it is, my list of recipes I cook regularly. Some of these meals I created myself, like Pasta di Papa, Drunken Cow, and Cucumber Salad. Others are adaptations of recipes I found online or in books, like Meringues, Chili con Carne, and Dark Stracciatella Mud.
Design choices
The font I use is the Nara. I love its pointy shapes, its beautiful upright cursive, and its wonderful italic.
On the web we can use viewport relative units. This means we can — and should — use the whole viewport for our designs. On this site the headings are slightly oversized, and fill the complete viewport, and are even cut off by it. I like the look of it, especially on bigger screens.
I struggled for a while with finding a logical way to navigate this site. I tried a few common patterns, like previous and next links and hamburger menus — which would be conceptually appropriate for a site about food, but didn’t make any sense from a UX perspective. In a moment of clarity I came up with the simple idea to add the complete homepage to the bottom of each page. This way you can directly navigate to every page from every page. I don’t expect this site to grow much, so this will do.
By chance I came up with the idea to colour code the ingredients. It might help a bit with referencing the ingredients list while reading the recipe. Not sure if it’s really useful, but it does look nice. There are also some nice random colours when you hover over the links to other recipes. Again, not really useful, and completely invisible to people with a touch device, but nice nevertheless.
I want to add offline capabilities to this site. It makes a lot of sense if I could use this site while I am on a holiday in Greece, for instance. You can expect offline support within the next couple of weeks.
The structure of the URL might give you the impression that there are more things that I like. Which is true. But for now only my recipes are turned into a website.
You can also read this article on Medium.
This is a great idea and an adorable website! Thanks for sharing ☺
It’s nice to read your design choices. Aside from the hamburger menu, the Vollkorn typeface could’ve been appropriate. ;-) Nara looks good, though.
Why did you decide to place the ingredients below “cooking?” When I think about the structure of a recipe, I’d place the shopping list in a subsection below “Prep” as making sure you have all ingredients seems to be a good preparation.
Anyway: Thank you for sharing and happy cooking ☺
Hi Micha, thanks for your comment. Vollkorn would have been appropriate indeed. I could have used Parmigiano as well (-:
The ingredients are below cooking only on a small screen. On a larger screen they’re on the left, and in the source code they’re before prep. Personally I mostly check a recipe while I’m cooking, when I forgot some details. In those cases I want to read the instructions. So this works for me. I’m sure other people — like you — would want to use it differently, and your solutions definitely makes a lot of sense. But I’m afraid I can’t make everybody happy.