Joel Reedy and Shauna Schullo

1
Chapter 11

• Web Site Design

2
Web Site Design, Both Simple and Complex

• A Web site is a file of information residing on a
  server connected by an address to the World Wide
  Web
• A Web site may include text, color, photographs,
  illustrations, music, motion, or other computer
  programs
• On the Web site are smaller files called Web
  pages that are accessed by clicking on
  hyperlinks, usually colored text, pictures, or
  icons of instructions directing the computer to
  other pages on Web sites

3
Web Site Design, Both Simple and Complex

• In designing a Web site, the marketer must be
  prepared to answer questions
• What is the purpose of the Web site?
• Is the site a primary or supporting vehicle?
• Should it provide exposure, house publicity
  articles, support retailers or field sales
  representatives?
• Who will be reading your pages?
• Should the graphics be fast-paced for a younger
  market or more conservative for a middle-aged
  viewer?
• Should you include sound or motion?

4
Web Site Design, Both Simple and Complex

• Questions Continued
• What types of computers will the typical user be
  using?
• What browser software will they have access to
  and how fast are their connections to the
  Internet?
• What search engines does the market prefer?
• Will they be viewing the site with a color or
  black and white monitor?
• What size screen will they be using?

5
Web Site Design, Both Simple and Complex

• Once these questions have been answered, a design
  should be created for a working plan
• Web pages are created with a very simple
  text-based scripting language called Hypertext
  Markup Language (HTML)

6
Issues of Web Site Design

• There are basically three stages to the design of
  a Web site
• The analysis phase
• The design phase
• The building phase

7
Issues of Web Site Design

• The analysis phase is important to the
  development process because it provides proper
  background for the designer in setting the
  content of the site to communicate with target
  markets
• The marketer must identify the audience
• Technology levels of the audience must be
  determined
• Decide on the media elements that should be
  included in the Web site

8
Issues of Web Site Design

• The analysis phase continued
• What does the marketer want to accomplish with
  this Web site?
• Provide information?
• Collect information?
• Communicate with your markets in other ways than
  the Web?
• What marketing purpose will the Web site serve?

9
Issues of Web Site Design

• The actions of the design phase
• Make an outline of the topics that should be
  included
• Determine what information needs to be gathered
• Determine the order in which it is to be
  presented
• Decide what items or information are most
  important to the markets and present it first or
  display it prominently

10
Issues of Web Site Design

• The next aspect of the design phase is to plan
  how to structure the Web site think efficiency
• Do not require the user to click too many times
• Decide if the site will be kept simple with a few
  textual links create a graphical interface that
  uses buttons or icons to navigate throughout
• The flow of the Web site will be crucial in
  keeping the audience interested and connected

11
Issues of Web Site Design

• Design Phase Continued
• Limit graphical elements on the opening Web page
  to one screen
• Extra media elements such as graphics, movies,
  sounds, and animation will make the site larger,
  unwieldy, and harder for someone with a slow
  connection to use
• Choose graphics, sounds, and motions only if they
  are appropriate to your market and make the site
  stronger

12
Issues of Web Site Design

• When you begin to develop the actual appearance
  and feel of the site, there are many things that
  the marketer needs to consider
• What skill level does the consumer need to learn
  in order to navigate your site?
• How will the site grab the viewers attention?
• How will the site intrigue the consumer to see,
  do, or buy the sites offering?

13
Issues of Web Site Design

• Flow is a function of control, content, and
  motivational characteristics of a Web site
• The consumer is hooked and wants to continue
  investigating the site that has caught his
  attention
• Interactivity is the key intimacy with the
  customer grows through interactivity

14
Issues of Web Site Design

• Attract the customers attention by creating a
  site that is
• Easy to use and understand
• Fun and fast
• Personalized
• Comprehensive
• Highly visual
• Easy to navigate

15
Issues of Web Site Design

• The marketer can catch the consumers attention
  with content that is well structured and enticing
• Hyperlinks make interacting with a Web site easy

16
Creating HTML Documents The Language of the Web

• Hypertext Markup Language (HTML) is the scripting
  language in which documents seen on the Web are
  written
