A production site

You’ve learned a lot! HTML tags, CSS rules, jQuery, images, tables, links, navigation bars, ...

Baby, you got skillz!

Now for the Big Payoff: creating a complete Web site. That’s what this lesson is about. We’ll do the whole thing, from start to end.

Along the way, we’ll work on your eMe. If you’ve followed along, it looks pretty good. But right now, it’s more a collection of stuff than a planned creation.

It’s time to rethink your eMe. Set some goals, and organize it more.

Cool dog
Cool
Kuo

Most people can’t create their own sites, on their own domain. You can. That’s freakin’ cool!

As well as your eMe, in this chapter you’ll make a site about dog parks. And see how a small business made its Web site.

Let’s go!

Process overview

Where are we?

You have a lot of tech skills. Let’s put them to use.

This lesson explains how you create a basic Web site, that helps both the people who use the site, and the people who own the site.

This lesson’s goals

By the end of the lesson, you’ll know the three Big Steps to making a good site.

The three steps

There are three Big Steps to making a site:

  • Set goals

Work out what your site should to. How it will help users, and site owners.

  • Design a framework

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.

Your framework includes page templates, with colors, fonts, images, etc.

  • Fill the framework

Now that you have the framework, you can make each page in the site. Copy a template, and add your content.

Let’s go over the Big Steps.

Step 1: Set goals

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.

Suppose you make a site about dog vacations at the beach, for a dog travel company. People want to:

  • Find a vacation spot
  • Book it
  • Travel there
  • Have fun

Your site should help people do these things. Your site could:

  • Have a list of vacation spots, with locations, prices, and other data. People can add reviews of each spot, and give a rating from 1 to 5.
  • Make it easy for people to book a location. Let them enter their credit card info, confirm their reservation, like that.
  • Show maps of how to get to each vacation spot.
  • Tell people how they can have more fun. For example, how to find human day care, so they can enjoy some quality dog time.

The bottom line: if your site helps them, people will use it.

Your site also has to help the people who own the site, and pay for it. The dog travel company wants to make money. How to do that?

  • Have ads on the site, but not for other dog travel companies.
  • When someone books a vacation through the site, the travel company gets a referral fee.
  • Let people buy related products through the site, like sunglasses, and games to keep humans busy (beer and TV works well).

Put together these two lists, and you have the goals of your site.

Step 2: Design 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. A site might have a products section, with a grooming products subsection, and in that subsection a page on shampoos.

This structure is what the user sees in the navigation bars, site map, page titles, and so on.

Site structure map

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.

Site template

Figure 2. Page template

Step 3: Implement 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, ....

Cycling through the steps

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

The ideal

Figure 3. The ideal

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

The real world

Figure 4. The real world

When you start a new project, you begin with goals. You write them down, and then move on to the framework. But when you’re creating the structure, you think of a new goal. You go back and add the goal, and revise the structure. Later, when you’re filling in the framework, you think of a way to improve a template, and go back and revise it.

Revising is normal. It happens in every project. CoreDogs lessons have been revised many times.

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:

  • Set goals
  • Design a framework
  • Fill the framework

What now?

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

Development site

Where are we?

When you work with a site owner, you need to have a way to get feedback from him or her about your work. This lesson shows you how to create a private version of a site that only you and the owner can access.

This lesson’s goals

By the end of this lesson, you should:

  • Understand why you need a development site.
  • Know about several options for development sites.
  • Be able to password protect a directory.
  • Know that using relative URLs will make publishing a site easier.

Why you need a development site

Let’s assume you’re working on a site for someone else. Your boss, a client, whomever.

You talk a lot with the site owner. You show the owner something, and ask for feedback. You change the site, and ask again.

Weber and owner working together

Figure 1. Weber and owner working together

Of course, the site owner could be you, in which case you talk to yourself a lot. Try to keep those conversations private, or you could find yourself spending time in a “special” kennel.

You don’t want regular people to see the site as you’re working on it. Just the owner, and other people you want to get feedback from.

Only when the site is ready do you show it to the outside world. This is often called publishing the site.

So you need:

  • A development site. A version of the site that only a few people can see.
  • A production site. The finished site, copied from the development site.

Weber publishing the final site

Figure 2. Weber publishing the final site

Sometimes the development site is hosted on a special development server, a machine (or Web hosting account) that is physically separate from the production server. But sometimes the development and production sites are on the same server.

Let’s look at some ways you can create a development site that only you and the site owners can see. I’ll assume that the production site will be on a shared Web host, like Hostgator.

For this page, let’s say you’re working on a site about dog blankets. It will be at dogblanket.com.

Your PC

You can create the development site on your own PC (or Mac or whatever). This works well if you are building a site for yourself, or if you and the owner can easily get together over the same computer.

Where to put your development site’s files? The easiest is just to create a directory somewhere on your disk drive. Put the files for the site there. For example, if you are working on the dog blankets site on a Windows computer, you might put the files in My documents\websites\dogblanket.

Another way is to install Web server software on your PC. I recommend XAMPP from ApacheFriends. XAMPP packages the Apache server with some other common server software. You usually install it on C:\ (for Windows). The root of the XAMPP Web server will be something like C:\xampp\htdocs\. So you would put the files for your dog blanket site in C:\xampp\htdocs\dogblanket\.

You need to install XAMPP if you want to run PHP programs on your computer. These could be programs you write yourself, or things like content management systems, photo galleries, newsletter programs, etc., that other people write. More about this in the book ServerCore.

So that’s the first option for a development site: your own computer.

A portable file system

USB flash drive

Another alternative is to put your development Web site on a portable file system, that you can carry around with you. One way to do that is with a USB flash drive. Plug it in to your own computer when you want to work on the site yourself. When you go talk to the owner, plug it in to his/her computer.

You can also put software on the device, like the editor Notepad++. You can make quick changes to the site when you’re working in the site owner’s office.

But remember, do most of your work with an intelligent tool like NetBeans. Use Notepad++ just for quick edits.

The ultimate portable file system is a laptop. It comes with a computer attached. This is a good option, because you don’t have to use the site owner’s computer when you visit him/her. You have all of your own software, browser bookmarks, and so on.

So far, we have two options for a development site: your regular computer, and a portable file system.

A directory on your Web host

The problem with using your own computer or a portable file system is that you and the owner have to be physically in the same place to work together. It would be nice if you could make a change to the development site, and send an email to the owner, asking “What do you think of that?”

One approach is to create a directory on your Web hosting account, and use it to host the development site. The directory tree on your Web server for the dog blanket project might look like this:

Development site in directory

Figure 3. Development site in directory

The development site (the green box) is another version of the actual site (the blue box). It’s inside the production site’s directory tree. You can mess with the development version without affecting what users of the production site see.

The domain name is dogblanket.com. The URL of the production home page would be http://dogblanket.com/index.html. The URL of the development home page would be http://dogblanket.com/development/index.html.

Home pages

Figure 4. Home pages

You can password protect the development directory, so that only people you give the password to can access it.

Password protect the development directory

Hostgator’s control panel gives you an easy way to put passwords on directories. If you use another hosting company, there’s probably a way to do this, but it might be different.

This is from the homepage of one of Hostgator’s control panels:

