web page editing tools compared

List assembled by Blake Nancarrow (blaken@computer-ease.com) of Computer Ease for the Computer Trainers Network (CTN) on 04 May 2000.

introduction
definitions
properties
development speed
learning curve
mobility
HTML knowledge
code size
code quality
spelling checking
site editing
smart transfers
special effects
compatibility
tool cost
overall cost
sites
colophon
X X X

 

XXX The most common complaint about the web is that it is too slow. Part of the reason for this is that HTML files and the associated graphics are larger than necessary.

An intimate knowledge of HTML tags, how you can use implication, how you can trim files of unnecessary space, lines, tabs, etc., allows your files to be lean and mean.

This means development in a text or HTML editor can produce remarkably compact, efficient code. The HTML code generated by authoring tools such as FrontPage and Adobe PageMill on the other hand tends to be 25% to 50% larger than necessary. For example, here's the basic HTML needed for a nicely formatted table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" >
<HTML><HEAD>
<TITLE>Financial Statistics</TITLE>
<META NAME="Generator" CONTENT="Blake Nancarrow">
</HEAD><BODY>
<H1> Financial Statistics </H1>

<TABLE BORDER= "1" WIDTH= "100%" >
<TR> <TD ROWSPAN= "2" > <TH COLSPAN= "3" > Fiscal Years
<TR VALIGN= "bottom" BGCOLOR= "silver" > <TH HEIGHT= "70" > 1998 <TH> 1999 <TH> 2000
<TR ALIGN= "right" > <TD ALIGN= "left" BGCOLOR= "tomato" > apples <TD> 1,000 <TD> 2,000 <TD> 3,000
<TR ALIGN= "right" > <TD ALIGN= "left" BGCOLOR= "darkorange" > oranges <TD> 100 <TD> 200 <TD> 300
<TR ALIGN= "right" > <TD ALIGN= "left" BGCOLOR= "olive" > kiwis <TD> 10 <TD> 20 <TD> 30
</TABLE> <P>

Results provided by Acme Farmer’s Market. <P>
Generated with Windows Notepad, by hand.
</BODY></HTML>

It is followed by the HTML from Microsoft Word 97...

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>Financial Statistics</TITLE>
</HEAD>
<BODY>

<B><FONT FACE="Arial" SIZE=4><P>Financial Statistics</P>
</B></FONT><FONT SIZE=2></FONT>
<TABLE BORDER CELLSPACING=1 CELLPADDING=7 WIDTH=590>
<TR><TD WIDTH="25%" VALIGN="TOP" ROWSPAN=2>&nbsp;</TD>
<TD WIDTH="75%" VALIGN="TOP" COLSPAN=3>
<B><FONT SIZE=2><P ALIGN="CENTER">Fiscal Year</B></FONT></TD>
</TR>
<TR><TD WIDTH="25%" VALIGN="BOTTOM" BGCOLOR="#ffffff" HEIGHT=58>
<B><FONT SIZE=2><P ALIGN="CENTER">1998</B></FONT></TD>
<TD WIDTH="25%" VALIGN="BOTTOM" BGCOLOR="#ffffff" HEIGHT=58>
<B><FONT SIZE=2><P ALIGN="CENTER">1999</B></FONT></TD>
<TD WIDTH="25%" VALIGN="BOTTOM" BGCOLOR="#ffffff" HEIGHT=58>
<B><FONT SIZE=2><P ALIGN="CENTER">2000</B></FONT></TD>
</TR>
<TR><TD WIDTH="25%" VALIGN="TOP" BGCOLOR="#ff0000">
<FONT SIZE=2><P>apples</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">1,000</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">2,000</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">3,000</FONT></TD>
</TR>
<TR><TD WIDTH="25%" VALIGN="TOP" BGCOLOR="#ffff00">
<FONT SIZE=2><P>oranges</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">100</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">200</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">300</FONT></TD>
</TR>
<TR><TD WIDTH="25%" VALIGN="TOP" BGCOLOR="#00ff00">
<FONT SIZE=2><P>kiwis</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">10</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">20</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT SIZE=2><P ALIGN="RIGHT">30</FONT></TD>
</TR>
</TABLE>

<FONT SIZE=2>
<P>Results provided by Acme Farmer’s Market.</P>

<P>Generated with Microsoft Word 97.</P>
</FONT></BODY>
</HTML>

You can see the Word-generated HTML is filled with extra formatting. And in some cases, inefficient formatting.

The following tables compares the size of an HTML file generated by a variety of different tools. You can see that a simple HTML file built by hand in a text editor, in this case, yields a file one-third the size of that generated by Word (using the Save As HTML). In other words, the raw file loads over the internet in a browser three times faster. And it uses 1/3 the server's resources. It loads 50% faster than the equivalent Dreamweaver file.

generator

bytes

Word 97

2017

FrontPage 98

1373

Dreamweaver 2

1086

raw HTML

798

FrontPage 2000 is better than 98; Dreamweaver is much better still. You get what you pay for, sort of. If you use an editor and you try to make HTML code that's "lean and mean," you can produce blazingly fast web sites!