38
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Embed Size (px)

Citation preview

Page 1: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical CommunicationA Practical Approach

Chapter 14: Web Pages and Writing for the Web

William Sanborn Pfeiffer Kaye Adkins

Page 2: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.2

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

Page 3: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.3

Web Pages and Writing for the Web

Guidelines for Writing Web Content

Design Usability Testing Publication

Page 4: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.4

Your Role in Developing Web Sites and Content

Page 5: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.5

Your Role in Developing Web Sites and Content

Page 6: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.6

Planning

Accessibility Guidelines Scripting Languages and Software

Authoring Tools

Page 7: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.7

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

Page 8: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.8

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

Page 9: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.9

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

Page 10: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.10

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.

Page 11: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.11

Planning

Scripting Language and Software-Authoring Tools HTML XHTML CSS PHP

Page 12: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.12

Structure

Site Structures and Types Process of Developing a Structure Labeling Strategies Guidelines for Navigational Design

Page 13: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.13

Structure

Page 14: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.14

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

Page 15: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.15

Process of Developing a Structure

Page 16: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.16

Structure

Page 17: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.17

Structure

Page 18: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.18

Structure

Labeling Strategies Alphabetical Chronological Geographical By task By function By topic By question

Page 19: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.19

Structure

Navigation Design Hyperlinks Toolbar menus Site maps Search fields

Page 20: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.20

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

Page 21: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.21

Content Development

Content Chunking Adapting Content for the Web Document Conversion Issues and

Common File Formats

Page 22: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.22

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

Page 23: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.23

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)

Page 24: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.24

Content Development

Document Conversion Issues and Common File Formats Select file formats that are commonly used Provide documents in multiple formats

Page 25: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.25

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

Page 26: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.26

Design

Design Conventions and Principles Finding a Theme and Developing Graphic

Content File Formats and Graphics Interface Layouts Web Site Design Guidelines

Page 27: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.27

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

Page 28: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.28

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

Page 29: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.29

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

Page 30: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.30

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

Page 31: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.31

Design

Interface Layouts Header Navigation Content window Graphic identity Contextual clues

Page 32: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.32

Design

Page 33: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.33

Design

Page 34: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.34

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

Page 35: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.35

Usability Testing

Testing Your Site for Your User Base Performing Usability Reviews Quick Usability Checks and System

Settings

Page 36: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.36

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

Page 37: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.37

Web Usability Checklist

Page 38: Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins

Technical Communication: A Practical Approach, Eighth EditionW. S. Pfeiffer and K. Adkins

Copyright © 2013, 2010, 2006 Pearson Education, Inc., All Rights Reserved.38

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