Building Web Sites All-in-One For Dummies, 2nd Edition

by Doug Sahlin and Claudia Snell

Wiley Publishing, Inc.. (c) 2009. Copying Prohibited.

Reprinted for Sushil R Andre, IBM

sushil.andre@in.ibm.com

Reprinted with permission as a subscription benefit of Books24x7,

http://www.books24x7.com/

All rights reserved. Reproduction and/or distribution in whole or in part in

electronic,paper or other forms without written permission is prohibited.
 i

Table of Contents
Chapter 4: Creating Relevant Site Content...................................................................................1
In This Chapter......................................................................................................................1
Portraying Your Client's Company.........................................................................................1
Defining your client's voice...............................................................................................1
Developing your client's look............................................................................................2
Selling Goods or Services......................................................................................................3
Emphasizing key points...................................................................................................3
Highlighting the product...................................................................................................4
Providing Information.............................................................................................................5
Handling large amounts of content..................................................................................5
Presenting information.....................................................................................................6
Including e‐learning materials.........................................................................................9
Using Personas to Develop Content....................................................................................10
Defining your client's customers....................................................................................10
Delivering what they want..............................................................................................11
 Chapter 4: Creating Relevant Site Content
In This Chapter
• Putting the company in a favorable light

• Offering information

• Developing content

A Web site is a very important thing. At least, it better be. When you're hired to create a Web site,
you're creating a worldwide presence for your client. As a Web designer, you do your best to create
a site that portrays your client's business or service at its best. It's a two‐way street, though. You
can be the best designer in the world, but if your client doesn't know what he wants or needs for his
Web site, your best design efforts are in vain. A Web site is all about marketing a company, product,
or service. It's an extension of the client's bricks‐and‐mortar business (if he has one). If not, the
Web site serves as the identity for your client's business. Your job as a designer is to work with the
client in order to portray his company in the best possible light. This chapter gives you some
information that you can use to guide your client in the right direction.

Portraying Your Client's Company

When you develop a Web site for a client, you're presenting your customer's professional image for
the world to see. Your client might sell goods or services or provide information for customers. A
Web site works 24/7 and has the potential for drawing a worldwide audience. The organization
portrayed on the Web site might or might not have a bricks‐and‐mortar location where it does
business. Even if it does have a bricks‐and‐mortar business, that won't matter to an audience
whose opinion of the company is defined by its Web site. Therefore, it's paramount that you paint
the best portrait possible when you create a Web site for a client.

Defining your client's voice

Your client's voice encompasses many things: the manner in which your client does business, your
client's mission, the image your client portrays to his customers, and so on. When you define your
client's voice through a Web site, you're answering the question: Do I want to do business with this
company or individual? To gain the trust of Web site visitors, the site must leave a positive
impression. But more than that, the site should be unique enough to stand out against the client's
competition.

Most of your client's serious competitors probably have Web sites. And it's almost a given that Web
sites within a certain industry will have a common look. Therefore, the only way you can make your
client's site rise above the competition is to portray your client's unique assets — the client's voice, if
you will. When defining the voice of a company, the message you portray on the Web should be
consistent with the client's other communications, such as printed ads, television commercials, and
audio advertisements. If your client has a startup company, the Web site helps define the client's
essence. To define this intangible, you need to brainstorm with your client and consider the
following:

• Audience: Who is the client's intended audience? What's unique about your client's
intended audience? How do you portray your client as part of this unique group of
individuals? What type of message does the Web site need to deliver to set your client apart
from his competition, in the eyes of his intended audience?

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 2

• Mission: What is your client's intended mission? How does your client plan to serve the
intended audience? When defining the client's mission, steer clear of the usual clichés, such
as highest quality, superior service, satisfied customers, and so on. Choose more
sophisticated wording to make your client stand out from his competition. In addition to
instilling confidence in your client's intended audience, his mission statement must portray
his unique core values. You can augment the mission statement with testimonials from your
client's satisfied customers.