Protect a directory with a password

Figure 5. Protect a directory with a password

You select a directory to protect (like the development directory), then enter a user name and password for it:

Creating a user name and password

Figure 6. Creating a user name and password

You can create more than one user name and password for the directory. But usually you won’t need to.

When a user tries to access a file in the directory, s/he has to enter a user name and password:

Authentication

Figure 7. Authentication

You can give the user name and password to anyone you want to get feedback from.

A subdomain

We just saw how you can put your development site on a subdirectory on your host. You then access your development home page with a URL like:

http://dogblanket.com/development/index.html

There’s another approach that’s similar. Your development files are kept in a directory on your server, as before. But the URL you use is different. You use something like:

http://development.dogblanket.com/index.html

development.dogblanket.com is a subdomain of dogblanket.com.

The Hostgator control panel lets you make subdomains easily. Find the domain section:

Domain menu

Figure 8. Domain menu

Click Subdomains.

Fill in the form to add a subdomain. In this example, I wanted to create the subdomain borderlands.coredogs.com.

Creating a subdomain

Figure 9. Creating a subdomain

The files for borderlands.coredogs.com will be stored in the directory public_html/borderlands. The directory will be created for you if it doesn’t exist. You can password protect the directory.

Now put your development files in public_html/borderlands, and you have a development site. W00f!

Version control

Earlier, we talked about simple version control. After you’ve done some work on your site, take a snapshot of it. If you mess up, you can go back to the last snapshot.

You can do this no matter where you put your development files. Laptop, subdomain, whatever. It’s a Good Idea. Just takes a moment, and could save you lots of pain.

Use relative URLs

When your development site is ready, you want to copy it to its final destination on the Web. This is often called “publishing” the site.

You have to be careful. It’s easy to break pages when you do this.

The problem has to do with the difference between relative and absolute URLs. We talked about this before. Let’s do a quick review.

Suppose you were writing the page at http://dogblanket.com/development/index.html. This is the home page of the development site.

Development site in directory

Figure 3 (again). Development site in directory

You wanted a link to the main page of the products section of your site. So you added this HTML, with an absolute link:

<p>Check out our awesome <a href="http://dogblanket.com/development/products/index.html">products</a>.</p>

Works just fine. Now suppose you publish the site. You copy all of the files from the development directory into the main part of the site. That means you copy the file http://dogblanket.com/development/index.html to http://dogblanket.com/index.html. That is, you take the file out of the development directory, and put it in its final place on the real site.

You copy http://dogblanket.com/development/products/index.html to http://dogblanket.com/products/index.html. Out of development, into the live site.

You want the link in the new home page to go to http://dogblanket.com/products/index.html. But of course, it doesn’t, because you’ve hard-coded the link to http://dogblanket.com/development/products/index.html into your file.

Rats! You have to go through every file, find every link, and change it. That takes time. And it would be easy to make a mistake.

But suppose you had used the following HTML in http://dogblanket.com/development/index.html:

<p>Check out our awesome <a href="products/index.html">products</a>.</p>

This is a relative link. It says, “From wherever you are right now, go down into the products directory and find index.html.”

When you copy files from the development directory to the live site, everything would work just fine. As long as you maintain the relationship between index.html and products/index.html (that is, “from here, go down into the products directory”), you can put the files anywhere you want.

So, when you work on your site, use relative links. If you have to use an absolute link, make a note of it. Then remember to check the link after you publish your site.

For more on relative, absolute, and root relative links, see the lesson making links.

Exercise: Dog parks development site

You’ll be making a Web site for dog parks in this chapter. Set up a development site for it, that is, a place to store files you’re working on. Use any of the methods in this lesson. A USB flash drive, a subdomain, whatever.

Maybe you work on CoreDogs in more than one place (home, kennel, library, ...). Use a portable file system for your development work. Or maybe a subdomain, so you can access your files from wherever you are.

Below, explain where you are keeping your development files. Why there?

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

In this lesson, you learned:

  • Why you need a development site.
  • Several options for development sites.
  • How to password protect a directory.
  • That using relative URLs will make publishing a site easier.

What now?

Now you have a place to work. Let’s get started on the goals of the site.

Step 1: Set goals

Where are we?

There are three steps in creating a site: define goals, design a framework, and fill the framework. Let’s talk about the first one.

This page’s goals

By the end of this page, you should know the goals of:

  • The people who own the Web site.
  • The people who use the Web site.

Some material from Foundations will be repeated here. It’s worth going over again.

Examples, exercises, and your eMe

We’ll look at three sites as we go.

  • I’ll use the small business site Delightful Dogs as an example. I’ll show you how I would make it.
  • You’ll make a dog park site, as an exercise.
  • You’ll work on your eMe, to tell the world about yourself.

Clara Here’s some background for the example. Clara Cairn owns Delightful Dogs. DD has four locations around a city. Each location offers services and products. The services are grooming, obedience training for humans, and drop-in day care. Most of DD’s revenue is from these services. DD also sells products, like toys and shampoo, but it’s a small part of the business.

Delightful Dogs has eight employees at its main store, and five at each of the others. DD also has part-time employees, mainly college students and retired people who help out at the day care and training classes.

Clara hires you to make a Web site.

OK, let’s talk about site goals. We’ll start with site owners, then move on to site users. But first, another in our fine series of dog park exercises.

Exercise: Dog parks near you

You’ll be making a site about dog parks.

A dog park is, well, a park for dogs. A big open space, fenced. We can run around with no leash. Play, play, play!

Find out what dog parks are in your area. Type the names of two or three dog parks in the space below. Include links to Web pages about each park.

If you don’t have any dog parks nearby, list dog parks in some other place. Maybe check out New York city’s dog parks.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Owner goals

The owners of a Web site want something from their investment. Different businesses want different things. But there are some things that most every site owner wants:

  • Brand awareness
  • Product/service knowledge
  • Behavior
  • Self-service

Brand awareness

A brand is about beliefs. It’s an association people make between a logo or a name, and some benefits.

You know a lot of brands. When up see “McDonalds,” for example, you automatically think “fast food.” When you see “Coca Cola,” you think about “cold, yummy soda.”

The emotional tone of a site should be consistent with the brand messages. Let’s look at two designs.

I show them as they were at the time of writing. They’ve both changed since.

Here’s the first, part of the Lego home page:

Lego

Figure 1. Lego home page

My words for the design were “attractive, blocky, fun, play, kids.” Matches the Lego brand.

Look at this:

Web Designer's Wall

Figure 2. Web Designer’s Wall

I wrote down “quirky, arty, creative, advanced.” “Advanced” from a technical point of view; people who aren’t Web geeks might not write this down.

So site owners want their sites to promote their brand. Anything else?

Product/service knowledge

Brand awareness is about general benefits. Some people will want those benefits, and others will not. For those who do, site owners want them to know more about the products or services.

For example, if you’re interested in fast food, McDonalds wants you to know about their different sandwiches.

Behavior

Owners want site users to do things, like:

  • Print a coupon
  • Sign up for a newsletter
  • Go to a store
  • Buy a product

Messages that encourage people to do these things are calls to action.

Here’s a call to action that might be on Delightful Dogs:

Call to action

Figure 3. Call to action

