Building Your Web Site
Do It Yourself -- the Easy Way
Building and designing your web site can be fairly simple, or very complicated. It all depends on the tools you use and the functions you need on your site. If your site doesn't require a lot of interactive features or complicated graphics, you may be just as well-off using one of the template- or wizard-based design tools that are available for sale, or offered free by many web hosts. You can find more information about this type of software at these sites:
Other links to storefront software are listed in our Links section under Shopping Cart Software.
If you go this route, make sure you get software specifically for designing a storefront so you'll have shopping cart and commerce tools available. It may also make sense for you to set up your site initially using this type of software, and then as your business grows, redesign the site with a program that has more features and gives you more flexibility (or have your site redesigned professionally). That way you are taking a little less of a gamble with your time and money.
Do It Yourself -- the Harder Way
If you're up to the challenge, designing your site using a traditional web authoring software program can give you a lot more control over the look and feel and even the functionality. You can add a lot of things like rollovers and simple animations using these programs. But -- and this is a pretty big but -- it takes time, skill, and a little creative talent. If you've never worked with HTML or Web pages and don't really understand how they work then it's going to take you quite a bit of time to get a good site up and running. If time isn't an issue then you may be fine.
It will definitely be worth the effort to get some training in either HTML or a specific WYSIWYG web editor program. You should at the very least get a how-to book like Sams-Net "Teach Yourself HTML in a Week" by Laura Lemay, or one of Peach Pit Press's "Real World" books that get down to the nitty-gritty of how to use a specific program.
Digital Images and Graphics 101
Don't forget about graphics. Because specific graphics are something you're going to need regardless of the type of program you use to set up your site, I'll go into a little bit more detail here than in the rest of the site design sections.
There is a lot of canned clip art out there, but many times it looks the part -- like canned clip art. Visitors that see the same graphic on several sites don't go away with the best of impressions about any of the sites! If you can, create some of your own graphic icons and images using a good illustration program like Adobe Illustrator or Corel Draw. (Go to ZDNet or computer-oriented web site for current reviews and prices of web-graphics software packages.) With an illustration program you can create vector images. These, as opposed to bitmap images are editable, scalable and usually small in file size.
A raster or bitmap image, like those you would get when you scan art or a photo, can be edited, but you need an image editing program like Adobe Photoshop. With this type of program you can change individual pixels or add filters or special effects to layers of the image to get the effect you want. The size, however, cannot be increased very much without loss of image quality and a big increase in file size.
Another option is to purchase some higher quality clip art. Sites like PhotoDisc and Artville have high quality photo images and artwork that aren't always that expensive, particularly for the low resolution (72 dpi) images you would need for your web site. There are also several sites on the web that offer free art and images. Our Links page can take you to some of those sites.
Creating Your Own Images and Illustrations
If you're selling products on your web site you're probably going to need photos of them. Most people don't like to buy something site unseen. If you're distributing products for a manufacturer, the manufacturer may be able to send you prints, electronic files, or they may just direct you to their web site to download the files yourself. If you are selling your own home-made Widgets and Widget accessories, however, you're going to need to get photos of those items in a format you can put on your web site.
[INSIDER TIP 1: Use .JPG format for photos and .GIF format for illustrations or line art.]
You have three of options for getting digital images of your products, you, your cat, or whatever you want on the site. You can either buy a good digital camera (no, don't try to use the digital web-cam that you got free from your ISP to use for video chats on the web), or you can take photos with your regular camera and scan the prints using a flatbed scanner. You can get a decent scanner for less than $200 and most come with some kind of image editing software. Good digital cameras are still pretty expensive -- more like $400 and up. They do save time, however, and the image quality has improved substantially. Your third option is to use your traditional film camera and send them to a processor who will also give you digital copies on either diskette or CD. (If there is a chance that you will also want to use the photos in print for your brochures then ask for higher resolution images on CD. The files you get on a diskette or download from a photo web site probably won't be high enough resolution for print.)
[INSIDER TIP 2: Scan images for the web at 72 dots per inch (dpi). That is the resolution of most monitors, and higher resolution scans will make no difference in the appearance of the image on screen. If you plan on using the image in print, however, scan at 200-300 dpi or higher depending on the printer or output device.]
Remember, graphics files are usually pretty big files. In order to have them on your site without making your site a big bloated elephant, you'll need to make sure you optimize your graphics before you load them. (Some canned clip art may already be optimized.) Optimizing removes some of the unnecessary pixels and colors and makes the graphic file smaller. You may give up a little bit of the quality but there is usually a good middle ground where the graphic still looks good but its file size is significantly smaller. Some programs will show you a few variations and let you choose the version that you like. Many programs also show you the estimated download time at different connection speeds. NetMechanic offers GifBot a free service/tool that will optimize your graphics for use on your web site.
Another thing to remember is to size and crop your images or clip art in your illustration program before you put them on your web page. A lot of WYSIWYG web authoring software will let you resize or crop images within the program, but the image size as far as kilobytes remains the same. In other words, all of the image data is still there you just can't see it. This means the graphic file is larger than it needs to be. Crop out any unnecessary information before you place the image on the web page.
[INSIDER TIP 3: You don't want your total page size to be larger than about 50k. That's not very big, but your visitors will thank you for it.]
Making Pre-Set Templates Your Own
This part of your site design gets a little trickier. Most of the WYSIWYG web authoring programs come with templates that you can edit to suit your needs. It's a good way to introduce yourself to web design -- by using someone else's! It can also produce some professional-looking results.
One way to personalize your site while still using a template is to create your own top and side navigation banners. By using the same dimensions of the template's navigation graphics, you can make sure yours still fit and don't throw off the rest of the page.
You can also change the color palette of the site. Matching the color of your logo and creating new graphics in the same style as your logo will help pull the site together and give it a more consistent look and feel. But what is look and feel? It's the overall impression you get when you look at something. Does it make you think of old money? Something trendy? The flower-power generation? That sort of thing. The feelings and images you think of when you visit the site. The impressions you have of the type of company.
Sitting in the Director's Chair
So maybe after reading all of this you've decided your best bet is to hire a professional web design firm to do it for you. One word of warning -- it's not cheap! If you know your business site is going to HAVE to HAVE some heavy hitting database-driven interactive functions then you are probably making a wise choice -- just don't say I didn't warn you.
So, get your quotes, pick yourself up off the floor, brush yourself off, and get to work. Yes, hiring someone else to do it still requires a lot of work and planning from YOU. You're going to have to provide them with words, images of your products, the purpose and outline of what you need, and a lot of direction. Many design firms do offer assistance in planning and pointers in what works and doesn't, but you still have to be very involved -- at least if you want to get what you want.
Tips, Pointers and Some Opinionated Advice
- White space is your friend. Just like in printed brochures, your web site will look much better with a good balance of graphics, text and white space. Use the white space to better define and draw attention to your site's navigation system. Not only will your site look better, it will also load faster. One of your goals in designing your site is to make the experience a good one for your visitors. If you site is slower to load than molasses in Alaska then your potential customers will become someone else's potential customers! Not everyone has broad band Internet access -- in fact a pretty small percentage do (currently about 30% for 2001 according to Media Metrix) -- so keep your pages fast and lean.
- Who you are and what you do. It should be immediately obvious on your home page what your company does, and what the visitors can find on your site. Your navigation structure is critical. Don't make your visitors have to think about how they might find something -- make it blatantly obvious. In fact, some say you should never have anyone more than one click away from being able to purchase something (assuming, of course, you're selling products on your site).
- Give them what they need. Don't make your site too text-heavy. Keep it short, bulleted and to the point. People visiting your site won't read long passages of text ("pot, meet the kettle" -- I know, but our site has a different purpose!). It's true, but -- and this is another pretty big but -- you have to provide enough information for them to make a decision right then, or else you chance losing the sale to a site that does.
For instance, if you're selling relatively complicated products that have a lot of specifications to compare, make it easy on your shoppers. Include links to all of the relative information they might need. The "Links" to more information are very important. Browsers (and I mean the shoppers not their web software) don't want to wait on slow loading pages that are full of every scrap of information you have about a product. They want to see the general product description and be able to click a link to go to the meat of the subject.
The same goes for product photos. Keep thumbnail size photos on the primary product description page, but have them linked to a larger image so if the shopper wants to see the fine crafted detail of the piece then they can click and see it in all its glory.
Another helpful addition that may keep shoppers on your site as opposed to your competitor's, can be tables that compare specs from your products with those of competing products so you can show how your products are better and have more features. Or, if you have a lot of similar products that vary in certain areas, create a table comparing your own products. You can also include interactive tools that compare products the shopper has selected from your own product line by clicking a check box next to the item, and then clicking on a "compare" button. A table then comes up that compares those items side by side.
- The good, the bad, and the ugly. A good site can look great, a bad site can look great, and an ugly site can still be great. No matter how nice your site looks, if it's difficult to navigate, or if you don't know exactly what the site is about when you go there then you're still missing the boat -- and tossing a lot of money off the pier while your watching it sail away! The first thing you have to think about is the site's purpose and function -- not the cool graphics, or the colors, or the flash animations. In fact, those sites who start with a fancy animation that makes dial-up visitors bang their heads on their monitors while they wait for it to load really stomp on my last good nerve. (Yes, I still "dial-up.") Always -- let me stress this -- ALWAYS have a very obvious "SKIP THIS INTRO" button that people can click to get past your animation.
Another unnecessary step many sites force their visitors to take is having a lead-in to their home page. There will be a page with the company logo on it and an "ENTER SITE HERE" button. Why? I don't know, but they get on my nerves too. Don't do it. Take your visitors directly to what they want to see -- your content. (Remember, many of them are surfing on company time and they have to speedy about it if they don't want to get caught!)
The layout of your pages, which you hopefully have already drawn out and labeled, will help you (or your designer) determine the best design for your site. It's hard to come up with a design if you don't already have an idea of the number of category pages, types of site functions, etc. So, as I've mentioned in other sessions of this workshop, plan it out FIRST so your site has a better chance of being both good AND aesthetically pleasing.
- Real live people, or at least an address. Make sure visitors to your site can find you in the real world when they need to. Even if your business is only a 'cyber' business you should still have a physical address or PO box, and a phone number where someone can contact you if they have a question. Not only will it give those who are leary of online purchasing a way to still place an order, it will also give them a higher comfort level that your business is legitimate.
- Finally, if you want people to visit your site (you do, don't you), jump ahead to our "Promotion" workshop and read about optimizing your pages for search engines. It's much easier to incorporate the information search engines look for into your pages as you design them rather than having to go back after the fact and add the information in.