Planning Your Website's Design & Content

This chapter is from the book 

IN THIS CHAPTER:

• About Planning Your Site
• About Focusing on What You Want to Present
• Match Your Design and Content to Your Audience
• Organize Your Site's Content
• Build a Site Map
• About Designing Your Site's Navigation

There’s a sign that used to be hung at some commercial websites: "It’s the content, stupid!" It was a shorthand way of reminding people that, at heart, the Web is a way to give people information or entertain them—in other words, give them content. All the graphics, videos, animations, and cool web techniques in the world aren’t useful if there isn’t solid content on the site, organized well.

That holds true whether you’re building web pages for fun, friends and family, or for profit. So in this chapter you’ll learn how to decide what content you want to present, and after you’ve decided that, you’ll learn how to make a site map and build navigation so that your content will be presented as clearly as possible. And building a site map ahead of time is also the best way for you to organize your work, as well.

About Planning Your Site

Before You Begin

Just jump right in.

See Also

About Focusing on What You Want to Present

The hardest work you’ll do building a website comes well before you ever touch even the smallest bit of HTML code. It has nothing to do with the Internet, and nothing to do with computing. In fact, it has nothing to do with technology at all. It has to do with first deciding on why you want to build a website, and then determining what you want to present on it.

It sounds simple, but in fact it’s very, very hard to do. You’ve probably come across dozens of websites that confuse you or that don’t ever quite come to the point. The great odds are the problem wasn’t with the designers or coders—the problem was that the people creating the site weren’t quite clear on why they were creating it. The next time you come to a website that you don’t think is particularly good, take a few minutes to examine it and see why. You’ll probably find out it’s because the site has a confused focus, and no clear point or message.

You don’t want to fall into the same trap. So before you do a lick of work, stop. Then start thinking. Take enough time planning your site, and building it will be a breeze.

About Focusing on What You Want to Present

Before You Begin

About Planning Your Site

See Also

Match Your Design and Content to Your Audience

Before working on your site, there are several steps to take. First, as outlined in About Planning Your Site, decide why you want to build a website. Is it to share news with friends and family? Pontificate about world events? Try to sell auction items?

Based on that, you need to decide on what kind of website you want to build. There are three basic kinds of websites you might want to create:

• A personal site, where you might simply want to share your hobbies or personal musings with the world on a site or blog.

NOTE

Blog—A website that is in diary-like format, in which there are a series of short, dated entries. Many blogs also allow for readers to post comments on the site.

• A website for a non-profit group, such as a youth soccer league, or school, in which you want to share information about the group.

• A business site, in which you publicize your business, or take orders over the Internet.

Keep in mind that you shouldn’t try to mix and match these sites. In other words, don’t try to create a website that is both a personal site and a business site. Your customers might not really appreciate having to read about your pet chinchilla, or your collection of vintage license plates.

Why Build a Personal Site?

Got a hobby you want to share with the world? Need to get something off your chest? Do you want your own personal soapbox?

Those are just some of the reasons why you might want to build a personal website or blog. Many people create them to keep in touch with friends and family, or just to announce to the world, "I’m here!" And they’re great places to post pictures of yourself, your family, and your vacation. (For more information about blogs, turn to About Blogging.)

In fact, the only reason you might want to build a personal website is just for the fun of doing it.

No matter your reason, though, your personal website should be as much as possible a personal reflection of yourself. You can also make the design as informal as you want, and can disclose only the information about yourself that you want. In short, when it comes to building a personal website, the only real rules you need to make are your own. You can be as wild or staid as you want.

Why Build a Website for a Non-Profit Group?

Just about any non-profit group could make good use of a website. Whether it’s an amateur theater group, a neighborhood association, a parent group, a youth soccer league, a charitable organization, or almost any other kind of non-profit group, there are good reasons to build a website for it.

One of the main reasons for building this kind of website is to get the word out about the group—for example, to do fund-raising, get people to join, or get people to take some kind of action. Calendars, information about upcoming events, basic information about the group, and contacts are just some of the other kinds of basic information you’ll put on this site. This type of site will have to be more formal-looking than a personal site.

One more thing to keep in mind when building this site: Often, it will require the input of many people, and many people may have to sign off on it before it’s posted. So if you’re building this sort of site, leave plenty of time for others to review it.

Why Build a For-Profit Site?

If you have a small business, the benefits of building a website are fairly obvious. It’s a great way to get new customers, to keep in touch with existing customers, and to keep in touch with suppliers. And you can also use your website to take orders, as well.

This kind of website should be the most formal looking of the three major types of sites. And considering that the site is intended to make money, you should think about spending more for a hosting service than you will for a personal website or non-profit website. It’ll be worth your while to pay extra for a site that has substantial backup. And in any event, if you want to take orders over the Web, you might have to pay extra for a hosting service that offers this feature.

