10 Tips on designing a fast loading
Tips and tricks on effective web design
The Number 1 rule that every web designer should follow is to create
a fast loading web site. You might have a great design but very
few people are going to see it if it takes a long time to load.
While designing a web site always think about how long it will take
to load. Try out our tips to build a great looking web site that
also loads fast.
- Minimize the use of images
- The key to a fast loading web site is to minimize the use of
images. Images do enhance a page but don't make 80% of your web
site only images. Instead break it down as much as possible to
simple HTML. Notice the popular sites like Yahoo, Google, Ebay,
Amazon etc., they have very few images because the load time is
more important. Very often simple designs are the best.
- Optimize images for the web
- Once you have decided on the images that you need on your site,
make sure that it is optimized for the web. They should be in
the gif or jpeg format. You can also minimize the size of the
image by choosing the number of colors you need, from the color
palette. The less the colors you choose, the less the size of
the image. You can also use online tools like Gif
Wizard to optimize your images or to get a recommendation
on how to cut down the size of an image.
- Use Tables creatively - You
can get some great looking designs by using tables creatively
. Tables load very fast because it is just HTML code. Tables can
be used in the homepage, menus or anywhere you like. Check out
our homepage and our menus to see how we have used tables in our
more on Using
HTML Tables Creatively
- Cut down the use of animated gifs
- Don't use animated gifs unless it is necessary. Animated gifs
take a long time to load and can also be very irritating. But
since they catch your attention you could use small animated gifs
to draw a visitor's attention to a particular section of your
- Design simple icons - Instead
of using big, bulky images use simple and small icons that add
a little color and draw the attention of a visitor. We have used
small icons in our homepage
to highlight the main sections of our site.
- Use background images instead of
big images whenever possible - Use background images whenever
possible. This is usually a very useful tip for headers and footers.
Instead of using an image of width 580 which is a uniform design
you can use just a part of that as a background fill. This reduces
the size of the web page as the image is small. The code will
look like this : <tr background="/images/header_backgroud.gif"
- Try out CSS Styles - Have
fun with CSS styles to get some cool text effects. Again, a CSS
Style is simple HTML code so it loads very fast. You can create
cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS
Styles to get a simple but nice text effect.
out our CSS Styles tutorial for more cool tips on CSS Styles
- Use Flash sparingly - There
seems to be a lot of hype about Flash but I recommend that you
minimize the use of Flash on a site. Don't make entire sites using
Flash. It may look great but it takes hours to load and can really
put off visitors. If you do want to use Flash use it within an
HTML site and make sure it loads fast.
- Design most of your site in HTML
- As much as possible try to design your site using HTML.
You can create great designs by just using HTML code. Use tables,
CSS Styles and simple fonts to design your site. Minimize the
use of animated gifs, Flash, bulky images etc.
- Keep checking your load time -
Last but not least, before you decide on the final design of your
web site, check its load time on NetMechanic.
This site gives you a free analysis of your web site which is
extremely useful. We kept using it to improve our site till we
got a report that said good loading time!
We learnt these tips while building our web site. We've enjoyed
sharing them with you and hope that you found them useful.
Please Like, Tweet or Share this page if you found this resource useful!
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!