Getting Organized
HTML
Giving Up Control: Type, Color, and Resolution Issues
Navigating with Frames
Load Time
Graphics Software
Gif vs. jpeg
Clip Art
Our Favorite Web Design Book
E-Commerce Options
Testing: one, two three...

This is where you bring all of the elements together—writing, photography, artwork, music, video, animation—to represent your business or organization. There are lots of things to keep in mind, but a few really vital ones that we’ll mention here. (Since libraries have been written about web design, we will keep our descriptions of the process to a minimum while referring you to some additional resources.)

HTML
HTML—Hypertext Markup Language—is the language of web pages. It allows the page links (hypertext) between pages that make up the world wide web. You can learn the language to create the pages (“HTML for Dummies”, for example, is one way to start) and use an HTML editor to put them together, or you can purchase web authoring software which will generate the HTML for you. Such programs are Microsoft’s FrontPage, Adobe’s PageMill and GoLive, Macromedia’s Dreamweaver, Netscape Composer, Claris Home Page, and others. These are basically “what you see is what you get (WYSIWYG)” programs; you create a layout by adding elements such as text and photos to the page and the code is written for you. (You can also make adjustments to the HTML source, such as including interesting scripts that you find on the web.) Each of these programs works differently, so start by reading their accompanying manual or visiting the online help and support provided by each company for their product. If you are getting free hosting, you may want to use the web design software provided by your host. This program will also (usually) allow you to insert custom HTML if you’ve already started designing in another program or have dabbled in writing HTML.

Giving Up Control
Designing for the web is different from designing on paper. When you put together a printed brochure you have absolute control over the final result. You know exactly how the fonts and graphics will look, you position them in relation to one another and you know how each viewer will see the piece. When you design for the web there are a lot of variables. The actual fonts used to display your page may not be the ones you specify—while you can set font families and alternates, each viewer also sets his own default font and font size. This has a huge effect on your layout. Some viewers may even browse with graphics turned off. (Imagine your pages without photos or logos.) Also consider that while most people have monitor resolution of 800 x 600 pixels or 1064 x 768, some have 640 x 480. Even if their monitors are large or they have higher resolutions, many people prefer to browse with their windows at a smaller size. So if you design for 800 pixel width, many viewers will be forced to scroll sideways to get all of your content. And if you design to 640 pixel width (generally recommended to accomodate those with smaller monitors or monitor resolutions), your design will appear very small in the window of a large monitor or one with a high resolution.

Not only the resolution but also the “bit depth” of the viewer’s monitor can affect the way your pages look. While 24-bit monitors can display over 16 million colors, 8-bit monitors only have 256. And these 256 colors are different for Macs and PCs. Only 216 colors are common to all platforms—the browser-safe colors. If you choose to use colors outside this palette (in backgrounds or in graphics with large areas of a single color) viewers with 256 color monitors will experience dithering—their monitors will create your color from the colors they have available, giving the image a spotty appearance. So when choosing a background color or creating graphics with areas of one color (graphics that you will make into gifs—logos or other illustrations), work from the palette of browser-safe colors. (These colors can be created easily in a graphics program. You can work from a ready-made palette or choose RGB values of 0, 51, 102, 153, 204, or 255; hex values of 00, 33, 66, 99, CC, or FF; or % values of 0, 20, 40, 60, 80 or 100. All colors made with these values will be browser-safe.)

The bottom line is that you have to give up some control when you design web pages. When you are aware of just how many things will vary from browser to browser or platform to platform, you can make adjustments to minimize the negative impact of those variables on your graphics and design.

Navigating with Frames
One of the most important considerations when you begin organizing your site is your navigation. How will people know where to go and how to get there when they arrive at your site? Visitors won’t spend much time at a new site unless they can find what they want quickly. A popular way to organize navigation is with frames. Frames allow navigation to remain on the screen at all times while the visitor clicks to each page; the content in a main frame scrolls beside and/or under a navigation frame (as this page scrolls under the navigation frame at the top). This is a great way to keep your navigation visible at all times; even when the visitor clicks an external link, the new site can open in your frameset so they don’t have to leave your site. The problem with frames is that they contain separate HTML files with content that search engines can index (see the Promotion page for more information about search engines). Pages that are supposed to open in a frameset often appear in search engines without their navigation frames. If you design using frames, you can add a link from each page to your home page to force viewers to start with your frameset. You can also add code to the page which will force the other frames in the frameset to load if the page loads without them.

Load Time
Another consideration is load time. You’ll want each page to load within a minute (at most—under 30 seconds is better.) There are always exceptions: you may require larger photos in a portfolio, for example. Try to make people “dig” for the big files—don’t spring them on everyone. Load time depends not only on the size of your graphics, videos, animations, etc., but on the connection speed of your visitors’ modems. This page is estimated to take 7 or 8 seconds for a 28.8 or 33.6 modem, respectively, 4 seconds with a 56K connection and a second for a T1 line. As more people take advantage of DSL and cable connections, the load time will not be as significant. For now, try to minimize this as much as possible (see the graphics preparation hints below and in our recommended references).

We’ve only scratched the surface; there are many other online design hints sites, some of which are listed here:

lynda.com

webmonkey

