Web Authoring that Works:
Designing Effective Web Sites and Web Pages

Lesson 1:
Designing for Your Audience

By Carolyn Langley, North Carolina Cooperative Extension Service

In Lesson 1, you will learn that designing for your audience is a critical step to designing an effective Web site.

To do this, we will consider the following:

To help you improve your site, we will offer:


Designing an effective Web site requires lots of planning and careful forethought. Many people, organizations, and agencies rush to create a Web site without first defining their goals, considering their audience, knowing what they hope to accomplish or what kind of image they wish to project.

Why do you want a Web site?

The first step in designing an effective Web site is to determine why you want one. What are your goals and objectives? It is important to study your mission and clearly determine what you wish to project and what you hope to accomplish by having a Web site.

Creating a Web site takes time, as well as a commitment to constantly update and maintain the site. Knowing why you are creating a Web site will help you in determining the best design for your site.

Answer some basic questions before you start:


Who is your audience?

The next step in designing an effective Web site is to determine who is likely to use your site and what will attract them to it. In order to communicate effectively with your audience (also referred to as "users" or "visitors"), you will need to define or discover some basic facts about them such as their educational level, age, gender, background and interests

Some questions to ask and answer before designing your Web site:

Begin by learning about Internet users in general. Several institutions have conducted surveys to determine who is using the World Wide Web (WWW). The Georgia Institute of Technology’s College of Computing  WWW User Surveys provides insightful, objective information about growth and trends in Internet usage, including Web demographics, culture, user attitudes and usage patterns.

Once you define your audience, you need to ascertain their Web skills. Generally, sites should be designed for a wide range of skills, from novice to expert. But if you know the bulk of your visitors will be beginners, you will want to keep your site simple and stick to common Internet conventions. Include clear, easy-to-follow instructions near any interactive features. On the other hand, if your visitors are competent, high-end users, you may add more intuitive, complex functionality. 

Keep in mind, however, that all Internet users want to access information easily and quickly, regardless of skill level. 

It is important to anticipate what your user expects to find at your site. For example, does your audience want 

The age of the user should be taken into consideration, too. Children generally desire sites that are more colorful, busy, and interactive. Adults prefer sites with a more subtle color palette and images that are not flashy.

Return to Top


Browser Challenges

Knowing your audience means knowing which browsers they use, because specific browsers display HTML codes differently, sometimes not at all! Some Web page elements work only in the browser for which they were designed. For example, the <blink> tag works only in Netscape. 

To see which browsers support which features, visit Webmonkey's Quick Reference Browser Chart at http://hotwired.lycos.com/webmonkey/reference/browser_chart/.   

Some web designers choose to code specifically for one browser. They may post a warning on their home page that says their Web site is best viewed using Netscape or Internet Explorer, version X. This practice alienates some users because they do not have the necessary browser. Ask yourself, "Is browser- specific coding a viable choice for my organization if we intend to serve all audiences?"

You will learn more about browsers in Lesson 5: Using Web Technology Effectively.

Return to Top


The Plug-In Controversy

Flash, Java, JavaScript, Shockwave and many other applications can add  interesting and dynamic features to a Web site, but their use is controversial. Before adding multimedia features, ask yourself:

    1. Does the technology match my audience?

    2. How technologically savvy is my audience? Do they understand how to download and install the necessary plug-ins to make the technology work?

    3. Is the plug-in free and readily available on the Web?

    4. What am I trying to accomplish by using the plug-in? Can the effect be created without using a special plug-in?

    5. What type of Internet connection is my audience using?

    6. How will the use of the plug-in affect the accessibility of the site? What additional steps must I take to ensure that all audiences can access the information provided by using the plug-in?

Return to Top


Bandwidth Issues

Higher bandwidth options for connecting to the World Wide Web include DSL, ISDN and Cable. However, statistics say that

That means that 60 percent of Internet users connect to the WWW via a dial-up account. Although 40 percent connect at higher speeds, most are direct connections installed at the workplace and not in a home. Higher bandwidth options cost more and in many rural areas higher speed connections simply are not available. Phone lines in many areas have not been upgraded to handle high speed modem connections. 

What does this mean for you as a Web page designer? It means you need to know your audience so that you can design your site to work effectively for them.

