Web Design Tips

Web design tips & tricks for web business success.

Formatting Tips To Speed up Your Website

While more and more people are getting access to high speed internet, there are many left on dial up. Be kind to those visitors and do a few, simple things to speed up your webpages. Not only will these tips give you a faster load time, most will also help keep your bandwidth fees low as well!

Use CSS For Faster Pages

Even if you decide to use tables, CSS can greatly improve your web sites load time! With your styles in an external .css file, the browser can cache all the formatting and stylizing for your pages instead of having to read each and every single tag all over again. Also it cuts down on long drawn out tags and replaces them with smaller class styles instead.

Use External Scripts

Use the same script on multiple pages? Switch to an external script. I'm not talking about remotely hosted, I mean loading javascript files from one source instead of adding all that code to each of your pages like this:

<script type="text/javascript" src="yourscript.js"></script>

That way the browser already has it in it's cache and won't have to read it each time another page loads. This one saves a ton of load time, specially for larger scripts!

Remove Anything You Don't Really Need

OK, while this might sound obvious sometimes the hardest thing about creating a website is not using every fancy trick that you know. Images, flash and sometimes even sound files are very impressive.. but do you really need to showcase all your talents one one page?

Embedded sound files are something many people just find annoying anyway. You'd be surprised how many are surfing at work ;-). The last thing anyone wants is a loud music or sounds announcing to their boss that they're surfing. Also many people have their own music playing... hearing a song over top of what we're listening to is less than pleasant. As for Java applets, try to ditch them or if you want those effects, JavaScript unusually loads faster and can do just as much or more. Stand back and take a critical look at your website, you may see a few special effects that can be let go of for the sake of faster load time.

Avoid Nested Tables

OK, I'm not a big fan of using tables for layout anyway (I'm one of those people that believes content and presentation should be separate.. but thats another tip page). With that said, if in your templates tables seem neccessary (or the easier way to do it), try to avoid nesting. Why? When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

Avoid Full Page Tables for Faster Rendering

If you use tables, try avoiding the whole page being one big table. The browser won't show anything until it's read the whole thing that way. For a faster loading webpage, either try multiple tables (not nested) or having stuff above the main table to make your content in the first table show up faster. That way your visitors will have something to read while the rest of your page loads. It may not really make you page faster, but it will feel like it to your visitors.

Split Up Long Pages - Multiple Short Pages Load Faster

By splitting up long pages into multiple pages you not only make the content show up faster but many people that see a very long scroll bar give up. Remember, people's attention spans are often shorter than a grasshoppers (OK, not literally, but you get my point) since so much information is available at our fingertips. Try breaking it up into more readable lengths.

Remove Excess "Whitespace"

Whitespace is the spaces between your coding, removing the unneeded tabs and spaces can help a lot! That can be done by hand or by using the "HTML Page Squisher". Doing this will take a lot of extra bytes off the total size of your page and will speed up load time quite a bit. (Careful using the squisher, I find it squishes too much and makes it rather hard to edit later.)

Keep Your Code Clean

If you do use a wysiwyg editor, most times the will add useless code to your pages for example, many will leave empty tags (ie. <font> </font>). Removing any of those excess tags will not only speed up your load time, but make you pages validate a lot cleaner.

Speed up Images Load Time

Don't Go Overboard On Images

While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

Height And Width Tags

