Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 5: Design the look and feel of the site Complete Step 6: Specify the site’s navigation system Use a checklist to review your design plan Chapter 4: Planning a Successful Web Site: Part 2

Page Length, Content Placement, and Usability Logo and site publisher’s name The initial, visible screen area is extremely valuable space Place the most critical information above the scroll line Avoid a cluttered appearance Display size affected by screen resolution and browser variables (browser borders, title bar, and optional toolbars) Limit page to two screens else provide links to materials at bottom of page Important link to time-sensitive information Important link to international sites Links visible on second screen when viewed at a lower resolution Important links to major underlying pages Chapter 4: Planning a Successful Web Site: Part 2

Visual Consistency Use consistent content and design features Inconsistent appearances confuse visitors Be careful not to over apply consistency Overly applied consistency makes pages boring and uninteresting Chapter 4: Planning a Successful Web Site: Part 2

Repeated design and content elements Visual Consistency Repeated design and content elements Chapter 4: Planning a Successful Web Site: Part 2

Color and Visual Contrast Color schemes create unity Limit the number of colors in your scheme to three Apply color scheme to the background, text, and graphic elements Background color should increase legibility of text Bad choice can cause eyestrain Choose graphics that match your color scheme Chapter 4: Planning a Successful Web Site: Part 2

Color and Visual Contrast University of South Dakota’s Web site effectively utilizes a primary red, white, and black color scheme Chapter 4: Planning a Successful Web Site: Part 2

Your Turn! (page 105) Exploring the Use of Color: Visual Consistency and Visual Contrast   Visit the Web Design Chapter 4 Online Companion Web page scsite.com/web3e/ch4/ and click links in the Your Turn section to review the home page and at least three underlying pages at the following Web sites to determine how successfully each site uses color. Hotels.com The Topps Company 1-800-PetMeds USAToday.com Create a report for your instructor that summarizes your review. Describe how each site uses color -- including overall color scheme and individual background, graphic element, text, and image colors. Does the color scheme offer sufficient contrast between the background, foreground, and text? Does the site use its color scheme to create visual consistency across pages? Discuss how you would modify the color. If necessary, to improve readability and visual consistency.

CSS and Formatting More on Web Cascading Style Sheets allow Web designers to attach to their HTML specific information regarding the appearance of their Web pages Styles can: Define measurements of elements Set margins Indicate page breaks Specify other layout features Styles can create visual consistency Chapter 4: Planning a Successful Web Site: Part 2

CSS and Formatting Inline Style Internal Style Sheet Inserted within a tag Internal Style Sheet Inserted within a page’s heading tags External Style Sheet Saved in a folder with the site’s pages Chapter 4: Planning a Successful Web Site: Part 2

Style defines how text will wrap around images on a Web page CSS and Formatting Allow you to define several attributes all at once to elements with the same HTML tag Inline Style Inserted within a tag Internal Style Sheet Provides styles for individual Web pages External Style Sheet Used for multiple pages Created in a separate file .css extension Style defines how text will wrap around images on a Web page

External style sheet linked to WYSIWYG template CSS and Formatting External style sheet linked to WYSIWYG template Chapter 4: Planning a Successful Web Site: Part 2

Sample style sheet in CSS editor CSS and Formatting Sample style sheet in CSS editor Chapter 4: Planning a Successful Web Site: Part 2 13

Page Layout Consistent layout creates unity A well-designed layout creates a sense of balance and order Display certain items consistently (in the same place) on all pages Main navigation bar Main content area Auxiliary links Chapter 4: Planning a Successful Web Site: Part 2

Page Layout Chapter 4: Planning a Successful Web Site: Part 2 Logical, standard page layout provides visual consistency across all pages at a site Chapter 4: Planning a Successful Web Site: Part 2

Layout Grids Underlying layout structure that arranges a page into rows and columns Allows you consistently placed items on your pages Layout grid Grid options Chapter 4: Planning a Successful Web Site: Part 2

