Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Chapter 17Chapter 17

Websites and Websites and Online EnvironmentsOnline Environments

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Websites & the ProblemWebsites & the Problem-Solving Approach-Solving Approach Plan by considering audience Research the problem to

determine the information Draft and design the site to

communicate effectively Review and edit the website

after soliciting feedback Distribute by publishing online

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Basic Differences BetweenBasic Differences BetweenPrint and WebPrint and Web

Size and dimension

Navigational features

Visual components

Multimedia

Accessing speed

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Intranet Web PagesIntranet Web Pages

Serve a smaller, more easily defined audience

Are usually not designed to sell products

Are often information-heavy and graphically light

Often rely on a standard format

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Internet Web PagesInternet Web Pages

Often contain more introductory or contextual information about your company

Are more likely to contain “splash” pages to introduce the site or company

Are more likely to use design variations and textual elements to create reader interest

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Internet Web PagesInternet Web Pages

May contain a greater number of textual elements, visuals, and multimedia

Are more likely to include branding or marketing information to identify the company to potential customers

Are more likely to provide clear navigational features, since readers can be more diverse

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Web TerminologyWeb Terminology Web page: a document that is made available

through the internet (or intranet)

Web browser: a program that reads web pages

URL (Uniform Resource Locator): a website’s unique address

Home page: the main page users see when they access a website

Hypertext: any text that is linked

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Web TerminologyWeb Terminology

Link: a connection from one web page to another

Interface: the intersection between an individual system and the larger network

Navigation: the way in which a reader is directed to move through various web pages

Search Engine: an application that locates and lists web pages containing information relevant to the reader’s search parameters

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Web TerminologyWeb Terminology

Site Architecture: the structure of an entire site

Site Map: a web page that describes the architecture of the entire Web site

Server space: the physical space where web page information is housed

Cookies: software that stores visitor information

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

HTMLHTML

Is the basic “language” for web page writing

Stands for “Hypertext Markup Language”

Uses codes called “tags” presented in <brackets>

Provides structural, presentational, and hypertextual codes that tell a browser how to display a web page

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Basic Website TagsBasic Website Tags

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

XHTMLXHTML

Stands for “Extensible Hypertext Markup Language”

Is rapidly becoming the standard for web pages

Is “extensible,” meaning that users can expand or add to its capabilities

Uses stricter syntactical codes than HTML

Leads to fewer errors in presentation

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Tables and FramesTables and Frames

Tables: Place text and visuals on specific portions of a

page, like in rows and columns More accurately control how a page is

presented

Frames: Display information from separate data

sources Are rarely used due to difficulties with search

engines

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

CSSCSS

Stands for “Cascading Style Sheets”

Provides a given style throughout a web site

Allows writers to keep style files separate from HTML files to improve speed, accessibility, customization, and maintenance

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Web Authoring ProgramsWeb Authoring Programs

Are designed to assist web page construction without the need to know HTML and CSS

Are usually as simple to use as word processors

Often used to create extensive or complex web sites that would take too long to code

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

JavascriptJavascript

Can be inserted into HTML documents to create “dynamic content” in a website

Can also be used to “react” to events, such as loading an image after a specific amount of time

Is sometimes used to detect or save information about the readers of a web site

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

CGICGI

Is an acronym for “Common Gateway Interface”

Are programs executed in real-time, so that they can transmit and receive dynamic information

Can allow designers to create shopping carts, page counters, guestbooks, order and complaint forms, and response sheets

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

CMSCMS

Are “Content Management Systems”

Are programs that allow for collaborative writing of web pages

Are used to create virtual meeting spaces, image galleries, blogs, and podcasts

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

PluginsPlugins

Are small computer programs that interact with a web browser

Allow the browser to display certain types of documents, show interactive images, play music, or play video

Add multimedia functionality to web pages

Are generally free and can be easily downloaded

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Standard Web PageStandard Web PageComponentsComponents

Continuity and branding Navigation Splash pages and homepages Nodes and subpages Search Optimization and Metatags FAQs and Sitemaps Color

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Continuity and BrandingContinuity and Branding

For commercial sites in particular, be conscious of continuity in the design and the importance of establishing the brand

Make sure the flow through a site is uninterrupted

Use repetition of key elements for branding

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

NavigationNavigation

Make navigational cues informative and clear

Use a consistent navigation bar

Design tabs to show navigation options

Consider a search field for large or complex sites

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Splash Pages & HomepagesSplash Pages & Homepages

Splash Pages Create interest and reinforce branding by

demonstrating creativity here Offer options to navigate directly to the

homepage

Homepages Offer an overview of the site and its offerings Make the design clean, navigable, and

substantive

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Nodes & SubpagesNodes & Subpages

Nodes Think of them as “mini-homepages” that

introduce readers to specific topics Maintain a consistent design among them

Subpages Offer the more specific, detailed information

here

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Search OptimizationSearch Optimizationand FAQsand FAQs

Search Optimization and Metatags Optimize by registering with search engines

and ensuring clean code Use metatags, like keywords, to help search

engines find and catalog the site

FAQs and Sitemaps Anticipate questions and group them if

necessary Offer a visual diagram to aid navigation if your

site is extensive

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

ColorColor

Use RGB (hexadecimal) color codes

Make choices that emphasize continuity and readability

Use color choices to highlight hyperlinks

Consider accessibility issues

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Organizing a WebsiteOrganizing a Website Non-sequential organization emphasizes multiple

connections among topics or ideas.

Hierarchical organization groups pages by levels and sublevels, resembling a pyramid.

Network organization interconnects all of the pages for maximum flexibility.

Begin by sketching, using a large sheet of paper, a chalkboard, or a whiteboard.

Consider the structure that best expresses the web site’s main idea.

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Websites and UsabilityWebsites and Usability

Address navigation: make sure users know where they are in a site and how to get around

Address content: make it clear and consistent throughout, without overloading the page

Address visuals: make sure they pertain to the content and do not overwhelm the users

Address other aspects, like branding

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.

Website EthicsWebsite Ethics

Ensure accessibility for those with disabilities

Present a fair company image

Provide accurate information to the public