Archive for the 'Web Design / Graphics' Category

Designing a Good Navigation System for Your Website

Friday, March 24th, 2006

While you should design your website to be aesthetically pleasing, beautiful graphics and clever little details are no substitute for a good navigation system. No matter how great your website looks, it will be useless if your visitor can’t find their way around your site.

Traditionally the navigation menu is placed just below the header area or on the left hand side of the web page. Usability studies have shown that web site visitors instinctively look in these areas first.

Wherever you decide to place your navigation menu, remember that consistency is important. The most important thing is to place your navigation menu in the same spot on every one of your web pages. If you use an image to represent a navigational button, use the same image and the same color for that image on each page of your website. For example, if you use an image of a green house in the left hand corner of your web page as your “Home” navigational link, use the same green house image in the left hand corner of every one of your web pages to designate the “Home” link.

Your visitor should be able to find what they are looking for within 3 clicks of your home page. This is usually not a problem for small sites. However, if you have a large site with many pages, you will need to design a navigation menu that provides access to all areas of your website without getting your visitor lost or confused.

You may want to use a bread crumb trail type of navigation system for large sites (Homepage > Category > Subcategory > Content). Another option is to use a dynamic menu that changes according to the page your visitor is, but be aware that search engines may not be able to spider sites using dynamic menus.

Usability studies have shown that a navigation menu should contain no more than 8 links. The more choices a user is given, the more difficult it will be for them to make a decision. Also, if you have many links, your visitor may get the impression that your site is complicated and difficult to navigate.

If you have only a few links, use mouse rollovers to visually enhance your website. You will need to add some Javascript that pre-loads the rollover images and then add “onMouseover” events to your image links. Alternatively, use CSS for text rollovers that change the link color when the mouse cursor hovers over a link.

Navigation links should be considered the most important part of your website for two reasons:

1) They are used by your visitor to find content on your site.

2) They are used by search engines to spider your site.

The reason users visit your site is to get information. If visitors can’t find the information they are searching for, they will click away, perhaps never to return again.

While different search engines have different rules on how they spider and rank a site, basically a “bot” or “spider” will visit a site, search for a “HREF” link and follow the links to other pages, indexing the pages as it goes along. If the “bot” or “spider” doesn’t find a “HREF” tag on a page, it is blocked from going any deeper into the site. As you can see, you need to design your navigational system so that a search engine can spider all pages of your website.

When designing your website, take the extra time to design a good navigational system. It is vital to your success!

11 Practical Uses for RSS in Business

Thursday, February 16th, 2006

Are you wondering what you can use RSS for right now? Here are some practical examples of RSS at work.

Use Your Own Content

Almost ANY web based content can be transformed into an RSS feed. The only real requirement is that the information changes regularly.

News Headlines

Typically, the main use of RSS is to present headlines and a short introduction to “newsy” stories. Create an RSS feed on your site featuring your company press releases, site updates, etc.

Upcoming Events

RSS is a great way to let people know of events and activities that may be happening soon. It’s easy to turn an “events” page into an RSS feed.

Thoughts/Commentary

You’ve probably heard of the term “blog” or “weblog”. It’s a page that displays (in chronological order) a series of writings on whatever the author wants to write about. While a normal blog also allows others to add their comments to yours, you don’t have to offer that functionality.

Set up a page where you regularly add your thoughts on all sorts of issues - or just one issue - with the most recent post at the top of the page. Include these items in an RSS feed, and you’ve got a whole new audience for your pearls of wisdom.

Articles

Share your knowledge. This is a more “formal” type of writing, where you write a series of articles on a specific topic. Add a new article on that topic every week or so. Set up several topics and you’ve got several new RSS feeds to attract even more interest in what you know.

Don’t forget to include a resource box in the article which allows others to reproduce your article on their site, with an obvious link back to you.

New Products

Got an online store with new inventory added regularly? Add details about your newly added items to an RSS feed to let people know what’s just come in.

Weekly/Monthly Specials

Do you regularly make special offers on different products in your inventory? Again, RSS is a great way to tell people what’s on special this week… or this month.

Newsletters

If you regularly produce an email newsletter, then consider converting it to RSS format as well as continuing to email it. After all, your newsletters ARE also shown on your web site… aren’t they?

New Links

If you have a links directory, considering creating an RSS feed of the new links added to your directory in the last week or so. If you have a category structure within that directory, with links added often, you can create a feed for each category.

New Members

Do you run a public membership site? Recently joined members could be listed in an RSS feed with links direct to their profiles. What a great way to welcome new members!

Ticker RSS Feeds

Do you have timely information, e.g. important stock figures, to communicate to your customers? Automate the process with software and RSS can feed new critical information on an hourly basis (or more frequently if needed).

