2
Web Publishing
Fundamentals
Web Design,
3rd Edition
Chapter Objectives
 Describe the advantages of Web publishing
 Discuss basic Web design principles
 Define the requirements for writing for the Web
 Explain the use of color as a Web design tool
 Identify Web publishing issues
Chapter 2: Web Publishing Fundamentals
2
Advantages of Web Publishing
Web publishing offers distinct advantages over
print
– Currency
– Interactivity
– Reduced production costs
– Rapid, economical delivery
Chapter 2: Web Publishing Fundamentals
3
The Currency Advantage
Web sites can be updated continuously, while
print publications are only as current as their
date of publication
To keep visitors on your site, always supply
timely, changing material
USA TODAY
Chapter 2: Web Publishing Fundamentals
4
The Currency Advantage
Chapter 2: Web Publishing Fundamentals
5
The Interactivity Advantage
Internet and Web technologies promote data
and resource sharing
Four main ways to interact:
– Page of contact information
– Blogs
– Web-based forms
– Member pages
Chapter 2: Web Publishing Fundamentals
6
The Interactivity Advantage
Chapter 2: Web Publishing Fundamentals
7
Your Turn! (page 44)
Exploring Currency and Interactivity
1. Visit the Web Design Chapter 1 Online
Companion Web page scsite.com/web3e/ch2/
and click FOX, K2 Snowboarding, and Office in
the Your Turn links.
2. Explore each Web site and answer the following
questions:
a. Is the site's content current, or does it appear to be
outdated? Give examples to support your answer.
b. What tools does the site use to promote interactivity
and communication?
3. Write a report discussing your site exploration
and describe how similar methods and tools
could be incorporated at your Web site.
The Cost Advantage
Web publishing is more cost effective than
print
Colorful designs, photographs, and text can be
included in a Web page for considerably less
cost
Don’t forget to consider file size, space
limitations, and load time
Chapter 2: Web Publishing Fundamentals
9
The Delivery Advantage
Distributing information via the Web can be
much faster and less expensive
With the same immediacy and cost, the Web
can reach both global and local audiences
Consider the Web when the need exists for
economical and rapid distribution of
information
Chapter 2: Web Publishing Fundamentals
10
More on Web
Basic Web Design Principles
 Three things to consider when designing a
successful Web publication that will leave a
distinct impression:
1. Balance and Proximity
2. Contrast and Focus
3. Unity and Visual Identity
Chapter 2: Web Publishing Fundamentals
11
Balance and Proximity
Arrange Web elements symmetrically
(centered and balanced) to suggest a
conservative, safe, peaceful atmosphere
– Avoid too much symmetry
Arrange Web elements asymmetrically (off
balance) to create an fun, energetic mood
Chapter 2: Web Publishing Fundamentals
12
Balance and Proximity
symmetrically center-aligned
page elements create balance
and a conservative mood
Chapter 2: Web Publishing Fundamentals
asymmetrically positioned
page elements create an
energetic, light-hearted mood
13
Balance and Proximity
Proximity (closeness) is closely associated
with balance
Elements that have a relationship should be
placed close to each other
White space can help define proximity and
organize Web page elements
Chapter 2: Web Publishing Fundamentals
14
Balance and Proximity
white space
Logo and
name
Headings and
subheadings
Image above
or to left of
text or
caption
white space
Chapter 2: Web Publishing Fundamentals
white space
15
Contrast and Focus
Contrast is a mix of elements to stimulate
attention
– Use different text styles, colors, and size
typeface
contrast
element size
contrast
Chapter 2: Web Publishing Fundamentals
16
Contrast and Focus
Focus is the center of interest or activity
A Web page needs a focal point
– This is where you want your visitors to focus their
attention
Create Web pages with contrast to elicit
awareness and establish a focal point, the
center of interest or activity
Chapter 2: Web Publishing Fundamentals
17
More on Web
Unity and Visual Identity
Web pages and Web sites need unity, a sense
of oneness
Create unity with consistency and repetition
across your Web pages
Brand is the assurance or guarantee that a
business or organization offers customers
Tag line is a concise statement that a
consumer readily associates with a business,
organization or product.
Chapter 2: Web Publishing Fundamentals
18
Unity and Visual Identity
Chapter 2: Web Publishing Fundamentals
19
Unity and Visual Identity
Alignment is the arrangement of objects in
fixed or predetermined positions
Choose one method of alignment and use it
regularly
– not aligned – page perceived as inconsistent
– aligned – assists readability, organized
appearance
Web site builds on established visual identity
found on billboards, television, newspaper, and
magazine advertisements for a company.
Chapter 2: Web Publishing Fundamentals
20
Unity and Visual Identity
Chapter 2: Web Publishing Fundamentals
21
Unity and Visual Identity
vertical alignment
of product links
left alignment of
text in columns
Chapter 2: Web Publishing Fundamentals
22
Writing for the Web
Visitors typically look for information with:
– Accuracy and currency
– Scannability
– Organization
– Understandable
– Comprehensive and Concise
Chapter 2: Web Publishing Fundamentals
23
Writing for the Web
Accuracy
– Confirm the accuracy of your material with a
reliable source
– Indicate the date of the last update to your Web
site
– Be sure to avoid spelling and grammar errors
• Challenge Web site’s credibility
• Write content in Word processing program first and
perform spelling and grammar checks
Chapter 2: Web Publishing Fundamentals
24
More on Web
Writing for the Web
 Scannability
– Make information easy to
scan
– Use headings, subheads,
and bulleted lists
– Begin each paragraph
with a topic sentence
Chapter 2: Web Publishing Fundamentals
25
Writing for the Web
 To assist readability