The speed of downloading pages is the number-one concern of Internet users.2 Design your pages to download in 8 seconds or less on a 28.8K modem connection.

How to design for low bandwidth:

  1. Limit the number and size of graphics. Use graphics only if they are essential. No graphic should be over 15K. (If you must include a large graphic file, post it on a separate page and link to it. Provide information about the size of the file beside the link, so that users can decide whether or not they want to wait for the download.) Try to keep the number of images to eight or less. The total amount of graphics and text on a page should not exceed 50K. 

  2. Make sure any image you use is "optimized" for the Web. Images should be compressed to the lowest acceptable quality. Scanned images should be saved at 72 dpi (dots per inch). Photographs saved as JPEG images should be compressed to the smallest possible size without losing necessary detail. All images should be cropped to remove unnecessary information and to reduce the file's size. 

  3. Be sure to use the width and height tags within the image source tag to define the size of the image. The use of height and width attributes allows the user’s browser to reserve the exact amount of space needed for each page, and to begin loading the images more quickly. Add ALT (Alternative Text Tag) tags, too, to concisely define the image and accommodate users who turn off graphics. Users sometimes turn off graphics to download pages more quickly, or because they are using assistive technologies such as screen readers for the visually impaired.

  4. "Reuse" images within a Web site. Use the same image files several times within your site. Downloaded image files are stored in the user's cache and will  reload quickly as the user moves from page to page during the Web session.

  5. Split up long pages and provide links to additional information. Ideally, no Web page should be more than four pages long when printed. Keeping to this standard prevents unnecessary scrolling and helps minimize download time. There may be times when you choose not to split a long document in order to facilitate the printing of hard copies. For example, these lessons have been purposely left whole in order for you to easily print them for your files or to use as handouts. 

  6. Add cutting-edge technology with care and forethought. Although it is tempting to add video, sound clips and PowerPoint presentations to your Web site, the majority of your users will not be willing to wait for these large files to download. To meet accessibility standards you must provide alternative ways for people to access information that is presented by means of audio, video or graphics.

  7. Test your site on different speed connections. Keep in mind that according to a recent study by Digital Island, a Web site host and content delivery network, the average time individuals are willing to wait for a page to download is only 8 seconds. Your goal should be to have your Web page load within 4 to 5 seconds!

    If you do not have more than one connection with which to test your site, go to netmechanic.com and use their free test service for one page to get a download estimate. 

  8. Remember that content is "king." People return to Web sites that provide them with the information they desire. No matter how graphically appealing, users will not return to sites that take too long to download.

Return to Top


Tracking Your  Audience

Once your site is online, one of the easiest ways to collect audience information is to use server software that tracks visitors. Even the most basic software will record when the site is accessed, which pages are accessed and the length of the visit, as well as other information that can prove useful as your Web site develops and grows. In addition, server software can let you know which browsers your visitors are using and give you some insight as to the kind of connection they use to access your site. All this information can help you determine if your site is effectively meeting the needs of your users. Evaluation of the server data can help you decide if you need to update, change or add content to your site to meet your audience’s needs.

Some Web sites now require users to register before accessing the site. Visitors have the option of providing information or leaving without getting what they came for. This approach may not be in the best interest of of your organization. The registration process is likely to annoy users, who expect the Web to yield information quickly. Also, few users are willing to give out personal information on non-secure pages. Insisting that users register at your site may reduce visits to your pages.

Many organizations have privacy policies which prohibit gathering personal information via the Web. Check your organization's guidelines before adding features to your site that require users to submit personal information or accept "cookies" (Cookies are messages given to browsers by Web servers. The browsers store the messages in a text files called cookie.txt. A message is sent back to the server each time the browser requests a page from the server. The main purpose of cookies is to identify users.4).

Return to Top


Activities:

Exercise 1: Identifying the audience

Can you determine who the audience for each of the following Web sites is? View each site and note who you feel the targeted audience is. What assumptions have these sites made in regard to their specific audience? (View our answers below in "Examples of effective Web sites: sites that are designed for their audiences.")

1) http://www.kraftfoods.com/

2) http://www.disney.com

3) http://www.monsanto.com/

4). http://www.babycenter.com/

5). http://www.nationalgeographic.com/kids/index.html
http://www.nationalgeographic.com/
Look at both of these pages. Determine how National Geographic has changed the look and feel of its site based upon the audience that it is targeting. List the differences between the two pages.

