Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system Complete Step 5: Design the look and feel of the website Complete Step 6: Test, publish, and maintain the website Use a checklist to review your web design plan Chapter 4: Planning a Successful Website: Part 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 zones Avoid a cluttered appearance Chapter 4: Planning a Successful Website: Part 2

Page Length, Content Placement, and Usability Eye-tracking studies use various technologies to produce heat maps that represent data using color Eye-tracking heat maps are created by analyzing the movement of a visitor’s eyes as he or she views a webpage Over the past several years, eye-tracking studies suggest that a site’s visitors typically first look at the top and left areas of a page, and then look down and to the right Chapter 4: Planning a Successful Website: Part 2

Page Length, Content Placement, and Usability When designing a webpage, you need to decide how to manage page width Fixed-width page Liquid or flexible page layout Hybrid page layout Chapter 4: Planning a Successful Website: Part 2

Step 4: Specify the Website’s Navigation System A navigation system that is easy for visitors to understand and follow will draw them deeper into your website to view detail pages with content that can satisfy their needs and expectations User-based navigation system User-controlled navigation system Chapter 4: Planning a Successful Website: Part 2

Link Types Text links Image links Navigation areas Breadcrumb trail Website map Search capability Chapter 4: Planning a Successful Website: Part 2

Link Types Text links are hyperlinks based on a word or words in an HTML document An image link assigns a link to a visual element, such as an illustration or a photograph Image map Hot spots Chapter 4: Planning a Successful Website: Part 2

Link Types You should group related links into a navigation area to create an eye-catching design element Navigation menu Navigation bar Drop-down menus Navigation tabs Chapter 4: Planning a Successful Website: Part 2

Link Types Chapter 4: Planning a Successful Website: Part 2

Link Types A breadcrumb trail is a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the currently viewed page Chapter 4: Planning a Successful Website: Part 2

Link Types A website with a large number of pages and a complex structure often provides a website map, also called a website index Chapter 4: Planning a Successful Website: Part 2

Link Types A website search feature is another popular navigation tool for websites with a large number of pages A hosted website search provider is a third-party company that uses spiders or other tools to build a searchable index of your website’s pages and then hosts the index on their servers Chapter 4: Planning a Successful Website: Part 2

Link Types Chapter 4: Planning a Successful Website: Part 2

Step 5: Design the Look and Feel of the Website You can create visual consistency by repeating design features — typeface, content position, color scheme — company or website name, logo, and major links — across all pages at a site Inconsistent appearances confuse visitors Chapter 4: Planning a Successful Website: Part 2

Color and Visual Consistency Color schemes create unity Apply color scheme to the background, graphic art and illustrations, and text across all pages Choose background and text colors to provide sufficient contrast Choose graphics that match your color scheme Chapter 4: Planning a Successful Website: Part 2

Color and Visual Contrast Chapter 4: Planning a Successful Website: Part 2

CSS and Formatting 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 website Styles can create visual consistency Chapter 4: Planning a Successful Website: 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 website’s pages and linked to them with HTML tag Chapter 4: Planning a Successful Website: Part 2

CSS and Formatting Chapter 4: Planning a Successful Website: Part 2

Page Layout Can ensure visual consistency across a website’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 Search feature Links Content area Chapter 4: Planning a Successful Website: Part 2

Page Layout Chapter 4: Planning a Successful Website: Part 2

Page Layout Underlying structure of rows and columns, called a layout grid Allows you to precisely position and align page content Chapter 4: Planning a Successful Website: Part 2

Page Layout CSS and page layout Style sheets can also be used to control page layout by dividing a page into sections, such as a header section or a navigation section <div> tag Chapter 4: Planning a Successful Website: Part 2

Page Layout Tables Arrangement of cells in columns and rows Two common uses Create rows and columns of data Create webpage layout Chapter 4: Planning a Successful Website: Part 2

Step 6: Test, Publish, and Maintain the Website A formal website usability test is an evaluation that generally takes place in a structured environment, such as a testing laboratory Create a website that meets the needs of your hosting service Internal or external hosting vendor Size limits Update frequency Person in charge of updating Budget restrictions Chapter 4: Planning a Successful Website: Part 2

Site Plan Checklist Identify the website’s purpose and target audience Determine the website’s general content Select the website’s structure Specify the website’s navigation system Design the look and feel of the website Test, publish, and maintain the website Chapter 4: Planning a Successful Website: Part 2

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