The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.

The Internet Writer’s Handbook 2/e

Web Page DesignWeb Page Design

Writing for the Web

The Internet Writer’s Handbook 2/e

Contents

Considerations Storyboard Grid White space Theme/metaphor Consistency Graphics

Color Backgrounds Colored Text Fonts Text Alignment Skimmable Text Other Text

Formatting

The Internet Writer’s Handbook 2/e

ConsiderationsConsiderations

The Internet Writer’s Handbook 2/e

Consider Browser Differences

Not everyone has the latest browser, plug-ins, default link colors, or loads the graphics.

The Internet Writer’s Handbook 2/e

Consider Your Audience

Web readers are in a hurry and want to scan text.

People don’t want to wait more that a few seconds for a page to load.

Your page must have content as well as good design.

The Internet Writer’s Handbook 2/e

Consider Image Conveyed

Decide what image you want to convey: professional, humorous, incompetent, etc.

The Internet Writer’s Handbook 2/e

Storyboard Storyboard

The Internet Writer’s Handbook 2/e

Storyboard

Helps you plan your design.

The Internet Writer’s Handbook 2/e

Plan The Following Elements

Logo Banner Navigation bars Repeating icons Color schemeAll your pages should have a common look.

The Internet Writer’s Handbook 2/e

GridGrid

The Internet Writer’s Handbook 2/e

Grid

Shows how information is chunked and the function of each section.

Helps users find information quickly. Is repeated on all pages.

The Internet Writer’s Handbook 2/e

“Information Zones”

Group information on your Web page to create "zones" with different functions.

Divide the screen into three to five information zones.

Place the information so that the screen is balanced.

The Internet Writer’s Handbook 2/e

White SpaceWhite Space

The Internet Writer’s Handbook 2/e

Line Length

The default line length goes across the screen.

Keep line length short. Tables are one way to control line length

and space.

The Internet Writer’s Handbook 2/e

Balance

Balance elements on the page to use white space effectively.

The Internet Writer’s Handbook 2/e

Simplicity

Layer information to keep your pages simple and provide white space.

The Internet Writer’s Handbook 2/e

Theme/Metaphor Theme/Metaphor

The Internet Writer’s Handbook 2/e

Themes Can Be Used For

Background Color scheme Banner Lines Graphics Navigation

The Internet Writer’s Handbook 2/e

Theme/Metaphor

Use theme/metaphor appropriate for content.

The Internet Writer’s Handbook 2/e

Consistency Consistency

The Internet Writer’s Handbook 2/e

Create A Common Look & Feel To The Site

Grid Color scheme Site identification Navigation Bullets and symbols Headers and footers Graphics style and size Typefaces and drop caps

The Internet Writer’s Handbook 2/e

GraphicsGraphics

The Internet Writer’s Handbook 2/e

Tips For Graphics

Make pages load quickly. Use graphics for a purpose. Let readers opt to not view large

graphics.

The Internet Writer’s Handbook 2/e

Banner/Identity Graphics

Text and graphics that orients reader to contents of page:• Identifies subject

• Shows importance

• Show corporate identify

• Set tone

Logo, seal, or other graphic. Identifies your site with a company, school, or

organization.

The Internet Writer’s Handbook 2/e

Graphical Lines

Can be simple, textured or 3D. Fit theme and design. Use sparingly. Keep under 500 pixels long. Repeat the same one rather than use

different files. (They are kept in the cache).

The Internet Writer’s Handbook 2/e

Graphical Bullets

Use to highlight and categorize items. Use bullets that fit the theme. Use compact, simple bullets. Add space between text & the bullet. Repeat the same graphic rather than use

different files. (They are kept in the cache).

The Internet Writer’s Handbook 2/e

Color Color

The Internet Writer’s Handbook 2/e

Color Scheme

Fit the subject matter. Conjure up a mood. Convey an image.

The Internet Writer’s Handbook 2/e

Color Associations

Red: aggressive Yellow: active Green: friendly Blue: best as background

The Internet Writer’s Handbook 2/e

Color: Tips

Limit colors to two or three. Avoid color overload.

Provide high contrast with text. Be aware of international meanings.

The Internet Writer’s Handbook 2/e

Use Color Wheel to Find Contrasting Colors

The Internet Writer’s Handbook 2/e

Color Uses

Overall color scheme Background Text and links Color coding Structure

The Internet Writer’s Handbook 2/e

Showing Structure With Color

Same color headings. Colored bullets. Colored groups of menu items in long

lists.

The Internet Writer’s Handbook 2/e

Color Coding: Examples

The Internet Writer’s Handbook 2/e

Colors

Specified by three two-digit numbers:

rrggbb (amount of red, green, blue) in hexadecimal form

Example:

<BODY BGCOLOR=“#ffffff”>

The Internet Writer’s Handbook 2/e

Be Aware Users Can Change Browser Colors

Most browsers have default link colors set to blue for new links and violet for visited ones.

Link color choices can be turned on and off with preferences.

If your background is blue or violet, consider making link colors different, too.

The Internet Writer’s Handbook 2/e

BackgroundsBackgrounds

The Internet Writer’s Handbook 2/e