Exercise 2: Determining your audience

Whether you are planning a Web site or currently maintaining one, knowing who your audience is can help you design and improve the functionality of your site. Choose two Web sites. Complete the following survey about each site. Can you determine what the designer of the site has assumed about the audience? Now try this on one of your own Web pages/sites. If you can't determine the answers to the questions below by viewing your site, additional research may be needed to help better define the audience you are targeting.

1. Within what age range is the targeted audience?

2. What educational level does the designer assume the audience has achieved?

3. What browser is preferred?

4. How technologically savvy is the designer assuming the audience is?

5. What plug-ins are the audiences expected to be using?

6. What kind of information do they think their audience expected to find?

7. What kind of interactivity do they expect?

8. What kind of connection is the audience assumed to be using?

9. Has the designer made the site accessible?

Exercise 3: Plug-ins, browser, and bandwidth issues

Look at the pages below in at least two different browsers, preferably Netscape and Internet Explorer. Load the pages from at least two different locations with different connections (For example: at home with a dial-up modem and at the office with a high speed line such as a T1 line). Take note of the following:

1). Does the page look different in Netscape than in Internet Explorer? Which browser do you think the Web designer created the site with?

2). How long does it take for the page to download over each connection?

3). What plug-ins are required to get the best interactivity?


Examples of effective Web sites:
sites that are designed for their audiences

The following web sites have clearly identified their audience. 

1) http://www.kraftfoods.com/ 
This site is aimed at busy moms who cook with convenience foods. An attempt to bring in diverse cultures is evident in the selection of pictures and recipes. By offering a recipe database that is searchable by ingredients and preparation time, Kraft uses a helpful service to promote its products.

2) http://www.disney.com 
This site is definitely geared to youth and the young at heart, particularly families with children. The lively colors, sound effects, and cartoons all effectively market Disney entertainment, products and vacations.

3) http://www.monsanto.com/ 
This Agribusiness site is geared to the company's customers (food producers) and shareholders. The large graphic of the cornfield combined with the no-nonsense product and financial information convey an impression of high-tech farming.

4). http://www.babycenter.com/ 
This site is geared to expectant mothers and new mothers with infants and toddlers. Note the pastel colors and links to both information and products on the home page. Babycenter is an excellent example of how Web sites can use information to attract visitors and sell products.

Return to Top


Accessibility Issues and Solutions

Is your site accessible to your audience?

Today’s designers must make sure that their Web site meets the needs of all audiences including those who may be disabled. The Americans with Disabilities Act of 1990 requires that access to programs and services be provided to all individuals. According to the NCSU’s website, http://www.ncsu.edu/it/dss/webaccess.html, "Section 508 of the Rehabilitation Act Amendments of 1998 requires that Federal agencies ensure the accessibility of their electronic and information technology, including web-based intranet and internet information and applications. The standards for Section 508 were published in the Federal Register on December 21, 2000, http://www.access-board.gov/sec508/508standards.htm after which agencies now have six months to comply."

This means that the following questions should be asked and addressed if necessary:

  • How does my page appear to blind individuals who are accessing the Web using a screen reader?

  • How does my page look to individuals who are deaf? Is my audio content closed-captioned or transcribed?

  • Do the colors used in my Web page create confusion for individuals who are color-blind?

  • Does the navigation on my site require the use of a mouse?

Accessibility standards

The World Wide Web Consortium's Web Access Initiative (WAI) and the Access Board, a Federal agency committed to accessible design, have provided accessibility standards that every webmaster should review and become familiar with.

Here are the guidelines and standards that are expected. (Used by permission from North Carolina State University’s Web site and prepared by Terry Thompson, Coordinator of Assistive and Information Technology and Tyler Kendall, Web Accessibility Specialist.)

There are currently two primary sets of guidelines/standards for developing accessible web content. The first is the Web Content Accessibility Guidelines (WCAG 1.0), developed by the World Wide Web Consortium's Web Access Initiative (WAI); the second is the Electronic and Information Technology Accessibility Standards developed by The Access Board as required by Section 508 of the Rehabilitation Act Amendments of 1998, described above. The Access Board drew heavily upon the WCAG 1.0 in creating its standards. However, the two sets are not identical. The Access Board worked carefully to use language that is more consistent with enforceable regulatory language. Whether or not state universities are determined to be directly covered by Section 508, its published standards are likely to inform other laws (e.g., the Americans with Disabilities Act) and define "web accessibility" in court.

