Site users

Where are we?

A good Web site helps three groups: users, owners, and builders. This lesson and the next are about users.

What makes a Web site good for users? Remember that “good” means “helping people with their goals.”

We need to understand:

• The goals users have.
• The actions they take to reach their goals.
• How Web sites support those actions.

Let’s talk about how this works on CarlysSchool.Com.

This lesson’s goals

Learn:

• There are common questions users are trying to answer when they visit a Web site.
• Information architecture is working out what information should be on a site, and how it should be grouped into pages and sections.
• People browse through a site to find information. When users click from page to page, they are often following the “scent of information.”
• Browsing is easier when there are menus, scannable pages, readable pages, predictable pages, and “You are here” signs.
• People also use a site’s search function to find information.

CarlysSchool.Com

Carly’s School is a human obedience school in Rochester, Michigan, USA. Carly offers beginner to advanced courses. Beginner courses focus on the basics, like teaching your human to let you inside when you bark. Humans learn tricks in advanced courses. Like the Dance of the Tangled Leash.

 

Carly’s School has just one location, in downtown Rochester. Customers are local, most from within a few miles.

Users’ goals

What do people want to do with Carly’s site? Let’s break users into two types, depending on why they visit CarlysSchool.Com.

The first group are the DIYers (DIY = do it yourself). They don’t want Carly to do the training. DIYers want to train their humans themselves.

The second group are the potential customers. They are people who live near Carly’s School, and are looking for a class for their humans.

Carly decides not to help the DIYers on CarlysSchool.Com. This is a business decision on her part. She decides the site should only help potential customers.

The potential customers have one main task: to decide whether to sign up for a class. They’ll use CarlysSchool.Com to get the information they need to make that decision.

What information do they want? Carly talks to potential customers all the time. Their most common questions are:

• What obedience schools are in the area?
• What courses does Carly’s School offer?
• What benefits do the courses offer?
• What do the courses cost?
• Where are the courses taught? When are they offered?
• Is my human ready for a course?
• Can I talk to someone about the courses? Who?
• How long has Carly’s School been in business?
• Does Carly know what she’s doing?
• How do I sign up?

Carly decides that CarlysSchool.Com should help users answer all of these questions, except for the first one. She doesn’t want to advertise the competition.

Carly also has decided not to do any online course registration, at least not yet. Maybe in the future. To register for a course, people need to call the store, or visit in person.

So, these are users’ goals. How do they meet their goals?

Users’ actions

Users get answers:

• With a search engine.
• By looking through CarlysSchool.Com.

There are other ways customers get information, like word-of-mouth, and traditional print advertising. But let’s focus on Web things.

Someone might do a Google search, like this:

Figure 1. Google search

The closer Carly’s School is to the top of the rankings, the better. Getting a site to the top is called search engine optimization (SEO).

Suppose someone does the search in Figure 1, and clicks on the link to CarlysSchool.Com. The user has now left Googleland, and is on Carly’s site, seeing the Web pages that Carly owns. The user can find information in two ways:

• Browsing
• Searching – not in Google, but in Carly’s site

Browsing CarlysSchool.Com

Browsing means looking around the site, clicking from page to page. Webers used to think that people would not browse a site, or at least not much. They had rules like, “No information should be more than three clicks from the home page.”

But research found that people will browse. They’ll click, click, click – if they’re following the “scent of information.”

It’s like a dog following a rabbit. If the scent trail is strong, the dog will follow it. S/he won’t get distracted, even if the trail crosses other trails. But if the scent isn’t clear – if the dog isn’t sure which way to go next – the dog might get distracted by something else.

Figure 2. Scent trail

It’s the same with a site. Users visit page after page. If they think they’re getting closer to the information they want, they’ll keep going. But if they’re not sure what to do next to get closer to the information, they might give up, and go to another site.

So a good Web site is browsable. It lays down information trails users can follow. We’ll talk about how to make a site browsable in a moment.

Searching CarlysSchool.Com

When most people hit a site, they start browsing. But some start searching. I’m not talking about Google, but about the site’s own search function. For example, CoreDogs has a search box on every page:

