Here are six best practices that you should consider when web designing and developing. They should make your sites a little faster and a little more user friendly (or least not as annoying).

1. Reduce disk space and simplify code

When exporting images for your layout, be sure to select the best format. JPG is usually the best for photographs, while PNG works well for images that contain solid colors or few total colors, such as icons or cartoons. Don't just choose a quality level arbitrarily; instead, use an application that shows the quality and file size differences in real-time or side-by-side.

If you use GIF or PNG images, try reducing the total number of colors the image uses. You can often get away with 128 or less, without reducing the visual quality of the image. There is almost no limit to the level of micro-optimizations you can make, if you really want to get serious. In most programs, including Photoshop, you can specify the exact colors and number of colors to use. You may also want to keep the image compression efficiency in mind when designing your layout.

Reducing file size isn't just about making images smaller. Text takes up space too, and that includes your HTML and CSS. Even simple things like using shorter (but still readable) CSS tag names can lead to a faster website. You want to use as little code (and media) as possible to achieve the result you need. Sometimes, you may want to simplify that fancy design you made in Photoshop, instead of drudging ahead with the absurdly-complex HTML and CSS that it needs to make it work.

As a rule of thumb, if you need to add JavaScript to make something work across all browsers, you should probably find another way to do it (or not do it at all).

2. Minimize/compress HTML, CSS, and JS

Some people like to have proper indentation and line breaks in their public HTML, CSS, and JavaScript source code. It can look nice, and allows people to read and understand it easier, but will also increase the size of your files by 10-20% or more. The increased file size will increase bandwidth usage, load times, and may also increase end-user CPU usage as the browser must wade through extra tabs, spaces, and line breaks. The difference may be small but adds up over time.

It is always a good idea to minimize (or compress) your HTML, CSS, and JavaScript and any other script/code for the final published website. You'll want to test it to make sure the compressor didn't break your code, but for the most part, eliminating excess spaces and line breaks won't hurt anything (an exception being programming languages that use indentation for nested code blocks, such as Python).

Here are some good compressors:

• CSS Compressor
• JavaScript Compressor

3. Reduce HTTP requests

Every file that a user's browser fetches from your web server is done using an http request (image.jpg, style.css, etc). If you want to see this in action, I suggest downloading the Firebug add-on for Firefox and activating the Net panel (be sure to clear the cache).

Reducing the total number of http requests will speed up loading time, particularly for users with high-ping Internet connections (modem, DSL, wireless). It can also help reduce load on your web server and make your website load more consistently, particularly when it resides on a shared web server.

To reduce http requests, you should reduce the number of images and included files that your website uses. Try reusing images when possible, or combining them. Small icons can be combined into a single image and "cropped" using the CSS background positioning property. Here are some other ideas for image cropping.

If your website has a very high bounce rate, or your website consists of only one page, you may consider putting all of your CSS and JS in the header and not using any external CSS or JS files. This would eliminate the http requests for those external files.

4. No Survey/Sign Up Popups

It is true that if you want your visitors to for sure see something and not have to worry about banner blindness, popping up a div or window that covers the content they're seeking is sure to work. The problem is, it will probably also drive them away from your site!

Reduce or eliminate the number of popups that your site uses (hopefully it uses none already) and find a way for users to be notified about something in a non-obtrusive way. A simple message at the top of the content is usually sufficient. There is really nothing more important for the user to see than the actual content they originally came to your site for.

If you really want your users to take a survey or sign up for your site, try putting the message in a box with contrasting colors (not too bright) instead of a popup.

Here is a perfect example of a horrible popup in practice:

5. Reduce or eliminate moving elements

Nothing is more frustrating than going to click on a link, only to have the page contents "shift" just before clicking. This is usually due to an image starting to load or JavaScript moving/resizing a page element. Often times this will cause you to click a different link than you intended, and in the worst cases you may unintentionally click an advertisement.

From the moment your page starts to load, all of the elements should have a position and size that doesn't move. The page shouldn't scroll, and elements shouldn't move, unless it is by a direct action of the user. Whenever possible, specify image width and height so content doesn't move due to image loading.

Oftentimes it is difficult to tell just how user-friendly your website is. Chances are you develop it on a local machine with near instantaneous loading, and you may have a fast cable Internet connection. Try running some transfers in the background, maybe upload a large file via FTP, and then browse your site. Does slow element loading cause usability issues?

6. Don't use onload JavaScript focus()

Avoid including a JavaScript focus() function that fires after the page finishes loading. Sometimes users will have already clicked and started typing by the time the page finishes loading and focus() is fired. With sign in forms, this can create a major problem if a user has already started typing in their password, only to have the browser focus back on the username field unnoticed, leaving their password typed out in plain text.

You may want to include a short JavaScript block inline with your HTML, immediately following the text input that you want to focus to:

<form method="post" name="signin">
<input type="text" name="username">
<script type="text/javascript">document.signin.username.focus();</script>
<input type="password" name="password">
<input type="submit" value="Sign In">
</form>
This is how YouTube's current website "masthead search" works.