It could be on the home page, the main grooming page, and a special offers page.

Self-service

Suppose you buy some software, and have trouble installing it on your computer. What do you do? You could call customer service. You could look on the company’s Web site.

Which would the company prefer you to do? Usually, they’d prefer you to look on their Web site. It’s cheaper for them. They don’t have to have anyone answer the phone.

Same for buying stuff. It’s cheaper for the company if you buy online. No people to hire, no building to pay for.

Having a good self-service Web site can save a company a lot of money.

Delightful Dogs

  • Brand awareness. When people hear that name, Clara wants them to think of “dog grooming” and “human training.” The Web site should strengthen the association.
  • Knowledge. There should be info about all of DD’s services on the site. Benefits, cost, where to get them… For example:
    • What dogs will look like after grooming. Maybe before and after photos.
    • What humans should be able to do after training. Maybe videos would help.
    • What the grooming and training spaces look like.
    • The qualifications of the staff.
  • Behavior. Clara wants people to pick up the phone and make an appointment. The phone number should be easy to find on every page. Clara wants to give first-time customers a discount.
  • Self-service. This isn’t a big part of the DD site, but there can be some info. Like maps to the stores. Also, info about different grooming options (e.g., types of hair dos), so people have already made their choices when they come in.

Exercise: Dog parks - Owner goals

You’re making a Web site for the W00fton County Parks Department. It helps county residents learn about the four dog parks in the county.

What would the site’s owners want from the site? Make a list. Enter it below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

We’ve talked about site owners. But what about the people who use the site?

User goals

Let’s talk about why someone would visit a site – and stay on it for a while.

We’ll stick to business sites, like DD. Let’s talk about three things.

  • Solve a problem
  • Aesthetics
  • Usability

Solve a problem

People come to a site because it does something useful for them. It helps them do a task, or solve a problem.

For a business site, it can help to think about different stages of the buying decision.

  • Early stage customers are hunting for general information about what types of products or services will solve a problem they have.
  • Middle stage customers have chosen the type of product or service they want, and are comparing vendors (businesses that sell the product or service).
  • Late stage customers have chosen a vendor, and want to make a purchase, set up an appointment, or whatever.

Let’s take Sally, for example. She’s a potential Delightful Dogs customer.

  • Early stage: “I’m feeling…, well, that I don’t look my best. What can I do about it?”
  • Middle stage: “I’ve decided to be groomed once every two weeks. Which businesses in the area offer that service? What does it cost? How good are their stylists?”
  • Late stage: “I want to get a geurré do at Delightful Dogs. How do I arrange that?”

So site users have tasks they want to do. But if a site makes a task too unpleasant, they’ll go elsewhere.

You’ll hear the term look and feel. Different people mean different things by look and feel, but they generally have two things in mind: aesthetics and usability.

Aesthetics

Aesthetics is about how visually attractive or beautiful a site is. Different people like different things, but most of us have a shared sense of site beauty.

Exercise: Aesthetics

Find five Web sites you think are attractive. Put their URLs below.

For each one, explain what you like about the look. Colors? Typography? What moods/feelings/emotions do you think the site designer was going for?

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

The book The Principles of Beautiful Web Design is worth looking at, if you want to make attractive sites.

Usability

Usability is about how easy it is to use a site. For example, text that’s hard to read makes a site less usable.

An example. Here’s a field from a medical questionnaire:

Weight

What do you think?

Renata
Renata

“Weight?” Of me?

CC
CC

What else would it be?

Renata
Renata

I don’t know. But I’d have to stop and think.

What unit?

CC
CC

Huh?

Renata
Renata

Pounds? Kilos?

CC
CC

Oh. I can’t tell.

Kieran
Kieran

Here’s another version. Any better?

Weight
pounds
Your weight when dry, with no collar. E.g, 32.

Renata
Renata

There’s the unit, pounds. The field is shorter, too. It gives you a hint, that the data is short as well.

Kieran
Kieran

Right! And the example helps.

These are small changes, but they make a difference. Remember, just because a field is clear to you, doesn’t mean it’s clear to everyone.

Exercise: Dog parks - User goals

The people who would use a site about W00fton county dog parks. What would they want from the site?

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

  • Site owners want people to be aware of their brand, and know about the products and services.
  • Owners want site users to do something, like print a coupon, or buy a product.
  • Owners often use Web sites to reduce service costs.
  • Users come to Web sites to complete tasks.
  • Users was sites that are attractive and usable.
  • Users want sites to be aesthetically pleasing, and usable.

What now?

Let’s work on goals for your eMe.

Project: Goals for your eMe

Your brand

You want to create a link in peoples’ minds between your name and some positive attributes. So that when a potential client or a job interviewer meets you, they have those things in mind.

Let’s be clear. I’m not talking about a false image. Don’t say you’re a good team leader if you aren’t. Even if you think you are, don’t say it unless you have evidence.

The goal is not to tell people what they want to hear. The goal is to tell them who you are. It’s about clear communication. You don’t want your good attributes to be forgotten.

Here’s more stuff on personal brands:

There are magazines with good information on personal branding and other stuff.

An example

Erica Zucco has done a good job on her personal branding site. Go and have a look at her site now. Then we’ll talk about it.

Do do doo do-do do do doo.
Do do do do doo
Do – do do do do.
Do do do do-do do do do,
Do – do do do do – do – do.

OK, you’re back. Let’s talk about some of the things Erica has done to create her brand.

Erica has a clear view of herself. She knows what she’s interested in, and communicates that well. She doesn’t say, “I can do everything.” Instead, she picks a focus, and gives evidence that she is skilled at that.

Her blog shows that she thinks deeply about things like social media. It also gives you a sample of her writing style.

Her contact information is splattered all over the place.

About the theme – graphics, colors, fonts and such. Erica didn’t build it from scratch. She started with a theme that someone else had created.

Benefit

What does this site do for Erica?

Career

First, the site can help her career. As I’m writing this, Erica’s not looking for a job, as far as I know. But if she wants to find a new job in the future, she already has a good site to help her. She won’t be starting from scratch.

Erica’s site also helps her build her professional network. People (like me!) are talking about the site and her work.

In fact, Erica’s site can help jobs find her, even if she’s not looking. If I wanted to hire a journalist, I might contact her, even if she didn’t apply for the job.

Your eMe can help you in the same way. It can:

  • Help you get a job, or clients for your business.
  • Be the base for future job searches.
  • Build your professional contacts.
  • Help better jobs find you.

But it’s not all about jobs. Erica’s site does other things as well.

Mastery

Her site lets Erica use skills she’s mastered. Not just tech skills. Also writing, photography, and video.

People like to use skills they’ve learned. You can do that on your eMe. Not just to show off. Because… well, it’s just cool.

Autonomy

Erica controls what she puts on her site. It’s not about what her employer thinks. It’s about what she thinks. It’s totally up to her.

Same with your eMe. You get to decide. What a goth site? OK, do that. What to put your poetry out there? Go ahead. Like country and western music? Maybe you want a country and western site. Your choice.

Purpose

Erica writes about things that matter to her. For example, she writes:

Information is so important people are willing to die to express it and to kill to suppress it.

Free journalism is important to her. She uses her Web site to say why.

