Web Design 6e

Chapter 4: Planning a Successful Website: Part 2

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or
service or otherwise on a password-protected website for classroom use. 1
 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 2
otherwise on a password-protected website for classroom use.
Page Length, Content Placement, and Usability (1 of 5)

• The initial, visible screen area is extremely

valuable space
• Screen resolution and size determine how
much of a page is visible
• Place the most critical information above and
to the left of the potential scroll zones
• Avoid a cluttered appearance
• Follow the same guidelines on subsidiary pages

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 3
otherwise on a password-protected website for classroom use.
Page Length, Content Placement, and Usability (2 of 5)

• To help prevent webpage scrolling, use:

• Carousels
• Card layouts
• Slide shows
• These may affect SEO

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 4
otherwise on a password-protected website for classroom use.
 Page Length, Content Placement, and Usability (3 of 5)

• Eye-tracking studies use various technologies to produce

heat maps that represent data using color
• A website’s visitors typically first look at the top and left
areas of a page, and then look down and to the right
• Eye-tracking heat maps are created by analyzing the
movement of a visitor’s eyes as he or she views a
webpage

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 5
otherwise on a password-protected website for classroom use.
Page Length, Content Placement, and Usability (4 of 5)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 6
otherwise on a password-protected website for classroom use.
 Page Length, Content Placement, and Usability (5 of 5)

• When designing a webpage, you need to decide how to

manage page width
• Fixed-width page
• Liquid or flexible page layout
• Hybrid page layout

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 7
otherwise on a password-protected website for classroom use.
 Step 4: Specify the Website’s Navigation System (1 of
2)

• 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 8
otherwise on a password-protected website for classroom use.
 Step 4: Specify the Website’s Navigation System (2 of
2)

• 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
• Include a search capability
• Keep in mind needs of touch screen users

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 9
otherwise on a password-protected website for classroom use.
 Link Types

• Text links
• Hidden links
• Image links
• Related link groups
• Breadcrumb trails

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 10
otherwise on a password-protected website for classroom use.
 WAI link and navigation guidelines

• WAI: Web Accessibility Initiative

• Identify the target clearly
• Do not use color alone to indicate links
• Group related links together in navigation bars

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 11
otherwise on a password-protected website for classroom use.
 User-Based and User-Controlled Navigation

• User-based navigation
• Based on visitors’ needs rather than publishers’ needs
• Use target audience profile
• UX
• User-controlled navigation
• Allows visitors to move around a website in a manner they
choose
• Include navigation back to home page on all subsidiary
pages

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 12
otherwise on a password-protected website for classroom use.
 Text Links (1 of 2)

• Text links are hyperlinks based on a word or words in an

