Tuesday, July 21, 2009

Total Page Size

One of the most frustrating things to a person browsing the web is waiting for a site to load...make sure that your site is relatively quick to load, no matter what you put on it. There are obviously a number of factors that can affect how quickly a web site loads, but try to make sure that excessive file sizes isn't one of them.

As a rule of thumb, a main page shouldn't be a whole lot more than 50K or so. This, under normal conditions, will load the page in a few seconds, but still allow some fairly good use of graphics. If you have significantly more text than that, consider separating it onto separate pages.

Also, remember that most browsers keep images stored in a cache, so if you use the same images on different pages in your site, the browser will likely use the file from the cache, and it won't need to download it again.

One way of keeping the file sizes down, but retaining the freedom to use graphics to create a good design, is to be aware of the different kinds of graphic formats, and knowing how to use that to your advantage.

Graphics of a photographic nature can be stored in a JPEG format with a higher compression ratio, as the quality loss due to compression will be less noticeable. The JPEG format uses what's known as 'lossy' compression, meaning that there is a tradeoff between file size and quality...some of the detail is lost when the file is stored, and you can decide how much based on how big of a file you want to end up with (although you often can't tell the difference).



If you want to make part of the image transparent, or you want to ensure that it displays exactly the same all the time, then use GIF images...although there are a few tricks to making the files smaller, while maintaining the image quality. Try to use graphics software that allows control over the image palette (the colours that are used to make up the image). Most packages will allow you to save a file with an 'adaptive' palette, which picks the most common colours from the image to put in the palette, instead of using a standard palette. The higher quality software packages will allow even better optimization, such as rearranging the palette automatically so that the more common colours have early palette entries, or allowing you to adapt the palette for a smaller number of colours, so you can see how the image will look with 256 colours, or 128 colours, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images.


Graphic Quality


Graphics quality can be a key factor in improving the appearance of your web site. One of the reasons that it's so important is that it is fairly subtle...one site just looks better than the other, and a lot of people won't recognize why.


Try to find a decent graphics package, such as Adobe Photoshop, Corel Photo-Paint or Microsoft Image Composer (there are also various freeware, shareware, and demo packages around). One important requirement is that the software allows something called "anti-aliasing" of graphics. This removes the jaggies from diagonal lines, and makes images look smoother and more professional.



Once you have a good graphics package, you can create customized graphics to use with your site, which helps to keep your site design more coherent. Instead of searching the web for an icon, use a clip-art library to create your own. Instead of having a text heading at the top of a page, create the heading as a graphic using special fonts, colours, or effects such as shading.

If you have a special background colour or image, you can create graphics using that background colour, so that when they get anti-aliased, they are blended naturally into the right colour. This is a common professional technique, which, when combined with transparent .GIF's, helps to eliminate fuzzy borders around graphics, and makes graphics look like a seamless part of the design

Browser Neutral


It's important to keep in mind that when you develop a web site, you have to cater to the widest possible audience...not everybody has the same browser you do, with the same graphics settings, or the same operating system. It might look great on your screen, but it might look lousy on somebody elses.


Try to test your pages to see how they look with:


  • a different size screen

  • a text-only browser (or images turned off)

  • a different colour resolution

  • a different browser with a minimal feature set

Some issues that can come up are the use of extended features such as image maps, frames, javascript, java applets, or operating system-specific controls...make sure you provide alternate coding for these. Test your site with a small browser window, then try testing it maximized...sometimes tiled backgrounds or positioning of images can change in a way you didn't anticipate.




But most importantly, don't insist that people view your site under ideal conditions...imposing requirements on your viewers guarantees that somebody somewhere will be turned away, and they'll probably be annoyed (and annoyance has a way of spreading through the grapevine). The web makes it very easy to find a competitor, and if your competitor has a browser neutral site, they'll probably get the business.

Layout / Design


Layout and design are a very subjective topic, but the important thing is to make sure that there is a layout...as opposed to just putting information up, make an effort to display it aesthetically. The web makes it possible to control how your information is presented, there's no reason not to do it. If two companies are selling the same product, and one puts a photocopied flyer under your windshield, while the other hands you a full-colour kit while wearing a business suit...which one are you likely to remember?


Some general guidelines you can follow are:


  • split your information into logical sections

  • make sure your starting page is attractive and well laid out

  • try to have a consistent theme throughout the entire site

  • try to use colours, styles and fonts that complement each other

Again, the stylish side of a web site is very subjective, and everybody will have their own idea of what looks good. Just make sure that you don't minimize the importance of layout and design...first impressions are hard to erase.

Keep it Fresh


Make an effort to keep your web site fresh, especially if you want to get repeat visitors. If a site remains stagnant, people will stop visiting it again and again, but if there is always something new, people will often drop by just to see what's changed.


You might want to think about doing a complete site redesign every few months, as it not only keeps it fresh, but it also gives you the opportunity to take advantage of newer technology as it comes out. This also helps to improve your site as time goes on, as you'll invariably learn better techniques through each iteration.


One other way of keeping things fresh is use dynamic content to your advantage. This can be in many forms, such as:


  • javascript or CGI scripting to create content

  • using cookies to track previous visits, and customize content

  • randomizing elements of the site, such as main graphics, logos, etc.

If the site looks different every time somebody visits, they'll be more inclined to come back again. If the content is customized to them individually, then you can 'target market' your information, and improve your odds of succesfully reaching that person.

Overdoing It


One common mistake new developers make is to overdo it when putting together a web site. It's very easy to go overboard with new 'toys', so try to use extras in moderation. Some common things that get overused are:


  • excessive graphics

  • frames

  • background images

  • bevels and other graphic tricks

Too much of something just comes off as being tacky...but used sparingly it can add just the right seasoning. When spicing up your site, try to add things only when they complement what's already there, and not to overdo it when you find something you like.

Too many graphics will bog down a page, too many frames will make it difficult to navigate, too many graphic tricks will just end up looking silly. But any of these things will add nicely to the site when they're called for...put the design and layout first, and then dip into your bag of tricks when you need something.

Get to the Point


Try to get to the point on the first page, or at least give people an idea of what your site is about. If people have to go hunting, they may move on.


There is nothing more aggravating than a site that forces you to navigate for ten minutes before even figuring out what they do, let alone offering you the information you're looking for. Remember, if somebody is visiting your site, they are probably looking for something...try to make it easy for them to find it. Ask yourself what things people might be looking for in general, and try to make those things accessible easily from the main page.

If possible, try to also offer a way of searching your site, or at least contacting somebody if they don't find what they're looking for. Make sure that visitors don't have to wade through endless links to get somewhere, and conversely, make sure they don't have to scroll down thirty screens worth to find what they want.


Keep in mind that a frustrated visitor probably won't be a visitor for long.