4 Planning a Successful Web Site: Part 2 Web Design, 3rd Edition 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 2 Page Length, Content Placement, and Usability The initial, visible screen area is extremely valuable space Place the most critical information above and to the left of the potential scroll lines – Avoid a cluttered appearance Chapter 4: Planning a Successful Web Site: Part 2 3 Visual Consistency Use consistent content and design features— repeat 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 4 Visual Consistency Chapter 4: Planning a Successful Web Site: Part 2 5 Color and Visual Contrast Color schemes create unity Limit the number of colors in your scheme to three major colors Apply color scheme to the background, graphic art and illustrations, and text across all pages Choose background and text colors to provide sufficient contrast--the greater the contrast, the greater the readability Choose graphics that match or complement your color scheme Chapter 4: Planning a Successful Web Site: Part 2 6 Color and Visual Contrast Chapter 4: Planning a Successful Web Site: Part 2 7 CSS and Formatting (Cascading Style Sheets) The CSS specification allows Web designers to use a text document, called a style sheet, to control the appearance of one or more pages at a site Styles can create visual consistency You create style rules that allow you to specify formatting properties and their values Style sheets centralize formatting Chapter 4: Planning a Successful Web Site: Part 2 8 CSS and Formatting Inline Style – 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 9 CSS and Formatting External Style Sheet Chapter 4: Planning a Successful Web Site: Part 2 Sample Style Sheet in CSS editor 10 Page Layout Can ensure visual consistency across a Web site’s pages A well-designed layout creates a sense of balance Display certain items consistently (in the same place) on all pages – Logo and name – Links – Content area Chapter 4: Planning a Successful Web Site: Part 2 11 Page Layout Chapter 4: Planning a Successful Web Site: Part 2 12 Layout Grids Underlying structure of rows and columns Allows you to precisely position page content Chapter 4: Planning a Successful Web Site: Part 2 13 Tables Arrangement of cells in rows and columns Two common uses – Create rows and columns of data – Create Web page layout Chapter 4: Planning a Successful Web Site: Part 2 14 Tables Web page data table Chapter 4: Planning a Successful Web Site: Part 2 Layout table 15 Tables Position text and other elements – Float property--sets position of element (text) positioned outside table – Cell spacing--amount of space between cell contents and border – Cell padding--amount of space between table cells Chapter 4: Planning a Successful Web Site: Part 2 16 Table and Cell Properties Tables Options for defining table width – Absolute width—will not resize if browser window resizes – Relative width—defined as percentage of browser window Each option has advantages and disadvantages Understand that each user will view your table differently Chapter 4: Planning a Successful Web Site: Part 2 18 CSS and Page Layout CSS can divide a page into sections – <div> tag Chapter 4: Planning a Successful Web Site: Part 2 19 Step 5: Design the Look and Feel of the Site Chapter 4: Planning a Successful Web Site: Part 2 20 Step 6: Specify the Site’s Navigation System Well-designed navigation is easier for visitors to understand 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 21 User-Based Navigation Link pages based on the visitors’ needs Understand how visitors will view your Web site – Usability tests • Formal—expensive—testing laboratory • Informal—friends, family members, coworkers Chapter 4: Planning a Successful Web Site: Part 2 22 User-Controlled Navigation Visitors move around the site in a manner they choose Link back to home page Next page link Previous page link Well-designed navigation is essential to the success of your Web site Allow site visitors the freedom to choose how they want to move from page to page at your site Chapter 4: Planning a Successful Web Site: Part 2 23 Link Types Text links Image Links – Image map Menus Bars Tabs Chapter 4: Planning a Successful Web Site: Part 2 Breadcrumb trail Site map Search capability Frames 24 Text Links Common way to navigate from section to section Target--clearly identify the page to which the link points Mouse over link—hidden—use caution Rollover link—hidden—use caution Chapter 4: Planning a Successful Web Site: Part 2 25 Image Links You can assign a link to an image – Image map--contains hotspots—areas on the image to which a link is assigned • Client-side--processed by visitor's browser • Server-side--sent back to server, more complicated Chapter 4: Planning a Successful Web Site: Part 2 26 Image Links Menus, Bars, and Tabs 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 28 Menus, Bars, and Tabs Navigation bar Navigation tabs Drop-down menu Chapter 4: Planning a Successful Web Site: Part 2 29 Breadcrumb Trail 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 30 Site Map (Site Index) Summary page of links to major pages at the site Chapter 4: Planning a Successful Web Site: Part 2 31 Search Capability Allows visitors to quickly locate pages in your site Popular navigation tool for sites with large numbers of pages Hosted Web-site search provider can provide search services Chapter 4: Planning a Successful Web Site: Part 2 32 Search Capability Chapter 4: Planning a Successful Web Site: Part 2 33 Frames Divide Web pages into multiple areas Can scroll individually Receive mixed reviews Understand the pros and cons of using frames Chapter 4: Planning a Successful Web Site: Part 2 34 Navigation Design Tips Create both a user-based and a usercontrolled navigation system Place major links at the top and/or down the left side on all pages at your site Avoid ambiguous text in text links Chapter 4: Planning a Successful Web Site: Part 2 35 Navigation Design Tips Ensure that links clearly identify their target pages. Include a link back to the home page on underlying pages. Include Next Page and Previous Page links on pages to be visited sequentially Follow WAI guidelines for text links, grouping links using navigation menus or bars, and image maps (Web Accessibility Initiative) Chapter 4: Planning a Successful Web Site: Part 2 36 Navigation Design Tips Chapter 4: Planning a Successful Web Site: Part 2 37 Design Plan Checklist Define the site’s purpose Identify the site’s target audience Determine the site’s general content Select the site’s structure Design the look and feel of the site Specify the site’s navigation system Chapter 4: Planning a Successful Web Site: Part 2 38 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 39 4 Planning a Successful Web Site: Part 2 Web Design, 3rd Edition