Graphics Preparation: Software
Despite the issue of load time, you will probably want to put graphics on your pages—logos, pictures of products, etc. You can have your photos (or slides) saved (or scanned) to disk, take digital photos, or create your own graphics. Adobe’s Photoshop is the standard graphics application and is indispensable when you’re getting ready to prepare photos or logos for the web. Its price tag, however, has made it out of reach for many small companies or amateurs. Adobe must have been missing this market: Photoshop Elements is less than $100 and promises to provide the amateur photographer or web dabbler with many of Photoshop’s amazing tools. Of course there are other software packages available which can help you to prepare web graphics, many of which are simpler to use than Photoshop. (For a comprehensive review of other options, including Adobe ImageStyler and ImageReady, Macromedia Fireworks, NetStudio’s NetStudio, and Microsoft’s PhotoDraw, check this article by Jim Rible.)

Gif v. Jpeg
Whatever software you use, the finished graphics should be at a resolution of 72 dpi and are generally saved in one of two formats—gif or jpeg. Jpeg format is for photographs or graphics with many gradations of colors. Gif is for graphics such as logos which can be comfortably reduced to a maximum of 256 colors (or 216 browser-safe colors). (You can save gifs with fewer colors to make the file size even smaller.) Files saved in these formats should have the file extensions .gif or .jpg. For further explanation of the issue of file format in graphics preparation, visit any of these pages:

123clipart.com

webmonkey geektalk

World Wide Web FAQ

Clip Art
If you are interested in using web-ready graphics, there are many free (or inexpensive) clip art sources online. Here are some places to browse:

www.cksinfo.com

clip art connection

clipart.com

freegraphics.com

In general, try to minimize file size for your graphics while maximizing the visual impression. (If your graphics have “jaggy” text or dithering colors, it won’t matter how quickly they load.) And again, try to keep very large graphics deeper in your site so only those who dig down to them will have to wait through the load times.

Our Favorite Beginner's Web Design Book
While there are unlimited resources available online, we still like referring to books, and one of our all-time favorites for beginners is “The Non-Designer’s Web Book” by Robin Williams and John Tollett. It has great descriptions of all of the things you need to be concerned with when you design web pages, including file sizes and formats, browser-safe colors, monitor resolution, typography, and how to avoid bad design. Another terrific way to learn about design (and start developing a better sense of what constitutes good design) is to visit Web Pages That Suck. Vincent Flanders describes his site as a place to “learn good Web design by looking at bad Web design”. While this is clearly one person’s opinion, he has some excellent points and guidelines, particularly for people interested in making money online.

E-commerce options

And isn’t everyone interested in making money online?! This is a major reason for having a web presence. Once your site is up and your products or services are featured, you may want to accept credit card payments. What if you don’t have a storefront with a merchant account (or you don’t want to pay hundreds of dollars for a certificate and then monthly fees for a merchant account)? You can still accept credit cards online by using an online payment service. PayPal, for example, is used by auction site customers and is widely recognized. When you sign up with these services, you can create buttons for items at your site. When customers click a button, they will be sent to a secure page at the payment services’s site. They enter their information and the order is e-mailed to you with specifics of the transaction (minus the credit card information). Payments are collected in your online account and can be transferred to a bank account of your choice, or used to pay other online transactions at auctions, etc.

There are some real pluses to using these providers:

• They are an inexpensive alternative to having your own store with merchant account. Commissions vary but are significantly lower than the cost of a digital certificate from VeriSign and the charge for a merchant account.
  
  
• Your customers who are familiar with auction sites may already be signed up with one or more of these payment services; once you are a member, your information is stored and used for your future transactions.
  
  
• For customers who have never used the services before, they are easy to sign up for and to use.
  
  
• Whether your customers have used the services before or are new to the idea of online purchasing with credit cards, they may be more likely to choose the online payment option if it is through a third party like Citibank. (They may trust the security of these organizations simply because of name recognition.)
  
  

And, of course, there are potential drawbacks:

• Adding these custom buttons to your site requires some knowledge of HTML. The payment service site will generate a piece of code that is specific to the item you request; this code must be copied and pasted into your page exactly as generated. This is only a problem if you aren’t familiar with HTML code and how you would cut and paste it into your pages.
  
  
• Most online stores have “shopping carts”, which allow customers to add and delete items to purchase. They can also adjust the number of each item they wish to purchase. Not all online payment services have shopping carts. This means that your customers will have to click a button and fill out payment information for each item they wish to purchase. Some services will let customers choose two or more of the same item; others won’t afford even that much flexibility. In general, these services work great for those who have a handful of different items that customers will usually want to purchase singly. If you have a large product line and it’s important for you to sell online, a shopping cart will be important. Many hosts support shopping carts and even provide the software. Check with potential hosts if this is important to you.
  
  
• Not all payment services are created equal. Some have had customers complain about lack of sufficient customer service, frozen accounts for “fraud” without significant proof, etc. To read some reviews of online payment services, visit Ratings of Payment Services/My Agenda . Y. Goodman follows the progress of these services and updates his ratings accordingly, basing them on the service providers’ policies for dealing with the issues of stolen credit cards, chargebacks, and seller fraud. And for a good summary, read his What the Payment Services don’t want you to know.
  
  

In general, there is always some risk to both buyer and seller when accepting credit card payments online; understanding those risks before adding this option to your site means fewer unpleasant surprises!

Testing: One, Two, Three...
When you have your site completed, launch Internet Explorer or Netscape (or better yet, both) and open your site in the browser. Look for broken links, missing graphics, weird line breaks in your text and other design anomalies. Change the size of the font that the pages are displayed in to see if your layout still works with teeny tiny type or giant type. Test the navigation to make sure the links work. If you have broken links, go back into your software and correct them, then refresh your page in the browser to view the changes. Make sure your site looks and works as you intended before you “go live”. When you’re ready for the world to see you, you’re ready to upload your files.