Match Your Design and Content to Your Audience

Before You Begin

About Planning Your Site

About Focusing on What You Want to Present

See Also

Organize Your Site’s Content

So now you’ve taken the first step—you’ve decided what kind of website you want to build. Now comes an even harder part. You have to figure out who your target audience is, what kind of content to put on the site, and then match the design of the site to the information you want to present and your target audience. In this task, you’ll learn how to do all that.

1. Define Your Audience

Knowing the kind of site you want to build isn’t enough—you also have to define what kind of audience you’re after. And the best way to define your audience is to ask yourself questions about who they are. Be as specific as possible. Here are some basic questions to ask. Don’t stop here, though. Add questions of your own.

• If you’re designing a site for a for-profit business, will the audience be existing customers, new customers, or potential investors?

• If you’re designing a site for a for-profit business, will visitors expect to be able to do business with you right on the Web, or will they use the Web to get information, and then contact you in some other way?

• If it’s a personal site, are you only interested in designing it for people you already know, or for strangers as well?

• If it’s for a personal site, will your visitors be primarily family members, or other people as well?

• If it’s a site for a non-profit group, are you designing the site for members of the group so that they can communicate with one another, or are you designing it to do outreach in the community? Or do you want to combine the two purposes in some way?

• Do you expect more men or more women to visit, or an equal number of both?

• What is the average age of your expected visitor?

• How technically savvy are they?

• How frequently do you expect them to visit?

2. Create a Visitor Profile

After you answer these questions, you’ve got a good start on understanding your intended audience. Based on your answers, write a short profile of who your primary visitors will be. Be as specific as possible. Keep in mind that the content and design of your site should be aimed primarily at them, so you want to define them as comprehensively as you possibly can. You might also want to create a profile of your secondary visitors or even tertiary visitors. You can design part of the site for them as well. But don’t let that distract you from the main point of this exercise—deciding who is your target audience.

3. Decide on Interactivity

No matter who your audience, make sure to ask yourself one basic question about them: Will they want interactivity of some sort with the site, with you, or with your business or group? For example, if they want to be able to get answers to questions, or to contact you directly, make sure to include a link that they can click on to send you email. And if you’re creating a blog, decide whether you want to let visitors post comments. (See Limit Who Can Comment on Your Blog.)

4. Determine the Content

You now should have a profile of your target audience. Now it’s time to figure out what kind of content they want.

Start off in brainstorming mode. Don’t expect to be able to figure this out in a logical manner. Get a piece of paper and a pen, and start off by writing down a comprehensive list of everything you think your target audience would want from your website. Keep referring back to your audience description, and focus on your primary audience first. Don’t worry about trying to organize the information at this point—just keep writing down ideas. And don’t think yet about how you might present the information; that comes later.

Just in case you need some help to get you started with figuring out what kind of content you should have, here’s a very short list of things to consider, for each kind of the three main types of websites you might want to create.

Personal Website

• Hobbies and interests

• Education

• Resumé

• Public diary

• Personal ramblings

• Photos

Website for Non-Profit Group

• Name and purpose of the group

• Calendar

• Notices of upcoming events

• How to donate money

• Articles or publicity about the group

• Contact information

• News

For-Profit Website

• Name and purpose of the business

• Contact information

• Product list or list of services

• Online buying, or information on how to buy offline

• Shipping and warranty information

• Directions on how to get to the company

• Feedback form or email contact information

5. Include These Must-Haves

No matter the kind of website you’re building, there are three piece of information that should be on it. You should include contact information—and if it’s a personal site, you’ll probably only want to include an email address rather than a phone number so that you don’t get crank calls. You should also include an "About" statement, which describes the purpose of the site or group. And you should also have a FAQ area. FAQ stands for Frequently Asked Questions, and it’s a list of common questions that people might ask. You’ll be amazed at how much a simple FAQ page can help your visitors.

6. Put It All on Paper

Make sure that you put everything down on paper—don’t assume you’ll remember it all. Don’t worry about organizing all your material at this point. Just get it down on paper. In the next task, you’ll find out how to organize it into a coherent whole.

Organize Your Site’s Content

Before You Begin

About Focusing on What You Want to Present

Match Your Design and Content to Your Audience

See Also

About Planning Your Site

Now that you’ve gone to so much effort to list all the content you might want on your site, it’s time to get it all organized. At this point, you should have a large, sprawling list of ideas. If you’ve done your homework, there’s far more information than you’ll ever be able to publish. In fact, if there’s not more information than you can possibly use, you’ve probably done something wrong.

So how to put that mass of information into a more coherent whole? Follow these steps, and you’ll start to get it all into shape.