You can do the same. It doesn’t have to be big issues. You can write about people who’ve influenced you. Why you live as you do. We all have lessons we can share.

Learn more about mastery, autonomy, and purpose in Daniel Pink’s book, Drive.

How to craft your brand

Here’s one way to decide on your brand messages. It’s not the only way, but it’s a place to start.

Keywords

First, decide on a few eMe keywords. They summarize the way you want to present yourself.

You can combine professional and personal interests. Take Emma Jane Hogbin, for example. She makes her living with Drupal, the software I use for CoreDogs. She writes training material about theming (how Drupal looks to users). She speaks about Drupal as well. Her professional keywords might be Drupal, theming training, writing, and speaking.

Emma Jane is also into crafts. She’s participates in Canadian politics as well. So add the keywords crafts and politics.

Look at her site. You’ll see these keywords at work.

Exercise: Other peoples' keywords

Find at least five personal Web sites, eMe-like things. They should not belong to people you know personally. Write down a short list of keywords for those sites.

If you can’t think of anyone, Google an interest of yours. I might Google “Drupal” or “Web design.”

Enter your results below. Enter the URL of each site, and its keywords.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

OK, you’ve seen other peoples’ keywords. Time for your own.

When you’re making your keywords, keep in mind who you are making the site for. If you’re looking for a job, you want your site to appeal to employers. You might include keywords about:

  • The skills you have – including Web tech!
  • How you communicate. For example, you might be a confident presenter.
  • What you are like to work with. Maybe you work well on a team. Perhaps you work well independently.

Don’t make the mistake of trying to be everything to everyone. Focus on your strengths.

Exercise: eMe keywords

Enter a list of keywords for your eMe site.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Evidence

Now you’ve got some keywords. What evidence can you present to support them?

Erica Zucco claims skills in journalism. Does she give evidence? Yes! Her site has lots of it.

Emma Jane says she has Drupal skills. Is there evidence? Yes. Her site has tons of it.

I suggested you tell potential employers about three things. Let’s talk about evidence.

  • What skills you have.

List courses you’ve taken, jobs you’ve had, projects you’ve done. Include a work portfolio, with papers you’ve written, Web sites you’ve made, etc.

A work portfolio is great for personal branding. If you don’t have a portfolio, start one. Make a directory on your server, and start uploading stuff. Scan paper things into your computer if you need to.

  • How you communicate.

Include writing samples. If you can, include video of yourself giving a presentation.

Some of this is about image. Do you know what “business casual” means? (If you don’t, look it up.)

Have photos of yourself dressed professionally, and in business casual. If you don’t have any, ask a friend to shoot some. If you have reference letters that talk about your image, include them. If you won a best-in-breed blue ribbon, include a photo – with you holding it up and smiling.

  • What you are like to work with.

List jobs you’ve had. Teams you’ve worked with. Say what other people have said about working with you.

If you don’t have evidence, don’t make it up. If you’re just graduating from college, maybe you don’t have much experience working in teams. That’s OK. But you might say that you want to learn – if that’s true.

There’s also the likability factor. Most of us like active, positive people, rather than old, doomy skeptics like me. Show the fun side of yourself.

An online quiz about you can be helpful. Create questions that help people learn about your accomplishments, and who you are as a person. Some people love taking quizzes.

Exercise: eMe keyword evidence

For each eMe keyword, list the evidence you will put on your site. Enter the keywords and evidence below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

What now?

Now you know what information your site should have. Let’s see how you create a framework for your eMe.

Step 2: Design a framework

Where are we?

You know how to set the goals for a Web site. There are goals for site owners, visitors, and developers. Now it’s time to start designing something to meet those goals.

This page’s goals

This page gives you the big picture of site frameworks. By the end of this page, you should:

  • Know what a Web site’s framework is.
  • Know what the main parts of a framework are.

Once you see the big picture, we can look at the individual pieces.

Frameworks

A framework is like the chassis of a car:

Chassis

Or the skeleton of a fish:

Skeleton

A good framework will hold your site together.

There are three parts to a framework:

  • Information architecture
  • Page layout
  • Look and feel

Information architecture

This is about the sections and subsections of the site. The goal is to help site visitors zero in on the information they need.

When you finish the information architecture step, you have a structure map that shows the major parts of your site.

Structure map

Figure 1. Structure map for a dog nutrition site

Page layout

Each page on the site will have regions, like a header, a left nav bar, a bottom nav bar.

Page layout

Figure 2. Page layout

Most sites use just one or two layouts for all pages. The pieces that you put into the regions (e.g., the nav bar in the header) are reused across all pages with the same layout. You only need to create them once, and they appear on every page.

Look and feel

You need to create a site that looks good and is easy to use. This means choosing colors, fonts, graphics, and so on.

Reuse

Once you have thought about information architecture, page layout, and look and feel, you can make templates. You can make them from scratch, or reuse a design, as we did earlier.

Because I suck at art, I always reuse designs. If you can paint and draw, try making your own designs.

Summary

This page gives the big picture of site frameworks.

  • A Web site’s framework is a skeleton the site is built around.
  • The main parts of a framework are information architecture, page layout, and look and feel.

What now?

We’re going to talk about how to create the three things: information architecture, page layout, and look and feel.

Let’s start with information architecture.

Information architecture

Where are we?

We’re creating a framework for a site. The framework is made up of:

  • Information architecture
  • Page layout
  • Look and feel

This page is about the first part: information architecture.

This page’s goals

By the end of this page, you should:

  • Know what information architecture is.
  • Know how that hierarchy is a common architecture.
  • Know what a structure map is.

The visitor’s problem

Wendy

Suppose Wendy goes to Delightful Dogs’ Web site. She has a goal in mind: “Find out what type of flea shampoo is best for my friend Goober.”

Goober

There might be hundreds of pages on the site, for different products, for grooming, exercise, play, diet, ... How is Wendy going to find the specific information she is looking for?

Information architecture (IA) is about organizing the content on a site to make it easy for people to find the information they need.

Hierarchy

Most sites use hierarchies. The Weber divides pages into categories and subcategories. The site shows the categories to visitors, usually in nav bars and site maps.

Let’s look at two examples. TigerDirect and Newegg are online retailers of computers and electronics. They both sell thousands of different products. Both companies want customers to be able to quickly find what they’re looking for. If someone can’t find what s/he’s looking for on TigerDirect, Newegg is just a click away.

Here’s the top left of TigerDirect’s page, as it was at the time of writing. There’s a nav bar with some product categories.

TigerDirect

Figure 1. TigerDirect

Newegg uses different categories:

Newegg

Figure 2. Newegg

But both are using a nav bar to present categories.

Each of the categories is divided up further. For example, click on the Computers tab on TigerDirect and you get:

Subcategories

Figure 3. Subcategories

Subcategories have subcategories:

Subsubcategories

Figure 4. Subsubcategories

And so on.

Hierarchy is the most common way to organize a site. You can capture the organization in structure map. Here’s an example.

Structure map

Figure 5. Structure map for a dog nutrition site

Choosing categories

There are many different ways to categorize information. TigerDirect and Newegg organize their sites around product categories. They group the products differently, but both sites are about products.

Sites that are not about products also categorize things. For example, here’s a nav bar from CNN, as it was at the time of writing:

