1. Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2

2. 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 22

3. 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 23

4. 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 24

5. Visual Consistency Chapter 4: Planning a Successful Web Site: Part 25

6. 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 26

7. Color and Visual Contrast Chapter 4: Planning a Successful Web Site: Part 27

8. 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 28

9. 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 29

10. CSS and Formatting Chapter 4: Planning a Successful Web Site: Part 210 External Style Sheet Sample Style Sheet in CSS editor

11. 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 211

12. Page Layout Chapter 4: Planning a Successful Web Site: Part 212

13. Layout Grids  Underlying structure of rows and columns  Allows you to precisely position page content Chapter 4: Planning a Successful Web Site: Part 213

14. 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 214

15. Tables Chapter 4: Planning a Successful Web Site: Part 215 Web page data table Layout table

16. 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 216

17. Table and Cell Properties

18. 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 218

19. CSS and Page Layout  CSS can divide a page into sections – tag Chapter 4: Planning a Successful Web Site: Part 219

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

21. 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 221

22. 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 222

23. 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 223

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

25. 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 225

26. 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 226

27. Image Links

28. 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 228

29. Menus, Bars, and Tabs Chapter 4: Planning a Successful Web Site: Part 229 Navigation bar Drop-down menu Navigation tabs

30. 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 Chapter 4: Planning a Successful Web Site: Part 230 Breadcrumb trail from home page to current page

31. Site Map (Site Index)  Summary page of links to major pages at the site Chapter 4: Planning a Successful Web Site: Part 231

32. 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 232

33. Search Capability Chapter 4: Planning a Successful Web Site: Part 233

34. 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 234

35. Navigation Design Tips  Create both a user-based and a user- controlled 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 235

36. 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 236

37. Navigation Design Tips Chapter 4: Planning a Successful Web Site: Part 237

38. 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 238

39. 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 239

40. Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2