1. Using Divs to hide and show info as well as showing warnings.
When showing large amounts of data alongside supporting text, it is in your best interest to use div tags to hide and display the information. This practice makes it easier for the user to quickly scroll through the content of the page and find exactly what he/she is looking for as well as keeping your page more manageable and aesthetically pleasing.

For all of you who still do not follow this method of content display management, here’s a quick example of how your pages can improve with the use of this technique. Take for example this fictional page that I created in Photoshop. This page does not use divs to hide extraneous content. You can clearly see how long and difficult this page can be to navigate if you are looking for little tidbits of information or just scanning the page for content.

This next page uses div pop-ups and content hiding techniques to remove any information that might not be necessary for initial reading purposes. This helps the reader to find their information quicker as well as improving the overall structure of the page.

Lastly, do use div pop-ups instead of the standard Javascript window.open pop-ups as they are less intrusive on the user and are able to be branded with the look and feel of the website instead of the generic windows or mac alert box. In addition to using this technique, it is becoming more standard to dim the background of the page as to bring the attention to only the alert box…click here to see how this looks in our previous div fictional page.

2. Using a javascript library such as script.aculo.us instead of flash for content animations.
When creating simple animations including text scrolling, image fading, or any other sizing or fading animation, it is more efficient to to use a Javascript library such as script.aculo.us instead of adobe flash for several reasons:

  1. No need to republish swf file or edit external text documents – all text content is contained within the web page. This means that the web developer can update and maintain the web site with very little effort on his part.
  2. Many corporate intranet systems and highly secure sites do not allow for the flash plug-in but do allow Javascript.
  3. Easier back-end integration with server-side languages and databases – when dealing with database queries, use these libraries to hide and display query results is highly stylized fashion without the necessary constant update of a flash swf file.

    The following is a case study example of the time and effort saved if one was to show products and their information on an e-commerce site with a Javascript library as opposed to using flash. This image show a standard products page which could be populated with either server-side code or a flash movie. Let’s say that each box containing a product fades in as the content is loaded onto the page…well, you can either code that fade effect onto the page using a simple sniplet of sriptaculous “Effect.Appear and use simple table rows to populate the page OR you can code an entire flash movie with transitions, figure out the coordinates, sizes, etc, etc which would triple the development time. What if you want to change the type of transition or change the size of your thumbnails? Again, using Javascript you simply change the effect once in the code and you are done unlike going into the flash movie and repositioning everything and changing the transitions, etc.

Click Here to learn more about script.aculo.us.

3. Performing all server-side form validations with Ajax.
When sending information back and forth between the page and the server as in a login process, use Ajax instead of page redirects to simply the user experience as well as providing easier navigation and error checking. One of the most annoying experiences is filling out a long web form, submitting and redirecting back to the form where all the information you just entered is empty.

By utilizing Ajax and the XMLHttpRequest object the user never leaves the page and all information is kept intact. This method also allows the developer to create multi-step forms on a single page furthermore facilitating the user experience on your site.

Click Here to see an example of a demo multi-step form that I threw together that uses Ajax and PHP to determine username validity.

4. Using a live-search on your site when possible.
Live search is only starting to make it’s way into web sites but already has been an integral part of Firefox for quiet some time via the search bar in the main menu. I understand that for smaller sites and sites with little content, a live-search component might not be necessary but in any blog/news site, I believe that this type of search would greatly facilitate the browsing experience of the user.

Here are a few details/suggestions you should keep in mind when developing a live-search component for you next web project:
–If your site content is database-driven and you receive a lot of hits on your site, chances are that your database server is already busy doing it’s job….so, when creating your live-search component, try to limit the number of times you send requests to the db server, otherwise your site will slow down because your db server cannot keep up with the demand.
One way to get around that is to spider through your site and get an index of keywords pertaining to each page…there are a lot of spiders out there that you can download that will transverse your site and output keywords per page….you can store that content in a flat text or XML file and use that as your live-search keyword repository instead of actually querying the database every time the search input box is updated.

Another way is to create a keyword index for all the pages in a separate table on your database. That way the db server will only query a list of keywords instead of a whole lot of text stored as your page content. This will dramatically cut down the load on the server as well as speed up your site.

Another important point to remember is how the user will utilize the live-search component…let me explain. There are several different ways in which you can display the live-search data on your page. Click here to see couple of different ways live-search results can be displayed before reading these next few sentences as what I say will make more sense.

From the image you can see I have presented three different ways to utilize a live-search component. The first and most rudimentary type is a simple search that displays a suggestive keyword and what page this keyword appears. This type of search is most beneficial to a site with little content or content which is relatively consistent throughout the entire site.

The second live-search box is a little more robust and displays words which precede and follow the keyword the user is looking for. This type of result is more helpful to the user as it gives him/her context information about the keyword furthermore increasing the likelihood of the user finding exactly what they need.

The third and final live-search box displays suggestive keywords based on the initial keyword which is typed in the search box. This type of search can be fully utilized on a site which has products or services which different names and descriptions but still fit into the category as a whole… e.g. If you own a car parts store and a user is looking for a Michelin tire, you might also want to suggest a Good Year tire or suggest different sizes of a Michelin tire therefore decreasing your time-to-purchase on your site and increasing your rate of profit.

5. Using PNG-24 images…the correct way.
Even as I write this post, I feel that many developers are still afraid of using png-24 images in their sites. The two main factors of this are: png-24 images are not natively supported on IE6 or below and png-24 images are quite larger than standard png-8, gif, or jpg files. That said, I will now try to convince if you use these files correctly, both of these main obstacles can be overcome.

Issue #1. Png-24 images are not natively supported in IE6 or below.

If you want to display png-24 images in your design properly, you need do add a special filter to the CSS class…here’s a simple background class with this filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/header.png’, sizingMethod=’scale’);

Please Note:That this CSS style will not overwrite a previous background-image style with a new background image in Firefox and other browsers, it will simply add another image on top of the one below, thus you will have to have some sort of script that loads this style if IE6 is present. I usually have 2 style sheets and run a php or javascript script that redefines the background class like this if IE6 is the browser:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/header.png’, sizingMethod=’scale’);

One other drawback to this method is that you CANNOT repeat the background image using the filter…therefore, This method only works if the png-24 image is a fixed size image that will not be used on page where the background height might change.

Issue #2. Png-24 images are too large to use efficiently.
Done correctly, you can use png-24 images as background images with drop-shadows and glows…here’s an example of how to do it the right way. Below you will see a header image in png-24 format with a drop-shadow.

If you were to export the image from Photoshop in this condition, it would be almost 158kb! Now here’s a way to do it to save a lot of kbs. First fill-in a rectangle in the middle of the image but be careful not to fill-in too much so you can later place a rectangular picture inside. You can see the image below.

This png-24 image is now only 20K!

Your next step is you use this new background image as a background-image in CSS and simply put the part that you filled-in as your content and you’re all set! Click here to see an example of this process (only 52KB and works in FF and IE7).

I hope you enjoyed this post and if you feel like I missed another big tip, drop me a line or post a comment and I’ll do a follow up with more useful tips…thanks!