CNN nav bar

Figure 6. CNN nav bar

The categories are based on the content of the story.

CC
CC

What happens when a story fits into more than one category? Like, a story about a singer from Egypt would fit into World and Entertainment.

Kieran
Kieran

Good question. Think about this: why are we creating these categories?

Renata
Renata

Hmm, we’re doing this to help site visitors. So think like them. What would be most useful?

Kieran
Kieran

Right! And what’s the answer?

CC
CC

Well, some people would expect it to be in World. But others might think it belongs in Entertainment. You can’t please both of them.

Kieran
Kieran

Why not?

Renata
Renata

Oh, I know! Put the story in both categories!

Kieran
Kieran

Yes! That would make sense. There’s no reason for the story categories to be mutually exclusive.

CC
CC

What’s “mutually exclusive” mean?

Renata
Renata

Oo! Oo! It means that something can be in only one category. But news isn’t like that.

Kieran
Kieran

Yep. So, when in doubt, think of what helps visitors.

Getting the hierarchy right is important. Visitors want to quickly find the category that’s likely to hold the information they want, then the subcategory, and so on, until they find the specific thing they’re looking for. Visitors will keep clicking through pages, as long as they’re getting closer to the information they need.

Often the people working for the business will know how customers think about things. Start there for your categories.

Site maps

A site map is a Web page showing the entire structure of a Web site on a single page. Here’s part of Newegg’s site map:

Site map

Figure 7. Site map

They’re good for a number of reasons.

  • They help new visitors understand how you think about the site and its content.
  • They help experienced visitors quickly jump to a page deep in the hierarchy.

Structure map for Delightful Dogs

Here’s a first cut at a structure map for the DD site.

First structure map

Figure 8. First structure map

The “Stores” category will have a page for each store, with business hours, driving directions, a map, and contact information.

The site includes a blog. You and Clara talked about having a blog as a way to engage customers. When a new blog entry appears in a customer’s news reader, it reminds him or her about Delightful Dogs.

You show the structure map to Clara and her staff. Together, you find some problems. First, Delightful Dogs is known for its services. The products are less important to the business, and not a central part of the Delightful Dogs brand. Adding a “Services” category doesn’t seem useful. It just makes visitors click through to an extra level.

The second problem is with the product categories. The product category “Training” makes sense to the employees who train dogs. They think of collars, leashes, and other things as training products. But the “Training” product category isn’t something that customers understand. If they come to the site looking for a collar, they wouldn’t think to look in the training products category.

Another issue is that many customers who want products come in looking for toys. This category makes sense to customers, but it isn’t in the structure map.

Here’s a revised structure map.

Final structure map

Figure 9. Final structure map

Each service is now at the top of the hierarchy, equal to “Products.” L&C stands for leashes and collars (I ran out of space in the box). A toys product category was added.

Clara agrees that this will be a good structure for the site. You tell her that you’ll also add some other pages, like a site map and a copyright page.

Drawing a structure map

You need to be able to (1) draw a structure map, and (2) capture it in an image file, so you can show it on a Web page.

The simplest is to draw the map out on paper. To capture your drawing in a file, you can scan it, if you have a scanner. Or you can take a photo of the drawing with your cell phone. Then you can email the photo to yourself, plug your phone into your computer, or however you get photos off your phone.

Another way to make a map is to use a drawing program. We talked about OpenOffice Draw earlier. It’s the program I use with CoreDogs.

How to make a file for your Web page from a Draw drawing? I usually use a screen capture program. We talked about that as well.

The third way to make a map is to use HTML. You can use <ul>s. It doesn’t make a drawing, but it’s often good enough.

Here’s some code that will make a map:

<ul>
  <li>Home</li>
  <li>Contact</li>
  <li>Credits</li>
  <li>Products
    <ul>
      <li>Games</li>
      <li>Collars</li>
      <li>Treats</li>
    </ul>
  </li>
  <li>Services
    <ul>
      <li>Grooming</li>
      <li>Party planning
        <ul>
          <li>Graduation parties</li>
          <li>New puppies parties</li>
          <li>Just because parties</li>
        </ul>
      </li>
      <li>Party clean-up</li>
    </ul>
  </li>
</ul>

Figure 10. An HTML structure map

Here’s what it will look like:

  • Home
  • Contact
  • Credits
  • Products
    • Games
    • Collars
    • Treats
  • Services
    • Grooming
    • Party planning
      • Graduation parties
      • New puppies parties
      • Just because parties
    • Party clean-up

The fonts and stuff will be different, because of the CSS I use for CoreDogs. You can style it the way you want.

Exercise: Dog parks - Information architecture

Make a structure map for the W00fton county dog parks site. You can make a tree diagram, or just a list.

Make a Web page for your structure map, and put it somewhere on your server. Enter the page’s URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

This page is about information architecture.

  • Information architecture divides up site content, so visitors can find what they want.
  • Most sites use hierarchies. You should choose categories that make sense to visitors.
  • A structure map shows the hierarchy.
  • A site map shows the structure of a site in one place.

What now?

The first part of a site’s framework is its information architecture. The next part is its page layout. Let’s talk about that next.

Page layout

Where are we?

You’ve learned about the first part of a site’s framework: information architecture. Let’s move on to page layout.

This lesson’s goals

You learned about layouts earlier. Let’s review the basics.

Regions

Web pages are often divided into the following regions:

Regions

Figure 1. Regions

Different things can be placed in different regions.

  • The top region is often used to show site branding (logo and site name), and sometimes a horizontal nav bar. It’s often called the header.
  • The left region often has a vertical nav bar. It’s also called the left sidebar.
  • The right region might show ads, or more navigation. It’s also known as the right sidebar.
  • The bottom region might show copyright information, and another nav bar. It’s often called the footer.
  • The main content of a page usually goes in the center region.

Here’s how the regions might be used on a particular site.

Regions example

Figure 2. Regions example

In this one, the top region contains the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

Different layouts for different pages

It helps users if the same things appear on the same places on each page. Imagine if the Home button was on the top left on some pages, the bottom right on others, and the middle right on yet others. Ack!

But it’s common to have two or three layouts for a site. For example, we could have this layout for most pages:

Standard layout

Figure 6. Standard layout

The home page has a news section. Here’s the layout:

Home page layout

Figure 7. Home page layout

Maybe there’s a photo gallery, with its own layout:

Gallery layout

Figure 8. Gallery layout

Renata
Renata

How many layouts can you have for one site?

Kieran
Kieran

There is no fixed number. But usually no more than three or four.

CC
CC

Hey, I noticed something about the example you just showed us. Do different parts of a site’s structure map use different layouts?

Kieran
Kieran

Yes, that’s right! You’re a bright dog!

Here’s a structure map for a family history site.

Structure map

Figure 9. Structure map

It uses the three layouts. The yellow pages (with the thin lines) use the standard layout. The home page uses its own layout. And the four pages in the gallery section use the third layout.

Exercise: Dog parks - Page layout

Draw one or more page layouts for the dog parks site. You can draw them on paper, or use a graphics program.

Make an image file for each layout. If it’s on paper, you can scan your drawing in, or take a picture with your cell phone.

