Download Chapter 14 - CM

Technical Communication
A Practical Approach
Chapter 14: Web Pages and Writing for the
Web


William Sanborn Pfeiffer
Kaye Adkins
Web Pages and
Writing for the Web







Your Role in Developing Web Sites and
Content
Planning
Structure
Content Development
Guidelines for Writing Web Content
Design
Usability and Publication
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
2
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Web Pages and
Writing for the Web




Guidelines for Writing Web
Content
Design
Usability Testing
Publication
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
3
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Your Role in Developing Web Sites and
Content
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
4
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Your Role in Developing Web Sites and
Content
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
5
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Planning


Accessibility Guidelines
Scripting Languages and Software
Authoring Tools
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
6
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Planning

Planning Phase





Define the site’s purpose
Analyze your audience
Outline the scope of the site with clear goals
Identify constraints
Identify methods to incorporate user-centered
design
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
7
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Accessibility Guidelines

Users may have trouble accessing Web sites
because of



Computer system limitations or settings
Physical disabilities
Commonly used accessibility guidelines


U.S. Government Section 508 Accessibility
Guidelines
World Wide Web Consortium (W3C) Web
Content Accessibility Guidelines
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
8
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Government Section 508 Accessibility
Guidelines





Ensure that users using assistive technology can complete
and submit online forms.
Ensure that all information conveyed with color is also
available without color.
Provide a means for users to skip repetitive navigation
links.
Provide a text equivalent for every non-text element that
conveys information.
Ensure that all information on Web pages can be used by
assistive technologies
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
9
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Government Section 508 Accessibility
Guidelines





Provide text-only pages with equivalent information
and functionality.
Provide client-side image maps instead of server-side
image maps.
Provide equivalent alternatives for multimedia
elements that are synchronized.
Organize documents so they are readable without
requiring an associated style sheet.
Provide frame titles that facilitate frame
identification and navigation.
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
10
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Planning

Scripting Language and Software-Authoring
Tools




HTML
XHTML
CSS
PHP
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
11
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure




Site Structures and Types
Process of Developing a Structure
Labeling Strategies
Guidelines for Navigational Design
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
12
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
13
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure

Site Structures and Types

Consider these two factors when choosing a
site structure

Breadth


The number of choices or content areas at any given
level in the site’s structure
Depth

The number of levels deep in a site structure
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
14
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Process of Developing a Structure
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
15
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
16
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
17
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure

Labeling Strategies







Alphabetical
Chronological
Geographical
By task
By function
By topic
By question
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
18
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure

Navigation Design




Hyperlinks
Toolbar menus
Site maps
Search fields
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
19
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Structure

Guidelines for Navigation




Use navigation element consistently
throughout the Web site
Group main site navigation links
Place appropriate navigation tools in each
new window or frame
Place navigation links where they are clearly
visible
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
20
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Content Development



Content Chunking
Adapting Content for the Web
Document Conversion Issues and
Common File Formats
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
21
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Content Development

Content Chunking


Stand-alone unit of text and graphics often
separated from other content chunks by
spacing on a page
Size depends on purpose, screen layout, or
specific project style guidelines


Use five to seven wrapping lines of text
Use graphics as large as what fits on screen
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
22
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Content Development

Adapting Content for the Web


Check for internal consistency
Decide which electronic formats to use




Hypertext markup language (HTML)
Adobe portable document format (.pdf)
Microsoft Word (.doc)
Rich text format (.rtf)
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
23
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Content Development

Document Conversion Issues and Common
File Formats


Select file formats that are commonly used
Provide documents in multiple formats
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
24
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Guidelines for Writing Web Content

Guidelines for Writing Web Content






Use a general-to-specific organization in individual
content chunks
Keep Web site structure in mind when creating chunks
Format text for easy reading
Identify text to be hyperlinked
Develop a style sheet for consistency
Edit carefully
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
25
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Design Conventions and Principles
Finding a Theme and Developing Graphic
Content
File Formats and Graphics
Interface Layouts

Web Site Design Guidelines



Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
26
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Design Conventions and Principles




Place a hyperlink on the title banner or logo to
the home page
Place the site’s main navigation in the left or
top margin
Use consistent font faces, sizes, and colors
Use descriptive titles and headers for each
graphic and on every page
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
27
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Design Conventions and Principles






Provide contextual cues
Maintain a consistent graphic identity
Provide redundant navigation links
Provide alternate descriptions of graphic
content
Use no more than three font faces
Use colors that contrast well
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
28
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Design Conventions and Principles

Gestalt design principles



Create consistency in the use of elements in
repetitive and similar ways on a page
Contrast visual elements, such as colors, lines,
or shaded regions
Group elements together through space, color,
or other graphic elements
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
29
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Finding a Theme and Developing Graphic
Content



Establish a graphic identity or design theme
for your site
Consider the site’s tone and impression
Select an appropriate theme for your users,
purpose, content, and tone
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
30
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Interface Layouts





Header
Navigation
Content window
Graphic identity
Contextual clues
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
31
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
32
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
33
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Design

Web Site Design Guidelines




Make site structure recognizable
Focus readers’ attention on the information they
want
Indicate Web page active areas
Associate text and graphics
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
34
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Usability Testing



Testing Your Site for Your User Base
Performing Usability Reviews
Quick Usability Checks and System
Settings
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
35
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Usability Testing

Testing Your Site for Your User Base

Ensure the site is organized and functioning
properly







Set goals
Select criteria
Develop test materials
Solicit participants
Set up the testing environment
Conduct the test
Write a results report
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
36
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Web Usability
Checklist
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
37
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.
Publication

Publishing Your Site

Obtain dedicated storage space on a Web
server and check for the following




Amount of storage space available
Process for logging in to the server
Address of the host server
Uniform Resource Locator (URL) or Web address
Technical Communication: A Practical Approach, Eighth Edition
W. S. Pfeiffer and K. Adkins
38
Copyright © 2013, 2010, 2006 Pearson Education, Inc.,
All Rights Reserved.