Fix Your Website Or Say Goodbye To Sales

Get Web Design Tips and Tricks on mps-web-design.com. Fix Your Website Or Say Goodbye To Sales topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Your website tells a lot about you and your product so if your website is poorly design you are sure to loose your entire investment as you will be loosing sales by the minute. In this article I have outlined some of the common problems common to website.

In the age we are today, things change fast in the Internet and so if you are to keep up with your customers and to make maximise profits as a webmaster, you must be able to design and re-design your website to reflect the message you pass to your customers.

Sometimes waiting for your website designers take ages to effect this changes which you could have been able to do quietly from your home or office without having to pay lots of money to web designers and wait on the queue to get to your turn before the change can be effect. These delays result in loss of sales most of the time.

There is no way I will ever buy anything from a web site that has missing images or broken links. I mean, if this webmaster doesn't care about his web site, he probably could care less about his customers.

Getting your web site to look good can sometimes be a hair-pulling experience. Even for me, and I have been making web sites for over 5 years. I can only imagine how frustrated many newbies can get.

Let me share with you some of the common problems in designing a
well-functioning web site. If you haven't made these mistakes
yet - trust me: you will! Keep this troubleshooting guide handy
for when you need it (and save some of your hair, too!)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. MISSING IMAGES ON THE PAGE
2. IMAGE LOADS VERY SLOWLY
3. IMAGE LOOKS DISTORTED
4. BROKEN LINKS
5. TEXT IS MISSING ON THE PAGE
6. VISITORS CAN'T SEE YOUR FANCY FONTS
7. TOO MUCH HORIZONTAL SCROLLING REQUIRED
8. THE TABLE IS WIDER THAN SPECIFIED
9. WEB PAGE DISPLAYS OLD LINKS AND IMAGES
10. BACKGROUND DOESN'T SHOW
11. CAN'T ACCESS YOUR HOME PAGE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PROBLEM 1: MISSING IMAGES ON THE PAGE

SOLUTION: There are three things that might cause this problem.
You have either forgotten to upload the image to your web server,
didn't link to it correctly, or the graphic is in invalid format.

1) Remember, you need to upload all the graphics that you are
using on your web page, just like any other file. So if you have
a 'services.html' page that contains 'staff.jpg' graphic, you
need to upload both 'services.html' and 'staff.jpg' to your web
server.

2) You also need to reference that image correctly. For this, you
need to understand a little bit about files, folders, and
directories. Basically, a file is a document. A folder (or a
directory) is a collection of files.

You might have a directory on your web site called 'images'.
Inside it you might have the 'staff.jpg', 'logo.jpg', and other
files.
Now, here is the trick: if your HTML file is located in the same
folder with the graphic it contains, then here is how you refer
to that image:

So far, simple, right?
But let's say that your HTML file is located in the main
directory, while the graphic file is located in the
sub-directory. For example, 'services.html' is located in the
root directory of your web site so that if you type
www.yoursite.com/services.html in your browser location bar, you
will see it.

And let's say that you placed a graphic used on that page into a
sub-directory called 'images', so that when you type
www.yoursite.com/images/graphic.jpg into your browser location
bar, you will see that image.
So how do you refer to that graphic from your 'services.html'
page? Here is how:

All I did was put the sub-directory (or folder) name followed by
a forward slash before the graphic name.

Finally, what if you put an HTML page into a sub- directory, but
leave the image in the main (root) directory? For example, your
'services.html' is located in a sub-directory called 'pages'.
And the graphic used on it, 'staff.jpg', is placed in the main
directory, so that when you type this address into your browser
location bar, you will see it: www.yoursite.com/staff.jpg
How do you refer to this graphic on your 'services.html' page?
You use the 'previous directory' notation like this:

The browser will then know, that in order to find that graphic it
needs to look in one directory below.
If you are having trouble understanding the above notation, use
absolute image references. For example:

Make sure you know where you placed your graphic (which folder)
and refer to it as if you were accessing it from your web
browser. That's it!

3) And finally, if you are not using graphics with the 'JPG' or
'GIF' extension, they will not appear on your web page. Use
PaintShop Pro or any other graphic editor download.com) to convert
your graphic from any format to 'JPG' or 'GIF'.
Broken images may also happen even if they don't have the right
extension. That's because they have been created in a
not-for-web format. When a graphic artist designs your logo,
remind her to save it as 'RGB' (which stands for
'red-green-blue') or 'Indexed Color' and not any other color mode
(such as 'CMYK').
For more information, see 'Choosing the right format for your
images' at http:/ ech.irt.org/articles/js206/index.htm

PROBLEM 2: IMAGE LOADS VERY SLOWLY

