29. Page and Site design
Introduction (click any heading to come here)
So far on the design topic, you have learned the definition of design and studied designer's goals. Next you learned about the business of design; how to get your message across. Now that you have a foundation in design, it is time to get you closer to authoring pages and assembling a site.
Omit needless wordsVigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
White's 17th rule: William Strunk, Jr. and E.B. White,
The Elements of Style (Allyn and Bacon, 1979).
You have studied the definition of Web design, and understand by now that that your audience must be well-defined. Speak their language, not the programmer's language (unless that is the audience). Avoid technical jargon. When in doubt simplify the language and be direct.
Your (mistaken) point of view
The user's (actual) point of view
Part of the definition of Web design concerns your audience. Know their equipment, particularly their screen size. In general, the majority of Web users having screen resolution of at least 800 x 600 pixels (W3 Schools)
If you elect the 800 pixel width, be aware that your usable width is less, usually about 750 pixels. This is because of window frames and scroll bars. Your canvas is then 750 pixels.
Requiring horizontal scrolling is a serious usability flaw. Here is a list factors that you must become aware of to prevent horizontal scrolling.
Visitors may routinely print your pages, depending on your content. Newsletters, recipes, phone lists, and essays are examples of likely printed content.
You should be aware of page width constraints that will cause printing issues. The Web Style Guide reports that the maximum width for printing is 560 pixels. If you expect a page to be printed, it is best to limit the combined width of graphics, margins and text to 560 pixels.
Think of a printout of your page as a calling card. It is a lasting reflection of the page, and cannot be changed after it is printed. It should read well and look good.
Book publishers refer to "typeface" and Web developers refer to "fonts" to mean the same thing. Typography is the general name of this topic.
Screen reading of sans serif fonts (this is an example) is less tiring than serif fonts (this is an example). Conversely, reading material printed with serif fonts is less tiring than sans serif fonts. Using styles to switch font families between screen and print can be handy for this reason.
You want pages to read well and look good in both mediums.
You are a skilled reader capable of reading this passage quickly. How does your eye acquire the information? Experienced readers process the words and even phrases in chunks. Readers look for the shapes of words as clues to the chunks. Because the shape of words is important to reading on the Web, it is included in the design lesson.
Font family and case influence readability because they control the shapes of words. Examples follow next.
Here are some rules and examples to help you choose upper or lower case and initial caps. These rules apply to headings as well as paragraphs.
Highly organized content in a highly organized site is the goal of design. But authors who write the content may not consider how it will work on the Web. They may write essay-like content in Word as if it is be printed and stapled. We are trained in school to write this way.
Certain paper documents (i.e., policy manuals) are intended to be distributed in a loose-leaf notebook because they can be updated by replacing pages. The material is chunked into single pages that deal with single policy issues to facilitate updating. This organization is closer to what we do on the Web than the stapled essays.
Loose-leaf content lends itself to small pages. Essay-like content would usually result in large Web pages. Neither is inappropriate for the Web, as long as the pages and the site are clearly organized.
Next, we will look at when it is most appropriate to create small or large Web pages.
Small pages have two or fewer full screens of information. You usually will not have short pages unless there is an outline that organizes the material and breaking up an essay-like document can sometimes reveal an outline. Outlines also suggest headings. Headings are crucial in Web writing, and are the basis of your menus for navigating among your pages. You want short pages as:
Large pages cause users to click the horizontal scroll bar or press PgDn. Frequently asked questions and reference pages are often on large pages with questions and hyperlinks at the top, and answers at the bottom. These long pages work well because there may be several pertinent questions users need to read. You want long pages for:
One-page sites are very common. You might place your resume on the Web and let prospective employers know your site address.
As long as the resume is well written, organized, looks good on the screen, and looks good when printed then you have no concerns about site design.
Good site design is the result of highly organized and well written content, page layout and navigation design.
Many different site structures work well for organized content, but no structure can correct poorly organized content.
The site shown at the left is organized hierarchically. Other site organizations are sequential-linear, grid, frame based and Web or wheel. Many successful large sites depend on more than one structure for navigating among pages.
One proof of good site design is how quickly visitors find what they are seeking.
This site design supports linking to pages in a specific order. You cannot link to page 3 unless you are viewing page 2. The purpose of such a design is to keep the content is a specific order and not let visitors skip ahead without at least a cursory look at intermediate material.
Learning material for textbooks and courses offered online is sometimes organized in this way. For example, chapter 5 above would be written for readers who have read the previous chapters.
An inappropriate site design could produce a legal liability. If linking around critical legal information (consumer safety or consumer responsibility) is supported by the design, an injured party could claim the information was omitted from the usual sales sequence at the site. In the case of a linear-sequential site design, ignoring important legal information would be the responsibility of the visitor, not a liability of the site designer.
The grid is a variation of the linear site. And it appears below as layers of that design. Visitors may move about the site in two dimensions instead of one, but only in a step-by-step sequence. This may seem rigid but it has a place in our survey of designs nevertheless.
The two dimensions are represented as color and shape in the example graphic. Visitors may link across the colors or across the shapes, but not across different shapes of different color.
Highly organized content is necessary for such a design to be useful. Examples are technical reference material, repair manuals, critical procedures organized in a if-then sequence, and organized learning material that can be tiered into a novice-to-expert sequence.
Both the linear-sequential and grid site designs seem to be unWeb-like to students because of their fussy control of linking. But controlling linking helps prevent visitors from overlooking important content.
Frame based sites have their content in pages that are separate from the menu page(s). Look at the site diagram above. Content is in the lower row of pages and the navigational menu is in the top page. When you studied HTML frames you learned how to construct frame based sites that consisted of multiple pages.
Visitors to a frame-based site will see the menu and content pages combined into a single Web page. Frame designs should include a left- or top-menu and content at the right or below the menu. This is familiar to visitors and easy for you to structure and maintain.
There are some disadvantages to using frames. Users cannot save specific pages as favorites. Your starting page (the frameset URL and its title) will be saved instead of a specific page they may want to return to.
Because the left menu will be included in the printout, the total width for printing (560 pixels maximum) will include the menu width and the content width combined.
Because the design objective of wheels is to link from any page to any other page, this design also goes by the name "web." Visitors are not hampered by the step-by-step sequences of the previous site designs. They may go to any page that is of interest.
The previous step-wise sequences we saw connoted site structure, a desirable attribute that wheel designs may lack. Organizing a wheel site can be difficult work, but necessary because organization and structure are so important to your visitors.
Linear sites can use Next and Previous links to take visitors around the site. Wheels would have more than two links, in fact they have (N2 - N) / 2 links.
Four page sites need 6 links per page, five page sites need 10 links per page, and so on. A ten page site would have 45 links per page!
Use familiar navigation links when possible: Next, Previous, Homepage, Top of page. We feel at home visiting sites that provide these common navigational aides. Navigation that is novel tends to confuse us. Do not be inventive with something as fundamental as linking among the pages at your site.
You can provide graphic buttons in the shape of arrows or simple text to communicate the links. Here is an example of a text footer that could appear on every page at your site.
The all-text footer will not work well if there are 90 pages you have to link together. The best method in this case is to add a familiar pull-down list to the text footer. Remember you will need Homepage, Top and Contact us in wheel sites as well.
These menus are common on Amazon, Sears and other shopping sites. They are expected on sites with heavily organized content. Clicking on an element takes the visitor to the beginning page of the element at the site.
Begin on paper, a napkin, the back of an envelope, or anything at hand. If possible, use a chalk or white board with your team helping you layout a prototype page.
If you elect the team work route to design, make a rule that the first round or two of suggestions during meetings will not "evaluate" but rather "generate" ideas. After many good ideas are gathered on the board, begin to pare them down for the first-draft page layout designs. This strategy may help reduce tension and bad feelings. And having ideas denigrated in meetings stifles creativity.
Here is a sample of attractive layout using simple graphic headings with underline accents you can easily make yourself. The text has a faint shadow, the underline is a light colored line which ends in a thicker line of the same color.
Because the width of the top component is only 460 pixels, you have room to add menus on the left and/or feature information/pictures on the right. Remember to carry the same color and graphic themes on all pages at the site. Change colors to indicate another section of the site.
Use this layout only after you have organized your content.
You cannot find a popular shopping site that does not use these page elements to great advantage. They contribute to the design by organizing the page, attracting attention, and supporting the design/color theme. Wouldn't it be nicer if the three items just mentioned were in an attractive box with borders?
Photos of people provide recognition of the content. Although you may not see photos of Tim often, the next time you do you might understand the context better. Use photos sparingly. Like all good design elements, overuse dilutes or changes your design. Have you heard the phrase "less is more?" Similar to using colors to accent page elements, photos should accent content. Photographs are factual and have a strong cognitive (information) component in design.
Abstract photos can be used to great advantage since they provide more of an affective than cognitive component. They set the mood of an element and the site. Similarly, colors connote feelings with blue being calm, red being action-oriented, gray being reliable and stable, and so on.