When the page loads and the image size is already defined (ie. you've used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

Faster Images? Reduce Their File Size

There are many totally free, online image optimizers so you don't even have to install anything and it's extremely easy! Online Image Optimizer will greatly reduce the file size of your gif, jpg, or pngs and neither you or your visitors will be able to see the difference other than a page that loads a heck of a lot faster. They also keep the transparency and animations in gifs! For another JPEG reduction, try JPEG Wizard , also free, this one will only work with pictures in your hard drive not ones from the net. You can also choose some simple effects to be done (flip, mirror and rotate).

GIF vs JPG vs PNG

Personally on new sites I design I tend to go for optimized pngs. They have lossless compression (unlike jpgs and can be used without worry (gifs have the potential to have copyright issues) and load fast! With all that said, if you still want to use gifs and jpgs, here's a bit of fast info... If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load quicker. JPGs are generally best for photos, GIFs for anything else.

(I'd add a rant here about how Microsoft has held up the web's development with not making IE6 support png transparency... but *sigh* I've ranted about this already to anyone who will listen. Firefox, Opera and other modern browsers however have been able to show alpha transparency in png for years... oops, sorry, that was a mini rant after all!)

Are you a hotlinker?

Ok, so you may be new to the web or even web design in general and want to create your own space online...
You see an image you'd love to add to your website, you:

1. Download it to your hard drive and upload it to your own server (after checking that is is allowed to be used)... or,
2. add it to your page without uploading it to your website.

If you chose #1, congratulations, you've already decided to not hotlink! If you chose number 2... please read why this is theft.

Hotlinking - What is it?

Hotlinking , inline linking , remote linking and many other terms are used to describe a way taking images, or other files and embedding it directly into a website. In other words, unauthorized use of someone else's bandwidth. Hotlinked files are files Not stored on your own server. For example, a hotlinked image code would look something like this:

OK, so why is Hotlinking wrong?

If the person who owns the media file you are embedding into your own website gives permission to hotlink, then nothing is wrong. Sadly, this is not usually the case.

If you don't have permission, remote linking to any media and / or program file is theft.

Yes, theft.. even if it's a clipart archive offering free images, a music server giving away free tunes or a website with freeware... Unless the original website specifically states otherwise, hotlinking is stealing .

"Wait a minute" I hear you say, "I didn't steal anything, the file is right where the owner left it!" OK, let me explain this a bit. Each time a file is called from our servers we have what is called a data transfer request, or another way of saying it.. we have bandwidth used.

Bandwidth is a bit like gas for a car. Every time you drive (or a file is loaded), a bit of fuel (or bandwidth) is used up. Now imagine if each night one of your neighbors siphoned out a tiny bit for their own car... then other neighbors thought "I'll just take a couple drops as well"... by morning your fuel tank is empty. Your neighbors each thought taking just a tiny bit would be unnoticeable.. but added all up it left nothing for you.

Serving up images is not only usually our biggest consumer of bandwidth, when others remotely link to them (ie. embed them in their websites from our servers without our permission), we have to pay... bandwidth is not free! Most websites have a limited amount of data transfer and the website owners either have to cough up extra money each month to pay the fees, or face shutting down.

The difference between hotlinking & linking to a web site:

When people link directly to a media file (gif, jpg, png, mov etc.), the webmaster of the original site has to pay the fees. When someone links to a page on that same website, the webmaster still pays fees but the content is shown in the form the designer (and copyright holder) wished, and they may be able to cover costs by displaying advertising on the page.

Super simply put... Hot Linking to media files = bad ... Linking to pages = good ;-)

Other reasons you shouldn't hotlink files

Eventually every website owner that faces this dilemma has to make a decision. Close up shop... or fight back? Since their files would now be embedded into your website, they are free to do with those files as they wish... and most will.

Some things webmasters can do to hotlinkers:

1. Rename the file and give the hotlinker a broken file.
2. Replace it with a very nasty file (think of whatever you'd most dislike seeing on your page and I can guarantee the website owner with the original content can imagine something ten times worse.)
3. Replace it with a notice that hotlinking is not allowed and an advertisement for their own website.
4. Contact the hotlinker's website host and submit a copyright / terms of service abuse report. In most cases this will result in the hotlinker losing their website.

OK, but...

So by now you (should) realize why hotlinking is wrong, but what if your web site host doesn't allow images stored? That's an easy one!

Either find a better host, (here are free subdomain hosts and a list of free domain hosts ) that will allow image uploading.

Option number 2, keep your current host and use a free image host that allows hotlinking .

Can't save files?

If for some reason you can't save a file, or perhaps not on your own computer and find an image that you want, there's the Transload Service that will upload it for you, or you could always email yourself the file for later use.

Oh, and please, before you take any file whether it's an image, sound file or anything else.. check that it is allowed to be used elsewhere. Just because something is on a website does not mean that anyone is free to take it! There are copyright laws online as well.

Thank-you for taking the time to learn about hotlinking

If you didn't understand what hotlinking or remote linking files before was, a big thank you for reading this! My hope is that by reading through this, learning why hotlinking is theft and how to avoid it.. there will be more responsible linkers in the future.

Please help keep the free clipart collections and sound files that are freely offered online, and available for free for future users. Do your part by linking properly and explaining it to other people you might know that hotlink simply because they don't know any better.

How To Create a Custom 404 Page

" Not Found
The requested URL was not found on this server.
Apache/1.3.31 Server at www.example.com Port 80"

Look familiar? We've all seen that too many times while wandering the Web. And if you're like most people you just hit the back button and try another website. Why not make a custom 404 page that's friendly for your website visitors and gives them a way back to more familiar (or at least not lost) territory.

These tips won't work for windows servers, but are perfect for Unix hosts.

Step 1 - Create the .htacess

To begin open up your .htaccess file if you already have one, if not pop open notepad or your favorite text editor (NO, a WYSIWYG editor won't work here) and add this line:
ErrorDocument 404 /404.php
You can name your error file whatever you'd like and use whatever extension you are most comfortable with.

Step 2 - Create the Custom 404 page

Create a file called 404.php (or whatever you wrote in your .htaccess), add whatever you want your visitors to see when they hit a missing page. A sitemap or search is nice, along with letting them know the file they requested is not available.

Step 3 - Upload

Make sure your FTP program is set to upload as ASCII, upload the 404.php, then the .htacess.

Step 4 - Check it

Make sure your browser cache is clear and type in a file you know doesn't exist on your server.. something like http://www.yoursite.com/oops. You should be seeing your new fancy (and much more welcoming 404 page.

Step 5 - Double Check it!

This is important, make sure your custom 404 is actually sending a 404 header! The best way I've found is using the Firefox extension called Live Http Headers . It shows you the entire conversation between your browser and the website. Again, type in a file you know doesn't exist on your page, it should say 404 Not Found , not 200 OK . (If you have images on your 404 page, those will show code 200 which is exactly what you want because.. well they are there ;), so scroll to the top of the header testers output and read carefully. The page itself should send a 404.) If it's showing a code 200, remove the .htaccess and try again. The last thing you want is for the search engines to see a 200 response code for a page that doesn't really exist!

Notes About a Custom Error Page

What you have on your error is personal choice. Some people prefer just a link to the main page, others go for a more friendly approach and let the visitor know that the file isn't there, but give a nicely designed page with links to other areas or even a search to let them find what they wanted. Below are a few (hopefully) helpful notes.

"Friendly" Error Messages in Explorer

Internet Explorer 5 and up display "'friendly' error messages" and not the carefully crafted and actually helpful 404's available on many sites. To avoid this simply make sure your 404 files size is over 512 bytes, not including images (the actual pages code itself) and even IE users will have the benefit of your new page. (This is probably the only time I suggest to get files size up. Useful in this case though!)

Absolute URLs

If you use images or any type of external files in your new custom page, use absolute links in your error pages code. (ie. /images/mylogo.png or http://www.example.com/images/mylogo.png). Why? Well your 404 pages is different than other files on your server, if someone lands on http://www.example.com/stuff/morestuff/lostfile.php the error page is actually being served from that folder. If you use relative links your images won't show up since the path would be wrong.

Cover Your Bases

It's a good idea to add <meta name="robots" content="noindex, nofollow"> to the top of your 404 page just in case a search engine lands on it or gets the header wrong. That in place you should have your bases covered in case of an accident or confused bot.

Things to Avoid

I've seen many people use the 404 to redirect to the main page... no warning that the file was missing, no way of letting the visitor choose where to go. Besides, do you really want the search engines to get caught in a redirect and see you main page as one big 404?

Another thing I've seen a lot is a customized 404 that is well... not so customized. More than once I've seen just the logo and "Not Found", no way of getting to the main page or other areas.

What is a Favicon?

Favicon stands for "Favorites Icon". It's the little icon beside your site's name in the favorites list, before the URL in the address bar, as a bookmarked website on the desktop, in the "Links" bar and on the windows taskbar.

Why does Favicon.ico Show Up as a 404 in the log files?

I was confused when this first started showing up, if I'd never had a file called that... why were people looking for it? The answer is simple, all it means is that people with browsers that use favicon (Internet Explorer 5.0 +, Firefox, Mozilla, Konqueror and a most others) are visiting your site. While seeing a 404 in your log files usually means that a visitor got the dreaded "404 Page Not Found" error, in this case it doesn't. All it means is that the default icon was shown instead of a custom one, your visitors saw no errors :-)

Why should you use a favicon?

Most peoples bookmarks / favorites list is a very cluttered place. Having yours stand out with a nice graphical reminder of your site beside it is a good way to get their attention again.

How To Make a Favicon

There's quite a few good favicon creators for free, a few of my favorites are FavIcon from Pics (within seconds create a favicon from any image on your computer, even an animated favicon!), Favicon.com 's online creator, or use one of the popular icon creating programs. You could also make it in your favorite image editor, save it as a bitmap (.bmp) and use Icon Master to change it over to the icon format. (Just renaming the file isn't going to work.)

I'm not going to go into detail here about the actual creation of icons, there are tons of other sites to help you on that if you get stuck.
I will tell you the icon basics. Icons are image files that actually contain one or more images, so a good idea is to make the 16x16 size as well as a 32x32 size. If you want you can make other sizes since xp users can have larger icons on their desktops. Make sure you use the default windows color palette (256 colors), again, if you wish you can make extra images inside it that go up to the XP colors. When you've done that, name your file favicon.ico.

How To Get Your Favicon To Show

There are 2 different ways to do this:

Method 1
This is the easiest to do and it will show your icon no matter what page your visitor adds to their favorites. Simply upload your new icon to the main directory of your site, ie. www.yoursite.com/favicon.ico.

Method 2
If you don't have access to your root directory (if your on a free server for example) or it you want a different favicon for certain pages, add this to the <head> of your html. (You can name your favicon whatever you'd like with this method)

<link rel="shortcut icon" href="/folder-name/logo.ico">

Or if you prefer to use the full URL:

<link rel="shortcut icon" href="http://yoursite.com/favicon.ico">

Note:

The first time (OK.. I admit it, the second time to) that I tried to add a favicon I got rather confused when I decided to change it. If you upload a new one, be sure to clear your cache for the new icon to show up ;-)

Someone stealing your content.

Let me have my personal rant here about copyright thieves. If they don't have any original thoughts of their own, they like to pretend that they have enough intelligence to put together a website, that's why they do it... If they did have even a small bit of intelligence, they would know that what they are doing is illegal and they can be charged.

I've had my original content stolen more times than I care to count... and each time, no matter how small the site, I will fight back. I urge you to as well! You worked hard to create your website, don't let a pathetic thief take credit for something they obviously can't do by themselves! The ©opyright Website a great place to become familiar with copyright laws.

Find out how many sites are linked to yours and who they are.

Most search engines offer this feature but each do it a bit differently.

• Yahoo : type in either linkdomain:www.example.com link:http://www.example.com into the search box... or for more detail, try Yahoo! Site Explorer , click "Inlinks", then choose "Except from this domain" from the drop box (this is it's current setup, I don't guarantee that it will stay exactly those steps, but if it changes look around and I'm sure you'll find it.)
• Google : link:www.example.com
• MSN : link:www.example.com

Give your visitors a way out if they are trapped in a frame.

Just type a link going to the same page they are on with target="_blank" (the same as you would with links leading out from a frame) It's a bit less graceful, but it works ;)

Another way of doing this so that every visitor is automatically popped out of a frame is to put this inside the body tag:

Why are some people seeing an old version of your site?

Most browsers will cache or keep a local copy of your pages to speed-up future viewing of those pages. Depending on how the viewer set up their browser, it might display an old version of your site, especially if you update your pages often. To tell browsers when to use get a newer copy of your site, you could use following tags:

These meta tags should be placed in between your <head> and </head> tags. Also the specified date should be a date in the past so that the browser will immediately get rid of the cached copy or not keep it at all. The reason for two tags is that while the "Expires" tag is understood by most browsers, some older browsers may still look for the "no-cache" tag.