The following is a complete listing of the Section 508 standards covering Web-based intranet and internet information and applications. For each item, the corresponding WCAG 1.0 checkpoint is provided. All WCAG 1.0 checkpoints are Priority 1 checkpoints (i.e., highest priority on a 3 point scale; violating them means your page will be totally inaccessible to one or more groups). Note that the last five items have no directly corresponding WCAG equivalent.

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (WCAG 1.0 checkpoint 1.1 - Priority 1)

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (WCAG 1.0 checkpoint 1.4 - Priority 1)

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (WCAG 1.0 checkpoint 2.1 - Priority 1)

(d) Documents shall be organized so they are readable without requiring an associated style sheet. (WCAG 1.0 checkpoint 6.1 - Priority 1)

(e) Redundant text links shall be provided for each active region of a server-side image map. (WCAG 1.0 checkpoint 1.2 - Priority 1)

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (WCAG 1.0 checkpoint 9.1 - Priority 1)

(g) Row and column headers shall be identified for data tables. (WCAG 1.0 checkpoint 5.1 - Priority 1)

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (WCAG 1.0 checkpoint 5.2 - Priority 1)

(i) Frames shall be titled with text that facilitates frame identification and navigation. (WCAG 1.0 checkpoint 12.1 - Priority 1)

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (WCAG 1.0 checkpoint 7.1 - Priority 1)

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. (WCAG 1.0 checkpoint 11.4 - Priority 1)

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (No directly corresponding WCAG 1.0 checkpoint)

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (No directly corresponding WCAG 1.0 checkpoint)

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (No directly corresponding WCAG 1.0 checkpoint)

(o) A method shall be provided that permits users to skip repetitive navigation links. (No directly corresponding WCAG 1.0 checkpoint)

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. (No directly corresponding WCAG 1.0 checkpoint)

The full text of Electronic and Information Technology Accessibility Standards is available at The Access Board's web site: http://www.access-board.gov/sec508/508standards.htm

The Web Content Accessibility Guidelines (WCAG 1.0) and many other valuable resources on this topic are available from the WAI web site: http://www.w3.org/WAI/"

For an on-line lesson in making your web site accessible visit the Land Grant Training Alliances Web Accessibility Course Site at http://www.lgta.org/accessibility/.

Exercise: Measuring accessibility

(Tools taken from NCSU Web Accessibility page by permission)

Choose at least two Web pages to test the accessibility of the site using at least two of the following validation tools.

1). Bobby is a Web accessibility assessment tool developed by the Center for Applied Special Technology (CAST), and is available through a Web interface or as downloadable software. Bobby will check your Web page(s) for accessibility, and provide a detailed report showing specific areas needing improvement, including HTML code. The current version of Bobby is based upon WCAG 1.0, so is not entirely compatible with the Section 508 standards.

http://www.cast.org/bobby

2). WAVE (Web Accessibility Versatile Evaluator) is a Web-based application developed at The Institute on Disabilities at Temple University. It's similar to Bobby, but its output focuses on the GUI web page, rather than on the HTML code, so it may be easier for some content developers to use. It also identifies the reading order of all the elements on the page, which Bobby does not. One drawback is that it only works with single pages, and doesn't yet have the ability to spider entire sites.

http://www.temple.edu/inst_disabilities/piat/wave/

3). A-Prompt was collaboratively developed by the Adaptive Technology Resource Centre (ATRC) at the University of Toronto and the TRACE Center at the University of Wisconsin. Version 1.0.5 of the A-Prompt toolkit is currently available in beta, and the A-Prompt folks are working with developers to incorporate the tool into future releases of major web editor and courseware products. Its distinguishing feature is its accessibility wizard, which prompts developers with specific recommended fixes.

http://aprompt.snow.utoronto.ca/

 

Resources:

World Wide Web:

Print Resources:


Footnotes

1Design: Demographics, Web Design Guide
2
Performance, ZDNet Reviews
3Ibid
4Webopedia, INT Media Group, www.internet.com

Return to the main index.