• Web documents contain content that is then
  interpreted by Web browsers such as Netscape or
  Internet Explorer
• The content consists of codes called tags or
  elements with attributes that tell the
  computer what to show on the screen

17
Creating HTML Documents The Language of the Web

• HTML editors are available to make the job of
  creating a Web page much easier
• In addition to full HTML editing programs, many
  word processors and other software programs now
  have the ability to Save As HTML.

18
HTML Standards and Practice

• If these standards and practices of HTML are
  followed, the Web pages will work with most of
  the current browsers
• Good HTML follows the current versions of HTML,
  as specified in the HTML DTD (Document Type
  Definition)
• Bad HTML is considered to be documents that
  ignore standard practices
• Tags are the instructions that the computer is
  looking for to decipher what the codes
  instructions are

19
HTML Standards and Practice

• There are different types of tags or elements,
  but they all have one or two basic structures
• Container tags
• Tags that stand on their own

20
HTML Standards and Practice

• Now that you are getting the idea of how things
  work, you need to be aware of what should be on
  every Web page
• Head section
• Page title
• Signature or contact information
• The title is the Uniform Resource Locator (URL)
  that is the address of your page on the Web

21
HTML Standards and Practice

• Memorable titles serve three major purposes
• Titles are used by applications such as searches
  and indexes to identify the page
• Titles act as indicators of what to expect
• Titles are at the top of the HTML document giving
  the viewer an easy visual clue to identify the
  source files quickly when changes or corrections
  are need

22
HTML Standards and Practice

• The signature is usually at the end of the
  document but before the lt/HTMLgt tag
• The ltHEADgt section making it searchable
• The Head section defines the function of the
  document and adds a quick reference for the Web
  browsers
• The ltMETAgt tag contains information about the
  document, such as keywords, expiration dates,
  author, page generation, software used, and many
  other document-specific items and is important
  when the marketer wants the document to be found
  in searching keywords

23
HTML Standards and Practice

• The ltBODYgt section holding it all together
• The body of HTML documents contains the majority
  of your information
• The body tags form a container (ltgt) that
  encloses the content of HTML document

24
HTML Standards and Practice

• Formatting the page making it look good
• HTML provides many tags that can be used to
  format text to allow for uniqueness and
  creativity
• Text level formatting can occur in multiple ways
• Using HTML, the marketer can format the actual
  font properties, describing how the text is being
  used
• Additional formatting of text can be in a
  block-level format
• For more sophisticated text layout, the marketer
  could use formatting styles for lists and table

25
HTML Standards and Practice

• Definition lists provide for a dictionary
  entry-like format
• The caption tag is a container tag that specifies
  a caption for the table
• Hyperlinks let the designer move from one place
  to another on the Internet or within a Web site
  by maneuvering the mouse
• To add the visual appeal necessary to make the
  site attractive to the market, images and image
  maps are used

26
HTML Standards and Practice

• An image map consists of four basic components
• An image map program that resides on the server
  in the CGI-bin directory
• A graphic image file saved in a .gif format for
  the user to click on
• A map file to give information that will divert
  points on the image into URLs
• An HTML file to link the image and the map file

27
HTML Standards and Practice

• Image maps come in two styles
• Server side
• Client side
• When a user clicks on a server-side image map,
  the server interprets the coordinates that the
  browser sends using a program on the server
• With client-side image maps, the browser
  processes the information from the users click
  instead of sending it to the server for
  interpretation

28
HTML Standards and Practice

• For lessons in what not to do in Web page design,
  the site with an attitude is Web Pages That
  Suck (www.webpagesthatsuck.com)
• Testing the Web Site is a very important step in
  the process of creating an effective marketing
  tool
• To get a certain effect, the marketer will need
  to test the pages on multiple browsers this is a
  good way to double check the functionality of the
  site
• Then and only then, notify the world that the
  site is online

29
HTML Standards and Practice

• Be sure to register the site
• Hire a service to register the site since there
  are more than two hundred search engines to
  consider
• Pick and choose the search engines by doing the
  registration yourself with InterNIC