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

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 zones
Avoid a cluttered appearance
Chapter 4: Planning a Successful Website: Part 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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