Create a Web page showing your layout(s), and upload to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

  • Web pages are often divided into regions: top, left, right, bottom, and center.
  • You sometimes need more than one layout for a site. Different sections of the site might have their own layouts.

What now?

We’ve looked at two of the three parts of a site’s framework: information architecture, and layout. Now it’s time for look and feel.

Look and feel

Where are we?

You’re creating a framework for a Web site. There are three aspects to it. We’ve already talked about information architecture and page layout. Now we’ll talk about look and feel.

What is look and feel?

Look and feel is about creating a site that:

  • Looks good.
  • Has a look that matches the site’s purpose.
  • Is easy to use.

How do you get a good look and feel?

What I do is borrow someone else’s. Remember that I’m not a good artist. So I do two things:

  • List words that describe the look and feel I want.
  • Find a design that matches.

Look and feel descriptors

These are words or phrases that describe the look and feel I’m going for. They’re often mood words, like “happy,” “energetic,” or “serious.” They can be things like “retro” or “grunge,” that describe a particular fashion statement.

Color is a big part of look and feel. Different colors evoke different emotions. Blue is placid, conservative. Orange is active. Green and brown bring nature to mind.

But colors mean different things in different places. According to Color Meanings by Culture:

  • White means purity in the US. But it’s the color of mourning in China.
  • Yellow means courage in Japan, but cowardice in other places.
  • Red means passion, love, and danger in the US, but it means purity in India.

It’s easy to make a mistake when you build a site for another culture. Check your design with someone from that culture.

Exercise: Dog parks - Look and feel

Write down some look-and-feel descriptors for the dog parts site. Enter them below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Look for a design

When you have some descriptors, go look for a design that matches. Usually it’s just a gut feel for what seems to fit.

But peoples’ guts tell them different things. Don’t just pick one design. Pick three or four. Then ask other people what they think.

Usability

Make sure that people can actually use your site.

Fancy fonts

Don’t make text hard to read, just so you can use fancy fonts.

Not that fancy fonts are always bad. Check out The HTML5 Herald. It’s a demo site for the book HTML5 and CSS3 for the Real World. It has an old-time feel:

The Herald's home page

Figure 1. The Herald’s home page

This from the right sidebar:

Right sidebar

Figure 2. Right sidebar

The fonts match the old-time feel. The site only uses fancy fonts for headings, which are larger than regular text, so they’re readable.

Speaking of size…

Text size

Text that’s too small is hard to read, especially for older people. Like this:

What does this say?

If you’re looking at a page and the text is too small to read, then you can tell the browser to zoom in. The usual keyboard shortcut for this is Control +. But you don’t want to force users to do that.

If you have to use small text, use a sans serif typeface, like Arial or Verdana. Remember that sans serif typefaces are more plain than serif typefaces:

This is a sans serif typeface. It’s plain.

This is a serif typeface. It’s more fancy.

At small sizes, sans serif typefaces are easier to read than serif typefaces:

Dogs are the best!

Dogs are the best!

These are both 8px text. Too small to be useful for much.

Ask people with poorer eye sight to check your design. What’s easy for you to read might not be easy for them.

Contrast

Be careful with color contrast. The contrast between the text color and the background color can be too low:

Contrast is low.

Here are some high contrast color pairs. The contrasting colors are far apart on the color wheel:

Contrast is high.

Contrast is high.

The last one is hard to look at. An entire page of it will hurt your eyes.

You can experiment with text colors with this tool.

Summary

  • Pick some look and feel descriptors.
  • Find designs that match. Check them with other people.
  • Colors mean different things to different cultures. When in doubt, check.
  • Don’t make text hard to read.

What now?

Time to make a framework for your eMe.

Choose a design

Where are we?

You have most of your site’s framework. Information architecture, page layout, and look-and-feel. Now use these things to choose a design.

This lesson’s goals

By the end of this lesson, you should know how to find an existing design that you can base your site on.

Find candidate designs

The first step is to find a collection of designs you can look through. You want to find “candidate designs,” designs that are worth checking out to see if they fit.

I often start with the Metamorphosis Designs collection of free templates. But there are many other collections.

If you find a collection you like, please add it to the links collection.

License check

Make sure you can live with the design’s license terms. Many designs say “Free for personal use.” If the site is for a company, you may need to pay.

“Link ware” is common. That means you can use the design for your own site, as long as you include a link back to the original.

Rough layout check

Say you want this layout:

Target layout

Figure 1. Target layout

You want a header with a big logo, and a horizontal nav bar inside it. There’s a footer as well.

Here are two designs:

Temple design

Candidate A, from
Metamorphosis Designs

Photography

Candidate B, from Free Website Templates

Figure 2. Candidate designs

To convert the first one to the layout you want, you’d have to:

  • Remove the big temple image.
  • Remove the left sidebar.
  • Add a logo.

To convert the second one, you’d have to:

  • Remove the big frog image.
  • Remove left and right photo gallery things.
  • Create the content area.
  • Remove the white talk bubble things.
  • Change a logo.

So candidate A is closer to what you need than candidate B. Less work is a Good Thing.

Renata
Renata

But what if the colors and fonts for the second candidate fit better?

Kieran
Kieran

Good point! We also need to do a…

Look-and-feel check

Two things to think about here.

Look-and-feel descriptor check

Take your descriptors, like “happy” and “active,” or whatever you chose. Do they fit the candidate design?

If you want to get other people’s opinions, be careful what you ask them. Don’t ask: “Do you like this design?” You won’t know how they made their decision.

Instead, ask: “What words come to mind when you see this design?” If they say “happy” and “active,” you’re on the right track. If they say “sad” and “lonely,” you might want to rethink your choice. Unless you’re building a sad and lonely Web site.

Custom graphics check

Often there are specific graphics you need to include, like a logo. Especially when you make a site for a company. Make sure that the design’s colors fit with the logo.

Sometimes you’re allowed to change the logo’s colors. For example, if you were building an environmental site for me, and asked, “Can I make the CoreDogs logo dark green?” I would say, “Yes, go ahead.”

But check first. Some companies won’t let you change their logos at all.

Code check

You want a design that’s easy to change. The layout code in particular should be easy to understand.

Find the HTML and CSS code for the things you need to change. If the code isn’t easy to find, you may want to choose a different design.

Check the code. Is it easy to understand?

Here’s the temple design from Figure 2:

Temple

Figure 3. Temple design

Here’s some of the code:

<!-- header begins -->
<div id="header"> 
  <div id="logo">
    <h1><a href="#">Metamorph_temple</a></h1>
    <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  ...
</div>
<!-- header ends -->
...
#header {
  height: 433px;
  text-align: right;
  background: url(images/header.jpg) no-repeat;		
}
#logo {
  width: 758px;
  height: 348px;
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;
}

Figure 4. Temple design’s code

It’s easy to find the code for the header and logo. The designer even put in comments (like <!-- header begins -->).

The code’s easy to change as well. For example, you want to remove the photo of the temple. Look at line 14. It sets the background of the header to the file images/header.jpg. Here’s what that image is, resized:

Temple image

Figure 5. images/header.jpg (resized)

Remove line 14, and the temple photo no longer appears. W00f!

Exercise: Dog parks - Choose a design

