Cam's Guide to Designing with HTML (for designers)

There are a few basic rules that one must remember at all times. I will list these first so that you can quickly glance at them anytime you want:

Always design for 256 colors
Always design for 72 dpi (dots/pixels per inch)
Always remember that 80% of your viewers are using Windoze
Always remember that 65% of your viewers are using Netscape
Always remember that bandwidth is the most important thing in the world.

Today we will be talking about HTML. HTML or Hypertext Markup Language, is the code that we use to write our web pages in. It is setup to use a collection of tags (or containers) that look like this <command> and/or </command>. The first tag is called an "open" tag and is the first part of a containing unit for HTML. The second tag is called a "close" tag and is the last half of the HTML container. Everything with a closing slash (/) is a "close" tag. All data/text within the container is then assigned the value of that specific tag. For instance:

<B>bold text</B> = bold text

Understanding how HTML works is crucial for understanding how the various web browsers read your code and display your carefully designed pages. Knowing what each and every single tag/container does is not as important. It's like driving a car. We all know that the pedal on the right makes the car go and that the pedal on the left makes the car stop, but how many of us know exactly what powers the car with all those sophisticated doohickeys and dirty ugly mechanical parts that reside under the hood? See. For the most part, we will be using WYSIWYG HTML editors such as Adobe PageMill or Claris Home Page to construct our pages. Both allow true design without HTML tweaking or editing. If you would like to learn HTML, there are several good sites on the Internet where you can download entire manuals of do's and don'ts. I will be including one such manual with this packet of info. HTTP (Hypertext Transfer Protocol) is the protocol (code interpreter) that a browser uses to understand HTML. All web page files are transferred to the browser using HTTP. HTTP is actually just one of hundreds of protocols that use the popular TCP/IP protocol which has become the industry standard for sending packets of data across the Internet (from one computer to another).

Everyone using the Internet to view pages uses a browser of some kind. With about 15-20 different browsers to choose from, only two stand out as Industry standards. The one used by most people (on all platforms: Mac, Windoze, Unix, etc.) is Netscape's Navigator, or its common moniker, Netscape. It also goes by the nickname Mozilla. Netscape's biggest competitor is Microsoft's Internet Explorer. While Netscape has had almost three years to produce and fine-tune a truly remarkable piece of software (working from original source code from the grandaddy of them all = NCSA Mosaic), Microsoft only started developing IE in January of 1996. In a mere 12 months (and $2 billion allocated for its Internet R&D division), Big Bill of Redmond (the new home of Satan) has produced a true competitor for Netscape. Only time will tell as to who will win the ongoing browser war. Both Netscape and IE have reached v. 3.0 and are available for free download:

http://www.netscape.com/

http://www.microsoft.com/ie/download/

When I first started composing my rules for designing with HTML (for designers), seventy percent of the people surfing the WWW (World Wide Web) were connecting at 14,400 baud (14.4K). Since then, the industry standard has risen to 28.8K and most ISPs (Internet Service Providers) have banks of modems with both speeds as well as some 33.6K modems. The newest technology for modem connection is rated at 56K/sec. but the FCC has yet to grant the license to allow for the increased telephone line voltage required to push the data at the speed. The rule of thumb for designing web pages is to design for as many people as possible. This includes those unfortunate souls still surfing at 14.4K. Do NOT ignore them unless you are guaranteed a near 100% audience with high-bandwidth connections. Most large companies, corporations and universities have a high-bandwidth connection such as a T-1 (DS1) or a T-3 (DS3) which transfers data at 1.544 Mbytes/sec. and 4.632 Mbytes/sec., respectively.

A server is the computer(s) on which your WWW files reside. Servers come on various OS platforms. At MichWeb, Inc. (the company which I founded and am actively working for), we run a variety: Most of our virtual domains (www.group5design.com, www.printmasters.com, www.theartfarm.com, etc.) reside on a Macintosh Quadra 800 (circa 1993) running A/UX (Apple Unix) which makes it a Unix box, even though the hardware is from Apple. Really good Unix boxes/servers run in the neighborhood of around $30,000-$100,000 apiece. Other platforms are Silicon Graphics, which runs its own hybrid version of Unix, WindozeNT, which Microsoft spent 25% of its R&D budget on last year and the good trusty old Macintosh. At MichWeb, Inc. we run three A/UX boxes, one Mac server running Quarterdeck's Starnine WebSTAR package, one WindozeNT, one NetBSD, and one MkLinux (another Mac Unix) servers. As of this writing, the WindozeNT box is a $4,000 piece of garbage, the NetBSD box is crash-happy and full of security holes and the MkLinux box is showing signs of promise. The Mac (as a web server) has its flaws, such as a lack of multihoming (i.e., it can't have more than one domain name serving HTTP/HTML). Thus if you were to run a Macintosh web server with the domain name of www.nmc.edu, that is the only domain name that the Mac web server can use. This is because only one IP (Internet Protocol) can be hardware-mapped to the MacOS. While Unix boxes (and Linux) can serve multiple domain names. This is the reason for the A/UX boxes. Are you confused yet?