Background Options

You can use the following for a background:

Color Texture Graphic

The Internet Writer’s Handbook 2/e

Textures: Examples

The Internet Writer’s Handbook 2/e

Background: Tips

Use neutral colors. Provide contrast with text. Fit the theme. Provide a colored background as an

alternative in case graphic does not load into browser.

The Internet Writer’s Handbook 2/e

Background: Tips

Avoid the following:• Repeating patterns.

• Distracting backgrounds.

The Internet Writer’s Handbook 2/e

Colored TextColored Text

The Internet Writer’s Handbook 2/e

Colored Text

Limit use of colored text. Use high contrast between text and

background color. Limit blue text since it is difficult for the

eye to focus on.

The Internet Writer’s Handbook 2/e

Contrast: Examples

Black TextWhite TextLink Text

Black TextWhite TextLink Text

The Internet Writer’s Handbook 2/e

Color Sites

Color sites on the Web help you test out different text and background colors.• Color Center

• Colorama

The Internet Writer’s Handbook 2/e

FontsFonts

The Internet Writer’s Handbook 2/e

Fonts

With HTML 3.2+, the <FONT> tag allows you to change the font, size, and color.

Default is 3 Range: 1-7 You can increase or decrease size

relative to the default. You can use the <BASEFONT> tag to

change the base value.

The Internet Writer’s Handbook 2/e

Face Tag

The <FACE> tag is used to change the font: e.g.<FONT FACE="Arial, Helvetica, Geneva">

If the font cannot be found on the user's system, the default font will be displayed.

The Internet Writer’s Handbook 2/e

Special Characters

Web pages (HTML) supports only characters from the standard (7-bit) ASCII character set).

Special characters include symbols and unusual punctuation marks.

Use "character entities," a special set of HTML codes to represent special characters.

The Internet Writer’s Handbook 2/e

Fonts: Tips

Use common fonts available on most systems.

Use a font that fits your theme. Use legible fonts. Use fonts consistently.

The Internet Writer’s Handbook 2/e

Legibility: Example

Avoid fonts that are difficult to read.

The Internet Writer’s Handbook 2/e

Fonts: Tips

Use graphics for text to assure fonts will appear the way you want.

The Internet Writer’s Handbook 2/e

Text AlignmentText Alignment

The Internet Writer’s Handbook 2/e

Alignment: Tips

Use flush left alignment. Avoid flush right alignment.

The Internet Writer’s Handbook 2/e

Alignment: Tips

Avoid centered text.• Difficult to scan.

• Causes trapped white space.

The Internet Writer’s Handbook 2/e

Skimmable TextSkimmable Text

The Internet Writer’s Handbook 2/e

Formatting Text

Make text easy to skim quickly.

The Internet Writer’s Handbook 2/e

Skimmable Text: Example

The Internet Writer’s Handbook 2/e

Skimmable Text: Example

The Internet Writer’s Handbook 2/e

Use Headings

Break up information. Aid skimming. Identify information and organization. Summarize content. Create emphasis.

The Internet Writer’s Handbook 2/e

Importance of Headings

One of the most important parts of a Web page because the user scans these.

Many Web searchers use this information to index documents.

The Internet Writer’s Handbook 2/e

Heading Tags

<H1> to <H6> HTML tags. Never skip a level: use in order (H1, H2,

etc.).

The Internet Writer’s Handbook 2/e

Headings: Tips

Make headings informative and descriptive.

Use headings to summarize the contents.

Use the same headings that appear in the main menu/table of contents.

The Internet Writer’s Handbook 2/e

Headings: Tips

Make headings independent of context. Use action verbs (gerund or imperative)

and dynamic wording. Make sure headings are parallel.

The Internet Writer’s Handbook 2/e

Other Text FormattingOther Text Formatting

The Internet Writer’s Handbook 2/e

Bold

Use for emphasis. Put bold at the beginning of the line

rather than scattered through text.

The Internet Writer’s Handbook 2/e

All CAPS

Avoid all caps: difficult to read because contour of the letter shapes is lost.

The Internet Writer’s Handbook 2/e

Italics

Avoid italics: look jagged online.

The Internet Writer’s Handbook 2/e

Underlining

Avoid underlining: confused with links.

The Internet Writer’s Handbook 2/e

Large Initial Caps

Draw eye to key points. Add visual interest to the Web page. Create unity with other graphical

elements used on the page.

The Internet Writer’s Handbook 2/e

Large Initial Caps

Use sparingly. Use the same "look" and type of

graphics that you used in bullets, icons, and lines.

The Internet Writer’s Handbook 2/e

Blinking Text

Text between <BLINK> tags will blink. It does not appear on many browsers.

Used to draw attention. Avoid using blinking, or use it sparingly:

it is distracting.

The Internet Writer’s Handbook 2/e

Boxes and Sidebars

Make the page look interesting. Highlight/separate out information.

The Internet Writer’s Handbook 2/e

Tables

Compare information. Provide menus. Summarize. Provide layering with links to details.

The Internet Writer’s Handbook 2/e

Icons

Use icons to identify categories of information.

The Internet Writer’s Handbook 2/e