Choose a design for the dog parks site. If you like, start with Metamorphosis Designs.

When you’ve chosen one, enter the URL of its demo site (most designs have one) below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

Choose a design for your site.

  • Find some candidate designs. Find one you like.
  • Check the license. Can you legally use the design?
  • Check the layout. Is it close to what you need?
  • Check the look-and-feel. Does it match your descriptors? Does it match your logo and other custom graphics?
  • Check the code. Can you find the code you need to change? Is it easy to understand?

If you can answer “yes” to all of these, you have yourself a winner. W00f! You might even find three or four winners, and choose between them.

What now?

You know your information architecture, layout, and look-and-feel. You’ve chosen a design. That’s your entire framework.

Let’s look at your eMe’s framework.

Project: Framework for your eMe

Where are we?

We’ve talked about setting goals for a site, and creating a framework that includes information architecture, page layout, and look-and-feel.

This lesson’s goals

Decide on your eMe’s:

  • Information architecture
  • Page layout
  • Look-and-feel descriptors

Then find a design that works.

Information architecture

Decide on the main sections of your site. Each section is one page, or a few related pages. What the sections are depend on how you want to present yourself. For example, if “artist” is an eMe keyword, you might have a section (or just one page) to show artwork you’ve made

For myself, I might have the keywords “educator,” “researcher,” “Web builder,” “business dog.” I’d have a section for each of those. I might also have a page about my personal history, and a Kieran quiz, with questions about where I was born, why I had to drop out of obedience school, etc.

Each section of the site might have a button in a nav bar. So my nav bar might be:

  • Educator
  • Researcher
  • Weber
  • Business
  • Personal

List the sections and pages in each section, so you have a tree like we’ve seen before:

Web site structure

Figure 1. Web site structure

You can make the outline in text, too. That’s what I normally do:

  • Home
    • The basics
      • Puppies
      • Older
      • Ill
    • Articles
    • Products
      • Food
      • Treats
      • Supplements
      • Other
    • Blog
      • Archive
CC
CC

Should my site have that many pages?

Kieran
Kieran

No. It’s best to start with a few good pages, and then build up. Five or so pages is a good number to start with.

What about your home page? That’s for your elevator speech. A one-minute summary of why someone would want to hire you. This is your basic value proposition. It can’t be longer than a few sentences. Oh, and the best picture of yourself you have.

Other random things:

  • Write down the goal of every page in every section. Write a brief description. Do this before you build anything.
  • Don’t have anything on your site that you don’t want employers to see. They will look.
  • Scan in recommendation letters, and link to the images.

Don’t forget to promote your Web skills. They’ll come in handy in most jobs. Accounting, sales, teaching, engineering, administration, human resources, police, government, military, banking, medicine, legal, retail, ...

Remind people that you made your own eMe site, and host it on your own server, with your own domain name. They want evidence of your Web skills? It’s right in front of them.

Exercise: eMe information architecture

Create the information architecture for your eMe. Make a diagram, or just a list of pages. If you want, write a sentence or two for each page, explaining what’s on it.

Remember the keywords you wrote down earlier? Write them down next to the page they apply to.

Your eMe should be simple, maybe five or so pages. If there are keywords you don’t use, that’s OK. Just write them down, with a note that you haven’t used them yet.

Make an HTML page. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Layout and look-and-feel

Draw a wireframe for your page layout, like CC did:

Wireframe

Wireframe

Figure 2. Wireframes

If you have more than one layout (e.g., you might have a slideshow with a special layout), draw a wireframe for each one.

Exercise: eMe layout(s)

Draw a wireframe for each layout.

Create an HTML page with a picture of your wireframe(s). To capture the picture, you can:

  • Draw the wireframe on paper, and scan it.
  • Draw the wireframe on paper, and take a photo of it with your cell phone.
  • Use a graphics program.

Enter the URL of your page.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Write down some look-and-feel descriptors, like “fun,” “smart,” or “serious.” They should be consistent with the image you want you eMe to project. You’ll use the look-and-feel descriptors to help you choose a design.

Exercise: eMe look-and-feel descriptors

Type in your eMe look-and-feel descriptors.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Sites like Open Web Design, TemplateMonster, and Free Templates Online have about a bazillion free designs. Look for designs that have the layout you want, and match the look-and-feel descriptors.

You might not find exactly what you want. For example, you might find a template that you like, but has a graphic of an owl you don’t want. That’s OK. You can edit the template, and remove the owl. H00t!

Exercise: Find a design for your eMe

Browse some of the free design sites. Choose a design for your eMe.

Enter the URL of the design you want to use. Each design will have a demo page. Use that URL.

If you find a few designs you like, enter them all. But just a few.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

In this lesson, you created your eMe’s framework. You created an information architecture, made layouts, and chose look-and-feel descriptors. Then you found a design. W00f!

What now?

Now let’s see how you create a site based on that framework.

Step 3: Implement the site

Let’s see where we are. You’re building a static Web site. You’ve made a framework for the site.

What you’ve made

You have an information architecture. You know what the sections of your site will be, and what pages are in those sections.

Information architecture

Figure 1. Information architecture

You have layouts and look-and-feel descriptors. You chose a design that matches.

Now to make the final site. This is fairly easy, because of the work you’ve already done.

The final steps

First, you need to decide on a file layout. It’s a directory tree of the site on the Web server.

Second, you create a template or two. It’s a file that is a skeleton for an HTML page.

Third, you use the template. You copy it, and fill in the content for a page. Copy the template, make another page. Copy the template, make another page. Until the site is done.

Then… savor your achievement. Bask in the glory that is your new site!

Directory tree

Where are we?

You know how to make a framework. Information architecture, layout, look and feel. Now let’s see how to use the framework to make a complete site.

This lesson’s goals

By the end of this lesson, you should know how to make a directory tree that makes your site easy to work with.

What is a directory tree?

A site’s directory tree shows how the directories and files in the site are organized. For example:

Part of a site's directory tree

Figure 1. Part of a site’s directory tree

The words in bold are directories. The others are files. Put different files in different directories to keep things organized.

I’ll show you how I organize files on my sites. Many other Webers do the same.

Follow the information architecture

First, match the site’s information architecture.

Say you were making a site about dog nutrition. You work with the owner on the information architecture. You come up with this structure map:

Structure map

Figure 2. Structure map

This is how the owner will think of the site. This is how users will think of the site. Even the nav bar will be based on this structure:

Nav bar

Figure 3. Nav bar

It makes sense to make the directory tree match this structure as well.

Make a directory for each part of the tree:

Initial site directory tree

Figure 4. Initial site directory tree

Remember: lowercase only!

File names are case-sensitive in Unix. So the directory DogDir is not the same as the directory dogdir.

This can be a problem when creating links. Suppose you called a directory DogDir and put the file kennel.html in it. Then you linked to this page:

<p>See our <a href="dogDir/kennel.html">best kennel</a>.</p>

Users who click on the link would get a 404 (file not found) error. There is no such file as dogDir/kennel.html. It’s called DogDir/kennel.html.

Argh! It’ll drive you crazy.

Make all file names lowercase. Then you’ll never have a problem.

