1. Online web design tools : Part I
Optimising Images for use on the Internet
PEG Images
This image format is a lossy format. This means once the image is downloaded it is decompressed into
memory and displayed, this format is ideal for most photos, drawings and high colour concentrated
images.
GIF Images
This format consists of a grid of tiny pixel squares, this is a lossless format as unlike JPEG nothing is
decompressed it contains all the information and colours in the file. GIF images can also contain
transparent pixels which make these images ideal as overlay images. With the GIF format there are
multiple options for the amount of colours to use in the image with a maximum of 256 colours so this
format is not ideal for photos. Another good feature of GIF’s is that they can be animated
PNG Images
This format was created to become the new and improved GIF format. The format of PNG is a happy
medium between JPEG’s and GIF’s as you can hold a greater number of colours while still allowing the
use of transparent pixels. So why not use PNG’s for everything you ask? Well because not all browsers
support the PNG format correctly.
Now that you understand the differences in the image formats it is time to get to work.
Saving your work for the World Wide Web
To save your work for the World Wide Web in Photoshop select the File menu and select save for web.
Most graphics editors have a similar feature to this. Once you are in the feature along the top you will
see various tabs, select the 2Up view as this will show you both the original and the optimised image.
Photo's
For most photo’s you will be using the JPEG format as this gives you the best support for the amount of
colours whilst being low in size. In the preset drop down in the top right hand corner (image 1) select
JPEG High. Now you can look at the image size and the time it will take to load in the bottom left corner
of the screen (image 2) you can also change this from 28.8 to 56.6 by right clicking on the speed and
selecting the 56.6 / ISDN speed. This will help you get a minimum time to download that image. To help
you choose the output file size we have developed the following ideal file size chart.
Image Type - Ideal File Size - Maximum File Size

2. Background Image - 2Kb - 5Kb
Layout Header - 15 to 20Kb - 35 to 40Kb
Artworks - Any - Any
Product Images / General Page Images - 10 to 20Kb - 30Kb
Layout Images
Most layout images will be suitable for the GIF format as they don’t contain a lot of colours
Hiring a web designer to come up with the custom solution that you need can set you back a few
thousand bucks. But you can do the whole thing yourself and make it drag and drop simple for mere
pennies with a tool like Breezy Websites. See http://breezywebsites.com for details!
Online web design tools : End of Part I
Open Source Web Design
Every once in a while I run across a site that makes me say, "WOW, what a useful resource!" Open
Source Web Design (OSWD) is one of those sites.
As you can probably tell by the articles I've featured on MyWebResource, I'm a strong advocate for using
templates to streamline website development. As a designer, I produce free templates to give back to
the Internet community, and I really enjoy doing so, but occassionally, the idea machine comes to a
screeching halt. That's where sites like OSWD prove to be invaluable.

3. I found OSWD by chance one day when I was searching the net for template sites. I was looking for
some fresh ideas to help me get out of a slump I was sliding into. You can only do the standard 3 column
layout so many times before you really get bored.
When I started browsing the OSWD directory of templates, I was impressed with the overall layout and
design of the site, but was a little disappointed in the lack of features. I quickly got over my
disappointment after looking at a couple hundred of some of the best website designs I've laid eyes
upon. I consider myself a reasonably good designer, but many of the designs at OSWD really stand out
from the crowd.
What impressed me more than anything else about OSWD and the hundreds of templates you'll find
there is that most of the designs are, at minimum, W3C XHTML 1.0 Transitional and CSS 2.0 compliant.
Many are XHTML Strict! In the years that I've been on the web and browsed thousands of template
sites, I can tell you from experience, to offer so many high quality, standards compliant templates is
rare, very rare!
I like the OSWD site and community so much, I've even started working on traditional "static" designs
again after spending the last two years doing XOOPS themes almost exclusively.
To the Administrator and community of OSWD, my hat is off to you. You've produced a resource that is
by far one of my favorites, and I strongly feel that every webmaster should have your site bookmarked.
If for no other reason than to keep their finger on the pulse of what is new and hot in standards
compliant design.
Hiring a web designer to come up with the custom solution that you need can set you back a few
thousand bucks. But you can do the whole thing yourself and make it drag and drop simple for mere
pennies with a tool like Breezy Websites. See http://breezywebsites.com for details!
Online web design tools : End of Part II

4. Only Seconds
You've spent money and time creating a logo, letterhead, and brochures for your business. You care
about your company message, and you want customers to know you care about quality. You've hired
professional graphic artists, designers, and printers to do the job.
But what have you done about your small business Web site design? Does it match the quality and look
of your other marketing materials? Since the Web has more reach than the rest of your marketing
materials, it should demonstrate the highest quality. And yet so many business owners have hired
amateurs, relatives, teenagers, or created McWeb (fast setup, cookie-cutter) sites themselves.
An important distinction about the Web is the amount of time you have to create interest for your
visitor. You have only seconds to make a great impression. How are you using yours? Now is the perfect
time to see if your small business Web site design needs some tweaking to make that great impression.
Visit your own Web site and check out our three-step approach below to see if it's time for you to
consider a change.
1. Before you click to review your Web site home page, ask yourself what your current business goals
are. Do you want to sell product? Do you want to sell services? Do you want to provide information for
prospective buyers? What do you want to accomplish? Your goals and your business may have changed
since you first put up your small business Web site. Deciding on your current business goals will help you
to decide on the main focus for your small business Web site.
2. Discover what your firm's largest strengths are. This can be done through customer focus groups,
surveys, interviews, or informal processes. The result should be something similar to your unique selling
proposition or how customers benefit from doing business with you.
3. Now, visit the home page of your Web site. What is the first item that you see? Put one and two
together, and shouldn't your small business Web site home page immediately feature your biggest
strengths or a means to your goal (or preferably both?)
The Web is filled with what not to do. Yesterday, I saw a consulting Web site that I couldn't tell was an
accounting site until I clicked through three pages. A speaker's Web site had a huge picture of the
speaker that took forever to download and was not by any means Mr. America. And a photographer's

5. site had a long, irrelevant Flash movie about the creator's dog. I don't know of any customer who is
going to sit there and try to guess what business you're in. They'll just go to other sites and do business
with the small business Web site that has a clear message for them.
If you want to make money on the Web, use your seconds wisely.
Hiring a web designer to come up with the custom solution that you need can set you back a few
thousand bucks. But you can do the whole thing yourself and make it drag and drop simple for mere
pennies with a tool like Breezy Websites. See http://breezywebsites.com for details!
Online web design tools : End of Part III