• Style: What is your client's style? Is she an entrepreneur? Where does the client fall in the
broad spectrum of similar businesses? Is she smack‐dab in the middle? Is she
conservative, or bold and brash?

• Customers: How do your client's customers perceive her? The competitors? Do the
answers to these questions match your client's perception of herself and her business?

• Goals: Where does your client see herself in five or ten years? Will the message your client
portrays now be viable in five or ten years?

Armed with this information, you and your client can begin making some decisions about how you'll
portray the company on the Web. While you're at it, have the client distill the information into a few
paragraphs that describe the company, its core values, and future vision. You can incorporate this
information into an effective mission statement. If the client already has a mission statement for his
business, use it on the Web site. There's no need to reinvent the wheel.

Developing your client's look

After you and the client define her voice, think of how you'll incorporate this with the Web site you
create. In essence, you're defining your client's look on the Web. The amount of creativity you can
employ in defining your client's look on the Web depends on whether the client has an established,
bricks‐and‐mortar business, and here's why.

If your client has an established bricks‐and‐mortar business, you need to create a Web site with a
similar look and feel. The site has to incorporate the client's logo and images used in corporate
brochures and advertising. Your client's presence on the Web is defined by how well you assimilate
your client's bricks‐and‐mortar look with your Web design. When you're designing a Web site for a
client who has already established a look, ask yourself these questions:

• Does the Web site have the look and feel of the client's bricks‐and‐mortar business?
When established customers visit the Web site, the site should seem like an extension of the
client's bricks‐and‐mortar business. The design should feel right to the client as well as to
his customers. In addition, you should incorporate your client's logo in the design. The site
colors should be harmonious with the colors used in the customer's logo.

• Does the design effectively portray the client's voice? The design you create needs to
portray the client's manner of doing business, his mission statement, and his style of doing
business. Your design must also be consistent with the expectations of the client's current
customers and intended audience.

• Can the design be modified to fit the client's goals and needs? If your client's long‐term
goals are substantially different than current goals, you'll probably end up doing a complete
redesign at some point in the future. However, if your client's goals are to grow and increase
his customer base with the same or similar product offerings, your initial design has to be
flexible enough to incorporate future expansion, such as the addition of new sections,
changes in product lines, and so on.
Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 3

If you're designing a site for a client that will do business only on the Web, you have considerably
more leeway when developing that client's look. With the client's help, you can establish the client's
Web presence. If the client already has a logo, you use this as a starting point. The colors in the
client's logo help define the color palette you use to design the Web site. After deciding on the color
palette, your next step is to assimilate graphics into the design. If the client is a solopreneur (runs a
one‐person business) or has a small business, you can make the business seem larger than life
with the creative use of clip art. If your client is an aggressive businessperson, you can depict your
client's style of doing business with the creative use of color, fonts, and bold graphics. The finished
site must effectively communicate your client's mission, goals, and style of doing business in the
most positive manner. The design in Figure 4.1 incorporates the colors from the client's logo.

Figure 4.1: Create a site that portrays the client's voice.

Selling Goods or Services

If you're creating a site that sells goods or services, your goal is to create a compelling site that
piques customer curiosity and instills customer confidence. A lot of snake oil salesmen lurk on the
Web, and buyers definitely err on the side of caution. Therefore, your job as a designer is to instill
trust in your client's potential customer base while also bringing the product or service to the
forefront of the visitor's mind, hopefully resulting in a click of one or more Buy Now buttons. It's a
shame that Buy Now buttons don't make a “cha‐ching” noise your client can hear, as this would be
music to his ears.

Emphasizing key points

When you sell a product or service online, design your pages in such a manner as to instill
customer confidence while emphasizing the key points of your client's product or service. The old,
Zen‐like maxim of “Less is more” definitely applies here. Instead of barraging the Web site visitor
with each and every subtle nuance about the product, point out major features of a product without
engaging the visitor in several paragraphs of text. You can easily sum up a product line by showing
the key points about a product in a succinct paragraph or two. Better yet, use bullet lists to
emphasize the key points of a product line. Your goal is to pique the buyer's curiosity and get her to
take action.

