Design and Prototyping for Drupal

Step 3: Single Node Page

Now that we have our header in place, we should probably think about how type will look. For this, we’ll start with a single node page, which will give us an opportunity to figure out a variety of different type defaults.

The focus of a single node page should be on the legibility of the content on the page. I want to avoid a line length that’s too long, so I’ll keep my content area at a width of 12 columns, which is about half the page. It’s important to test out a couple of different types of copy that could appear in a given text sample, so I’ll include a secondary heading, a pullout quote (which I’ll convert into a symbol) and some sample body copy. I also want to make sure I plan for titles that might go long, so I’ll set my h1 as a two-line title to see how it looks. Finally, each element in my sample copy will have its styles saved in the Styles palette:

• h1: the page title

• p: the body copy

• h2: the secondary title underneath the first paragraph

• blockquote: the pullout quote. The entire block quote is pulled out from the main flow of the text and saved as a symbol

Figure 7-4 shows where we are with our sample node page.

Figure 7-4. Setting up a sample node page to set up our content styles

Right now, we’re assuming that this page has no sidebar; this means that we’re going to end up with a lot of extra space on the right side of the content unless we come up ...