Where do I begin?

by Joe Gillespie — May 1, 1998

This is one of the most common questions that Suzanne and I hear from people wanting to delve into the depths of web page design. Of course, the answer very much depends on where you are starting from and where you want to go.

The underlying structure of a web page is based on HTML (HyperText Mark-up Language). You can create a web page in a simple text editor, it is basically just a plain text file with references to the location of graphics files introduced in a particular way.

You can type this text file in a text editor like Notepad (PC) or SimpleText (Mac) provide that you know the correct syntax for the various 'tags' required to format the page. Or, you can use a WYSIWYG authoring package that writes those tags for you. There are pros and cons for both methods, but if you are a visually inclined graphic designer, you may prefer to see the page build up as a meaningful image rather than as a page full of code.

Regardless of which method you choose, you have to understand the medium. Just as calligraphy is a different medium from stone carving, you have to know what you can do and what you can't. Designing a web page is about as far removed from designing a printed page as the Book of Kells is from the Trajan Column, they both have words and images that communicate, but they do it with different techniques - techniques that suit the medium.

Early web pages looked like they were produced in a word processor. They had lines of text stretching from the left margin to the right margin. Some lines were bold, there were some horizontal rules and a few small images. If you consider that these pages probably had paper counterparts that looked very similar in academic institutions all over the World, they were quite acceptable, and were also true to the medium.

Today's browsers and computers are a lot more capable in terms of what a web page can look like. Unfortunately, design demands have outpaced increases in Internet bandwidth and page loading is just as slow, if not slower, than ever. Where technology is allowed to lead, novelty value becomes more important than content or communication and the tail wags the dog.

So, the question "Where do I begin?" can best be answered with, "By understanding the medium." And that goes for hand coding and WYSIWYG disciplines equally. There are links in Suzanne Stephens' MegaList to other web sites and books that will help in getting to know the medium. You will also need an image editing package that can output files in GIF or JPEG formats. These vary in price from low-cost shareware like PaintShop Pro (PC) and GraphicConverter (Mac) to the more expensive, yet ubiquitous Adobe Photoshop. Graphics packages more specifically targeted at web design, like Macromedia's Fireworks and Adobe's ImageReady, are more cost effective of your graphics are only intended for web pages.

For authoring, the leading text editors, which add more web page creation functionality than the basic text editors that come with your computer, are Allaire's HomeSite (PC) and BBEdit (Mac).

If you wish to go down the WYSIWYG route, there are some excellent products which produce clean, efficient code and let you flick between WYSIWYG visual authoring and raw HTML code. For learning, I find that Claris Home Page is hard to beat (PC and Mac) and was, in fact, used for most of this site. Other ones worth considering are Adobe PageMill (PC and Mac) and GoLive CyberStudio (Mac only).

As you progress, you might find these programs restricting, and depending on what type of work you are doing, will find Microsoft FrontPage'98, NetObjects Fusion or Macromedia's Dreamweaver more appropriate.

If the question were, "Where do I start to design a web page?", I would strongly suggest, "A piece of paper!" Unless you are very proficient with a computer graphics package like Photoshop, I think it is better to sketch out the basic layout and site structure on a pad. This way, the computer is not intervening and saying to you, "I want to do it this way!" or "I will let you do it this way!" Computers are not designers and should not dictate design - that is your job!

Claris Home Page 3.0

Now in its third version, Claris Home Page is an entry-level web page authoring package available for Macs and PCs. I say entry level, because it is simple to use, but by no means simplistic.

It is primarily a WYSIWYG editor, allowing you to insert text and graphics visually, yet access to the underlying code is only a mouse-click away. If you select a text or graphical element on the page and change to HTML mode, the relevant code is highlighted in the window so you can see exactly how each element is coded. This feature is a great boon for novices and they will soon understand the correlation between visual elements and HTML code.

The one thing I have always admired about Claris products is that they know what to leave out. Home Page 3.0 is not bloated with esoteric features like some of its competitors. It makes no pretence at being the latest and greatest, but the features that are there are well implemented - and very fast. On a page with complex tables, Home Page will redraw the screen almost instantly where others have to think about it for a few seconds.

Home Page's way of handling table layouts is very intuitive and a delight to use. Tables and cells can be resized either from a dialog box or by simply dragging the edges. The page being worked on can be previewed within Home Page, or instantly transferred to Navigator or Explorer to compare their renderings.

There are very few negatives with this program. In common with all WYSIWYG authoring programs, the code that it produces is not optimal and after a while, the user will get to recognise where it can be tweaked and fine tuned for greater efficiency. Its most annoying foible is that it can't handle progressive JPEG files internally even though they show up correctly in the browsers. It refuses to add the HEIGHT and WIDTH attributes as it does so nicely with GIFs and regular JPEGS.

Home Page now has a few site management features, useful, but not what you would call 'heavy duty' by any means. Its integration with FileMaker Pro is excellent should you want to get into dynamic, database-driven web sites.

For someone just starting out in web page design, I would say that Claris Home Page 3.0 is worthy of serious consideration. And, even when they have moved on to more ambitious things, they will still appreciate its elegant simplicity for less demanding web pages. A time-limited trial version can be downloaded from the Claris Home Page site.

Claris Home Page 3.0
Features red bar85%
Ease of Use yellow bar90%
Value for Money green bar95%
'Must Have' Factor blue bar95%
Manufacturer Claris
Price $99
Summary Great for beginners to intermediate level web designers.
Del.icio.us Digg Technorati Blinklist Furl reddit Design Float