Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, All Rights Reserved. Chapter 17 Websites and Online Environments

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, All Rights Reserved. Websites & the Problem -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, All Rights Reserved. Basic Differences Between Print 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, All Rights Reserved. Intranet 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, All Rights Reserved. Internet 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, All Rights Reserved. Internet 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, All Rights Reserved. Web 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, All Rights Reserved. Web 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, All Rights Reserved. Web 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, All Rights Reserved. HTML  Is the basic “language” for web page writing  Stands for “Hypertext Markup Language”  Uses codes called “tags” presented in  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, All Rights Reserved. Basic Website Tags

Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century. © 2010 Pearson Education. Upper Saddle River, NJ, All Rights Reserved. XHTML  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, All Rights Reserved. Tables 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, All Rights Reserved. CSS  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, All Rights Reserved. Web 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, All Rights Reserved. Javascript  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, All Rights Reserved. CGI  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, All Rights Reserved. CMS  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, All Rights Reserved. Plugins  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, All Rights Reserved. Standard Web Page Components  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, All Rights Reserved. Continuity 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, All Rights Reserved. Navigation  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, All Rights Reserved. Splash 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, All Rights Reserved. Nodes & 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, All Rights Reserved. Search Optimization and 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, All Rights Reserved. Color  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, All Rights Reserved. Organizing 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, All Rights Reserved. Websites 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, All Rights Reserved. Website Ethics  Ensure accessibility for those with disabilities  Present a fair company image  Provide accurate information to the public