Where are we?

Let’s put your technical skills to use. This page gives an overview of how you create a static Web site that meets owner, user, and developer goals.

This page’s goals

By the end of this page, you should know the three main steps of site creation:

• Setting goals

• Designing a framework

• Filling the framework

The three steps

There are three big steps in creating a site:

• Setting goals for the site

You need to know what users want from the site, what the site’s owners want, and what you as a Weber want.

• Designing a framework for the site

A framework is a structure for your site and its pages. Creating the site will be easier if you design a framework before you jump in and start coding individual pages.

• Filling the framework

If you’ve done the framework right, you can focus on the content of each page, and not worry about colors, fonts, navigation, and so on.

Let’s go over each step.

Step 1: Setting goals

Setting the right goals is critical. You can spend hundreds of hours creating a whiz-bang site with all the latest goodies. But if it doesn’t help users do something they want to do, it won’t be worth much.

You should pay attention to the goals of three types of people: site owners, site users, and Webers.

Site owners pay for the site. They care about things like user behavior (e.g., buying stuff), branding and brand awareness, and the costs of the site.

Site users come to the site (or not). They want to do tasks, like find out what the site owner’s store charges for dog grooming. They also want to have a good, or at least not unpleasant, experience at your site.

The third group is the Webers who create the site. They want to help users and owners meet their goals. They want to control costs for the owners. Most Webers also want to take pride in their work.

Step 2: Designing a framework

Once you have the goals, you could dive in and start coding pages. But it’s best to create a framework first.

There are two things here. The first is the overall structure of the site, that is, the sections, subsections, and pages (e.g., a products section, with a section on grooming products, with a page on shampoos). This structure is what the user sees in the navigation bars, site map, page titles, and so on.

Figure 1. Site structure map

The second thing is designing a page template or two. Every page on the site will be based on a template that has standard layout and a standard look and feel. Making a template gives your site consistency. The nav bars will be in the same place on different pages, the fonts will be the same, etc.

Figure 2. Page template

Step 3: Implementing the framework

Once you know the goals and have a framework, you start creating pages. You copy the template to make a new page, add content, copy the template again, add content, and so on. This will go smoothly if the framework is solid.

Cycling through the steps

You might think that you always do the steps in order, like this:

Figure 3. The ideal

Very neat. But this is what happens in the real world:

Figure 4. The real world

For example, you’ll work out the goals, and then when you’re creating the structure, you’ll think about a new goal the site should meet. You’ll go back and add the goal, and revise the structure. Then when you’re filling in the framework, you’ll think of a way to improve the template, so you’ll go back and revise it.

Revising is normal. It happens in every project, no matter who the Weber is. CoreDogs lessons have been revised many times. In fact, how can you improve the quality of a Web site without changing it?

You should plan for change. If you design the framework the right way, most changes won’t take too long. But if you design it poorly or, even worse, don’t design it at all, your site will be difficult to change.

Summary

There are three main steps in designing a Web site:

• Setting goals

• Designing a framework

• Filling the framework

What now?

Before we get started on the first step, let’s talk about creating a place for you development work.