Figure 3. Search box on a site

This is an internal search engine. Google is an external search engine.

How CarlysSchool.Com can help users

Where are we?

• People have questions, like what Carly’s School charges for courses.
• They use search engines to get to CarlysSchool.Com.
• When they get there, they browse and search within the site.

Let’s talk about how CarlysSchool.Com can help users find information.

Information architecture

Information architecture is about how information is arranged on a site. This means:

• Putting the right information on the site.
• Grouping it into pages.
• Grouping pages into sections of the site.

Let’s take the first one. Carly has listed the questions that customers have. Answers to those questions should be on the site.

It’s important to get this right. The whole reason Carly wants a Web site is for customers to get their questions answered. If they like what they see, they might give Carly some business.

Information is grouped together on pages. But it can be grouped in different ways. For example, say there are three courses. Carly wants to answer the following questions about each course:

• What does the course teach humans to do?
• How will this benefit the humans’ dog?
• What does the course cost?
• What is the course schedule?

You could make a page for each course, answering all these questions.

Similar pages are often grouped into sections of a site. Carly’s site might have a section called “Courses.” The individual course pages would be in that section. There would be a front page for the section, giving links to the individual courses.

Here’s how the section could be organized:

Figure 4. Information architecture

The “course section” is not a physical thing. It’s just a set of pages that are presented to the user as if they belong together.

To summarize, information architecture is about what information is on the site, and how it is grouped into sections and pages.

Supporting browsing

“Supporting” means “making it easy.” We want to help users find information by browsing through the site’s architecture. We need to give them the scent of information, so they know where to click next to get closer to the answer they want.

So how can we make browsing easier?

Menus

Menus help people quickly learn what is on a site, and jump to relevant pages.

CoreDogs has a menu of tabs at the top of every page:

Figure 5. Tabs

Each tab corresponds to a section of the site.

The tree menu on the right of each page shows the structure of the lessons section:

Figure 6. Tree menu

The current page is highlighted.

Carly might put a menu at the left of each page. It would have buttons for the major pages and sections of the site. Here’s a simple menu:

Figure 7. Vertical nav bar

This is often called a vertical navigation bar, or nav bar for short. You’ll learn to make nav bars later.

Scannable pages

A page is scannable if you can quickly run your eye over it, and pick out important information.

Headings make pages scannable. Scroll up and down this page, and the section headings will stand out. They use different font sizes and colors from the rest of the text.

Make sure it’s clear which heading goes with which text. Compare these two page fragments.

Figure 8. Grouping

The eye uses whitespace to decide what headings belong with what text. That’s easier in the second fragment.

Another way to make text scannable is to use emphasis. Like the word “emphasis” in this paragraph. The word stands out as you scan the text.

To summarize, making pages scannable helps users browse them quickly.

Readable pages

Readability is very important. Users can’t find information they can’t read!

There are two aspects to this: the look of text, and the writing.

Look is about font face, color, size, etc. This is bad:

Figure 9. The look of text

The colors make the text hard to look at.

Writing matters as well. Obviously there should be no spelling errors. But there are other guidelines, too.

• Use lists. Like this one.
• Use simple words.
• Use short sentences and paragraphs.
• Use active voice.
• Be informal, where appropriate.

Grammar is important. But I’ll drop rules that reduce readability. For example, I’ll end sentences with prepositions.

We’ll talk more about text later.

Predictable pages

Help users browse Web sites by making pages predictable. This helps people direct their attention to the right place.

• Consistent layout. For example, every CoreDogs page has a menu on the right.
• Consistent fonts and colors. For example, all major headings should be the same size and color.
• Make links look like links. Use underlining, and color:

Figure 10. A link

When a link points to a page outside the current site, CoreDogs adds an icon, like this:

Figure 11. An external link

“You are here” signs

Use signals to helps users know where they are in the site. CoreDogs uses menu highlighting and breadcrumbs.

Tabs are on the top of each CoreDogs page. Each section of the site has a tab:

Figure 5 (again). Tabs

One of the tabs in Figure 8 is highlighted. That’s the section of the site the current page is in.

The tree menu on the right highlights the current lesson:

Figure 6 (again). Tree menu

Breadcrumbs show the path to the current page:

Figure 12. Breadcrumbs

Let’s summarize.

• A good site helps people reach their goals.
• Users of CarlysSchool.Com have questions, like what classes are offered.
• Users browse and search Web sites for answers.
• You can support browsing by making sites scannable, readable, and predictable, and adding “You are here” signs.

Let’s talk about searching.

Supporting searching

CarlysSchool.Com should have a search box, like the one on CoreDogs:

Figure 3 (again). Search box on a site

The user types something in…

Figure 13. Searching

... and gets some search results:

Figure 14. Search results

The results show each page where the search term “breadcrumbs” was found. The page you’re looking at now is listed.

Searching can get complicated. For example, suppose I type “programming” into the CoreDogs search box:

Figure 15. A search

Here’s one of the results:

Figure 16. A search result

But wait a minute. The word “programming” isn’t in the result. In fact, it’s nowhere on the Writing a JS program page. So why is it in the search results?

The CoreDogs search engine can handle stems. “Program” is the stem of the word “programming,” so CoreDogs returns pages with “program” in it. The Writing a JS program page contains the word “program.”

One reason for Google’s success is that it handles stems, misspellings, synonyms, abbreviations, and other things. For example, if you search for “cascading style sheet,” Google will return pages that have the abbreviation “CSS,” even if they don’t have the term “cascading style sheet” at all. This happens so naturally that you usually don’t even notice how smart Google search is.

And of course, autocomplete gives some interesting facts:

Figure 17. Google autocomplete for “dogs are”

Summary

• There are common questions users are trying to answer when they visit a Web site.
• Information architecture is about working out what information should be on a site, and how it should be grouped into pages and sections.
• When users click from page to page, they are often following the scent of information.
• People also use a site’s search function.
• Browsing is easier when there are menus, scannable pages, readable pages, predictable pages, and “You are here” signs.

What now?

Let’s look at how people use WanderingDog.Com, an ecommerce site.

WanderingDog users

Where are we?

We’ve seen how CarlysSchool.Com helps users learn about the human obedience school. Let’s see how an ecommerce site could help users buy stuff.

This lesson’s goals

Learn that:

• Users have two goals at the WanderingDog.Com ecommerce site: choosing a product, and buying a product.
• Choice strategies include (1) choosing a product that others recommend, (2) choosing based on one major product attribute, or (3) choosing after a detailed analysis of many products.
• WanderingDog.Com uses product category pages to support all three strategies.
• WanderingDog.Com has a horizontal nav bar listing all the product category pages.

WanderingDog

Jesse runs the online store WanderingDog.Com. There’s Jesse on the right. Hello, Jesse!

WanderingDog sells portable electronics for dogs, like MP3 players and paw-held games. It only does business on the Web. There is no physical WanderingDog store.

In this part of the chapter, we’re talking about what makes a site good for users. So let’s talk about that for WanderingDog.Com.

Users’ goals

Users have two goals when they go to WanderingDog.Com.

• Choosing a product to buy.
• Buying a product.

Users’ goals change over time. Suppose a user visits WanderingDog.Com three times. On the user’s first two visits, s/he learns about MP3 players, deciding which one to buy. The user’s goal on these visits is “choosing a product.” S/he then makes a choice. The goal on the third visit is “buying a product.”

To keep things simple, let’s just talk about the first goal: choosing a product.

Users’ actions

Jesse looks at research on how people choose stuff to buy. This is what he learns:

1. Some people choose the product that trusted people recommend. “Trusted people” could be friends, experts, or just other people in general (that is, buying the product that most other people buy).
2. Some people focus on just one product attribute, like price, or coolness. They start by looking at, say, the cheapest product. If that does what they want, they stop looking. If it doesn’t do what they want, they look at the next cheapest one. And so on. They stop when they find a product that is satisfactory.
3. Some people spend more time. They learn about the product category, like MP3 players. They think about their needs. They look at several, or maybe many, products, and make a careful choice.

Jesse designs WanderingDog.Com to support all three of these actions.

How WanderingDog.Com can help

