Readings

Differences Between Print Design and Web Design, Neilsen How Users Read on the Web, Neilsen Extract from Price: Make Text Scannable Organizing with a visual hierarchy Design grids and visual hierarchy Lynch on cell padding and table layout. Lynch on legibility Help pages Basic Editing and Text Formatting Rules Advanced Tables pages. TableTemplates has a set of ready-made tables to adapt. Or you could borrow a table layout from the HomePage. A list of Web color codes at Wikipedia. All the help and advice pages are on the Site Editing Guides page. For placing images, Images For modifying colors and some text layout: WikiStyles

Create a page that illustrates a how-to of your choice. We'll be walking our way through the project as a way of becoming familiar with principles of page design and writing, and as a way of learning how to format pages and prepare images.

Your how-to page will include

• the how-to instructions on a two-columned page. Heads and subheadings used appropriately.
• links to other, similar how to's or related material.
• content images, if appropriate.

What's a How-To?

If you look around the web, you'll find loads of literal how-to's

• how to hang a gutter
• how to clear a clogged pipe
• how to make a greeting card
• how to prepare an image for the web
• how to light a barbecue grill in three seconds (tip: use liquid oxygen)

The mainstay of how-to's are, of course, food recipes, which are often simple how-to's, but can become complex and detailed. For our purposes, how-to's can include any of these.

But, you can also consider a how-to more broadly, less literally:

• how to fall in love
• how not to fall in love
• how to disenfranchise your roommate
• how to get your life in order
• how to make a million dollars...

You might consider satire or parody. Or you can invent a how-to. You can go pretty far off the wall with this if you'd like. Even the simplest How to Tie Your Shoe would work - if sufficiently developed.

Select a how-to that needs about 1000 - 1500 words or so to really do it justice. A five-step, five-sentence method of sharpening a pencil or mixing a martini is too short for this project. A complete self-help guide is too long. Work for something in between. Cooking recipes, when supplemented with background information and when handled in a significant way, can work. Simple how-to's earn earn less points than more challenging how-to's.

Your how-to should include a couple of paragraphs of background or narrative setting the scene. The set of steps will be your centerpiece, but you'll want to select a how-to subject that you can develop in some depth. You'll also be including links to other, related, how-to's on your how-to page.

Don't worry that your how-to has been done before. You can still bring more to it: developing it further, adding another angle.... But make your how-to your own original writing. You'll be linking to other sites, but what makes your how-to valuable is that it is original, not borrowed.

Part 1: Rhetorical Observation

We'll spend a class session looking at some how-to pages you select: describing and analyzing how they handle organization, links, images, text, and supplemental material - essentially testing (or tempering?) typical advice with observed rhetorical practice.

Do the How-To Examples Exercise. It asks you to make some notes (bullet list is ok) to start us out on our observation and discussion. Note rhetorical elements or matters that you want us to look at and consider.

Part 2: Your How-To

For some ideas of what's been done and what's possible, have a look at some how-to's. Search using google (www.google.com) for a topic you're interested in.

Some how to sites

• How To's from ENGL 3160
• eHow
• How to get rid of things

As you review how-to's you find on the web, keep an eye on content and page design. Watch for

• information included beyond the how-to instructions themselves
• how that information is placed on the page: use of text elements such as multiple columns, call outs, bulleted lists...

Make note of other, related, how-to's to your own, and collect the urls. You'll be adding links to related how-to pages, so watch for and record the urls of other how-to's you find on the web that relate to the one you're writing. Copy and paste the urls so you can locate and link to them later.

I'd suggest collecting this material either in your how to page or in a page linked off your how-to page.

Page Layout

Use either a two column table, or a floating table for the second text column. We'll walk through options for the layout in class together. But expect to change your mind as you draft.

Page layout on the web is limited. You will not be able to create sophisticated text-image relations, and may need to search (by trial and error) for ways of handling tables and placing images on the page. The web is a different media than print, as print is different than crayon. Part of the challenge is learning to adapt the message to the medium.

Images

As you plan and draft your how-to, consider whether you will need content images such as photos, drawings, or diagrams, and collect or plan them. Your own photographs, hand drawings, and diagrams can be scanned. Or you can create a digital drawing or image if you know how. Begin to collect these if you have them on hand, or plan on getting a digital or standard photo.

The images you'll be using for this project are content images rather than decorative ones, and, like your written content, they should be original. Bring materials images to class for scanning. Most likely, you will only be using one or two of images, but it's best to start with plenty to select from.

We'll spend a class session reviewing how to prepare images for the web using Photoshop Elements.

Drafting

There are a couple of options for drafting.

1) Use a standard word processor or the simplest text editor and don't format anything. You'll be copying and pasting this copy into your web page for formatting. So, to make things easy on yourself.

• Don't format anything.
• Don't indent paragraphs. Leave a blank line between paragraphs.
• Save your final copy as a plain text file. (.txt on Windows machines)
• Include the how-to urls you found on the web at the end of this file. You can type them in or paste them in.

2) Another option

• Draft right in your how-to page. Save often. Start rough and develop the structure of the document as you work through it. Developing the structure means placing text in the appropriate column, deciding on heads and subheadings, where lists are appropriate, where images need to be placed, and so on.
• Variation: Draft in a How To Work Page. Then copy and paste from that page to your how-to page.

In drafting, go long rather than short so you can get a sense of how extensive your how-to will be. Your draft should include a couple of paragraphs of background or narrative setting the scene, or general introduction to the how-to.

Keep in mind that this is a draft: You will be making changes - perhaps big changes, even setting it aside and starting something else - to the copy as you work. Be prepared to do so. Much of your success with this project will depend on your flexibility in writing and re-working your prose and design.

Review

About two weeks into the project you should have a pretty complete page design and text. We'll spend a class session reviewing each other's work, looking for solutions to problems you've encountered.

How To Prose Style

• AboutBeingConcise
• ConciseScannableAndObjective

How To report

in draft: In your report, cover ...

---

Projects