I’m currently designing my first foodie website (see Ern Berck Projects). It’s a demonstration site built on the WordPress content management system (CMS) using the Genesis theme framework. Until three days ago I had no idea what a “foodie” was — I had heard the term before, I just wasn’t sure what it meant.
According to Wikipedia:
A foodie is a person who has an ardent or refined interest in food and alcoholic beverages. A foodie seeks new food experiences as a hobby rather than simply eating out of convenience or hunger.
The terms “gastronome,” “gourmand” and “epicure” define the same thing, i.e. a person who enjoys food for pleasure. The “foodie” — not as elitist as a gourmet, more discriminating than a glutton — was first named in print in the early 1980s.
Umm, okay. Other than Crunchy Cheetos and Peanut M&Ms, I usually only eat when I’m hungry. So I guess I’m not a foodie. That aside, I decided to build a food website anyway.
Like most sites today, the first impression and “shareability” almost totally hinge on great imagery. Fortunately, there’s no shortage of gorgeous food pictures and many are free to use commercially. Good thing, since I’m a crummy photographer.
The other mandatory component of a food site is some sort of recipe display system. This is where it gets tricky. Trying to organize hundreds of recipes into logical categories is a nightmare (let alone trying to build a local search engine that will return meaningful results).
Luckily, I’m using the WordPress content management system (CMS) which has some pretty nifty plugins (see below) that were developed specifically to properly store, retrieve, and display recipe-type data. I haven’t installed any of this functionality yet because I’m still in the first stages of layout and design.
Well, bold for me anyway. My typeface choices are usually pretty conservative, but this time I went out on a limb. The site title is a handwriting font called P22 Cezanne Pro from Adobe Typekit. I prefer to use fonts or scalable vector graphics (SVGs) for site titles (as opposed to images) because they scale perfectly on mobile devices.
The uppercase post and page titles, are rendered in a condensed classic serif font called Ambroise Francois, also from Adobe Typekit. Due to its high contrast and lack of italics, Ambroise wouldn’t be suited for the body text, but I like it as a primary headline typeface.
The sub-headlines (used sparingly within the body text) use a vintage geometric typeface called Josefin Sans from Google Fonts. I reduced the letter spacing a bit to tighten the look. I think Josefin pairs well with the body text, which is an easy-to-read serif typeface called Merriweather, also from Google Fonts.
Take a peek
- Website: elinor.wpengine.com (login required)
- User Name: demo
- Password: elinor
What’s a plugin?
A WordPress “plugin” is a small piece of software that extends the functionality of the larger (and much more complex) core application. There are probably thousands of free plugins available in the official WordPress plugin “repository.” Some are great, many are bad, and some border on criminal malware. The trick of course is telling the difference. Online reviews, forums and referrals are the best way to separate the best from the worst.
Also, not all plugins are free. Many have a one-time fee, others require a monthly or annual recurring fee to get updates and support. I actually prefer paying for plugins. That way I’m usually assured of frequent updates, improvements, and support if anything goes haywire (and it usually does). This is not to imply that all free plugins are crappy — they’re not — it’s just that money is a strong motive for providing a quality product. Like most things in life, you get what you pay for.
What’s a demonstration site?
Demo sites are usually password-protected (credentials below) to keep traffic to a minimum and discourage web bots from exploring the site. They also contain a few code snippets that prevent Google and other search engines from indexing it.