Tables Contains cells aligned into rows and columns Two common uses Attributes Cell spacing – specify number of pixels to regulate the space between cells Cell padding – specify number of pixels to regulate the space between a cell’s content and borders Mistake: definitions are reversed on page 111 of book Two common uses Create rows and columns of data Create Web page layout Chapter 4: Planning a Successful Web Site: Part 2

Tables Used to reconstruct segmented images Allows developers to animate certain parts of an image Rollovers change a page element when the mouse pointer moves over it (uses JavaScript) Section of image can act as a rollover Image editing can be done with software packages such as Macromedia Fireworks and Adobe ImageReady

Three-column multirow data table with an outside border Tables More on Web Three-column multirow data table with an outside border Layout table Chapter 4: Planning a Successful Web Site: Part 2

Tables Position text and other elements Float property Cell spacing More on Web Position text and other elements Float property Cell spacing Cell padding Height and width properties Alignment, float, cell padding, and cell spacing properties Border properties Chapter 4: Planning a Successful Web Site: Part 2

Cell spacing (green area) regulates space between cells Tables Position text and other elements Cell spacing Cell padding Cell padding (blue area) regulates space between a cell’s contents and borders Cell spacing (green area) regulates space between cells cell spacing cell padding

Tables Options for defining table width Absolute width – specify number of pixels Advantage – displays more quickly Relative width – specify percentage 95% percentage of size of browser window Advantage – adaptability to various browser window sizes Disadvantage – will fit the table contents as needed causing undesirable word-wrap Understand that each user will view your table differently Chapter 4: Planning a Successful Web Site: Part 2

External style sheet establishing page sections CSS and Page Layout CSS can divide a page into sections <div> tag External style sheet establishing page sections Chapter 4: Planning a Successful Web Site: Part 2

CSS and Page Layout CSS can divide a page into sections <div> tag HTML <div> tag within page coding identifying a navigation section established by the style sheet Chapter 4: Planning a Successful Web Site: Part 2 24

Step 5: Design the Look and Feel of the Site Chapter 4: Planning a Successful Web Site: Part 2

Step 6: Specify the Site’s Navigation System Well-designed navigation pulls the visitor down the home page Draws them deeper into the Web site Design should be both user-based and user-controlled Chapter 4: Planning a Successful Web Site: Part 2

User-Based Navigation More on Web Link pages based on the visitors’ needs Understand how visitors will view your Web site Usability tests Formal Informal Chapter 4: Planning a Successful Web Site: Part 2

User-Controlled Navigation Visitors move around the site in a manner they choose Offer options to navigating your Web site only through its major paths Most visitors use browser navigation features Back and Forward Search History Favorites Well-designed navigation is essential to the success of your Web site Chapter 4: Planning a Successful Web Site: Part 2

Link Types Text links Image Links Menus Bars Tabs Breadcrumb trail Image map Menus Bars Tabs Breadcrumb trail Site map Search capability Frames Chapter 4: Planning a Successful Web Site: Part 2

Text Links Common way to navigate from section to section Target - the page to which the link points Mouse over or Rollover link – changes color or format when mouse hovers over the link User-based navigation requires that you first consider the effect of hidden or differently formatted fresh and followed text links on the usability and accessibility of your site’s pages. Chapter 4: Planning a Successful Web Site: Part 2

Text Linked text is the most common navigation element Settings for linked text Unvisited link – default color blue Active link Visited link – default color purple Underlining – default setting for links Rollover effect – changes text with mouse hover Substitute commonly understood alternatives Text changes color or becomes highlighted on rollover Text a top of page separated by vertical bars or enclosed within square brackets

Alternatives to Linked Text Rollover effect

Your Turn! (page 117) Exploring Text Link Formatting Browse the Web or use a search tool to locate six Web sites; two commercial sites, two topical sites of interest to seniors, and two organizational sites. Follow text links at each site. Write  a report for your instructor that discusses how each site presents text links. Does the link clearly identify the link's target page? Are traditional fresh and followed link colors and underlining used to define text links? Are hidden or rollover text links used? Is there any difference in the approach to text links among the different types of sites: commercial, topical, or organizational? How easy or difficult was it for you to identify and follow the text links? Will the results of your research determine how you format text links at your site? If yes, how? If no, why not?