1. Group Related Ideas

Study your ideas for a while, and you’ll notice that they fall into related topics. For example, on a personal web page, you could group together all your hobbies and personal interests, or you could group your resumé with information about your current job. On a non-profit website, you could combine email and phone contact information with driving directions on how to get to the group’s headquarters.

Also, put related interactivity together. You might want visitors to your site to be able to chat with one another, be able to sign a guestbook, or take interactive polls of some kind. If so, put them all in one area.

2. Prune the Groups

Too many groups spoil the site. These groups that you’ve just created will become the main sections of your website. You should limit them to no more than between five to seven. If you have any more than five to seven of them, people will soon get lost—and in fact, when people come to the site, they might see how sprawling the site is and not even bother to stay.

So either cut out the groups that are peripheral, or else combine several groups into one. Under each group, list all the information that you want to have in that group.

3. Prioritize Your Topics

You should now have five to seven topics, with several (or many) ideas under each of those topics. But not all ideas are created equal—some are more important than others. So prioritize. Put a 1, 2, or 3 next to each of your ideas, according to its importance, with a 1 being the most important. (You shouldn’t number your topics, but rather the ideas under each topic.) When it comes time to design your site, you’ll probably want to start only with the number 1s on your list. If you want to grow it from there, you can move to the number 2s and number 3s.

4. Look for Links Between Ideas

The heart of the Web is the capability to link pages to one another. So look at your information and start thinking about which pages should be linked to which. You can’t link every page to every other page, because that quickly becomes far too confusing. But you will notice ideas that should be linked to each other. For example, if you have a page that mentions each member of your family, and also have a page with photos, you’ll want to link the names of your family members to their photos, and vice versa.

5. Consider Links to Other Sites

It’s a good idea not only to link to pages on your own site, but also to other websites as well. Although you might think doing so will send people away from your site, that isn’t the case. If people know they can find good links from your site to other useful or entertaining sites, they’ll keep coming back to yours for more.

6. Think About Graphics

When you start building your website, you’ll find out that one of the most difficult problems is getting fresh sources of graphics. So it’s never too early to start thinking about what kind of graphics you’ll want to use—the more time you spend thinking about what they should be and how you can find them, the better.

Build a Site Map

Before You Begin

About Focusing on What You Want to Present

Organize Your Site’s Content

See Also

About Planning Your Site

By now you know the content you want on your site. You should have five to seven main topics, and under each of those topics, several ideas, each with a number-1 priority. For now, we’ll forget about the number-2 and number-3 priorities. You can add them later if you want.

How to get all that information from your outline to a living website? The best next step is to build a site map. A site map is a clear, visual representation of every page on your site, and will show how those pages fit into the site’s organization. In essence, a site map is a flowchart that shows every page on the site and details how visitors will move through the site.

You can draw a site map freehand on a large sheet of paper, or else you can use some kind of graphics or drawing program. I greatly encourage you to draw it freehand. I’ve found that if you use a graphics or drawing program, you spend more time trying to understand how to use the program, fiddling with color, figuring out how to draw snazzy lines, and other time-wasters than you actually do getting any work done. A very rough hand-drawn sketch is fine at this point.

I also recommend getting a very large piece of paper—as large as you can find. Get large, oversized pads at an art store or office supply store.

For every page on your site, you’ll draw a rectangle. When pages link to one another, draw lines from one to another. For each page, write down the main topic.

1. Start with the Home Page

At the top of the site map, draw a rectangle and label it Home Page. The home page is the front door to your site. It’s the first view of your site that your visitors will have. The home page should tell at a glance the name of your site, its purpose, and lay out the directory and navigation of the various topics on the site. It frequently has more than just navigation and a directory of information on it, though—it often has some kind of content as well, depending upon what kind of site you’re building. For example, if it’s a site for a non-profit group, you might have information about an upcoming fund drive. If it’s a personal site, you might have photos of a recent trip you took, or a holiday greeting. And if it’s a commercial site, you should have information about the product or service you’re selling, and a way for people to order it.

2. List the Main Topics

Beneath the home page, in a row, draw rectangles for all your main topics. Remember, there should be no more than five to seven of them—and fewer is fine. (For more information, see Organize Your Site’s Content.) In each rectangle, write in the topic. Draw lines from each topic page to the home page.

3. Fill in the Detail Pages

You’re ready to round out the map. It’s time to put in the detail pages—the topics that you’ve put number 1s next to in your brainstorming outline. Draw a rectangle for each, label each rectangle, and put them in a third row, beneath the main topic row. Draw lines from each main topic to the detail pages that are associated with that topic.

4. Note Shared and Global Pages and Features