Note: Aim to have up to 15-20 items in each feed if possible. You can have more items if you want. Just remember that most feed reading software will NOT display all the items. Many may only show the first 5 or 10.

Once you’ve got your feed going… remember to submit your feed URLs to the various RSS Feed Directories.

Using Content From OTHER Web Sites

If a site offers an RSS feed for people to subscribe to, you can possibly use that feed on your site. Just check the terms and conditions on the site FIRST to see if you can reproduce the feed. If in doubt - send an email or phone them to ask permission.

What you are aiming for is to build many extra pages of useful content on topics of value to your visitors. Don’t worry that the links in the feed take people off site (make that happen in a new window). The content is what is needed for search engines and people to devour!

Making the Best Use of Web Site Graphics

Wednesday, January 25th, 2006

When used correctly, graphics add to the attractiveness of a web site and contribute positively to a visitor’s first impression of the site. However, the reverse is also true. If a web site is unattractive, a visitor will be negatively affected and may click away from the site, never to return.

Use common sense when including any graphics on your web pages. More is NOT better! Don’t plaster your site with graphics, clip art, and animated gifs. An excessive number of graphics makes for slow page loading times, clutters the web page, annoys visitors, and makes it difficult for a potential customer to read a sales message.

Only use a graphic if it contributes something to the web site. You may want to include a header graphic for site recognition, a graphic representation of your product, arrows or check boxes to draw attention to important sales points, and a button for your payment link. A footer graphic, buttons for your navigation menu, and/ or a background image may also be added if desired. If you include any other graphics, only do so if they add something positive to your site.

Use only JPG or GIF formats for your graphics as these two formats are used universally on the Internet. Although PNG format is starting to come into use, it is not widely used as it is not supported in all browsers.

There are many places from which you can obtain images. You can use images you’ve taken yourself, images that you’ve purchased, or you can download free images from web sites such as Free Images at http://www.freeimages.co.uk/ which offers over 2500 free photos or from Stock.xchng at http://www.sxc.hu/ which has over 100,000 free photos for you to choose from. There are also numerous sites that offer graphics such as buttons, arrows, clip art, GIFs, etc. Some of these are free, others you must purchase. If you do decide to use a free image or graphic, be prepared to spend hours wading through thousands of images or graphics to find the one you want.

For faster page loading, you will need to optimize your images and graphics by reducing them to their smallest size while still retaining their quality. The larger the file size, the more KB it will take up and the longer it will take to load. Don’t use any graphic larger than 30 KB on your web pages and always include a height and width attribute in your image tag for optimal download time.

You can optimize your graphics and images with one of these tools:

1) Download PIXresizer, a free image resizer from Bluefive software at http://bluefive.pair.com/pixresizer.htm.

2) Dynamic drive offers a free online image optimizer for JPG, GIF and PNG formats at http://tools.dynamicdrive.com/imageoptimizer/.

Use JPGs for photos and GIFs for other graphics on your web site such as buttons and arrows. JPGs can use a compression method that does not reduce the number of colors in the image which is why JPGs are good for photos. GIFs can only use a 256 color palette and are generally better for graphics containing few colors. If you have a GIF with a lot of colors, you may want to save it as a JPG to preserve quality.

The first graphic a visitor sees on entering your web site is your header graphic so it should communicate what the content of your site is about. A header graphic should be part of a web site’s identity so use it on every page of your site.

Think of your header graphic as if it were the cover of a book. A book cover is meant to grab the attention and curiosity of the user and entice him or her to open the book. A header graphic has the same kind of purpose. Your header graphic should entice your visitor to stay on your site and have a look around. It should convey the feeling that there is something worth further exploring on your site.

If you are selling a product, include an image of the product. This is especially important for ebooks and software that are downloaded from your site. Since these products are virtual products and not physical ones, your customer will feel more secure about purchasing the product if they can see a book cover or software box.

Use graphics of arrows or check boxes to draw attention to the most important parts of your sales message. Be conservative in their usage. If you use too many, your visitor will start ignoring them and what they point to.

You will need some sort of button for your payment link. This can be a simple “Pay Here” type button or a more complex one which includes images of credit cards along with payment information. Use the type that fits in with the theme of your web site.

Your footer may be just a narrow colored strip or a miniature version of your header graphic. It should always include your copyright information.

Your background image, background color, the colors used in your text, and the colors in your graphics shouldn’t clash. The components of your web page should harmonize. Look at how everything comes together as a whole, not at the individual graphics.

No matter how many graphics you use on your web site, they should be appropriate for the theme of your site. If your site is soft and romantic, use pastel colors and muted graphics. On the other hand, if your site screams boldness, use bright colors and brash images.

Graphics can be an important part of any web site design. Use them correctly and they will be come an asset to your site. Use them incorrectly and they will become a burden.