June 3, 2002-- Newsletter #183

By Joe Burns



Goodies to Go (tm)
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!

 

Archive Home Page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date