Most websites have pages and features that are linked to and from many other pages. For example, if you’re building a commercial website, on every page on your site, you might have a link to your site’s privacy policy. If you’re building a site for a non-profit group, you might have a link on many pages or even on every page to a member sign-in form. And if you’re building a personal website, you might have a link on every page to an About Me page.

If you try drawing lines from every page on your site to all of these global pages and features, your site map will soon be so filled with lines that it will look like nothing more than a bowl of spaghetti. So instead of drawing those lines, come up with symbols or letters for each of those pages or features. Then on each page that will link to them, draw the symbol. Draw rectangles for each of the shared and global features and pages, label them, and note their symbols.

5. Give Your Pages Filenames

After you’ve gotten what you believe to be a final page map, you should give your pages filenames. Every page on your site will have to have its own filename, and it’s a good idea to come up with filenames now, before you start coding. That way, you can come up with a comprehensive plan for naming files. There are a few things you need to keep in mind when naming files:

• Filenames usually end in .htm or .html—Most of the files you create will use .htm or .html as a file extension. If the site is hosted by a Windows server, the filenames generally end in .htm. Ask your web-hosting service whether your site is hosted by a Windows computer.

• Keep filenames short—Not only will this make it easy to remember them, but short filenames are easier for people to type into their browser. Also, avoid embedded spaces in filenames because they can be hard to reference in links.

• Use logic in naming pages—They should relate to the content of the page, and there should be a reason why you pick certain names. For example, don’t use numbers to name pages unless there’s a logical purpose to those numbers. In many cases, the home page’s filename must be index.htm or index.html. If not, the server software administrator might have to configure the server for a different filename.

6. Review the Site Map

You should now have a comprehensive site map. Before you begin coding and designing, feel free to re-jigger it, moving pages around, eliminating some, and adding new ones. After you have a complete site map, you might want to consider making a neat copy using a graphics or drawing program, or better yet, a flowcharting program.

About Designing Your Site’s Navigation

Before You Begin

Organize Your Site’s Content

Build a Site Map

There’s one more thing to consider before you begin creating your site—how people will navigate through it. It’s important to create a way for people to know at a glance what’s available on your website, and to let them quickly jump to where they want to go.

You do all that through designing navigation for your site, the way that people will get around. You should have common navigation for all your pages. If you change the navigation, people will quickly become disoriented and lost, so keep the navigation consistent throughout.

Navigation consists of buttons or links that people can click on to get to the main areas of your site. Typically, the main areas of the site you’ll want people to navigate to are the five to seven major topics you’ve created on your site map.

As a rule, navigation should go down the left side of each page, or else across the top (and sometimes the bottom) of each page. For navigation, you can use simple HTML links, or else buttons or even graphics. The following figure shows navigation along the top of a website—in this instance, the Sams Publishing site.

In addition to links to your five to seven major topics, you might also want to have navigational links on every page to global features or topics, as outlined earlier in this chapter. You might, for example, want to have links on every page to an FAQ or Help area, or an About Me area in addition to the topic areas. In that case, you should separate these special, global areas from your main content areas. If that’s the case, you’ll want to use left-side navigation combined with top or bottom navigation. Typically, if you organize your site’s navigation this way, the main topic areas will go down the left side of the page, and the links to global features will go at the top or bottom of the page. The following figure shows this combination of top and side navigation, on the InformIT website.

When designing your navigation, however, keep in mind that, in general, simpler is better. Complex graphics serve only to confuse. And if you do use graphics instead of buttons, make sure to include text with them as well. Not everyone in the world will know that a picture of a cherry is meant as a link to a list of your favorite fruit.

Using "Bread Crumbs" on Your Site

Remember the story of Hansel and Gretel? As they were led by a witch deeper and deeper into the forest, Hansel scattered bread crumbs behind them so that they would be able to find their way back home.

The Web is often as confusing as a deep forest, and if you want to help your visitors find their way, you can use a Hansel-like technique called breadcrumbing. (For now, we’ll forget that Hansel’s bread crumb strategy didn’t work because the forest’s birds had eaten all the bread crumbs after he scattered them.)

Bread crumbs are, in essence, a trail of links put somewhere near the top of a page that lets you step back up through the hierarchy of a website, anywhere along the way.

Let’s take an example. Say that you’ve created a page for your non-profit group, the Cambridge Frisbee League. There are several main areas on the site, including one titled Schedule, one titled Rosters, one titled Rules, and so on. Each of these areas has a number of pages beneath it. For example, the Schedule area has 12 pages, one with a schedule for each month of the year. If you were on that page, the breadcrumbing would look like the following figure. This enables you to see where you’ve been on the site, and quickly jump to a previous level. If you build a site with even more levels than this, breadcrumbing is even more useful.