the internet writer’s handbook 2/e web page design writing for the web
TRANSCRIPT
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