SOLUTION: You must do your best to reduce the graphic to its
minimum good-looking format. Use GIFBot to do this:
http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Some new webmasters use a large graphic and specify a smaller
size in the HTML code. That is absolutely unnecessary and will
slow down your web page three times or more!
For example, if you have a graphic that is 200x200 in size
(pixels), and insert it into your web page like this:

...you are actually doing yourself disservice. Why not reduce the
graphic in your image editor first, then place it on your web
site? Doing this will speed up your site and will not distort
your graphic.

PROBLEM 3: IMAGE LOOKS DISTORTED
SOLUTION: You probably specified incorrect size of this graphic
on your web page. To find out the correct size of a graphic,
right-click on it and choose 'Properties' from the menu. You
should see the image size (something like 110 x 200) then put the
same numbers in the IMG tag:

PROBLEM 4: BROKEN LINK
SOLUTION: You must fix your link so it takes your visitors to a
page that exists. Links can be relative or absolute. Here is an
example of a relative link (remember, I am omitting the tag
brackets so you could see the actual code):

This link refers to a page that is located on YOUR web site, and
not someone else's. Now, here is an example of an absolute link:

Notice that this link will take you to the exact same page that
the first one will. This is just a different way to build your
links.
You can also link to someone else's web site using absolute
links:

Can you use relative links to refer to an outside web site? No.
Only absolute links can do that. And don't forget to use the
'http://' in each absolute link tag.

PROBLEM 5: TEXT IS MISSING ON THE PAGE
SOLUTION: This can happen for different reasons, but all of them
have to do with closing tags:

1) When a closing table tag is missing, the entire table content
might be missing, too. So don't forget to close all your TABLE,
TR and TD tags.

2) You forgot to close a comment and the browser 'thinks' that
the rest of the text has also been commented out. Make sure you
close every comment that you open.

3) You forgot to close a quotation mark in a tag. For example,
if you use quotes in a IMG SRC or A HREF tags, you must close
them:

SOLUTION: Do not use your fancy fonts. There are only a handful
of fonts that every computer user has installed. They are:
Verdana, Arial, Courier, & Times New Roman. If you try to use
some other font such as Impact or FreeStyle Script, and your
visitors don't have them installed, they will see your text in
whatever font their browser is set to.

If you REALLY want your visitors to see your handsome fonts, then
turn some of your text into graphics. Your graphics will be
displayed the same on every computer, and your visitors will be
able to see the fonts you meant for them to see.

PROBLEM 7: TOO MUCH HORIZONTAL SCROLLING REQUIRED
SOLUTION: Put your text into a table and make it no more than
85% in width and centered. This way, regardless of how large or
small their monitors are, your visitors will always see your text
centered with no horizontal scrolling necessary.

PROBLEM 8: THE TABLE IS WIDER THAN SPECIFIED
SOLUTION: Sometimes even you specify table width as 500 pixels,
it might still stretch to all 700. There are two reasons for
that.

1) You have a graphic in that table that is wider than the table
itself. Reduce its size and the table will shrink as well.

2) You are using a long URL somewhere in the table text. Shorten
it or remove it and you will see the table shrink to its
specified size.

PROBLEM 9: WEB PAGE DISPLAYS OLD LINKS AND IMAGES
SOLUTION: Refresh (or reload) the page by clicking the button on
the toolbar of your browser. Sometimes the graphics are still
not being refreshed in which case you need to do this:

right-click on the graphic
choose 'view image' or 'open image'
click 'Refresh' when the graphic is displayed by itself

Now come back to your web page and press 'refresh' button one
more time. You should now see the updated images.
Also, if you are using an FTP program to upload your files, don't
forget to click 'Refresh' in the FTP window before uploading new
files. Otherwise, you will simply upload the old versions.

PROBLEM 10: BACKGROUND DOESN'T SHOW
SOLUTION: Make sure to upload your background image along with
the other files. Also, make sure you upload it into the right
directory (see 'missing image on the page' above for more
information)

PROBLEM 11: CAN'T ACCESS YOUR HOME PAGE
SOLUTION: if you get an 'access denied' error or a list of files
when you are trying to access your web site, make sure you named
your home page correctly.
Every hosting company has it set up so that the very first page
of your site must be named 'index.html'. Sometimes, though, they
will require your first file to be called 'welcome.html',
'default.html', 'home.html', or 'default.htm'.

There is only one way to find out: ask them! Or visit their web
site to see if they specify the default file name in their tech
support section.
Notice that 'default.html' and 'default.htm' are two different
files. You can name your files either way, but only one of them
will be accepted as a default one.

Instant Article Submitter. - Amazing Breakthrough Software Stuffs Any Website You Want Full Of Free Targeted Traffic.
15,000 Mb Hosting For $4.95/mo. - 4.95 web hosting, Free domain registration! Free setup and online website builder included.