OK. The Internet is probably the toughest thing of them all to explain. For instance, go walk down to Front Street and ask twenty different people to give you a definition for "Internet." You will probably get 20 very different answers, ranging from very good to the "You don't know Jack!" syndrome. there is a very good reason for this. And that reason is very hard to describe. You see, the Internet doesn't really physically exist, at least not all in one place. If you had to describe the Internet in terms that even a beatnik could understand, it'd go something like this:

The Internet is a collection of computer networks, all connecting to other networks, at various points around the world, giving instant access to millions of computers, and all accessible at any given time from anywhere in the world.

You see, the Internet is probably the most important thing to happen to communications since the invention of the telephone. It's like having all the information you could ever possibly want available immediately at the touch of the mouse or the tap of a keyboard. I, personally, have located about twelve close friends from my childhood military brat days through the Internet. It is absolutely amazing what can be accomplished.

With the growing popularity of the Internet, millions of new people are signing onto the Internet every month. The Internet (or the collection of information/data) doubles itself ever 14-16 days and the number of people doubles itself every 6-8 months. So, you can see why the mass media is still scratching their heads and having a hard time defining the Internet. I often make a comparison between the Internet of today (1996-1997) and the sale of television sets and advertising in the late 1940s and 1950s. Can you imagine what it was like trying to sell airtime to companies in the late 1940s? So, what does this mean? Well, look at the number of Americans (and also think globally!) who are addicted to television and also the impact that television has had upon our society and culture. You can almost predict the number of people who will (and already are) who will get addicted to the Internet. Just as television has become a way of life in American society, so will the Internet.

So along with the Internet comes what we call content creators. These are the guys that make things look pretty. The designers. The interface developers. The graphics wizards. The graphic designers. Just as there are agencies who specialize in creating sharp new advertising for television, there are agencies specializing in creating sharp new content for the Internet. These are the guys who will get all the big accounts. These are the guys we want to be in touch with. These are the guys that we will learn our trade from. Watch. Learn. Examine. Copy. Create.

OK. Now the nitty gritty details. Did you know that 40-60% of all WWW content is created using Macs? Yep, we designers are showing our stuff. The first real industry to actually adopt the Internet as a new media in advertising was the entertainment industry. Every major film studio releases a web site to coincide with the release of their films. Every major music label has a killer web site. All of these web sites are focused entirely on the consumer...yes, the consumer....who has only a 14.4K-28.8K connection to the Internet. Thus any graphics (and now interactivity) needs to be created with them in mind. Graphics must use the best color palette possible (see my explanation of palettes), and they must download rather quickly.

An entire web page should be under 50 kilobytes in size, including all graphics and text files. The absolute most is 150K, but always try to keep it between 50-100K and below 50K if at all possible without sacrificing design and content. You must not force the viewer to wait for all your pretty graphics to download. He will most likely click his "stop" button and go elsewhere.

As a general rule, a front door (an optional first page the user sees which can include animation, sound, interactivity, etc.) should be very fast in loading. It should be very clear as to who/what you are representing and it should entice the user to delve deeper into your site. Too many times I have gotten to a site only to find 75% of the company's information on its very first page. a big no-no. Spread it out. And don't make the viewer scroll too much. It can get irritating. A good example of a site with little scrolling would be www.nationalgeographic.com. Very well done.

