New to web development? Here are some tips to help you design faster websites...
1) Use CSS and use it well!
Most HTML Editors tend to generate CSS automatically, so that's not really an issue now days. However, using CSS correctly or more effectively is an entirely different subject. If you are new to web development you probably didn't know that CSS can be optimized. There are several things you can do to improve your site load time by formatting your CSS properly or using shortcuts wherever possible.
For example: If applying padding, instead of using the following code,
padding-left: 10px;
padding-right: 10px;it's better to use the short hand form..
padding: 0 10px 0 10px; (top right bottom left)I also recommend using CSStidy to optimize your stylesheet formatting. CSStidy seems to do the trick in most cases. Although it's possible for it to go wrong. So be careful and don't be too greedy with the compression. I recommend trying it with the following settings...
> csstidy.exe input_filename.css --template=high output_filename.css2) Which image?
A good web designer knows when to use JPG's vs PNG's vs GIF's. What's the difference? Well, JPG's are not transparent. GIF's can be transparent but don't support gradients in the image. PNG's are transparent, support gradients and generally better quality. But quality comes at a price...so they're usually bigger in size. So, what should I pick? Well it depends on the situation really. Pick the one that best fits your design but make sure you justify your choice. In any case, do keep in mind that there are some tools or processes that will help you optimize your images.
a) Interlacing - Interlacing is a process by which the image is drawn in a series of passes rather than all at the same time. The first pass skips a certain number of lines, then on consecutive passes the lines which were skipped are filled in. This has the effect of producing an image that starts off blurry and then comes into focus as opposed to drawing the image from the top down. Interlaced images may start out blurry, however there are two very distinctive reasons to use them. First, they give the client something to look at rather than blank space. This has a capturing affect on the clients attention. Second, as the image fades in, the client can decide whether or not they wish to stick around and see the rest of the image or simply move on.
The down side to this is that it increases the image size. So if the image is already really small, it's not worth using this technique. Adobe Photoshop gives you the option to interlace PNG's and GIF's when you save them.
b) Progressive - This process is similar to Interlacing but is meant for JPG's. It's available in Adobe Photoshop as well. (File -> Save for Web & Devices).
c) Optimizers - Images can be optimized slightly, however it does reduce the quality of the image. See: DynamicDrive
d) Lossless Optimizers/ Image Compression - Typically image size is associated with it's quality. I have come across several optimizers that re-compress PNG's without any noticeable loss in quality. Often the compressed PNG is both small (in size) than an equivalent JPG and of better quality. OptiPNG is one such lossless optimizer.
3) Javascript
When using javascript libraries (jQuery, Mootools, Prototype, Dojo, etc...) it's better to link to the libraries on clouds such as Google API, Amazon or Yahoo. The reason for this is because there's a chance that it may already be cached on the clients system. Not to mention they have bigger pipes and its a bit of a bandwidth saver for you.
On the 'down' side your website now has an additional component that decides whether it fails or not. i.e. If for some reason the cloud servers are down then your website will loose some, if not all functionality. However, the chances of that happening are marginal due to the amount of redundancy put in place by these companies.
