Ideas on Page Design-Alt Design-Content

Your Content.

Since you're here, you're probably building a page for Writng.Com. That means you already know what the content is going to be. The content is the whole point, right? The content is the soul of your page. The rest is just fluff.

Well, not exactly. I'm sure you've got awesome content. I've been lurking on WDC long enough to know how talented folks here are. The trick is to make the visual presentation of the content match your brilliant ideas.

You've got the content. That's the hard part. The rest is just some simple techniques. Actually, "technique" is a fancy word for a "trick" that you can use more than once. So you just need to apply a few tricks to make pages shine.

Organize Your Content Using Headlines. ▼

I know. Your content is already organized. It's not random word salad jumbled together. You thought it through, and put things in order. This step involves finding places to insert visual cues for your readers. Places where you start a new topic, for example, or where you introduce a new idea.

So, the first thing to do with your content is look for these natural breaks in the text--places where you could insert a headline. Headlines will break up your text and make it easier to read. In fact, it's a good idea to strive for headline breaks at least every screenful of text--about every 300 words or so. Of course, the size of a single screen depends on things you can't control, things like the user's screen size or typeface choices, but 300 words is a pretty good estimate.

I've called them headlines, but they could also be bullet points. Sometimes in visual media bullet points are better than text, just because they are more visual. Whatever you call them, they are natural breaks in the text.

You'll noticed that we've used the dropnote links as our headlines, and that clicking on them reveals about a page of text. They're kind of like turning a page in a book. We'll talk about the WritingML for doing that in the layout section.

That's a LOT more breaks than you'd expect to see in printed media. That's because, for a variety of reasons, screens filled with text are more fatiguing to read than printed media. We'll discuss this more in a bit. For now, it's important to identify and mark these breaks.

Organize Your Headlines. ▼

Headlines are visual cue for the reader, but they work that way for the author, too.

Once you've got the headlines, a different organizational structure might occur to you. The headlines give an overview of the content--like the struts in a wall or the piers holding up a bridge.

Also, as the author, you'll know that some of the headlines are more important than others. The most important headlines are like chapters in a textbook or novel--they are natural breaking points in the stream of ideas, and point to larger divisions in the content.

Organizing your headlines means finding the major and minor break points. You might have a major break point with three sub-headlines.

An Example. ▼

Suppose your content is inviting people to enter an online writing contest. There are lots of these on WDC. Perusing them shows typical headlines are:

What to enter.
Prompts
How to enter
Rules
Prizes
Judging

There are likely subheadings under each heading. For example, is this for prose, poetry, or both? Suppose you have a particular interest in poems using anapestic tentrameter. Some people--like me!--might not know that is, so a definition would be a subheading under the "what to enter" heading. Is there a minimum or maximum length? Does it have to be new for this contest?

The Rules could have many headings or bullets. These involve contest deadlines, whether or not adult content is permitted, lenght of entries, whether items or book entries are acceptable, and so on.

You get the idea.

The SIngle Screen Rule. ▼

What's that? And why break everything up, anyway?

Those are good questions. Hemingway didn't stop every hundred words or so with a bullet point in The Sun Also Rises. Even textbooks have long stretches of unbroken prose. So what gives? Why this emphasis on breaks?

At first glance, it looks like there's not much difference between a page on Writing.Com--or anywhere on the web--and a page in a book. There are words in a row that make up sentences. The sentences make up paragraphs, which make up pages, and so on.

It turns out, there is a difference. In the first place, those words in a row are in longer rows on screens than in books. Longer rows are more fatiguing to read. For one thing, it's easier to lose your place. That's why newspapers use narrow columns. Years of practical experience--now verified by research--has led to the standard page sizes for books. Those standards have shorter line lengths than the typical web page. This is true even on Writing.Com, where the content for member pages is restricted to the middle of the screen. On my desktop, that gives a line-length over twice as a long as a hard cover book and three times as along as a paperback.

Scrolling a screen is also different than turning a page. Turning a page is tactile. You don't have to peer at the page to be sure that you don't turn too many or too few. Scrolling keeps your eyes nailed to the screen, watching to get it just right. That's why readers for e-books have page-turning buttons instead of scroll bars. As we said above, clicking on the headlines on this page is like turning the page in a book.

This gives rise to an important conclusion

The Single Screen Rule: Try to keep the text between headlines limited to a single screen.

The first step in implementing this rule is identifying headlines that are spaced no more than one screenful of text apart. In practice, this means there should be no more than 300-400 words between headlines.

The emphasis on breaks is to give the readers a break and to make your pages both more visually appealing and less tiring to read. The headlines help the reader identify the important concepts, and let them know something new is coming. Web pages are mixed media in the sense that they are both visual and textual. Different content will have a different mix of visual and textual elements, but the web provides both a challenge and an opportunity for authors.

Now What? ▼

The organization of your content lets you decide what the layout should be. That's the next topic!