Designing Web Pages and Sites

1
Designing Web Pages and Sites

• Topics we will discuss (over the next few weeks)
• Web page design
• Focuses on individual pages
• Eye appeal and layout tips and tricks.
• Web site design
• Focuses on making groups of pages work together
• Overall content, organization of information, and
  navigation
• Web site management
• Focuses on organizing and maintaining the site
  over time.
• Tracking revisions, adding and deleting pages,
  and keeping content consistent
• Borrows freely from material provided by Lovisa
  Parks, and Joel Sklar
• Chapters 4 and 5 in Lehnert text.

2
Web Page Design Process

• Goal of site and site name chosen
• Site-wide features proposed
• Individual page content developed
• Individual page layouts developed
• Trial viewings
• Publication

3
Features of a Good Web Page

• Quality Content
• Meets your needs.
• Meets your intended audiences needs
• Is accurate and complete (are those links up to
  date?)
• Reader Convenience
• Is the download time acceptable?
• Formats are generic enough for many browsers and
  user preferences
• Multiple versions of the site, or parts of it,
  provided when appropriate
• Artistic Composition
• Pleasing to look at.
• Color combinations are web-safe.
• Visually intriguing without being busy.

4
Paper Based Reading Pattern
5
Screen Based Viewing Pattern
6
Relative Areas of Screen Importance
2
5
1
3
4
7
Relative Areas of Screen Importance

• Most important information
• Navigation banner logo
• Dynamic area
• Reading content area
• Consistent links

8
(No Transcript)
9
(No Transcript)
10
Three Features of a Good Web Site

• Organized Content
• Presents all the information you want to present
  when and where you wanted to present it.
• Displays enough of the organization for readers
  to understand what each section will contain
  without having to visit each section.
• Is accurate and complete (are those links up to
  date?)
• Reader Convenience
• Clear and consistent navigation throughout.
• Formats are generic enough for many browsers and
  user preferences
• Multiple versions of the site, or parts of it,
  are often used
• Links to other sites placed appropriately and
  match context.
• Artistic Composition
• Pleasing to look at.
• Color combinations are web-safe.
• Visually intriguing without being busy.

11
Organization Overall Goal?

• Commercial You want to advertise your product
  and make it easy for people to give you money.
• Front page loads quickly so people take a look at
  the product.
• Follow on pages organize product lines and
  provide information on which product is best for
  the consumer and why.
• Keep your customer safe.
• Be accessible. Make it easy to pay over the net
  by using internet billing services. Have a phone
  number and real address.
• Informational You want to provide clear,
  concise information on the topic.
• Sketch the main topics of importance on the front
  page, with links to major subsections
• Be a resource by providing plenty of links to
  related sites (web ring)
• Personal
• Do what you want, but the above rules are still
  good guidelines.

12
Four Things Every Web Site Should Have

• A clear method of navigation
• Side bar vs bottom of page vs clickable
  images,etc
• A Site Map
• Visible, top level description of your site.
• A Repository
• Non-visible document used by the web site
  developer.
• A Links Page
• Links external to your site, but related to your
  site.

13
Navigation

• The specific manner of navigation is not
  important.
• What is important
• Clear to the user.
• Consistent throughout the site.
• Methods
• Sidebar allows a list of links to be kept to one
  side while the rest of the page changes.
• Navigation headers can be at the top or bottom of
  each page.
• Clickable images can be anywhere, but it must be
  clear that they are a navigation tool. ( ie
  NEXT )

14
Organization Site Maps and Repositories

• A site map is a graphical map of your entire web
  site made visible to the viewer.
• Make accessible from the front page (or from all
  pages)
• Provides top level information about each section
  of the site.
• There is no single "correct" way to do a site
  map.
• A repository is a web management document used by
  the web developer to track changes - not for
  public viewing.
• Web sites must constantly change to survive.
• Tracking and maintaining the individual changes
  to individual pages can be tricky.
• Even a simple web site usually has three
  versions published, back-up, and in development.

15
Site Map
home.html
menu.html
topic1.html
topic3.html
topic2.html
concept1.html
concept2.html
concept3.html
16
Repositories

• Repositories contain
• A listing of the individual filenames and version
  numbers comprising the web site.
• A list of to and from links for each page.
• Information about the page (author, composing
  software)
• They may contain historical information on
  previous versions of the site.
• No actual content.
• Useful for
• Verifying the latest and greatest is published
  and viewable.
• Managing major site overhauls that may occur in
  phases.
• Verifying that links are consistent throughout
  the site, especially for removing old, dead links
  and replacing with new ones.

17
The Links Page

• You probably wont be able to say everything
  there is about your topic. A links page provides
  links to other web sites.
• Adding links to other web pages does good things
  for you
• You become a resource, and your web site gets
  visited more often.
• You become an authority.
• Keeping links on a single page does good things
  for you
• Separates the links from your content to minimize
  disruptions.
• makes it clear to the user when they are leaving
  your site.
• One way to increase traffic to your web site is
  to exchange links with others who have web sites
  related to yours.
• Web rings are communities of web pages focused on
  a single topic