CSS, Image Sprites, Background Images and Website Optimization

This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile.

A little recap

The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe, from Pixy's Fast Rollovers. The CSS Zen Master extended this to another purpose in CSS Sprites: Image Slicing’s Kiss of Death. Didier Hilhorst came up with a nice application of this method, and I worked it backwards in Responsible CSS - Recycle your background images.

The idea behind the 'sprites' method can obviously be extended to any html element, and there are tangible benefits for doing this, just as long as the designer does his or her usual homework.

Benfits of using the 'sprites' method

What are the possible the benefits of using this method? Essentially it lies in faster download times for your web content.

Readers of Andy Kings book, Speed Up Your Site: Web Site Optimization will notice that this method reduces http requests and makes more efficient use of the data packets used to transfer files to the users computer, and that that is a good thing.

Packet size and http requests

From Web Page Design and Download Time, by Jing Zhi of Keynote Systems (seen here - pdf), cited in Andy's book:

The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for wellperforming Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.

They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.

Potential payoff

The potential payoff for using this method versus individual images, then, is a faster download time due to reduced number of packets and fewer http requests.

Reducing http requests is easy. One file instead of two or three etc. is simple. But packet requests? That depends...

An example

The number of packets sent will depend on the size of the file and the users internet connection.

As an example, lets look at the fiftyfoureleven.com logo at the top of the page. When this design was first being coded, that link consisted of two 3.34kb images, one for the link state and one for the hover state. Now, by using one image that contains both states and simply bumping it back and forth depending on the hover state, that has been reduced to one 5.35 kb image. Right there is a savings of 1.33 kb. Good news.

Now, for arguments sake lets say that a packet can hold 1460 bytes (packet size for connections greater than 128kb/s = 1500 bytes -40bytes for tcp/ip headers). The two image method used 6 packets, 3 for each image (3.34/1.46, rounded up). The single image method uses 4 packets (5.34/1.46, rounded up).

Things are looking good.

How to optimize

In his alistapart article, Dave refers to the image that holds all of the sprites as his 'master image'. The key to benefitting from this method is to ensure that the file size of your master image isn't a bloated equivalent versus the sum of its pieces.

Conclusion

Great benefits can be realized when combining a master image from slices that fall well below the size of one packet, as that unused packet space goes wasted.

After doing a little more research, it seems that packet size can vary depending on the connection rate. That being said, it may be rather difficult to come up with a firm rule here. To play it smart and safe, try and:

build master images that are smaller then the sum of their collective slices (by combining images of similar colors, for example) or
rather than use a different distinct image for a certain element, reuse one that you already plan on using elsewhere.

This isn't exactly groundbreaking advice, however having seen the results acheived with the logo on this page, it can be seen that using the sprite method versus individual images at minimum does reduce http requests and even further it can reduce file size which in turn can reduce the number of packets sent.

Article Index: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79

1. Web Site Design: How To Get Around
Our web site (Internet Tips and Secrets - http://www.internet-tips.net/ ) runs an awards program which gets as many as fifty submissions a week. That means we visit each of those fifty sites each and every week to determine if they measure up to the criteria for the awards. Do you know that at least half of those sites make our job as award masters very easy because their navigation is so poor we cannot easily determine how to get from page to page?Nothing will chase away visitors as effectively…

2. 7 Web Site Design Mistakes That Will Lose You Clients By Frauke Nonnenmacher
In today's world, a web site is virtually mandatory for any successful business. But there are web sites that will win you customers, and there are web sites that will lose you customers. Good design has a lot to do with which category your web site will fall into. But what is it that makes good or bad web site design? In my personal opinion, a good web site is one that's simple, informative and gives me a reason to come back frequently. That's what you should get from a good web designer/writ…

3. How to Use Pop Ups Without Annoying Your Visitors
At the risk of losing you before we even get started, I'm going to say a 'dirty' word: Pop Up (as in Windows).If you're like me, you've been popped more times thana firecracker on the 4th of July...but that's no reason to click away in disgust.There is a method of using pop ups that won't annoy yourwebsite guests and can actually benefit you in a variety of ways in the long run. Impossible, you say? No! If youimplement a pop up correctly, your guests won't be annoyedat all. Let's face it: the ma…

4. Why Dot-Coms Fail - a Webmaster's Perspective By Daniel Bazac
Everyday we hear that another company goes out of business.When and why does a dot-com become a dot-bomb?After checking few dozen defunct companies, I think the main reasons for dot-coms failure are:Poor business plan. In the last years, a lot of investment capital was spent on poorly planned companies that clearly couldn't reach profitability.Poor company promotion. This applies both offline and online. Two newspaper ads and word of mouth are not enough.Poor financial management. Fancy o…

Web Design Tips and Tricks