Goodies to Go ™
June 3, 2002–Newsletter #183
This newsletter is part of the internet.com network.
http://www.internet.com
Goodies Thoughts – Website Design – Speed
Speed, speed, speed.
It’s all about how patient your visitors are. Unfortunately, the trend is
towards less patience rather than more patience.
So, how can you as a
developer satisfy the average visitor’s need for speed? Well, there are several
things you can do to improve download time and there is one word that is used to
describe those improvements in general:
Optimization –
You’ll hear this word tossed around the computer world all of the time. Anyone
developing software anywhere in the computer industry will tell you that
optimization is one of the most important and sometimes most elusive elements of
software development.
So, what sort of things
can and should be optimized on a web page?
Graphics and Images
– Quite often your graphics and images will constitute a larger percentage of
your total download than the actual code of the page. Because of this it is
critical that you keep in mind that while using more graphics may make your page
more beautiful, it is often at the expense of download time. So, here are a few
hints that will help you optimize your graphics and images:
Graphics/Image
Software – Choose your graphics and image software carefully. The better
your software the more control you will have over the graphics and images that
you create. For example, current Adobe PhotoShop versions now have the ability
to optimize images for the web. This means that once you have created your
beautiful imagery you have the control to adjust the quality level which will
in turn shrink the file size. You will usually find that a change in quality
from high to medium is almost indiscernible at 72 dpi (video level quality)
but will reduce your overall file size from 30% to 50%.
Know your File
Types – Be sure to save your graphics and images in the file type that is
most suited for the occasion. If your graphics are straight text or some
simple solid color graphics then the .gif format is probably going to be your
best bet. If you have a photograph or other complex image then .jpg will
probably be your best choice. Other file types such as .png or .bmp, for
better or worse, are not commonly accepted in the web development world, so
you are best to stick with .gif and/or .jpg. If keeping track of different
file types sounds like too much of a pain to you though, then saving
everything as a .jpg will probably be the best option.
Combine Graphics
with HTML Elements – What do I mean by this? Try combining elements that
can be simply created in HTML with custom graphics. For example, let’s say you
want a blue box at the top of your web page. Simple enough, just change the
background color of a cell in a table at the top of the page. But what if you
wanted rounded corners on that box? Instead of creating one big fixed-sized
graphic for the top of the page, you would just create a couple of rounded
"end caps" to place in your table on either side of your blue cell. Now the
only graphics that have to be downloaded are two very small .gifs instead of
one much larger graphic. It also gives you a much more flexible solution that
is more adaptable to different browser resolutions.
Optimize your Code
– I know this is an obvious one but it needs to be mentioned. There are a few
things to keep in mind when optimizing your HTML and JavaScript:
HTML – Try to
limit your code to only what is necessary. I know this sounds obvious but it
is overlooked more than you might think. If you are using development software
such as FrontPage or DreamWeaver you may want to take a look at the code that
gets spit out. Often times packages like these will use a great deal of
unnecessary or inefficient code that needs a bit of cleaning up. Also, try
using Cascading Style Sheets whenever possible. Style Sheets will keep you
from having to declare the same font types, sizes, etc. over and over again
unnecessarily.
JavaScript –
The first rule of JavaScript is "don’t go off the deep end". Just because you
can make your page fly, dance and sing with JavaScript doesn’t mean you
necessarily should. Keep in mind that it can often take several lines of
JavaScript to do even a very simple task which can cause your page to grow out
of control before you know it.
Beware of Animations
– While animations are very necessary in today’s web they can easily become huge
resource hogs. If you are going to use animations on your pages then keep the
frame rates to a minimum. If you want to use more complex animated effects then
carefully consider what format will be best suited for your needs like Shockwave
or an animated GIF. Also, keep in mind that too many different animations
running simultaneously on a page can make the page itself and the animations of
the page run sluggish.
There are just some of
the ways that you can improve the download times on your pages. Keep in mind
that around 80% of all surfers are using a dial-up connection still. Hopefully,
with the growing acceptance of broadband services such as DSL and cable the
number of dial-up connections will continue to decrease but until that happens
we as developers will have to keep using 56K as the lowest common denominator.
Thanks for reading!
Quiz Goodies
Let’s say you have a
form that you are using to collect orders for some paintings that you sell
online. On the form you have all of your basic stuff like names, address,
telephone, etc. You also have a multi-line text box set up so that your
customers can type in any special comments.
Since you started using
the form you have noticed that people are using the comment box to type their
life stories and, frankly, you don’t have the time to read through all of that.
So, you need to find a way to create a multi-line text box that only allows your
customers to enter 200 characters or less. Can you do it?
Read answer below.
Q & A Goodies
Questions are taken from
submissions to our Community Mentors. You can ask a Mentor a question by going
to
http://www.htmlgoodies.com/mentors/.
Q. My page has a
background that is green down the left side, much like HTML Goodies has a curvy
brown strip down the side. I’d like my links that are situated in the green area
to show white, and the links that are situated in the white area to be green.
This is much like your HTML Goodies page, and I’ve looked at your source but
can’t figure out how to do it.
A. You can do it
using style sheet commands like so:
In between the head tags define your commands:
<HEAD>
<STYLE TYPE="text/css">
A:LINK {COLOR: white;}
A.TWO:LINK {COLOR:green;}
</STYLE>
</HEAD>
Code the links in the green background like you normally do:
<A HREF="somewhere.com">Link</A>
In the white area use the two class like so:
<A CLASS="TWO" HREF="somewhere.com">Link</A>
*** This question was submitted to our Mentor Community. The answer was provided
by Marty Bozeman, one of our HTML Mentors.
Q. Is there an
equivalent of ASP for Apache servers?
A. There is
a third-party package that works with Apache. Check out
http://www.chilisoft.com.
*** This question was submitted to our Mentor Community. The answer was provided
by Jeremy Lowery, one of our ASP Mentors.
Q. I have a
side bar on the left and then the rest of the page is where all the content
goes. The side bar just has a navigation menu. I have it where the page is one
big table and the sidebar is one cell and the rest of the page is a cell. Well
my problem is… if there is a lot of information in the right hand cell, then
the stuff in the left hand cell gets right in the middle of the cell so
everything will be even. But I want that stuff to stay at the top of the page,
regardless of how much info is in the right hand cell. Is there a way to make it
where it doesn’t automatically center itself like that?
A.
You need to add VALIGN="top" to the row or cell or both. This will make all the
contents stay at the top of the cell.
*** This question was submitted to our Mentor Community. The answer was provided
by Alex Newport, one of our HTML Mentors.
News Goodies
United Commerce Service (UCS) is
marketing Buy.coms successful e-commerce engine to online retailers. This means
new competition for Digital River.
Click here to read the article
The Federal Court of appeals threw
the Childrens Internet Protection Act out last Friday which was aimed at
preventing access to porn from public libraries. The court ruled that the law
violated the First Amendment.
Click here to read the article
Macromedia recently patched a hole in
older versions of its JRun software. The hole could allow hackers to gain access
to the entire web server via a buffer overflow problem.
Click here to read the article
Quiz Answer
Limiting your customer’s comments to
200 characters is easy with the MAXLENGTH attribute. Here’s how it works:
<TEXTAREA NAME="Comments"
ROWS="4" COLS="50"
MAXLENGTH="200" >
Please enter your
comments here …
</TEXTAREA>
The TEXTAREA tag gives you the
multi-line text box that you wanted. The ROWS attribute sets the number of rows
(lines) for your multi-line text box. The COLS attribute sets the width in
characters, more or less. And the MAXLENGTH attribute sets the number of maximum
characters allowed to be entered in your box. The text between the open and
close TEXTAREA tags is what will appear in the multi-line text box by default.
Hint: If you are going to use
the MAXLENGTH attribute be sure to let your users know that that they have a
limitation otherwise they will become quite frustrated when they are in the
middle of their message and they can’t type anymore.
And Remember This . . .
Everyone loves a circus
Did you know that on June 3rd, 1835, P.T. Barnum made his first tour of the
United States. He had purchased a black slave named Joice Heth and paraded her
across the country claiming she was 161 years old and was once a nurse to
President George Washington. He purchased a museum in New York City in 1841,
where he put on display various unusual individuals such as a midget and a set
of Siamese twins. In 1871 he began taking The greatest show on earth on the
road. Ten years later he merged his circus with that of James Anthony Bailey,
forming Barnum and Baileys Circus.
Thanks for reading Goodies to Go!
