Download Web Design 4

4
Planning a Successful
Web Site: Part 2
Web Design,
3rd Edition
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
2
Page Length, Content Placement,
and Usability
Logo and site
publisher’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
Chapter 4: Planning a Successful Web Site: Part 2
Important link
to time-sensitive
information
Important link to
international sites
Important links to
major underlying
pages
Links visible on second screen when
viewed at a lower resolution
3
Visual Consistency
Use consistent 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
4
Visual Consistency
Repeated design and
content elements
Chapter 4: Planning a Successful Web Site: Part 2
5
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 color scheme
Chapter 4: Planning a Successful Web Site: Part 2
6
Color and Visual Contrast
University of South Dakota’s
Web site effectively utilizes a
primary red, white, and black
color scheme
Chapter 4: Planning a Successful Web Site: Part 2
7
Your Turn! (page 105) Exploring the Use of
Color: Visual Consistency and Visual Contrast
1.
2.
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 uses color -- including overall color scheme and individual
background, graphic element, text, and image colors. Does the color
scheme offer sufficient contrast between the background, foreground, and
text? Does the site use its color scheme to create visual consistency
across pages? Discuss how you would modify the color. If necessary, to
improve readability and visual consistency.
More on Web
CSS and Formatting
Cascading Style Sheets allow 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 visual consistency
Chapter 4: Planning a Successful Web Site: Part 2
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 2
10
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
Style defines how
text will wrap around
 Internal Style Sheet
images on a
Web page
– Provides styles for individual Web pages
 External Style Sheet
– Used for multiple pages
– Created in a separate file
– .css extension
CSS and Formatting
External style sheet
linked to WYSIWYG
template
Chapter 4: Planning a Successful Web Site: Part 2
12
CSS and Formatting
Sample style sheet
in CSS editor
Chapter 4: Planning a Successful Web Site: Part 2
13
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
14
Page Layout
Logical, standard page
layout provides
visual consistency
across all pages
at a site
Chapter 4: Planning a Successful Web Site: Part 2
15
Layout Grids
 Underlying layout
structure that arranges
a page into rows and
columns
 Allows you consistently
placed items on your
pages
Chapter 4: Planning a Successful Web Site: Part 2
Layout
grid
Grid
options
16
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
1.Create rows and columns of data
2.Create Web page layout
Chapter 4: Planning a Successful Web Site: Part 2
17
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 Fireworks and
Adobe ImageReady
More on Web
Tables
Three-column
multirow data
table with an
outside border
Chapter 4: Planning a Successful Web Site: Part 2
Layout
table
19
More on Web
Tables
Position text and other elements
– Float property
– Cell spacing
– Cell padding Alignment, float, cell
Height and width
properties
padding, and cell
spacing properties
Border
properties
Chapter 4: Planning a Successful Web Site: Part 2
20
Tables
Position text and other elements
– Cell spacing
– Cell padding
Cell spacing (green area)
regulates space
between cells
cell
spacing
cell
padding
Cell padding (blue area)
regulates space
between a cell’s
contents and borders
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
22
CSS and Page Layout
CSS can divide a page into sections
– <div> tag
External style sheet
establishing page
sections
Chapter 4: Planning a Successful Web Site: Part 2
23
CSS and Page Layout
CSS can divide a page into sections
– <div> tag
HTML <div> tag within
page coding identifying
a navigation section
established by the
style sheet
Chapter 4: Planning a Successful Web Site: Part 2
24
Step 5: Design the Look and Feel
of the Site
Chapter 4: Planning a Successful Web Site: Part 2
25
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 usercontrolled
Chapter 4: Planning a Successful Web Site: Part 2
26
More on Web
User-Based Navigation
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
27
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
28
Link Types
 Text links
 Image Links
– Image map
 Menus
 Bars
 Tabs
Chapter 4: Planning a Successful Web Site: Part 2
 Breadcrumb trail
 Site map
 Search capability
 Frames
29
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 differently
formatted fresh and followed text links on the
usability and accessibility of your site’s pages.
Chapter 4: Planning a Successful Web Site: Part 2
30
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
Alternatives to Linked Text
Linked text
Rollover effect
Your Turn! (page 117) Exploring Text Link
Formatting
1.
Browse the Web or use a search tool to locate six Web sites; two
commercial sites, two topical sites of interest to seniors, and two
organizational sites. Follow text links at each site.
Write a report for your instructor that discusses how each site presents
text links.
2.
–
–
–
–
–
–
–
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?
More on Web
Image Links
Clearly identified
clickable hotspot
Chapter 4: Planning a Successful Web Site: Part 2
34
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
More on Web
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 2
36
More on Web
Menus, Bars, and Tabs
Drop-down
menu
navigation
menu
Chapter 4: Planning a Successful Web Site: Part 2
37
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
Breadcrumb trail from home
page to current page
Chapter 4: Planning a Successful Web Site: Part 2
38
Site Map
Summary page of links to major pages at the
site
Site map
organized
by topic
Chapter 4: Planning a Successful Web Site: Part 2
39
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)
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
41
More on Web
Search Capability
Search
capability
Chapter 4: Planning a Successful Web Site: Part 2
42
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
Frames
Navigation Design Tips
Place major links 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
45
Navigation Design Tips
Create both a user-based and a usercontrolled navigation system
Ensure that links clearly identify their target
pages.
– Avoid ambiguous text in text links
Follow WAI guidelines for text links, grouping
links using navigation menus or bars, and
image maps
Chapter 4: Planning a Successful Web Site: Part 2
46
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 realistic
expectation 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
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
Navigation Design Tips
Chapter 4: Planning a Successful Web Site: Part 2
49
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
Case Study # 4
Case Study Page 130
Do steps 1-5 to produce 1 page paper using
Word.
See assignment web page for details.
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 2
52
4
Planning a Successful
Web Site: Part 2
Web Design,
3rd Edition