Clearly identified clickable hotspot Image Links More on Web Clearly identified clickable hotspot Chapter 4: Planning a Successful Web Site: Part 2

Image Maps Client-side image map Server-side image map Mapping information resides in HTML Processed by the browser Server-side image map CGI script processes mapping information Resides on server More complicated Slower response time Optimize file size of images you use

Menus, Bars, and Tabs Best for grouping related links Navigation menu More on Web Best for grouping related links Navigation menu List of related links Pop-out menu Navigation bar Graphic buttons present links Drop-down menu Navigation tabs Present links as small tabs Chapter 4: Planning a Successful Web Site: Part 2

Menus, Bars, and Tabs More on Web Drop-down menu navigation menu Chapter 4: Planning a Successful Web Site: Part 2

Breadcrumb trail from home page to current page Hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the page currently being viewed Use in conjunction with other navigational elements Breadcrumb trail from home page to current page Chapter 4: Planning a Successful Web Site: Part 2

Site map organized by topic Summary page of links to major pages at the site Site map organized by topic Chapter 4: Planning a Successful Web Site: Part 2

Site Index Contains hyperlinked text to specific locations within the Web site Organized alphabetically, or as an outline of the site Generally preferred over (graphic representation)

Search Capability Allows visitors to quickly locate pages in your site Popular navigational tool for large, complex Web sites Hosted Web-site search provider Search process is the same for both large and small-scale sites Gives visitors much desired flexibility and control Chapter 4: Planning a Successful Web Site: Part 2

Search Capability Chapter 4: Planning a Successful Web Site: Part 2 More on Web Search capability Chapter 4: Planning a Successful Web Site: Part 2

Frames Divide Web pages into sections Frames allow scrolling can be utilized as a page design tool and a navigation element each frame is a separate Web page frameset another web page holds the other frames together Frames allow scrolling pros – navigation links always visible cons – can hamper navigation (browser’s Back button) printing pages can be difficult (need to click in the correct frame first) Best suited for larger monitors

Frames

Navigation Design Tips Place major links at the top and/or down the left side on all pages at your site Consistently place your primary navigation elements in the same location on all pages Underlying pages should include Link back to home page Logo or site identifier Include Next Page and Previous Page links on pages to be visited sequentially Chapter 4: Planning a Successful Web Site: Part 2

Navigation Design Tips Create both a user-based and a user-controlled navigation system Ensure that links clearly identify their target pages. Avoid ambiguous text in text links Follow WAI guidelines for text links, grouping links using navigation menus or bars, and image maps Chapter 4: Planning a Successful Web Site: Part 2

Navigation Design Tips Ensure that links on your Web page are Functional – check external link options HTTP 404 error message (page not found) Relative and worthwhile Choose link terminology that gives a realistic expectation of the content to be found if the link is visited Indicate to visitors clear link options fail to remove a link to the current page

Navigation Design Tips Consider visitors who have graphics turned off in their browsers Use the ALT attribute Provide text links in addition to graphic elements

Navigation Design Tips Chapter 4: Planning a Successful Web Site: Part 2

Design Plan Checklist Define the site’s purpose goals and objectives in specific time frame, purpose statement Identify the site’s target audience profile audience needs, continually gather needs assessment Determine the site’s general content adds value, repurpose, organize Select the site’s structure choose structural theme Design the look and feel of the site establish visual identity, uniform color scheme, consistent page layout Specify the site’s navigation system user-based and user-controlled, WAI accessibility guidelines for links and image maps

Case Study # 4 Case Study Page 130 Do steps 1-5 to produce 1 page paper using Word. See assignment web page for details.

Chapter Summary Discuss the relationship between page length, content placement, and usability Complete Step 5: Design the look and feel of the site Complete Step 6: Specify the site’s navigation system Use a checklist to review your design plan Chapter 4: Planning a Successful Web Site: Part 2