You can separate words in file names. Do not use spaces for this. I suggest using dashes (-), like best-kennel-ever.html. You can use underscores (_) as well, like best_kennel_ever.html. Google prefers dashes, though. So use dashes to make your site as Googly as possible.

Each directory should have an index.html file. This will be the “home page” for that section of the site.

Section home pages

Figure 5. Section home pages

Why add all of these index.html files?

Users sometimes edit URLs in their browser’s address bar. I do this now and then. Say I’m reading about an interesting food supplement at this page:

URL

Figure 5. URL

I might want to look at other products. I edit the URL, deleting the page name:

Editing the URL

Figure 6. Editing the URL

I’m hoping that this will give me a list of products. It might, but only if the file http://dognutrition.com/products/index.html exists.

When I’m designing a site, I add an index.html to all of the content directories. You should do the same on your sites.

Reusing files

“Reuse” means having only one copy of a file. An example. Here’s that nav bar again:

Nav bar

Figure 3 (again). Nav bar

You need some images for the buttons. For example, you might have a file called home.png for the Home button.

The nav bar is going to be on every page in the site. You could have a copy of home.png for every page. So if the site has 50 pages, you would have 50 copies of home.png.

It’s better to have just one copy of home.png, that all pages use.

Why?

It would save disk space. But disk space is cheap. There is a more important reason. Disk space is cheap, but Weber time is not.

Suppose you wanted to change the look and feel of the site, moving to a color scheme based on tints and shades of blue. That means changing home.png to the new color scheme.

If there were 50 copies of home.png, you would have to find every one, and replace it with the new file. That takes time. And it would be easy to make mistakes.

But if there was just one copy of home.png that every page used, you would replace that one file, and every page would be changed. W00f!

The way you set up your site today will affect how productive you can be in the future.

Library directories

You can put shared files into library directories.

Library directories

Figure 7. Library directories

The directory /library is for files shared across the entire site. Examples would be CSS files, JavaScript files, and images.

Some files are shared only within sections of a site. Suppose the pages in the products section had an image with “Add to shopping cart.” The image add-to-cart.png would only be used on product pages, but it’s used on every product page. I’d put in the directory /products/library.

Showing the tree

An easy way to show a tree is with the HTML <ul> and <li> tags:

<ul>
  <li>index.html - site root</li>
  <li>contact.html</li>
  <li>credit.html</li>
  <li>directory1/
    <ul>
      <li>file.ext</li>
      <li>file.ext</li>
      <li>file.ext</li>
    </ul>
  </li>
  <li>directory2/
    <ul>
      <li>file.ext</li>
      <li>directory3/
        <ul>
          <li>file.ext</li>
          <li>file.ext</li>
          <li>file.ext</li>
        </ul>
      </li>
      <li>file.ext</li>
    </ul>
  </li>
</ul>

It looks like this, with CoreDogs fonts and colors:

  • index.html - site root
  • contact.html
  • credit.html
  • directory1/
    • file.ext
    • file.ext
    • file.ext
  • directory2/
    • file.ext
    • directory3/
      • file.ext
      • file.ext
      • file.ext
    • file.ext

Exercise: Dog parks - Directory tree

Make a directory tree for the dog parks site.

Create a Web page for the tree, and upload it to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

In this lesson, you learned:

  • What a site directory tree is.
  • Make a tree that matches your site’s information architecture.
  • Use library directories for shared files.

What now?

Now you have places to put your files. Time to make a template for your Web pages. The template will use the directory tree.

Create template(s)

Where are we?

You’ve chosen a design. You’ve set up the directory structure of your site, to match the information architecture. You have some layouts. Now it’s time to make the templates.

This lesson’s goals

By the end of this lesson, you should have some page templates for your new site.

Hey, dude…

CC
CC

Didn’t we do this already?

Kieran
Kieran

Er, yes. It was in the chapter on reusing a design.

Renata
Renata

Are we going to go over it again?

Kieran
Kieran

I guess that wouldn’t make sense.

CC
CC

If we need to, we’ll just review that chapter, OK?

Kieran
Kieran

OK.

Exercise: Dog parks - Creating templates

Create a template HTML file for each of your layouts. Do it by modifying the design you chose.

If you need a refresher, have a look at the design reuse chapter.

Upload your templates to your server. Remember to include CSS and image files. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

Do we need one?

What now?

We’ve got some templates! W00f! Let’s use them to build out the site.

Use template(s)

Where are we?

We’ve got page templates. Time to use them.

I know, I know

Kieran
Kieran

Yes, we already covered this, I know.

CC
CC

So…

Kieran
Kieran

You can look back over it if you need to.

Exercise: Dog parks - Using templates

Use your templates to build the final dog parks site. You can use dummy text and images, if you want.

Upload your work to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

This has to be the shortest lesson ever.

What now?

eMe, or not eMe,
That is the question.

Project: Implement your eMe

Where are we?

You’ve got the framework, chosen a design. Time to make your site.

This lesson’s goals

  • Finish your eMe.
  • Celebrate! Woohoo!!

Your directory tree

Make a directory tree. It’s best to make the tree reflect the information architecture of your site.

You might end up changing the tree later. When you create and use your templates – the next two steps – you might figure out better ways to arrange your files. That happens to me all the time.

Exercise: Your eMe directory tree

Create the directory tree for your site.

Put it on a Web page on your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Create template(s)

Create the template(s) you want to use for your site.

Remember to make a copy of your work now and then. If you get confused, you can always go back to the most recent copy.

Exercise: Make your eMe templates

Create the template(s) for your eMe. Be sure that you can understand the existing design before you start changing it.

Hint: If you have trouble with a special feature of the existing design (like advanced mouseover effects for the navbar), think about dropping the feature.

Upload the template(s) to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Use template(s)

Make every page in your structure map. For each one, copy a template, then change it to make the new page.

You might have to change the templates as you go. That’s OK. I often find there are things I don’t think of until I’m actually working with the templates.

Exercise: Use your eMe templates

Create your site using the templates. Then upload the site to your server.

Don’t forget to put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

When you’re done, you have your entire site! W00f! W00f! W00fity w00f!! Celebrate!

Summary

Weehoo! You did it! You’ve finished your site!

Want to make a site for a business? You know how. Follow the same steps:

  • Set up a development site.
  • Set goals.
    • Goals for the owner.
    • Goals for the users.
  • Design a framework.
    • Create the information architecture.
    • Make one or more page layouts.
    • Describe the look and feel.
    • Choose an existing design to modify.
  • Implement the site.
    • Make a directory tree.
    • Create a template HTML file for each layout.
    • Use the templates to build the site.
  • Celebrate!

What now?

Exercises!

Exercises: A production Web site

Exercise: A fixed-layout site with a slideshow

Create a site about anything you want. Here are the specifications:

  • Used a fixed layout.
  • Add a header to each page.
  • Add a nav bar to each page. Vertical or horizontal, your choice.
  • Make the nav bar active. When the user moves the cursor over the buttons, something happens.
  • Add a footer to each page.
  • Add a slideshow.
  • Put the images, CSS, and other common files in a shared directory called library. All of the pages should reference these files.

You can see an example. It’s a little strange, the result of a dispute I’m having with someone. But it meets the specs.

Upload your solution to your server. Put the URL in Moodle.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?