Chapter Objectives

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 2

3. Page Length, Content Placement, and Usability Logo and sitepublisher’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 linkto time-sensitiveinformation Important link tointernational sites Links visible on second screen whenviewed at a lower resolution Important links to major underlyingpages Chapter 4: Planning a Successful Web Site: Part 2

4. Visual Consistency • Useconsistent 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

5. Visual Consistency Repeated design andcontent elements Chapter 4: Planning a Successful Web Site: Part 2

6. 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 colorscheme Chapter 4: Planning a Successful Web Site: Part 2

7. Color and Visual Contrast University of South Dakota’sWeb site effectively utilizes aprimary red, white, and blackcolor scheme Chapter 4: Planning a Successful Web Site: Part 2

8. 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 usescolor -- including overallcolor scheme and individualbackground, graphicelement, text, and imagecolors. Does the color scheme offer sufficientcontrast between the background, foreground, and text? Does the site use its color scheme to create visualconsistencyacrosspages? Discuss how you would modify the color. If necessary, to improvereadability and visualconsistency.

9. CSS and Formatting More on Web • Cascading Style Sheetsallow 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 visualconsistency Chapter 4: Planning a Successful Web Site: Part 2

10. 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

11. 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 aroundimages on aWeb page

12. CSS and Formatting External style sheetlinked to WYSIWYGtemplate Chapter 4: Planning a Successful Web Site: Part 2

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

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

15. Page Layout Logical, standard pagelayout providesvisual consistencyacross all pagesat a site Chapter 4: Planning a Successful Web Site: Part 2

16. Layout Grids • Underlying layoutstructure that arranges a page into rows and columns • Allows you consistently placed items on your pages Layoutgrid Gridoptions Chapter 4: Planning a Successful Web Site: Part 2

17. Tables • Contains cells aligned into rows and columns • 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

18. 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 Fireworksand Adobe ImageReady

19. Tables More on Web Three-columnmultirow datatable with anoutside border Layouttable Chapter 4: Planning a Successful Web Site: Part 2

20. Tables More on Web • Position text and other elements • Float property • Cell spacing • Cell padding Height and widthproperties Alignment, float, cellpadding, and cellspacing properties Borderproperties Chapter 4: Planning a Successful Web Site: Part 2

21. Tables • Position text and other elements • Cell spacing • Cell padding Cell padding (blue area)regulates spacebetween a cell’scontents and borders Cell spacing (green area)regulates spacebetween cells cell spacing cell padding

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

23. CSS and Page Layout • CSS can divide a page into sections • <div> tag External style sheetestablishing pagesections Chapter 4: Planning a Successful Web Site: Part 2

24. CSS and Page Layout HTML <div> tag withinpage coding identifyinga navigation sectionestablished by thestyle sheet • CSS can divide a page into sections • <div> tag Chapter 4: Planning a Successful Web Site: Part 2 24

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

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

27. 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

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

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

30. 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 differentlyformatted fresh and followed text links on the usability and accessibility of your site’s pages. Chapter 4: Planning a Successful Web Site: Part 2

31. 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

32. Alternatives to Linked Text Linked text Rollover effect

33. Your Turn! (page 117) Exploring Text Link Formatting   Browse the Web or use a searchtool to locatesixWebsites; two commercial sites, two topical sites of interest to seniors, and two organizational sites. Followtextlinks at each site. Write  a report for your instructor that discusses how each site presentstextlinks. 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?

34. Image Links More on Web Clearly identifiedclickable hotspot Chapter 4: Planning a Successful Web Site: Part 2

35. Image Maps • Client-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

36. Menus, Bars, and Tabs 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

37. Menus, Bars, and Tabs More on Web Drop-downmenu navigationmenu Chapter 4: Planning a Successful Web Site: Part 2

38. Breadcrumb Trail • Hierarchical outline or horizontallist that shows a visitor the path he or she has takenfrom the homepageto the pagecurrently being viewed • Use in conjunction with other navigational elements Breadcrumb trail from homepage to current page Chapter 4: Planning a Successful Web Site: Part 2

39. Site Map • Summary page of links to major pages at the site Site maporganizedby topic Chapter 4: Planning a Successful Web Site: Part 2

40. 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)

41. 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

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

43. Frames • Divide Web pages into sections • 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

44. Frames

45. Navigation Design Tips • Place majorlinks 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

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

47. 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 realisticexpectation 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

48. 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

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

50. 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