You can also emphasize key points by using different colors for text, using formatting (such as bold
or italic), and so on. If you're using bullet points, consider boldfacing the word(s) that define the
bullet point and perhaps using a different color text. If you use a different color text to emphasize a
Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 4

key point, choose a color that is harmonious with the design. (See Figure 4.2.)

Figure 4.2: List major points to pique viewer curiosity.

The same rules apply when you're presenting information about a service. Emphasize the service
with bold text and an introductory sentence followed by bullet points. To emphasize the key points
of the service, use a different color for the text of the key points. This directs the viewer's eye to the
most important information.

Highlighting the product

Whether the goal of a Web site is to sell products or present information about a product, your
design should make that readily apparent to the viewer. When working with products, obtain
high‐quality images from your client. If your client sends you pixilated images that have been
severely compressed, ask the customer for the originals and then optimize them in Photoshop or
Fireworks. Armed with good pictures, you can then employ other methods to highlight the product.

If you're dealing with a complex product line, devote a single page to each product. Including too
many products on a single page dilutes the effectiveness of the message. Figure 4.3 shows a
product page. The product image is the highlight of the page, followed by a paragraph of concise
text that tells visitors key information about the product.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 5

Figure 4.3: Highlight a single product on a Web page.

Providing Information
If your client's goal is to provide only information about his services, you'll create a site that provides
information about the client's products or services but with (understandably) no option to purchase
the product or service online. When you create an information‐driven Web site, you use text or
brochures supplied by the client to create the content for the site. You might also assimilate
information created by others, such as articles or multimedia content. And, of course, you need
high‐quality images of your client, his services, and his products. As far as accuracy of the material
goes, the client is responsible for that. You, however, are responsible for providing the information
via your Web design in an easy‐to‐digest and understand manner.

Handling large amounts of content

If your client has copious amounts of information to dispense through his Web site, you have a
challenge on your hands. The attention span of most Web site visitors is less than a New York
minute — and we all know how short that is — which means visitors aren't going to read pages with
a lot of text. It's your job as a designer to break the information down into easily digestible, bite‐size
pieces. Here are a few techniques you can use to achieve that goal:

• Break large amounts of text into several pages.

• Intersperse images with the text to break up the content.

• Break up large amounts of text with headlines that visitors can use to ascertain
whether they want to read the content. Savvy Web surfers also use headlines to get the
gist of what information is presented on a page.

• Create a newspaper‐style page where the information is presented in columns. Each

article has a headline. Instead of including all of the information on a page, include the first
paragraph or two and then include a More link at the end of the last sentence. When clicked,
the More link opens the full article in another window.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 6

• Create a home page that contains links to the information you need to present. (See
Figure 4.4.)

Figure 4.4: Links enable you to present a large amount of information in a small space.

• Create a site map. The site map has a text description of every page on the site. Each text
description doubles as a hyperlink, which, when clicked, reveals the applicable page.

Presenting information
Presenting information on a Web page is an art unto itself. The information you present depends on
the type of site you design and what your client gives you to work with. The typical Web site is a
mixture of images and text, with, perhaps, some multimedia content added for grins and giggles.

• Break major ideas into bullet points. As we mention earlier, bullet points make a page
look less cluttered and help visitors find information more easily. See Figure 4.5.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 7

Figure 4.5: Break information into bullet points.

• Arrange the page so that the information has a logical flow. You can break up big
blocks of information using header styles. Readers should be able to sum up the information
presented on a page by glancing at the headlines and then deciding what information they
want to read.

• Break up text with pictures. No one wants to read a term paper. If applicable, add a
caption to each picture on a page. Busy site visitors can use captions to sum up the
information presented on a Web page at a glance.

