Web Site Design
Modified by Linda Kenney
April 6, 2008
Page 1
4/8/2020
Learning Objectives
• Learn the basics about copyright law and the
Web.
• Learn the fundamentals of Web page design.
Page 2
4/8/2020
You already know
• how to add absolute URLs, relative
•
•
•
•
links, mail links, and internal links using
named anchors to your Web pages
how to add pictures and colors to a
Web page
how to use tables
how to publish a Web page
about browser-safe colors
Page 3
4/8/2020
Copyright Basics
• It’s very easy to capture content (text, images,
video/audio files) from the Web.
• These same items can just as easily be placed
onto your Web page.
• Everything you see/hear over the Internet
is copyrighted, whether it explicitly says so
or not!
• Technically speaking, you can use content from
other sources only when you have explicit
permission to do so.
Page 4
4/8/2020
Copyright Basics (cont.)
• Content from public domain sites is available for
use.
• Some sites grant explicit permission to use their
content, as long as it is not used in a commercial
product.
• Most everything from a government Web site is in
the public domain.
• Always acknowledge the source of any copied
Page 5
material
on your Web page.
4/8/2020
Copyright Basics (cont.)
• Consult Appendix D for further
information about copyright law.
Page 6
4/8/2020
Copyright Basics (cont.)
• Authors and inventors have exclusive right to
their respective writing and discoveries for a
limited time.
• Usually during their lifetime; heirs may extend
the copyright for another 70 years.
• A copyright protects the creator’s economic
interest and the integrity of the work.
Page 7
4/8/2020
Possible copyright statements:
• Permission is granted to freely copy this
document in electronic form or in print as long
as you’re not selling it. On the WWW you must
link here rather than put it on your own page.
• This work may be redistributed freely, in whole
or in part, but cannot be sold or used for profit
or as part of a product or service that is sold for
profit.
•
NOTE: You still must identify the author, source, and
publisher (if there is one).
Page 8
4/8/2020
Copyright Basics (cont.)
• To reference another web page, make a
link to it. Do not copy the entire page
onto your server.
• Do NOT, however, link directly to
images. This is known as deep linking.
– What should you do instead?
• Do not alter downloaded images.
Page 9
4/8/2020
Fair Use Guidelines
• See page 858 - 859
Page 10
4/8/2020
Planning Your Web Page
• Think about the theme or purpose of your Web
page.
– What about the target audience?
• Think about what you want to place on your
page, and the source of the material you will
use.
• Ensure that your content is consistent with your
theme.
Page 11
4/8/2020
Planning Your Web Page (cont.)
• Then consider the organization of this
content.
• Create a storyboard.
• The storyboard shows the layout of the
material you plan to place on your Web page.
Page 12
4/8/2020
Planning Your Web Page (cont.)
Page 13
4/8/2020
Web Site Organization
• Hierarchical
• Linear
• Random (sometimes called Web
Organization)
Page 14
4/8/2020
Hierarchical Organization
• Characterized by a
clearly defined home
page with links to
major site sections
• Often used for
commercial and
corporate web sites
Page 15
4/8/2020
Hierarchical -- Too Shallow
• Be careful that the organization is not too
shallow.
– This provides too many choices and could result in
a confusing and less usable web site
Page 16
4/8/2020
Hierarchical
-- Too Deep
• Be careful that the organization
is not too deep.
– This results in many “clicks”
needed to drill down to the
needed page.
– User Interface “Three Click Rule”
• A web page visitor should be able
to get from any page on your site
to any other page on your site
with a maximum of three
hyperlinks.
Page 17
4/8/2020
See
http://memory.loc.gov/ammem/gmdhtml/gmdhome.html
What are good points?
What are some problems?
Page 18
4/8/2020
Linear Organization
• Used when the purpose of a site or
series of pages on a site is to provide
a tutorial, tour, or presentation that
needs to be viewed in a sequential
fashion.
Page 19
4/8/2020
Linear Organization Example
• http://echoecho.com/javascript.htm
Page 20
4/8/2020
Random Organization
• Sometimes called “Web”
Organization
• Utilized when there is no
clear path through the site
• May be used with artistic
or concept sites
• Generally not used for
commercial web sites.
Page 21
4/8/2020
Random Organization example
• http://www.leoburnett.ca/
Page 22
4/8/2020
Design Principles
• Repetition
– Repeat visual elements throughout design.
• Contrast
– Add visual excitement and draw attention.
• Proximity
– Group related items.
• Alignment
– Align elements to create visual unity.
Page 23
4/8/2020
Web Site Navigation
Best Practices
• Make your site easy to navigate
– Provide clearly labeled navigation in the same location on
each page.
– Most common – across top or down left side
• Another option is “breadcrumb” navigation
Examples:
http://usability.about.com/od/aboutusability/p/Breadcrumbs.htm
Page 24
4/8/2020
Web Site Navigation
Best Practices (cont.)
• Types of Navigation
– Graphics-based
– Text-based
– Interactive Navigation
Technologies
• DHTML
• Java Applet
• Flash
Page 25
4/8/2020
See
http://www.dot.gov/
What are good points?
What are some problems?
Page 26
4/8/2020
See
http://www.usdoj.gov/
Note contrasting links for current page.
Page 27
4/8/2020
Web Site Navigation
Best Practices (cont.)
• Accessibility Tip
– When graphics, DHTML, a Java Applet, or
Flash is used for the main navigation of a
web site, provide clear text-based links on
the bottom of each page.
Page 28
4/8/2020
Creating a Graphical Navigation Bar
• A table can be used to create a
graphical navigation bar.
• Insert each section into a single row
table with zero border, spacing, and
padding.
• Convert each image section into a link.
Page 29
4/8/2020
More Web Site Navigation
Best Practices
• Use a Table of Contents (with links to other parts of the
page) for long pages.
(for example, the class web sites page -http://pubpages.unh.edu/~ltv6/cs403/resource/web.html
• Consider breaking long pages into multiple shorter pages.
• Large sites may benefit from a site map or site search
feature.
http://www.conferences.unh.edu/sitemap.html
Page 30
4/8/2020
See
http://www.starbucks.com/
Page 31
4/8/2020
Web Page Design
Load Time
• Watch the load time of your pages.
• Try to limit web page document and associated
media to under 60K on the home page and 100K
on other pages.
• Why should your home page be smaller than the
other pages?
Page 32
4/8/2020
Web Page Design
Target Audience
• Design for your target audience.
– Appropriate reading level of text
– Appropriate use of color
– Appropriate use of animation
Page 33
4/8/2020
Web Page Design
Colors & Animation
• Use colors and animation that appeal to your
target audience.
– Kids
• What?
– College students
• What?
– Older users
• What?
– Everyone:
• Good contrast between background and text
• Avoid animation if it makes the page load too slowly.
Page 34
4/8/2020
Web Page Design
Browser Compatibility
• Web pages do NOT look the same in all the major
browsers
• Test with current and recent versions of:
– Internet Explorer
– Firefox, Mozilla
– Opera
– Mac versions
• Design to look best in one browser and degrade gracefully
(look OK) in others
Page 35
4/8/2020
Web Page Design
Screen Resolution
• Test at various screen resolutions
– Most widely used: 1024x768 and 800x600
• Design to look good at various screen
resolutions
Page 36
4/8/2020
Web Page Design
More Best Practices
• Page layout design
• Text design
• Graphic design
• Accessibility considerations
Page 37
4/8/2020
Web Page Design
Page Layout
• Place the most important information "above
the fold“ (the area before the user scrolls).
• Use adequate "white" or blank space.
• Avoid horizontal scrolling.
• Use an interesting page layout.
Page 38
4/8/2020
Page Layout (cont.)
This is usable, but a little boring.
See the next slide for improvements in page layout.
Page 39
4/8/2020
Page Layout (cont.)
Columns make the page more interesting and it’s
easier to read this way.
Better
Page 40
4/8/2020
Page Layout (cont.)
Columns of different widths interspersed with graphics
and headings create the most interesting, easy to read
page.
Best
Page 41
4/8/2020
Page Layout Design
Techniques --Ice Design
– AKA rigid or fixed design
– Fixed-width, usually at left margin
– Examples:
– http://www.shire.net/learnwebdesign/index.html
– http://www.w3schools.com/
Page 42
4/8/2020
Page Layout Design
Techniques -- Jello Design
– Page content typically centered and often configured with a
table of percentage width.
– Even margins on both sides.
– Examples:
http://www.officemax.com/
http://www.pbs.org/
http://www.cnn.com/
http://www.ebay.com/
Page 43
4/8/2020
Page Layout Design
Techniques -- Liquid Design
– Page expands to fill the browser at all resolutions.
Often configured with a table width of 100%
– New Trend: Use CSS to configure liquid design page
layout.
– Examples:
http://www.illinois.gov/tech/
http://www.digital-web.com/
Page 44
4/8/2020
Important Web Page “Requirements” (1)
• Basic Elements
– Descriptive title (Keep it short but accurate.)
– Include your name and contact info (e-mail)
– Show the creation/modification date
– Use pictures to highlight and emphasize the
purpose of the page.
– Provide navigational content if multiple pages are
used.
Page 45
4/8/2020
Important Web Page “Requirements” (2)
• Design & Organization Recommendations
– Put the most interesting/important info at the top
of the page.
– Keep the image files small and few. Use
thumbnail image links to full size images if there
are many.
– Add alternate text to your images. Not all the
Web page visitors are sighted. The alternate text
will clue them in about the purpose of the picture.
– Use browser-safe colors. Non-standard colors
may appear differently on other systems.
Page 46
4/8/2020
Important Web Page “Requirements” (3)
• Design & Organization Recommendations
– Use the default fonts. Specialty fonts may not be
installed on the viewer’s computer - so an
alternate font will be used, potentially affecting
the impact of your page.
– Use only a few fonts. The display may become
too “busy”.
– Use a style sheet. Separate display info from
content. This simplifies cosmetic changes.
– Use subtitles and headings to break up content.
Page 47
4/8/2020
Important Web Page “Requirements” (4)
• Design & Organization Recommendations
– Use the spell checker! TextPad vs. Notepad
– Preview/test your page. Nothing is more
frustrating than a Web page that is incomplete
because the author failed to fix display issues.
– Write, view and test all Web pages before
installing them on a Web server.
– Make sure you test them again once you have
uploaded them to your server.
Page 48
4/8/2020
Important Web Page “Requirements” (5)
• Keep download times short.
• Make your pages portable! (Use
relative links!)
Page 49
4/8/2020
Check your work.
• Validate. http://validator.w3.org
Page 50
4/8/2020
A Web Site Construction
Checklist
• Remember the three C’s of Web page
design:
– quality Content
– reader Convenience
– artistic Composition.
Page 51
4/8/2020
Best Practices Checklist
Table 7.1 in Web Developer & Design
Foundations with XHTML , (p. 303-305)
http://terrymorris.net/bestpractices
•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility
Page 52
4/8/2020
Information from
,
• Web 101 ,Third Edition by Wendy G. Lehnert &
Richard L. Kopec (Addison Wesley)
• Web Developer & Design Foundations with XHTML ,
Third Edition, by Terry Felke-Morris (Addison Wesley)
Page 53
4/8/2020