Every (graphics) file transferred using HTTP and HTML through a browser has a color palette built into the data file. Where we run into problems is that not every browser uses the same default color palette(s) and not every computer recognizes and reads the color palette(s) the same. This is why a site that looks awesome on a Mac looks like garbage when viewed on a PC running Windoze. The goal of every HTML/graphic designer creating graphics for WWW use, is to get the color palette as small as possible without making the image look horrible. Here's why: Approximately 70-80% of a file's data (size) is made up of the color palette. A black and white line art image saved in a GIF (Graphics Interchange Format) has usually only 15-19 colors (anti-aliased) in its palette and is usually very small. While a full-color image saved in a GIF format has many many more colors in its color palette. The maximum amount of colors in a GIF is 256. Full-color images (especially photographs) should be saved as a medium-to-high-quality JPEG (JPG) format. Not only will the file size be much smaller, but it displays the colors better because of the nature of the file format. As a rule of thumb, I save all photographs in a JPG format and all images with big flat areas of color as a GIF. Logos, for instance almost always appear cleaner if saved in a GIF format versus the JPG format. The GIF format is usually a larger file size since it almost always saves its maximum number of colors = 256. If there are less than 256 colors, it will save its color palette to that number, making the files size smaller. This is crucial. I occasionally use a program called Debabelizer to reduce the number of colors within a GIF file, or to apply a specific palette (Netscape's 216-color optimized palette, for example). 98% of all my graphics are created using Adobe Photoshop. I use layers extensively and always save multiple layers for each effect I am trying to create. Once I have the graphic looking the way I want it, I then merge (flatten) the layers into one, change the mode to "indexed color" and then save it as GIF. I build everything in the "RGB" mode because it allows for more colors and anti-aliasing, which is crucial for getting any text to appear clean without any jaggies. Any post-editing I do is also done in "RGB" mode, switching back and forth to save as a GIF and previewing the graphics in Netscape or Internet Explorer. I also always save a "layers" file, so that I can go back and change anything anytime I want. To save a Photoshop file as a GIF, I use a plug-in called PhotoGIF from Boxtop Software which allows me excellent control over the saving options of a GIF. Simply using the Compuserve GIF default is not enough. PhotoGIF allows me to save transparent GIFs (GIFs where the top left corner pixel is treated as invisible, thus making the graphic appear to "float" on whatever background you have assigned to your HTML page.

For animation, I use primarily what is called GIF animation. The beauty of the GIF format is that it allows you to save unlimited "layers" within a single file. Also called a "stacked" GIF, GIF animation is an art form among itself. Most GIF animation consists of 2-35 frames, or separate images, stacked in a chronological order, saved into one GIF file. I create all of my animation frames/images in Photoshop and save them as separate GIF files, and then import them into a program called GIFbuilder, which allows me to save the file as an animated GIF (also called GIF89a), and also to apply frame speed rates to each frame as well as interlacing. Interlacing is an effect that is available for the GIF format only. It makes the graphics appear to gradually appear in a "window-shade" effect until fully loaded. this is nice for large file-sized GIFs. The JPG format has a similar effect that is called Progressive JPG, but only one plug-in is available for Photoshop, ProJPG from Boxtop Software.

Other means of animation for the web are Shockwave for Director, which requires Macromedia Director knowledge and Lingo scripting knowledge, as well as Macromedia's free converter, Afterburner. Shockwave is very nice for animation that requires sound and synchronized effects. The latest and greatest in animation is not really a program at all, It is a programming language called Java from Sun Microsystems. Java (and its cousin Javascript) is an object-oriented programming language that resembles the popular C language used to write programs in. It's quite complex for anyone not familiar with how code is written. Javascript is a "light" version of Java which does not require a code compiler, but instead resides within your HTML, and is read via HTTP using the browser and <SCRIPT></SCRIPT> tags.

Way way back in the Fall of 1993, when I started coding HTML, I used a text-based editor to hand-code the HTML. Today, there are several WYSIWYG HTML editors which make life much easier. The one I use primarily is Claris Home Page, which allows me to toggle between text-editing and WYSIWYG editing. It also allows me to compose frames and tables. Home Page has shaved approximately 60% off of my HTML-coding time. Any post-HTML editing (non-WYSIWYG, like CGI tags, Javascript tags, and custom tags) I use a program called BBEdit, which is Mac-only. Very nice HTML text-editor.

HTML is actually pretty easy to learn, but I am of the school where I like to let people do what they're good at. Let the designers design. Let the Quark masters do their killer layout. Let the HTML gurus handcode and tweak the HTML. I do, however, recommend that you at least attempt to understand how HTML works. You don't need to know what all of the tags mean or do. You just have to understand how it works. Just like I know if I put gas I my car, then I know the engine will burn the gas to make the car move.

Try not to be overwhelmed with what the Internet is. It is a huge place that keeps growing every day. There are literally thousands of people working on solutions to make the Internet an easier and friendlier place to be. There are also many many people working on the bandwidth problem and the forthcoming bandwidth shortage foreseen within the next couple of years. Take a deep breath, forget about the problems, focus on great awesome design, and make some killer web sites. Let people like myself focus on making the design work with the Internet limitations. Let the techies and the wireheads worry about putting your files/web site on the fastest server possible and the fastest and most reliable connection to the Internet. Go forth and create.