• If you're using a newsletter style with multiple columns for your Web page, make the
columns different widths. Also, don't exceed two columns, especially if your audience
uses a desktop size smaller than 1024 x 768. (See Figure 4.6.) If you're using a horizontal
menu, you can increase the size to three columns.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 8

Figure 4.6: Create a newsletter‐style page that's easy to read.

• Make sure that the structure and the layout of the pages are consistent. Pages might
have to vary, depending on the content, but the look and style need to be consistent.

• Don't use color combinations that are hard to read. For example, pink text on a
dark‐colored background is difficult to read. The old tried‐and‐true black text on a white
background is always legible.

• Don't use a busy background for your pages. The busy‐ness makes text hard to read. If
your client insists on a tiling background (a small image is repeated on the page, which looks
like a single image when the page loads), choose a simple design and lower the opacity in
an image‐editing application (such as Fireworks or Photoshop).

• Don't use small fonts. A text size smaller than 10 points (pt; the height of a character) is
almost impossible for visitors to read unless they have extremely acute vision. And if your
intended audience is on the presbyopic side (um, getting on in years, vision‐wise), text
shouldn't be smaller than 12 pt.

• Use bold‐faced text to direct the viewer's eye to important information.

• Don't use nonstandard font faces when designing your pages. Your intended audience
might not have the font installed on their machines, which causes a browser to use its
default system font. This might cause usability issues and make the page difficult to read.
When in doubt, stick to the big six: Arial, Times New Roman, Courier New, Courier Mono,
Helvetica, and Verdana.

• Don't use too many font faces. If you use too many font faces, the end result doesn't look
professional and is distracting to the viewer. If you need to draw attention to a headline, you
can create a style using the same font you use for text: Boldface the text, increase the size
and use a harmonious color from the site to draw the viewer's attention to the headline.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 9

• Use hyperlinked text to draw the viewer's attention to pertinent content. Just make
sure you don't disable hyperlink decoration with a Cascading Style Sheet (CSS) setting.
Your goal is to make the hyperlink easy to see when the page loads. If you don't like
underlined hyperlinks, use the style sheet to modify the color of the hyperlink text.

• If several authors write the Web site content, make sure the style and voice is similar.
A Web site should read like a book. Each page is like a chapter of the book, and if the styles
are jarringly different, the visitors may think they're not on the same site. Consistency is
important.

• Make sure the terminology and spelling are consistent sitewide. For example, don't use
Website (one word) in one section, and Web site (two words) in another. At the risk of being
redundant, consistency is important.

• When you're designing your site, make sure you view it using the smallest desktop
size of your intended audience. As of this writing, 91 percent of Web site visitors are
surfing the Net with a desktop size of 1024 x 768. Make sure your design flows logically and
is easy to read.

• If you're using multimedia content (such as movies and sound files), make sure
they're all the same file format. For example, don't use the Windows Media Video (WMV)
format for some of your movies, Flash video for other movies, and Apple QuickTime for the
rest. Choose a file format that the majority of your client's intended audience can view, and
stick with that standard.

Tip Read the information provided by the client before adding it to the page. If (in your opinion) the
client is presenting too much information (also known as stuffing 50 pounds of text into a
30‐pound bag), ask the client to condense the text to be more concise. When all else fails,
refer your client to a reliable copy editor.

Including e‐learning materials

If your client is creating a Web site that instructs end users on how to use a particular application or
accomplish a specific task, include material that can get them there. Many methods of
accomplishing this are available. In fact, specific software packages are available to create content
for e‐learning Web sites. The following is a list of some of the items currently used on e‐learning
Web sites:

• Instructional video: Nothing gets the point across like video. If the site shows users how to
master a software application, a video capture of the application in action is the ideal
teaching tool. In conjunction with the teacher's audio instructions, video is a powerful
e‐learning tool. You can capture a video of an application using Camtasia or HyperCam
software. The video you post online can vary depending on the type of Internet connection
used by your client's intended audience. You can post streaming video using the Windows
Media Video format, Apple QuickTime format, or Flash video.