Product categories home pages

Jesse gives each product category – MP3 players, games, etc. – its own section of the site, with its own front page. The category front pages will support the three ways of buying a product.

Here’s Jesse’s drawing of a category front page. His pawwriting is bad, but you should be able to get the idea:

Figure 1. Category front page

This page supports all three ways of choosing a product.

• Recommendations. You can see what other people think (“The People’s Choice”). You can read what the experts like best by clicking on “The Reviewer’s Choice.”

• Single important attribute. You can see which product Jesse thinks is the coolest, and which is the best value. Notice that Jesse changed “cheapest” to “best value,” to use more positive words.

• Complete analysis. If you want to get into the details of all of the products, you can use the grid at the bottom. Click on the column titles to sort the data by name, price, whatever.

See how Jesse is working systematically to make a good site. He thought about user goals, and the actions they take to reach them. Then he designed something that would help.

Finding the right category home page

How to make it easy for people to find the right category front page? Jesse decided to make a menu at the top of each page:

Figure 2. Nav bar

There’s a button for each section of the site. This is common; it’s the way CoreDogs works, for example.

This type of menu is also called a horizontal navigation bar, or nav bar for short. You’ll learn how to make nav bars later.

Summary

• Users have two goals at the WanderingDog.Com ecommerce site: choosing a product, and buying a product.
• Choice strategies include (1) choosing a product that others recommend, (2) choosing based on one major product attribute, or (3) choosing after a detailed analysis of many products.
• WanderingDog.Com uses product category pages to support all three strategies.
• WanderingDog.Com has a horizontal nav bar listing all the product category pages.

What now?

A good Web site helps users meet their goals. We’ve seen how that works with two sites.

Now let’s talk about what site owners want.

Site owners

Where are we?

This chapter is about what makes a Web site good. A good site helps users, owners, and builders reach their goals.

We’ve talked about users. Now let’s see how sites help owners. We’ll look at the same two sites: CarlysSchool.Com, and WanderingDog.Com.

This lesson’s goals

Learn:

• The owners are the people who pay for the Web site.
• Sites for private companies should make money, either directly (e.g., by selling through the site), or indirectly (e.g., by generating leads).
• Users are in charge on the Web.
• A value proposition tells customers why they should buy a company’s product or service.
• Branding creates an identity, and reminds people of the value proposition.

Money and not money

The owners are the people who pay for the Web site. They have things they want the site to do for them. Let’s call these things the “business goals” of the site.

The two example sites in this chapter – CarlysSchools.Com, and WanderingDog.Com – belong to money-making (we hope!) businesses. So an obvious business goal is: sites should make money.

But commercial sites often have other goals as well. People who run small companies care about how they make a living. Many business owners would make more money if they worked for a company, but they choose not to.

Let’s talk about money and non-money goals.

Making money

Businesses make money by selling stuff to customers. No news there.

A Web site can be part of the selling process. But the role it play varies.

Generating leads

Let’s look at Carly’s School. Recall that it sells obedience courses. Carly’s School trains humans to obey their dogs.

Here’s how the buying process might work for a customer.

Figure 1. A Carly’s School customer

Here are the parts that the Web site helps with.

Figure 2. What CarlysSchool.Com helps with

Carly’sSchool.Com doesn’t actually complete the sale. Instead, the Web site generates leads. Leads are potential customers. The Web site helps bring them into the business, where the sale can be completed.

Direct sales

WanderingDog is different. It sells directly from the Web site.

Here’s a sample sales process.

Figure 3. A WanderingDog customer

Here are the parts of the process that WanderingDog.Com helps with.

Figure 4. What WanderingDog.Com helps with

This Web site handles more of the sales process.

The value proposition

Users are just a click away from thousands of sites. If owners want to attract customer, their sites have to offer clear value propositions.

A value proposition tells customers why they should buy a company’s product or service.

For example:

Carly’s School trains humans to obey their dogs.

This is a promise that Carly’s School makes.

For Carly’s School to succeed, it needs to:

• Have a value proposition people want.
• Let people know what the value proposition is.
• Deliver on it.

WanderingDog.Com says:

WanderingDog.Com helps you find the portable dog electronics you want.

This value proposition says you get the electronics, yes, but there’s more to it. There’s the “you want” at the end. WanderingDog.Com helps customers make good choices.

WanderingDog.Com is vulnerable to competition. There are hundreds of sites that sell portable electronics. They’re all just a click away. WanderingDog has to deliver on its promise.

That’s why Jesse spent time learning how people choose products. He couldn’t deliver on the promise otherwise.

Communicating the value proposition

Marketers talk about “branding.” The most important things branding does are:

• Create an identity for something, like a product or a site.
• Remind people of the value proposition.

CoreDogs is typical of a branded site. Look at the page header:

Figure 5. CoreDogs header

The name of the site is there. Just put a .com on the end of it, and you have the site’s URL.

There’s a logo. It ties in to the dog theme. Notice how simple it is. Easy to reproduce. The logo is used in other places, like CoreDogs’ Facebook page.

The value proposition is right there as well.

The CoreDogs color scheme is white, brown, and black. Dog colors. The header uses the scheme.

If you look closely, you can see some dog paw prints.

All of this builds a set of mental associations with the name “CoreDogs.”

If you build a site for yourself, a business, or a non-profit, keep branding in mind. Try to create an identity for the site, and link it to the value proposition.

Summary

You learned that:

• The owners are the people who pay for the Web site.
• Sites for private companies should make money, either directly (e.g., by selling through the site, or indirectly (e.g., by generating leads).
• Users are in charge on the Web.
• A value proposition tell customers why they should buy a company’s product or service.
• Branding creates an identity, and reminds people of the value proposition.

What now?

We’ve talked about two typical commercial sites. But what about your site?

Your eMe

Where are we?

We’ve talked about two commercial sites. What about your site?

Why you should have a site

You should have a Web site, with your own domain, like dalmationpower.net, or caseybrandenburg.com.

It will be yours to control. Want to show off your killer Magic the Gathering deck? Go ahead. Want to show photos of fun places you’ve been? No problem. Want to list the best dog parks around? OK. It’s your site, so you get to decide.

Use your site to show the Web skills you’ve mastered. In CoreDogs, you’ll learn how to show pictures, format text, make slide shows, quizzes, and other things. Impress your friends, or just make something for the challenge.

You can use your site to support something you care about. A local sports team, dog rights, Scottish independence. You could explain why the issue is important, and what your opinion is. Include photos, YouTube videos, and links to other sites.

Show your poetry, or artwork. Photos of you winning Best in Show. CoreDogs will explain how.

What do you want your site to be about?

What are you into? Acid techno? TMNT? Shoes? Basketball?

Pick two or three of the things you’re into. For each one, list some stuff you would put on your site. For example, for Buffy the Vampire Slayer, I might have stuff on:

• Willow (sigh)
• The musical episode in season 6 – the best television ever!!
• Faith, the bad slayer. 5×5, B.
• Glory, the bad god. Sometimes.
• The preacher in season 7. The scariest evil doer of all time.
• Why Dawn is so annoying. Really. She is irritating beyond belief. Such a meat puppet. So is Connor, in Angel. Blech.

Now you’ve got some ideas for your site.

Or…

Looking for a job? A Web site will help. Employers can get to know you. They can also see your mad Web skillz.

If you to try this, check out the article Personal brands: An introduction.

What now?

Web sites cost money. Let’s talk about that.

Site cost

Where are we?

This chapter is about what makes a Web site good. A good site serves owners. We’ve talked about how a site can increase sales. But owners want to control costs as well. Let’s talk about that.

This lesson’s goals

Learn:

• A business that has a Web site must pay to (1) create a site, (2) run the Web server and its infrastructure, and (3) keep the site’s content up-to-date.
• Web servers for most small business sites cost from about $20 to $200 per month to run.
• A content management system (CMS) can reduce the cost of updating a Web site, by (1) reducing the cost of creating the site, and (2) letting less skilled people update the site.

Types of cost

The value proposition and branding are about sales. They’re about getting people to come to the site and do business.

But profit is sales minus cost. If the site is too expensive to run, the business won’t make a profit. Owners want sites that are cheap to run.

Creating the site is obviously a major expense. But it’s not the only one. Once a site is up and running, there are two main types of costs:

• Technology operation, particularly the Web server.
• Keeping the site up-to-date.

Of the two, the second is usually more expensive.

Technology costs

Every site needs a Web server, a computer that sends data to browsers. The server needs to be in an air-conditioned room, plugged in to a power outlet, and connected to the Internet. It needs to be kept secure. The data needs to be backed up regularly, so it can be restored if something goes wrong.

All of this costs money. But not much, at least for a typical small business. Very few companies run their own servers. Instead, they pay other companies to run the servers for them.

Hosting companies run Web servers, and sell space on them. CarlysSchool.Com could spend as little as $10 per month on its Web server. You’ll learn more about this later.

WanderingDog.Com might need more power. But, unless the site became very popular, it would not cost more than $200 per month. That’s a lot cheaper than a physical store!

There can be other technology costs as well. For example, Carly might buy a PC for her store, so she or someone else can update the site from there.

Keeping the site up-to-date

Someone has to keep the site up-to-date. This labor cost is often the most expensive part of running a site.

CarlysSchool.Com might not change very much over time. Add new courses, change the starting dates of the next courses, change prices. Maybe a few changes per month.

WanderingDog.Com would change a lot. New products would come out. Older products would be retired. There would be new expert reviews all the time. The site would change every day.

Summary

• A business that has a Web site must pay to (1) create a site, (2) run the Web server and its infrastructure, and (3) keep the site’s content up-to-date.
• Web servers for most small business sites cost from about $10 to $200 per month to run.
• A content management system (CMS) can reduce the cost of updating a Web site, by (1) reducing the cost of creating the site, and (2) letting less skilled people update the site.

What now?

This chapter is about what makes a Web site good. We’ve talked about users and owners. What about the people who build the site? What makes a site good for them?

Site builders

Where are we?

A good Web site serves users, owners, and builders. We’ve talked about the first two. Now let’s see what people who make Web sites want.

This lesson’s goals

Let’s talk about three things:

• Satisfying users and owners.
• Productivity.
• Pride in craftsmanship.

Satisfying users and owners

At the beginning of a project, owners and builders sit down together. Here are three different ways the conversation might go:

Conversation 1. The conversation is about the business, who its customers are, what customers want, how the business makes money.

Conversation 2. Owners list tech they want, like lots of Flash, and animation, and movies, and sound, and pop up ads. Some Webers, particularly inexperienced ones, will enthusiastically agree, and start working.

Conversation 3. Owners say, “You’re the experts. Build a good site. Let us know when you’re done.” The Webers guess about business goals and customer needs.

Conversation 1 is a good start. It keeps everyone focused on business goals and user needs. The owners have a good chance of ending up with a site that serves business and user goals.

Conversations 2 and 3…, well, it’s not going to be pretty. The owners will get a site that people don’t want to use, and that doesn’t serve the business. The owners will be angry with the Webers, the Webers will be angry at the owners, and both will be angry at the users.

Experienced Webers know that a successful project is as much about the business as the tech. Wise owners know this, too.

One of the worst things Webers can do is to get some initial input from owners, go away and build a complete site, and then present it to owners. It’s unlikely that owners will like what they see.

Why? Because business and user needs aren’t all known when the project begins. Some goals are known at the beginning, but others are uncovered as the project goes along.

Owners and builders should meet every week or so, and review the work so far. Over time, they’ll get a better idea of the final goals of the site.

Goal changes can be frustrating. Webers could have spent hours creating something, only to be told, “Oh, now that I’ve seen it, I guess we don’t want that after all.” This is normal. It’s simply the way things work in the real world.

At some point, owners and builders will need to throw away some of their work. It takes courage to say, “OK, we were wrong about that goal. Let’s change it.”

But what’s better:

• Keep going down a path you know is wrong?
• Change direction, and work towards a site that might actually succeed?

To make a good site, start with wise owners and Webers, who accept joint responsibility for the project.

Productivity

Suppose you’re starting a journey. The time it takes depends on:

• Whether you go in the right direction.
• How quickly you travel.

Working together helps owners and builders move in the right direction. Productivity is about how quickly they travel.

Builders try to:

• Use the right tools.
• Reuse their work.

Tools

Builders need tools to write programs, edit images, and do other things. We won’t talk about them all right now. That comes later.

I’ll just give you one example here. Suppose you want to make a page like this:

Figure 1. Output

You open an editor, a program that lets you type and save text. Editors are like word processors, but without all the formatting and stuff. Just plain text.

You type this:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Dogs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    <script>
  </head>
  <body>
    <h1>Dogs</h1>
    <p>Dogs are the best.</p>
  </body>
</html>

Figure 2. Your code

You try it, but it doesn’t work.

You left something out. Line 8 should have been…

</script>

... instead of…

<script>

That one missing character – a / – makes all the difference.

Remember, you use an editor to type in your code. There are many editors you can use to write pages. Two I talk about later are Notepad++ and Netbeans.

Suppose you use Notepad++. Here’s what the page with the error looks like when typed into Notepad++:

Figure 3. Code in Notepad++

Here’s what it looks like in Netbeans:

Figure 4. Code in Netbeans

Netbeans shows you that something is wrong. Put the mouse cursor over the error, and see this:

Figure 5. Error message

Netbeans can analyze your code. It can show you errors it finds. It doesn’t always know exactly what is wrong, but it tells you that something is.

Netbeans takes longer to learn than Notepad++. But most Webers prefer tools like Netbeans. Tools that show errors make you more productive.

Of course, Netbeans will only show some errors. But some is better than none.

So the right tools make builders more productive.

Reuse

Reuse is another way to be productive. The idea is to create something once, then use it again and again.

Templates are great examples of reuse. Most Web sites have a standard look for their pages. For example, most CoreDogs pages look something like this:

Figure 6. CoreDogs template

I wrote the code for the template once. It gets reused again and again. So the effort I spent on the template pays off again and again. At the time I’m writing this, I’ve reused the template more than 900 times.

W00f! A productivity win.

Templates also make the site easier to change. Suppose I wanted to change the CoreDogs logo to this:

Figure 7. New logo

I just change the code in the template, and every page in CoreDogs would change.

Craftmanship

Webers love to show off their best stuff. Just like carpenters, writers, artists, and engineers. It feels good when someone says, “That’s good work.”

There’s a danger, though. A Weber can make a page too complicated, just to show off his/her skills. This can increase the cost of a site, and even make it harder to use. Webers should remember that they’re creating something for owners and users, not for themselves.

Summary

• Owners and builders need to work together to make a Web site good.
• Goals change during a Web site project.
• Owners need to constantly review what builders make.
• Using the right tools makes builders more productive.

What now?

A good Web site serves users, owners, and builders. We’ve looked at things that are important to all three.

Let’s summarize, and then move on to the next chapter.

What "good" means

What’s good?

So what makes a Web site “good?” Here’s what I think.

A good site helps people meet their goals. It helps the people who use it, the people who own it, and the people who build it.

Sometimes you can tell a Web page is bad, just by looking at it. Here’s an example:

Figure 1. Bad page

But “goodness” isn’t just a matter of look. You need to think about what a site is for before you can decide whether it’s good.

Look at Google:

Figure 2. Google

This is so plain. Nothing fancy at all.

Is it good? I would argue that, yes, it’s good. Because it helps you search.

Learning about goodness

What does this view of goodness mean for you, as you learn about the Web’s core?

It might lead to you think about things that are not “tech” at all.

For example, a page has to be readable to be useful. Figure 1 shows that part of readability is about fonts and colors.

But readability is also about the writing. No spelling errors. Short sentences. Simple words. All of these things affect how easy text is to read.

Good writing isn’t about tech. But it affects site goodness. So, CoreDogs talks about writing for the Web.

The rest of this book

This book – Foundations – has three more chapters.

• Clients and servers. How Web browsers and Web servers work together.
• Basic Web sites. How simple sites work.
• Interactive sites. How Web pages change based on what users do.

Onward!