Archive for April, 2010

Boost Your Rankings with the Alt Attribute

Saturday, April 24th, 2010

You can increase your rankings with the search engines by naming all the images on your site using the ALT attribute.

It’s easy to do, and can be very valuable in helping to move your site up the ladder.

Here’s how to do it:

Simply add the following code to each image tag:

alt=”Title of the Image”

Here’s an example:

<img src=”imagename.gif” alt=”Title of Image”/ >

Naming all the images on your website with relevant, keyword rich text can be very valuable. It’s a small detail, but it can add up: and it’s one of the most common areas of search engine optimization neglected by many web sites. Though this can be time consuming, it is simple to do, and it can really help to give your site a boost.

For more information about search engine optimization, see SEO.

The Pixel Shim: Duct Tape for the Web Designer

Sunday, April 18th, 2010

Use Pixel Shims to Adjust Column Widths

Pixel shims (sometimes known  as “spacers”) can be extremely useful in aligning design elements across browsers.

To create a pixel shim, simply use your image-editing software to create a transparent gif image that is 1 pixel by 1 pixel in size.

Then, you can insert this pixel shim wherever you want it, and assign the width and height dimensions of the gif accordingly. The shim will maintain the column width of your table at the dimensions provided for by the gif, regardless of what browser is being used (simply defining the width of the column in the <td> tag may not be enough for all browsers).

Shims can also be used for vertical alignment when the shim is placed next to a design element and then aligned with the top, middle or bottom of the design element.

While crude in nature, the shim can be enormously helpful in getting the web designer out of all kinds of jams!

Panoramic Images Give You Plenty of Room

Sunday, April 11th, 2010

panoramic imagesWhile these sometimes can be hard to find or to generate, panoramic images that are wide, but not too tall, can be a particular advantage for web site design.

They allow for a good deal of space at the top of the pages of your web site for interesting images with visual appeal; and, at the same time, they leave a plenty of room for not only one, but two horizontal navigation bars (one above the image and one below the image) – all this while leaving plenty of room for text information that will appear under the image, but above the fold, minimizing the need for vertical scrolling.

Although panoramic images can be terrific on web pages, they can be difficult to find, simply because there is not a large demand for them on royalty-free images sites like photodisk or istock.  Still, if you purchase images that are large enough, you can crop sections of the large image for use in a new panoramic image that you have created yourself, as long as the dimensions of the original image are large enough.

Whatever image you choose, make sure it is a quality image that will represent you well!

Sharpen Fuzzy Images with Photoshop

Sunday, April 4th, 2010

Photoshop allows you to sharpen fuzzy images

Many people don’t know that it is sometimes possible to “sharpen up”  small images and icons that appear fuzzy on the screen using Photoshop.

If you select FILTER from the  top navigation bar in Photoshop, the SHARPEN function will appear in the drop-down list that displays, providing you with various options for sharpening the image, essentially “fixing” the damage that has been done to the quality of the image when the image was originally reduced in size, or optimized.

This function can be most effectively used with small images and icons, but it can sometimes work well with larger images too.

For more information on image size and optimization for Web pages, see “Why Do My Images Take So Long to Download?”