• Flash interactive content: Flash is a wonderful tool for creating animations. You can also
use Flash to create quizzes, interactive learning exercises, and so on. If you're adept with
ActionScript, you can get Flash to do some wonderful things, such as tally the score of a
quiz or direct a user to a different part of the Flash movie based on the response to a
question.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 10

• PDF documents: Adobe Acrobat is another wonderful tool that you can use to create
tutorials. Many people think that PDF documents can only show text and images. This is not
true. You can create a PDF document in Acrobat 8 Professional or later that can include
multimedia content, such as audio and video. Acrobat PDF documents can also be
interactive. Acrobat has built‐in actions that you can use to link to other documents, play
video or audio, and so on. An Acrobat document can also use JavaScript to perform tasks.

You include links to your e‐learning materials in your HTML documents. You can set the learning
material to open in the same browser window or in a new window. You can embed e‐learning
material, such as video (complete with a player), in the document. This is the preferred method
because many people rely on the Back button to recall viewed content. When a document is
opened in a new window, this navigation isn't available.

Using Personas to Develop Content

When you create a Web site for a client, part of your job is to identify the client's intended audience.
After you find out who the client's intended audience is, find out as much about the audience as
possible. Your client should be able to provide you with the majority of the information. You might be
able to find other information, such as demographics, online. Armed with this information, you can
tailor the content to the intended audience. In other words, the site you design connects with
viewers on a personal level, a task that's easier said than done.

If your client's goal is to connect with viewers on a personal level, you can create one or more
personas to define your client's archetypical visitors. A persona is a hypothetical person whose
characteristics and demographics fit your client's intended audience to a tee — and, therefore, has
all the information you need to define the audience. When considering what content to use on the
site, use the persona to guide you. In other words, tailor your content to the persona, and your
client's intended audience will feel as if the content were written personally for them. Depending on
the scope of your client's intended audience, you might have to create multiple personas. For
example, if the intended audience is young males between the ages of 24 and 35 with a college
degree who live in the U.S. and make between $65,000 and $95,000 per year, you can get by with
one persona. However, if your intended audience is male and female with varying degrees of
education and from varied socioeconomic groups, you'll have to create multiple personas.

Defining your client's customers

When creating personas, you have to rely on your client to provide the information. After all, you are
a Web designer, not a marketing guru. If your client is not familiar with creating personas, here are a
few guidelines:

• Create a one‐ or two‐page description of each persona. Include information such as

gender, age, marital status, ethnicity, education, profession, income, and so on.

• Include information about the habits and daily routine of each persona.

• What are the hobbies and pastimes of each persona?

• What are the buying patterns of each persona?

• What computer skills does the persona have?

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited
Building Web Sites All-in-One For Dummies, 2nd Edition 11

Your client will probably end up with between three and six target personas. If the number gets
larger than that, you'll have a hard time tailoring content for such a diverse group. The whole idea
behind personas is focusing on the type of individuals who will use your client's product or service,
not the general public.

Delivering what they want

With multiple personas defined, your client can begin creating content for the site. Of course, the
content your client provides will be text. The authors will create text that is appropriate for the age,
gender, and education level of the personas. You'll create a navigation menu and design concurrent
with the likes and computer skills of the personas defined by your client. When you have the initial
design nailed, you start adding graphic elements, such as banners and images. If you're using
multimedia elements, such as background music, the personas defined by your client will guide you
to the proper choice.

The content created for the Web site is also governed by the area in which the personas live. If the
personas reside locally, you'll want to include information about your client's local events. If the
personas live in all areas of the country or world, you can include information about worldwide
events pertaining to the client's business or service. If your client hosts Webinars (Web‐based
seminars), make sure that information is prominently displayed on your client's site.

Reprinted for ibmsushil.andre@in.ibm.com, IBM John Wiley & Sons (US), Wiley Publishing, Inc. (c) 2009, Copying Prohibited