Planning Your Web Site 21

Planning Your Web Site 21
Creating a Link Storyboard for Your Site
http://www.prowebsitemanagement.com/articles/linkstoryboard.html
Some helpful ideas to use when brainstorming about your storyboard,
as well as some tools to assist you in its creation.
Designing Your Web Site from a Storyboard
http://www.grokdotcom.com/storyboard.htm
An article on Web site creation based on storyboards; it is a 2000 article
but still very relevant.
SmartDraw
http://www.smartdraw.com
A software program to assist you in creating your storyboard; a free
demo is provided so you can try before you buy.
Target Market Analyst
http://www.virtualtechnocrats.com/selfhelp/businessebook/marketing/
targetmarket.html
A handy checklist to help you define your target market.
TEAM LinG - Live, Informative, Non-cost and Genuine!
22 101 Ways To Promote Your Web Site
22
2
Your Site—From Storyboarding
to Programming
Your storyboard is the blueprint for your site, but there are many steps
to take before you can start construction. In Web development, the
majority of the time should be spent in the planning. In this chapter we
cover:
• Detailed planning of your site before a line of code is ever written
• Content guidelines
• Text guidelines
• Color guidelines
• Navigation guidelines
• Graphics guidelines
• Visual guidelines
• Other guidelines.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Your Site—From Storyboarding to Programming 23
Detailed Web Site Planning
In the previous chapter you learned how to develop your storyboard.
The storyboard is your blueprint for the site, but now you need to think
about construction. For each page of your site, you need to develop the
content—the text and the graphics.
Generally you (yes, you) will develop the first draft of the text for
each page. You know your target market best—you know what makes
them buy, you know what they want, you know the buzz words for
your industry far better than your Web developer.
The next step is to have this text reviewed and edited by an online
copywriter. Online copywriters usually have a background in advertising,
where they learn to get the message across in as few words as possible.
They know how to grab the reader’s attention. Internet users don’t
want to read pages and pages—they want to get what they’re looking
for quickly. The text should be short, to the point, and written so it can
be easily scanned.
Once the online copywriter has done his magic, you will review and
approve. You want to make sure that only the form—not the substance—
has been changed.
The next step is to have the content reviewed and edited by an Internet
marketer—someone who has expertise in search engines and their ranking
criteria as well as repeat traffic generators and viral and permission
marketing. The Internet marketer will review and edit the text and graphics,
again making sure that the keywords are used in the appropriate
places for high search engine ranking. There is a real science to this. The
keyword assigned to a particular page should be used appropriately in
the page title, the text throughout the page, the meta-tags for keyword
and description, the headers, the Alt tags, and the comments tags.
The Internet marketer usually develops the content for these tags,
titles, and headers at this point. Sometimes the Internet marketing is
handled by your Web developer’s team and sometimes it is a separate
outsourced activity. You’ll learn more about designing your site to be
search engine friendly in Chapter 6.
The Internet marketer also ensures that you have used the appropriate
repeat traffic generators (see Chapter 3), appropriate permission
marketing techniques (see Chapter 5), and appropriate viral marketing
techniques (see Chapter 4). Again, you need to review and approve the
changes to make sure your message is still presented appropriately for
your target market.
TEAM LinG - Live, Informative, Non-cost and Genuine!
24 101 Ways To Promote Your Web Site
The next step is graphic design. Sometimes the graphic designer is
part of your Web development team and sometimes this activity is
outsourced. The graphic designer develops the “look and feel” for
your site—the navigation bar, the background, and the separator bars.
The graphic designer knows that your online and offline corporate
identity should be consistent. Again, you review and approve the
graphic design.
Once all this is done, and everything has been reviewed and approved,
you are ready for the programming to start.
Content Notes
Make your contact information readily available. Consider including
contact information on every page. This includes your address, phone
and fax numbers, and especially your e-mail address. Make it easy for
people to get in touch with you.
Avoid “Under Construction” pages on your site; they are of no value
to the visitor. When you have information, post it. Until then, don’t
mention it. “Under Construction” can actually hinder your search engine
placement with some of the popular search engines and directories.
Include security information. Explain to your customers when transactions
or exchanges of information on your Web site are secure. This is
important if your site will be accepting credit card orders.
Include your privacy policy. Tell people how their personal information
(e.g., their name, e-mail address, etc.) will and will not be used.
This makes visitors more comfortable submitting inquiries to your site
or joining your mail list.
Minimize use of background sounds and autoplay sounds. Some
people surf the Web from their office at work and wish to discreetly go
from one site to the next. Background sounds and sounds that load
automatically can compromise their discreetness. Give your visitors the
option of listening to a sound, but do not force it upon them.
Text Notes
The tone of your text and the design of your graphics conveys your
intended image. When determining the text content of your site, be mind-
TEAM LinG - Live, Informative, Non-cost and Genuine!
Your Site—From Storyboarding to Programming 25
ful of the fact that your own biases may preclude you from placing
information on your site that is second nature to you, but important for
your visitors. Review all text content on your site to ensure that you
have not omitted anything crucial.
Also, keep text brief. Almost 80 percent of Web users scan text online
as opposed to actually reading it. Therefore, make your key points quickly
and succinctly, and use lots of bulleted lists, headers, and horizontal
rules to create visual breaks in the content. This keeps visitors interested
enough to read the information on your site. If they are faced with
huge blocks of text, most visitors are overwhelmed by the quantity of
the information and are too intimidated to read your message. Write
for scannability.
Don’t set your text size too small, as this is too hard to read. But
don’t set it too large, as this looks like you are shouting. Also, avoid
using ALL CAPS, WHICH ALSO COMES ACROSS AS SHOUTING.
Color Notes
Keep your online and offline image consistent. Be consistent with your
use of logos, corporate colors, and other marketing collateral associated
with your company.
Choose your background and font colors carefully. Using backgrounds
that are too busy obscure your text and do not provide a pleasant
viewing experience for your visitors. Only certain colors show up
properly on certain backgrounds. A light background with dark text is
easiest on the eyes.
White text displays best on black backgrounds, and black text is
most readable on white backgrounds. Of course, you can use other color
schemes, but choose your scheme carefully, as mentioned. There is nothing
worse than a Web site that is unreadable. Also, be mindful that
some people might print pages from your site. If you incorporate a large
amount of your text into the actual graphics on your site, the text might
be difficult to read when printed. Also, graphic-intensive sites load more
slowly. If you have to incorporate text content into your graphics, be
sure that it is sensible to do so.
Use the default colors for links whenever possible. Blue text usually
indicates an unvisited link. Purple, maroon, or darker blue usually represents
a link you have visited, and red is the color of an active link. It
should not be difficult for visitors to identify your links. If you decide
TEAM LinG - Live, Informative, Non-cost and Genuine!
26 101 Ways To Promote Your Web Site
not to use the default colors, your links should be emphasized in a consistent
manner through font size, font style, or underlines.
Navigation Notes
Ease of navigation is very important to your site. Provide a navigation
bar at a consistent location on every page that links to all of the major
pages of your site. Make it easy to get from one page to any other.
Search engines can index any page from your site, so your home page
might not be the first page visitors come to. Never have dead ends where
viewers scroll down a screen or two of information only to find that
they must scroll all the way back to the top to move on (because you
have no links at the bottom of the page). A consistent-looking and wellpositioned
navigation bar with functioning links is the key to efficient
site navigation.
Your visitors should be able to get anywhere they want to go on
your site in three clicks or fewer. Develop an effective navigation bar as
previously described. For very large sites (i.e., sites consisting of more
than eight to ten major sections), it is a good idea to include a site map
that users can access from any page in your site. Site maps, as shown in
Figures 2.1 and 2.2, are usually text-based lists that name all of the
site’s pages and their content. Site maps make it easy for users to access
the information they are looking for without causing them much frustration.
Include a link from your main navigation bar to the site map
for the easiest possible reference. Site maps are great for submission to
the search engines as they provide links to every page of your Web site
ensuring, as much as possible, that every page of your site gets included
in the search engines’ database.
An additional feature you might wish to include is an internal search
tool. This allows users to enter their query and have all relevant matches
returned, based on their query. This is a particularly useful feature if
you sell many products directly on your Web site or if your site contains
many pages of content. It allows the user to quickly search for the desired
item or information using the product’s name or a relevant keyword.
Intel, the computer chip manufacturer, operates multiple sites
and offers many products and services. To help users locate the information
they’re looking for, Intel has integrated a useful search tool.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Your Site—From Storyboarding to Programming 27
Figure 2.1. Montreal International Airport’s site map.
Figure 2.2. Disney’s site map.
TEAM LinG - Live, Informative, Non-cost and Genuine!
28 101 Ways To Promote Your Web Site
Keep the design of your site consistent. Font types, headers, footers,
navigational bars, buttons, bullets, colors, and so on, should be consistent
throughout the site to maintain a polished, professional look.
Graphics Notes
Graphics that take too much time to download can cause visitors to
leave your site before they get a chance to see it. The combined size of
the text and graphics on any Web page should not exceed 50 KB.
Some people turn graphics off in their browsers to save time, so you
should provide all of your information in text as well as graphics. Use
descriptive Alt attributes in your image tags. The Alt text
will load in place of the images when the graphic does not
display for any reason. Visitors who choose not to browse
with graphics turned on will have an easier time navigating
your site. Also, Alt text is spidered and indexed by many of
the major search engines. Using keywords in your Alt text
in your image tags will improve your ranking in search
engines and will provide a description of the images in the
event that they are not loaded. If you use any large files for
graphics, audio, or video, warn your visitors by providing some text
stating the size of the files.
Use thumbnail graphics where applicable. When you have a page
with a lot of large images (e.g., an online photo collection), create small
“thumbnail” versions of each image and give visitors the option of clicking
through to the larger versions. This is far superior to making your
visitors wait for a series of large images to load.
You should be careful with your use of image maps as well. Image
maps are large graphics with clickable “hot spots.” Image maps typically
are used for navigation and usually have text embedded in the
graphic. Search engines cannot read text embedded in a graphic, so from
the standpoint of search engine friendliness, if you use image maps always
ensure that you provide your appropriate text and Alt tags for the
search engine.
Very often, when a large graphic is used for an image map, visitors
must wait for the entire image to load before it is apparent where they
must click to begin navigating a site. Instead of using a large image
Alt attributes
Descriptive text
associated with
respective images on
a Web site.
TEAM LinG - Live, Informative, Non-cost and Genuine!
Your Site—From Storyboarding to Programming 29
map, break the image into smaller images so that visitors receive faster
feedback from your site without having to wait for a huge graphic to
load. Also, always provide an alternate text link navigation system to
assist people who surf with their graphics turned off.
Visual Notes
Check your site using different browsers. What viewers see when your
site is downloaded depends on what browser they are using. Different
browsers display the same Web site differently. Before you post your
site on-line, check your site with the most popular browsers:
• Netscape Navigator 7.x
• Netscape Navigator 6.x
• Netscape Navigator 4.x
• Microsoft Internet Explorer 6.x
• Microsoft Internet Explorer 5.x
• Microsoft Internet Explorer 4.x
• America Online 9.x
• America Online 8.x.
Also make sure that you review your site on both a Mac and a PC as
sometimes your Web site looks different depending on the platform.
Design your site for various screen widths. Try to accommodate
visitors regardless of the screen resolution they use. Some Web users
still run their systems at 640 pixels by 480 pixels; keep this in mind
when designing your site. Use your Web traffic analysis software to
determine the screen resolution preferences of your visitors. See Chapter
27 for more information on Web traffic analysis software and the
reports you can access.
TEAM LinG - Live, Informative, Non-cost and Genuine!
30 101 Ways To Promote Your Web Site
Your Web site should steer clear of scrolling marquee text. Scrolling
marquees are difficult to read and are not compatible with all browsers.
Simply post text directly on your pages if you have something important
to say.
Other Notes
Your home page should be 50 KB or less and should be displayed
on no more than one or two screens. Studies have shown
that visitors rarely wait beyond 15 seconds to download a site.
Test the download time of your site using different connection
speeds to ensure that it is reasonable for all users.
Also avoid dead links. These are links that don’t go anywhere
and the viewer usually receives a “404—File not Found” error message
from the Web server after clicking on a dead link. Verify periodically
that all your links are still active.
Internet Resources for Chapter 2
I have included a few resources for you to check out regarding designing
your Web site. For additional resources on a variety of topics, visit
the Resources section of my Web site at http://www.susansweeney.com/
resources.html. There you can find additional tips, tools, techniques,
and resources.
REVIEW YOUR SITE
NetMechanic
http://www.netmechanic.com
A number of tools to improve your site’s mechanics, including HTML
code validation and GIF optimization.
BizLand, SiteDoctor
http://www.bizland.com/product/sitedoctor.html
When was the last time your site had a checkup? Is it loading fast enough?
Are all your links working? Find out with BizLand SiteDoctor.