Recipe Markup

GDES-220 fall 2017 · American University Design
Instructor: David Ramos ( · office hours )

Websites are made up of many pieces that come together in the browser. This assignment takes a first look at web typography, using HTML to describe structure and shaping a page’s appearance with CSS. The tools we have on hand, at the moment, are simple, but they can speak loudly.

Photo of handwritten recipe

Part 1: HTML

Find a recipe—in a cookbook, a printed newspaper or magazine, or written by hand. (You could borrow a recipe from a website, but just copy the text, not the underlying HTML code.) Your recipe should include a title, paragraph-text introduction, list of ingredients, and list of steps. Think about the structure of this recipe. What are the different pieces, and how do they relate?

Mark up this recipe as HTML, using semantic elements to describe the parts of the recipe. We will be styling the recipe later – for now, you only need to break the recipe up into its components.

You will need to use these tags:

Start with the recipe files from GitHub. Do not create these files from zero. Use the starter and its folder structure.

Deliverables: one HTML file.

A note about HTML style

Best practice is to write tags as lowercase in actual HTML files, mainly as a matter of common coding style. When discussing tags, it usually helps to write the tags in uppercase for clarity.

Where to get recipes

Good options include:

It’s important that you find a recipe on paper. You could find a recipe that’s already a webpage and copy the HTML markup, but that would defeat the purpose of this project. Besides, the original markup might be wrong. Put the tags in yourself.

For the first critique, bring in an original version or photocopy of your recipe.

Part 2: Type and CSS

Sketch out a design for the recipe, just with pen or pencil on paper. Design for readability and readability first – if you want to experiment with typographic fireworks, go ahead, but not at the expense of function. (You’ll have opportunities for more expressive typography later.)

Make this a one-column design. Elements can have variable left and right margins, but don’t try to put columns of text next to each other. We haven’t yet covered the techniques you’ll need to make multicolumn layouts. You may add images, if you wish, adding elements to the HTML.

Again: your design should run in one column. Not two columns. One.

Lay out your design using CSS. Consider type (size, weight, typeface, letterspacing, case, and use of italics), paragraph width and margins, and text color. Rules, borders, backgrounds, and spacing can add drama and create visual hierarchy.

You will want to use some of these properties (not necessarily all):

Remember that you can specify a particular margin, padding, and border for each side of an element.

Create a one-column design!

You might want a bigger vocabulary so that you can create, say, intro paragraphs or notes. You can add classes to elements to give yourself more formatting options.

Deliverables: One webpage, with HTML and CSS files. Please also show your sketches.

For due dates, look at the class schedule.

Let’s talk about design

We’ll continue to think about how complex websites need to be, but keep this project straightforward. You may remember, from a type class, Beatrice Ward’s 1955 classic essay, The Crystal Goblet. (John Naughton, in similar terms, argues that sites are more complicated than they need to be, in Graphic designers are ruining the web.)

Set your type big enough that people can read it: 16px is a good minimum size for body copy. In reality, that’s no bigger than print. If your type looks horsey, increase the line-height (leading), reduce your line widths (measure), or choose a font that’s better suited to the screen.

Scrolling is fine. If your content won’t fit on your screen, let the page scroll. You can’t design for one screen size. Someone, somewhere, will have to scroll, but the research shows that they will cope just fine.

You can always treat “big” type and scrolling as an opportunity to make beautiful things.

Evaluation criteria