Web Design,3rd Edition

4Planning a SuccessfulWeb Site: Part 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 2

Page Length, Content Placement, and Usability 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 3

Important links to major underlying

pages

Logo and sitepublisher’s name Important link

to time-sensitiveinformation

Links visible on second screen whenviewed at a lower resolution

Important link tointernational sites

Visual Consistency

Use consistent content and design featuresInconsistent appearances confuse visitorsBe 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

Chapter 4: Planning a Successful Web Site: Part 2 5

Repeated design andcontent elements

Color and Visual Contrast

Color schemes create unityLimit the number of colors in your scheme to

threeApply color scheme to the background, text,

and graphic elementsBackground color should increase legibility of

text– Bad choice can cause eyestrain

Choose graphics that match your color schemeChapter 4: Planning a Successful Web Site: Part 2 6

Color and Visual Contrast

Chapter 4: Planning a Successful Web Site: Part 2 7

University of South Dakota’sWeb site effectively utilizes aprimary red, white, and black

color scheme

Your Turn! (page 105) Exploring the Use of Color: Visual Consistency and Visual Contrast   1. 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

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

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

More on Web

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

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 around

images on aWeb page

CSS and Formatting

Chapter 4: Planning a Successful Web Site: Part 2 12

External style sheetlinked to WYSIWYG

template

CSS and Formatting

Chapter 4: Planning a Successful Web Site: Part 2 13

Sample style sheetin CSS editor

Page Layout

Consistent layout creates unityA well-designed layout creates a sense of

balance and orderDisplay 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

Chapter 4: Planning a Successful Web Site: Part 2 15

Logical, standard pagelayout provides

visual consistencyacross all pages

at a site

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 16

Gridoptions

Layoutgrid

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 uses1.Create rows and columns of data2.Create Web page layout

Chapter 4: Planning a Successful Web Site: Part 2 17

Tables

Used to reconstruct segmented imagesAllows 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

Tables

Chapter 4: Planning a Successful Web Site: Part 2 19

Three-columnmultirow datatable with an

outside border

More on Web

Layouttable

Tables

Position text and other elements– Float property– Cell spacing– Cell padding

Chapter 4: Planning a Successful Web Site: Part 2 20

Height and widthproperties

Alignment, float, cellpadding, and cell

spacing properties

Borderproperties

More on Web

Tables

Position text and other elements– Cell spacing– Cell padding

cell spacing

cell padding

Cell padding (blue area)regulates spacebetween a cell’s

contents and borders

Cell spacing (green area)regulates spacebetween cells

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-wrapUnderstand that each user will view your table

differentlyChapter 4: Planning a Successful Web Site: Part 2 22

CSS and Page Layout

CSS can divide a page into sections– <div> tag

Chapter 4: Planning a Successful Web Site: Part 2 23

External style sheetestablishing page

sections

CSS and Page Layout

CSS can divide a page into sections– <div> tag

Chapter 4: Planning a Successful Web Site: Part 2 24

HTML <div> tag withinpage coding identifying

a navigation sectionestablished by the

style sheet

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 SystemWell-designed navigation pulls the visitor down

the home pageDraws them deeper into the Web siteDesign should be both user-based and user-

controlled

Chapter 4: Planning a Successful Web Site: Part 2 26

User-Based Navigation

Link pages based on the visitors’ needsUnderstand how visitors will view your Web

site– Usability tests

• Formal• Informal

Chapter 4: Planning a Successful Web Site: Part 2 27

More on Web

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

Breadcrumb trail Site map Search capability Frames

Chapter 4: Planning a Successful Web Site: Part 2 29

Text Links

Common way to navigate from section to section

Target - the page to which the link pointsMouse over or Rollover link – changes color

or format when mouse hovers over the linkUser-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

Rollover effect

Linked text

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.

2. Write  a report for your instructor that discusses how each site presents text links.

– 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?

Image Links

Chapter 4: Planning a Successful Web Site: Part 2 34

Clearly identifiedclickable hotspot

More on Web

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

Menus, Bars, and Tabs

Best for grouping related linksNavigation menu

– List of related links– Pop-out menu

Navigation bar– Graphic buttons present links

• Drop-down menuNavigation tabs

– Present links as small tabs

Chapter 4: Planning a Successful Web Site: Part 2 36

More on Web

Menus, Bars, and Tabs

Chapter 4: Planning a Successful Web Site: Part 2 37

Drop-downmenu

More on Web

navigationmenu

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

Chapter 4: Planning a Successful Web Site: Part 2 38

Breadcrumb trail from homepage to current page

Site Map

Summary page of links to major pages at the site

Chapter 4: Planning a Successful Web Site: Part 2 39

Site maporganizedby topic

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

Search Capability

Chapter 4: Planning a Successful Web Site: Part 2 42

Search capability

More on Web

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 pagesUnderlying 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 user-controlled 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 130Do 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

Web Design,3rd Edition

4Planning a SuccessfulWeb Site: Part 2