HTML document
• Clearly identify target
- Use a tooltip
• Use existing text flow
• Avoid phrases such as click here
• Include formatting and color
• Use color to indicate clicked links
• Be consistent

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 13
otherwise on a password-protected website for classroom use.
Text Links (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 14
otherwise on a password-protected website for classroom use.
 Hidden Links

• Off-canvas or hamburger menus

• Pro: Saves screen space
• Con: Visitors might not see them
• Rollover links

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 15
otherwise on a password-protected website for classroom use.
 Image Links

• Illustrations or photographs
• Image map
• Image with hot spots

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 16
otherwise on a password-protected website for classroom use.
 Navigation Areas (1 of 4)

• Group related links into a navigation areas

• Menus
- List of related links
- Pop-out menus
• Bars
- Graphic buttons represent links
- Drop-down menu
• Tabs
- Links as small tabs

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 17
otherwise on a password-protected website for classroom use.
 Navigation Areas (2 of 4)

• Pop-out menu

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 18
otherwise on a password-protected website for classroom use.
 Navigation Areas (3 of 4)

• Navigation bar

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 19
otherwise on a password-protected website for classroom use.
 Navigation Areas (4 of 4)

• Tab with drop-down menu

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 20
otherwise on a password-protected website for classroom use.
 Breadcrumb Trails

• 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 21
otherwise on a password-protected website for classroom use.
 Search Capability (1 of 2)

• 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
• Website index: summary of links to major pages
• Autocomplete: Predicts search terms as a visitor enters
keywords

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 22
otherwise on a password-protected website for classroom use.
Search Capability (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 23
otherwise on a password-protected website for classroom use.
 Levels of Navigation (1 of 2)

• Primary
• Overview of website
• Local or subsidiary
• Within an area of the website
• Contextual
• Specific to content being viewed
• Adaptive
• Links that use visitors’ history

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 24
otherwise on a password-protected website for classroom use.
Levels of Navigation (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 25
otherwise on a password-protected website for classroom use.
 Step 5: Design the Look and Feel of the Website

• The look of a website is the combination of design

aspects
• The feel of a website is the behavior of its elements
• Navigation
• Animation
• Together, the look and feel are the emotion or reaction
of visitors

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 26
otherwise on a password-protected website for classroom use.
 Visual Consistency (1 of 2)

• Create visual consistency by repeating design elements

across all pages
• Font and typeface
• Content position
• Color scheme
• Placement of name, logo, navigation

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 27
otherwise on a password-protected website for classroom use.
Visual Consistency (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 28
otherwise on a password-protected website for classroom use.
 Color and Visual Contrast (1 of 5)

• 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 29
otherwise on a password-protected website for classroom use.
Color and Visual Contrast (2 of 5)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 30
otherwise on a password-protected website for classroom use.
 Color and Visual Contrast (3 of 5)

• Color can:
• Evoke mood
• Stimulate interest
• Support a website’s purpose
• Meet audience expectations

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 31
otherwise on a password-protected website for classroom use.
 Color and Visual Contrast (4 of 5)

• Consistency tools:
• Templates
• Web design tools
• Color schemes
• Color-matching software

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 32
otherwise on a password-protected website for classroom use.
Color and Visual Contrast (5 of 5)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 33
otherwise on a password-protected website for classroom use.
 CSS and Formatting (1 of 4)

• 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
• Style rules are specifications that define:
• One or more formatting properties
- Declarations
• For specific HTML tags
- Selectors

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 34
otherwise on a password-protected website for classroom use.
 CSS and Formatting (2 of 4)

• 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 website’s pages and linked to them
with HTML tag

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 35
otherwise on a password-protected website for classroom use.
 CSS and Formatting (3 of 4)

• If you make a change to a style sheet, all webpages that

use the style sheet are updated
• Can use CSS editor software
• CSS prioritizes size rules:
• Inline styles
• Internal and external style sheets
• Default styles specified by browser

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 36
otherwise on a password-protected website for classroom use.
CSS and Formatting (4 of 4)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 37
otherwise on a password-protected website for classroom use.
 Page Layout (1 of 2)

• Can ensure visual consistency across a website’s pages

• Standardize layout
• Use layout grids and CSS
• Wireframing plans arrangement of page elements
• Separates page layout and functionality from design
• UX
• Sketch or blueprint

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 38
otherwise on a password-protected website for classroom use.
Page Layout (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 39
otherwise on a password-protected website for classroom use.
 Layout Grids (1 of 2)

• Underlying structure of rows and columns

• Allows you to precisely position and align page
content
• Fluid grid layouts based on percentage of screen
• Responsive grid layouts use a combination of
percentages and fixed limits

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 40
otherwise on a password-protected website for classroom use.
Layout Grids (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 41
otherwise on a password-protected website for classroom use.
CSS and Page Layout (1 of 3)

• 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 42
otherwise on a password-protected website for classroom use.
CSS and Page Layout (2 of 3)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 43
otherwise on a password-protected website for classroom use.
CSS and Page Layout (3 of 3)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 44
otherwise on a password-protected website for classroom use.
 Step 6: Test, Publish, and Maintain the Website

• Include the following in your website plan:

• How you will test the website
• How you will publish the website
• Where you will host it
• How you will maintain and update the website

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 45
otherwise on a password-protected website for classroom use.
 Testing

• 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 46
otherwise on a password-protected website for classroom use.
 Publishing and Maintaining (1 of 2)

• Include these in your plan to ensure your website:

• Meets the needs of your hosting service
• Can be updated to keep the content relevant.

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 47
otherwise on a password-protected website for classroom use.
Publishing and Maintaining (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 48
otherwise on a password-protected website for classroom use.
 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 49
otherwise on a password-protected website for classroom use.
 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

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 50
otherwise on a password-protected website for classroom use.