Lesson 2: Code, Graphics and Navigation...oh my!
This is where we get organized and answer some basic questions about what we're trying to do. What is it that we're trying to do with the site? Who's our audience? What do we want them to see and do on the site?
Getting Started
Welcome back, my loyal students!
Today's lesson centers on the planning phase of your Web site. Like the old adage says: measure twice, cut once. This means planning is very important (duh). It is especially important in Web development.
There's nothing worse than trying to squeeze in a last-minute page or two. Normally when you do this it messes up your navigation and all your hard fought coding goes down the tubes.
If you do manage to randomly insert pages, it also might mean that it's harder for the customer to find the product they want, and that means the possible loss of a sale. If you've spent any time ordering online, you'll know there is nothing more frustrating than trying to buy something and being thwarted by the site itself. It's our job to make the experience an enjoyable one for the customer (and a profitable one for us).
So let's do some planning using our fake company: Silly Soap.
To start, we ask ourselves a few very important questions:
- What is it that we're trying to do with this site?
- Who is our audience?
- What do we want our audience to see?
- What do we want our audience to be able to do?
- How are we going to present our business to the world?
- What do we want our business to get out of the site?
Now the fine folks at Silly Soap don't have all the answers to these questions right away. They all gather in the conference room, and hash out a few of the sticking points, and here's what they come up with:
- What is it that you're trying to do with this site?
- We're trying to sell our products online.
- We're trying to provide a central location at which the public can access company information.
- We're trying to gain new customers
- Who is your audience?
- Current customers who order by catalogue
- Potential customers.
- What do you want your audience to see?
- Our squeaky clean corporate image.
- Our fabulous products.
- What do you want your audience to be able to do?
- Buy products online.
- Read about our company.
- Tell others about us.
- How are you going to present your business to the world?
- Standard look and feel that reflects company image.
- Continue branding efforts now in print form.
- "Environmental good guys."
- What do you want your business to get out of the site?
- Ultimately, more profits.
- More exposure, and subsequently more customers.
Now comes the part where you discuss the content you have for the site, and how this content relates to your site goals. Who will gather existing content? Who will create new content?
Alrighty, we're trying to sell products online. We'll need a list of all of our products, including prices, and we'll need to establish some standards for shipping and handling. Still assuming that we're a small business, we can either package in-house, or hire a third party to do our packing and shipping. Based on the estimated amount of business we'll generate the first year, Silly Soap executives think they can handle that part in-house for the time being.
How do we want to present our products online? We don't have a big budget for professional photos and the like, so Silly Soap executives opt to invest in an inexpensive digital camera and some photo editing software (we'll discuss more detail when we get to images).
What form will the company information take? We have existing pamphlets several pages long that we could use for content.
Ahhhhhh, here's a spot where Web differs from print. Printed material can be distributed. People can leave it on their coffee table or stick it on their refrigerator. They can read it at their leisure. If you're taking this course, you'll know that your eyes get tired while reading information from a computer screen. Most professional Web content is designed to be eye-catching, interesting, and a very quick read. So the old pamphlet material probably won't do in this instance.
Still, Sill Soap executives want new customers to have access to the pamphlet, so they opt to create what's called a "PDF" or "Portable Document Format" and create a link to it on the site. I'll show you how when we get to that part. For now, it's enough to know we'll need a PDF file or two.
Next on the list: how are you going to let current customers know about the new site and get new customers to visit? Ah grasshopper, that will be lesson 4, so you must stay tuned. For now, we're just talking content.
Silly Soap execs have done the smart thing and created a map, also known as an architecture, of how their content will logically be laid out on the site. They have grouped product information together, company information together, and decided to create a special area for their favorite audience members--children. They are also an environmentally conscious company, and have opted to include environmental impact information on the site as well.
As you do this same analysis for your own company, really think about what it is you want to do with your site, as well as how logically your products might be grouped together. If you own a lot of baseball cards and are selling those, you might group your content by decade (e.g., 1930s-40s, 1940s-50s, etc.) or by major league teams (e.g., the Brooklyn Dodgers, the New York Yankees, etc.).
Remember to keep the content of each page from being too long and too wordy. Your architecture doesn't have to be as fancy as the one above. Get out a piece of paper and pen and try several different ways of organizing things.
Now, there is an art to this. If you have too many pages, no one will be able to find anything! Going back to the baseball card example, you wouldn't want to create a page for each card, or even for the 3 or 4 cards you have for each player. Yes, I suppose you could do an alphabetic listing of all of the players, but do you really want to do all that work? Plus, remember you have to create a link for every single page on your site. That's a lot of coding when you're doing this by hand.
There is a lovely little device called a database-driven site where all of your site content resides in a database, and you write code that calls that data and displays it. WAY too much for this course to tackle, and too much for the casual hobbyist to do in a couple of months. So, we're not even going to go there. Besides, you can create a very nice site that has 10 or so pages and maintain it via plain ol' HTML.
If you're not sure how to organize your site, or can't seem to get started, try looking at a few of the sites you admire or visit often. Amazon.com has a very nice navigational strategy, but it's also database-driven and VERY big. Probably not a good site to emulate.
Just so you have a clearer picture of what I'm talking about, here are a few randomly selected sites, and a critique of their architectural and content approach.
http://www.barrattscoaches.co.uk/
Barratts Coaches is a small, family-owned business in the United Kingdom. They rent tour buses. They open their site with what's called a "splash" page. It has very little content, and doesn't contain any of the site's navigation. It does, however, give their audience 2 things very quickly: the company contact information and a series of photos of their product. Once you enter the site, it has a nice look and feel that it maintains throughout this very small site.
The only issue of concern here is that the navigation is at the bottom of the page. That's a big no-no. If your customer has to scroll to see your navigation, they may never go deeper into your site.
http://www.hawkinshunting.com/
Hawkins Hunting is also a small, family-owned business. Their first page is loaded with information and images, most of which could have been better displayed on other pages. Again, the navigation is at the bottom of the page, and it's a long way to scroll to get there.
They maintain the same look and feel throughout the site. I personally am not a hunter (and to be honest, I think it's icky) but IF I did, the images they use do convey the variety of hunting experiences their lodge provides.
One thing they are doing quite well here is providing a complete price list of their services. While this means that the site administrator has to keep these prices current at all times, customers appreciate knowing exactly how much something will cost.
http://www.larkfieldflorist.com
This is quite an extensive site built completely in HTML and Javascript. That is to say, it's not in a database, but probably should be since they have so much information.
They maintain their navigation on the left side of the page. This is a nice feature. However, because they inserted images into their navigation, I didn't even realize they had more links at the bottom until I scrolled to look at more products. Try to keep your entire navigation in a location where your customers can see it at all times, on every page of the site.
The products are very nicely displayed, and include the prices, as well as a link to additional information about each item.
The site is heavy with graphics, and takes a long time to load even with my cable modem connection. Anyone with a 56K modem would have to wait a long time, and may grow impatient. We'll discuss how to get around this when we get to images and graphics.
http://www.abacela.com/
This is a very nice looking site, but again the navigation is at the bottom of the page. Are you seeing a theme here in our discussion? You can have all the bells and whistles on the site that you want, but if customers can't get through the site easily, they may not go through the site at all.
One nice thing these folks do have is very specific information about each of their products. I know next to nothing about wine, and I appreciate the kind of detail they provide. I am tempted to order some now.
Once you have decided on an organizational strategy for your site, keep your flowchart next to your computer. Trust me, you will be referring to it often as you build your site.