– Use 12 point font
– Avoid typing in all uppercase (shouting)
• Avoid colors that suggest a hyperlink
– Use a sans serif type font
– Use plain or subtle backgrounds
Writing for the Web
 Understandability
– Write your copy in the inverted pyramid style (classic newswriting style)
• Places conclusion (lead) first, followed by details (body), then
background information.
summary
details
background
Writing for the Web
Comprehensive and Concise
– Web publications should have half the copy of a
printed publication
– Use chunked format instead of paragraph format
• more significant points
• focuses on a specific topic
– Consider using hyperlinks for additional
information, such as historical backgrounds
Color and the Web
Color can be a powerful design tool
The color wheel can help you choose effective
and appealing color combinations
– Primary colors
– Secondary colors
– Cool colors
– Warm colors
– Complementary colors
Chapter 2: Web Publishing Fundamentals
29
Impact of Color
Primary colors
red, yellow, and blue
Complementary colors
opposite each
other on wheel
Secondary
colors
orange,
green,
and violet
Cool
colors
left side
of wheel
Warm colors
right side of wheel
Impact of Color
Color enhances your Web site’s purpose and
personality
Observe how others effectively use color
Warm colors are associated with activity and
power
Cool colors suggest tranquility and detachment
The RGB Color System
Monitors project color using an RGB System
– Combines red, green, and blue light
• Levels of intensity are measured from
0 – 255 (color has hexadecimal code)
– RGB value of 255:102:153 is FF6699 (dusty rose color)
– Not all monitors can display all colors
• Web-safe palette – browsers share 216 of 256 colors
– WYSIWYG editors, graphics and illustration programs offer
Web-safe palettes.
• Dithering – browser will substitute color for one of the
missing colors in group of 256
– Cause graphics to look spotty or uneven
Chapter 2: Web Publishing Fundamentals
32
More on Web
Target Audience Expectations
Certain colors have come to symbolize
particular qualities
Keep in mind the qualities generally associated
with different colors when selecting colors for
your Web site
Review several commercial and
noncommercial Web site color schemes
Chapter 2: Web Publishing Fundamentals
33
Web Publishing Issues
Successful Web publishing includes
recognizing the following issues:
– Technical
– Legal and ethical
– Accessibility
– Usability
– Design techniques
Chapter 2: Web Publishing Fundamentals
34
Technical
 Bandwidth is the quantity of data that can be
transmitted in a specific time frame (bits per second)
– Keep file sizes to a minimum
– Adobe Photoshop can decrease image file size
• Thumbnails – miniature photo version that links to larger photos
Differences among browsers
– Graphical vs. Non-graphical display
– Browsers vary in support for HTML, CSS, and JavaScript
• ALT tag – added to <IMG SRC> ATTRIBUTE to describe the
graphic in case the graphics mode in browser is turned off.
Technical Issues
How alternative text works
Web page in
browser with
images turned on
Web page in browser
with images turned
off displaying
alternative text
Chapter 2: Web Publishing Fundamentals
36
More on Web
Technical Issues
Monitor Resolution
– The measure of sharpness and clarity
– A pixel (picture element) is a single point in an
electronic image (96 pixels per inch default)
– Page elements display differently at different
resolutions
– Use percentages instead of pixels to define width
• Solution – use relative width tables (define width with
percentages) as opposed to fixed width tables (define
width with pixels)
Your Turn! (page 57)
Exploring Screen Resolution and Page Layout
1.
2.
Visit the Web Design Chapter 2 Online Companion Web page
scsite.com/web3e/ch2/ and click Barnes & Noble or Amazon.com in
the Your Turn links.
View the Web page using at least three of the following screen resolution
settings: 800 x 600, 1024 x 768, 1280 x 720, and 1280 x 1024.
a.
b.
c.
d.
e.
3.
4.
Right-click the desktop.
Click Personalize on the shortcut menu.
Click Display Setting in the Personalize appearance and sounds window.
Drag the Resolution slider to the desired setting in the Display Settings dialog
box.
Click OK.
Document the difference in the display of each page when viewed
at the different resolutions. Return your monitor to its original
setting when finished.
Write a report discussing how viewing a Web page at different
resolutions can affect Web page design.
Legal and Privacy Issues
Copyright
– Easy to acquire images from the Web
– Make sure the material on your Web site is free of
copyright infringement
• Ownership of intellectual property
– Obtain written permission from the owner to use
any copyrighted material
– Protect your work by copyrighting your material
Chapter 2: Web Publishing Fundamentals
39
Legal and Privacy Issues
Privacy Issues
– Cautiously give out personally identifiable
information (PII)
– Encryption
– Decryption
– Secure Sockets Layer (SSL)
– Cookies
– Privacy policy statement
Chapter 2: Web Publishing Fundamentals
40
Legal and Privacy Issues
Chapter 2: Web Publishing Fundamentals
41
Accessibility and Usability
Issues
More on Web
Web Accessibility
– Consider access by visitors with special needs
• Web Accessibility Initiative (WAI)
– Utilize resources and tools to make your Web
pages more accessible to people with special
needs
– Section 508
More on Web
Chapter 2: Web Publishing Fundamentals
42
Chapter Summary
 Describe the advantages of Web publishing
 Discuss basic Web design principles
 Define the requirements for writing for the Web
 Explain the use of color as a Web design tool
 Identify Web publishing issues
Chapter 2: Web Publishing Fundamentals
43
Case Study # 2
Case Study Page 67
Do steps 1-2 to produce 2 page paper using
Word.
See assignment web page for details.
2
Web Publishing
Fundamentals
Web Design,
3rd Edition