The Internet Writer’s Handbook 2/e Web 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 Considerations

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 Helps you plan your design.

The Internet Writer’s Handbook 2/e Plan The Following Elements Logo Banner Navigation bars Repeating icons Color scheme All your pages should have a common look.

The Internet Writer’s Handbook 2/e Grid

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 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

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

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 Graphics

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 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:

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 Backgrounds

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 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 Text White Text Link Text Black Text White Text Link 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 Fonts

Fonts With HTML 3.2+, the 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 tag to change the base value.

The Internet Writer’s Handbook 2/e Face Tag The tag is used to change the font: e.g. 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 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 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 to 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 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 L arge 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 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