March 2000, Volume 16, Number 3
The Agony(!) and Ecstasy(?) of Producing a Website (Part I)
By Richard L. Eastline
Being a personal experience account, from a shaky beginning to the never-quite-done state
Probably one of the great untruths of the Computer Age is the ease of creating your very own ‘professional-quality’ Website. A passable site, yes, but be wary of comparison with the pros’. If your objective is no more than a ‘home’ page, fulfilling an impulse to foist vacation photos on the Internet’s audience, then you’ll likely find satisfaction in adapting a stock Web page template. But that same technique for selling the world on your independent business venture (or getting like-minded individuals to consider becoming members of a club) falls short in providing a sense of specialty that’s uniquely yours. It’s no more a creative solution than connecting dots or filling in colors by the numbers. What you want and need can be done with a next-level-up approach.
So, let’s raise the bar. This practical challenge involves assimilating the very basic rules for site construction, then layering on some of your personal preferences, and ultimately trusting in the reliability of software, hardware, and a Web host working together. Along with that acceptance is a commitment to do the actual hands-on work as well as abiding by the goal of containing costs. What follows is an accounting of one person’s trial-and-error efforts in producing a relatively straightforward Website for a freelance business venture. You, too, can make this kind of project really happen if you’re not overly allergic to recurring frustration.
Begin with a Defined Purpose
There has to be a starting point, of course, and that occurs before you even select the software. Like a relentless political sound bite, the first Website rule is to fix firmly the purpose (attract new members, generate a sense of credibility, solicit inquiries) and decide on the elements to include that will support your objective(s). No computer skills needed here. A chalk board, some sheets of paper or index cards, and lots of scribbling of ideas, key words, and pertinent data will do the job. Here’s where early organizing pays off (not something to consider while you’re producing). Visit Web sites for clubs or businesses similar to yours and evaluate their features and concepts. From these preparatory steps you should be able to decide on the number of pages that will be sufficient for the initial version of your site. Typically, that number will range from three to six. For the project covered by this report four pages will make up the initial version of the Website.
Let’s move on to the software. Lots of choices these days and the key issues come down to complexity and cost. Prices range from under $20 to $400 and unless you’re striving for cutting-edge design capability, you’ll be happier working with one of the less-expensive products. The following are worth considering since all have received good ratings in the trade publications: Microsoft Front Page 2000 ($125) and also Front Page Express (a light version included with Internet Explorer browser); Adobe PageMill 3.0 ($80); SoftQuad Hot Metal Pro ($100); and Allaire Home Site 4.5 ($100). You can find programs even less expensive at $15 to $50 from ProVenture (Web Designer), IBM (Top Page), and PrimeCom (QuickSite). However, they lack those extra features and smoothness of operation which greatly help in minimizing complexities of design and production. Better to go with one of the leaders.
A Winning Combination:
For this project it’s Adobe PageMill and there are compelling reasons for the choice. Created as being usable by Windows and Mac (on the same CD-ROM), the functions match well enough to have a single user guide serve both. Because of Adobe’s favored ties with Netscape, users can be assured of comparable Web page viewing with both that browser and Internet Explorer. The ease in using PageMill initially and in updating pages, the simplified uploading of files, and a generous selection of applets are impressive features. But possibly the convincing argument is the inclusion of a limited edition version of Adobe’s renowned Photoshop imaging software. Photoshop LE is so close to its namesake in graphics manipulation capability that it readily surpasses Adobe’s own popularly priced ($50) Photo Deluxe program as well as the competing PhotoSuite from MGI.
As a standalone product, Photoshop LE can be purchased for just under $100, but it’s part of the PageMill software as a bonus. The user manual is not included, though, so one option is to buy a third party Photoshop reference. Even a non-current edition would be suitable for use with the LE program, such as Photoshop Web Techniques from New Riders. Likewise, PageMill’s guide is excellent for getting started, but it’s simply an overview of features and a companion to the sample Web page tour. Recommended is PageMill 3 by Maria Langer, a Visual QuickStart Guide ($18, Peachpit Press). It offers thorough coverage in 250 pages with each topic explained on one page.
Who Needs to Use HTML These Days?
Like most of the mid-level Web publishing programs being sold, PageMill allows users to bypass the learning of Hyper Text Markup Language (HTML), a set of codes needed to create electronic documents on the Web. (Sample: <CENTER><Welcome<H1></CENTER> positions the first headline as centered.) One simply handles text as word processing, although with limitations, and uses built-in commands for inserting, positioning, and similar layout functions. There’s a price to pay for this convenience, as you may guess. You don’t have so much control or quite the same degree of exactness when compared to working with HTML and the files will be more bloated. (Microsoft, in particular, has been faulted for the excesses in the code content of its Front Page.) For example, even a simple page could require 40KB or more when not using HTML to input, but might be rendered at less than half that amount of bytes otherwise. The objective always is, of course, to pare the size of Web page files to expedite loading and navigating by the viewer.
But, this is a first try, remember? With so many other aspects of producing pages for a Website, it makes some sense to forego the benefits of working in HTML at this time. Not that you should assign it to oblivion. Once the site is uploaded, error-free, and cozily making its home on a host server, then it becomes appropriate to tweak the pages. Clean up the graphics and text placement, add distinctive navigation aids, etc. There is no better way than to learn and employ HTML. Even if that procedure takes more time, the results may justify your efforts and the understanding of what Web page structure is all about will increase your capability in handling the details.
Proceeding Through the Construction Zone
Software has been installed and the guided tour through production of a sample Web page (more elaborate than those planned for this site) has been studied. The decision is that the first version of all four of the pages will not contain graphics. Instead, type design, rules, and background will define appearance. Doing this will provide a total kilobyte count of the ‘must’ elements contained in the site, making it easier to determine how extensively graphics can be added later during page revisions and still have a site that’s not bloated.
Headlines and text already have been ‘roughed out’ on a word processor but now have to be modified to fit the strict parameters of Web page makeup. For instance, in choosing ‘paragraph’ as the input mode (in contrast to ‘heading,’ ‘bullet list,’ etc.), word wrapping will be determined by the width of the window and not by margins. Type sizes follow a prescribed hierarchy which permits increasing or decreasing in steps, with the number of adjustments based on the size in use. The nomenclature discards point sizes and, instead, identifies choices by the digits 0 through 6, or 1-7 in some programs. Generally, the main text will be set as basefont 3 (default document size)
Keep in mind that the visual sizes of type are largely dependent on the preference settings for the browser being used by a viewer. Similarly with the type styles. If what is used in the preparation of Web pages includes specially-selected faces and these are not installed in viewers’ computers, the wording will be rendered in default fonts. The safe path is to favor use of those type styles that ‘everyone’ has: namely, the Times Roman (serif) and Arial (sans serif) font families.
Also, a Web page is not truly a page in the traditional meaning. The vertical scroll bars allow for seamless continuity, taking the viewer beyond the screen ‘window’, while the typical image area on the monitor at any given time may equal no more than a half-page printed document. It’s said that excessive scrolling is annoying to visitors to Web pages, so the usual recommendation is to use more pages in your site rather then just a few which will require lengthy scrolling.
On Our Way by Implementing the Procedures
Time to produce the actual pages. Observing the do-and-don’t guidelines just discussed should help substantially in avoiding calamities, true, but there’s a difference between bare-bones know-how and error-free confidence. Perfection is not the immediate goal for this first attempt.
Headings and text are keyboarded or imported for all four of the site pages. An effort is made to keep the content of the first page (the ‘welcome’ or ‘index’ page) short and uncomplicated. It should fit nicely within a window that requires little or no scrolling. Aside from the business name being repeated in a stacked sequence, there will be a slogan that identifies the category of services being offered and also a listing (short phrases) of what’s contained on the other three pages. The three text lines will be linked to their respective pages, an easy procedure that automatically will add an underscore to identify each line as a connection via a mouse click to that specific page.
The second page, all text as are the other pages, will describe the services offered and the kinds of potential users
to which the message is directed. Bold-face subject headings will start several of the key paragraphs. The page should need only minimum scrolling and it ends with a paragraph calling attention to excerpts from authored documents pertinent to specific businesses on the page that follows. A key phrase that mentions ‘excerpts’ will be linked to facilitate navigating to it.
Page three will contain those excerpts. Frames will be used to separate three main divisions. One is for the banner headline and a few lines of text explaining the choice of samples selected, while the other two frames act as vertical, parallel columns. Each is scrolled independently and contains three excerpts identified by their origins. This procedure should help reduce scrolling activity. A connection with the last page of the site is created by a linked mention of instructions for e-mail contact. That is included at the end of the text in the banner frame rather than at the end of the excerpts so as to avoid the possibility of being overlooked.
Closing page for the site begins with a short essay-like message (20-24 lines of text) complete with a provocative headline. The statement is intended to support the value of the services being presented for hire, reinforcing the purpose of the Website. Below a dividing rule is the last section of the page, a paragraph that provides information for inquiries sent by e-mail to various domain addresses related to specific services. All e-mail addresses are linked, so that selecting any one of them will open the viewer’s e-mail program, thereby facilitating a response.
Because all the pages are text-driven, there has to be some kind of visual supplement to invite the eye, something to substitute for the enhancement brought by graphics. For this project, the only practical choice would be using color for headlines, rules, and background. Luckily, there is a palette of colors that are Web-safe, colors that won’t change when viewed on the Web. Headings for all pages will be in a color compatible with the standard blue used for word links while a light background color likewise will be consistent from page to page, a replacement for the default pale gray. By employing the same colors throughout the site pages, loading those files occurs but once during the site visit, thereby speeding the opening of all other pages.
Ready for the Uploading
The pages have been checked for viewing using both Internet Explorer and Netscape Navigator offline and seem to be error-free. In Part 2 of this project, a Web host will be identified, the site files will be uploaded for testing and then revised. From there on, it’s a matter of marketing it. :