Your website is a selling point to your potential clients or customers even before they walk through your doors. If you maintain a professional and up-to-date website, then your customers will view your business as professional and up-to-date. However, if your website still uses concepts born and bred in the 1990′s,  then clients may look elsewhere for a business that keeps up with the times.

Rejuvenating your website is not a monumental task, but you should be sure to have members from all areas of your organization review your site as you are making updates. For example, your sales department should review the prices and packages that you are selling, since they are the experts in this area. Your designers should review the placement of your navigation and search box to assure that they are easily accessible. Keeping your team in mind, here are thirteen quick ways to make your website more customer-friendly and bring it back to life.

1. Update copyright dates. We’ve changed our calendars again, so you should update the copyright year on your website to match the current year. After all, you do not want to drive customers to your site when the copyright date hasn’t been updated since 2005.  This leads to the impression that you are not updating your site, which could be a deal breaker to some customers. If you want to retain the year that your website was launched, be sure to include a date span (such as © 2005 – 2010). Ask your developer if he/she can implement an auto-update feature so that the year will automatically change when the year changes. For instance, implementation of the following PHP script will assure that your copyright year is always current:
   

   <?php echo date("Y"); ?>

2. Check your links. One of the most frustrating website issues  is encountering broken links. Just when your client believes she has found the information she has been looking for, she is directed to a “404 Not Found” page. If this happens to your customer, chances are she will move onto a more reliable website. Review all links to assure that all are linking to the correct pages. Check your main navigation links first, since they are the bread and butter of your site. Next, double-check your secondary navigation links, and follow-up by checking links within your content. Pay special attention to links to external websites, as these are often the first links to break, as content is constantly changing throughout the World Wide Web.  A great way to check your website links is to use Google Webmaster Tools. Webmaster Tools is a free service that instantly reports “crawl errors,” including broken links from within your sitemap, broken links to your site from referring sites, and links within your content that lead nowhere. In these cases, your developer should be able to set up an “.htaccess” file, which redirects broken links to the correct links, or to a more informative error page.
3. Update and correct your content. Spelling and grammatical errors are a quick way to give an unprofessional impression. You should always take the time to proofread content before it is published, but you should also be sure to review your content months after it has been published as well. Errors that are not obvious at the time of writing are usually more obvious after you’ve taken some time away from the content. In addition to double-checking your spelling, you should also review important text to be sure it is up to date. Has your pricing, mission statement, or privacy policy changed? Do you offer more or less sales packages than you did last year? Have you recently moved and neglected to change your address or phone number? Be sure all of this vital information is up to date.
4. Update and optimize your images. If the images on your website include clothing styles from the ’70s, you may want to consider updating your images. You may take pictures yourself with your digital camera (as long as they are professional quality!), or you can purchase some stock photography. Also, adding new images will bring a refreshing visual update to your faithful website visitors. While reviewing your images, you should also take a look at the display resolution of your images, versus the  file’s resolution. If you have an image on your website that is being displayed at 250×225 pixels, but at full-size is 1000×900 pixels, then you should consider reducing the file’s resolution to the display size. Forcefully reducing image size through HTML not only compromises image quality, but also results in an unnecessarily slow page loading time. Ask your designer to optimize image sizes if this is an issue on your site.
5. Improve your credibility. No one likes to see a  “webmail” address listed on a website’s contact page. For example, email addresses ending in “@hotmail.com” or “@yahoo.com” are amateurish and have little place in business. These types of addresses are fine for personal accounts, but in the professional world, your email address should correspond with your website’s URL. Most hosting companies offer email solutions in addition to website hosting services, so talk to your hosting company if you require a professional email account.
6. Clarify your navigation. Your navigation is the backbone of your website. Without navigation, your customers will not be able to access the information they need. In addition, your navigation must be clear and easily understood by the customer. Visitors have come to expect navigation links such as “About Us,” “Services,” “Portfolio,” and “Contact Us.” While it’s fine to be creative and vary link names, deviating too far from the norm may frustrate your customer and may drive them to a competitor’s website.
7. Make your site more accessible. Not everyone can simply view your website on a PC or mobile device. Those who have vision impairments, are illiterate, or have a learning disability may use screen readers to review your site. Screen readers are programs that take what is being displayed on the screen and interpret the site’s content into audio or braille.  To make your site more accessible, be sure that your images include “alt” tags in the HTML, which can be read by a screen reader. Also, consider assigning a relative size value to your font sizes (in units of ems instead of pixels), so that those who cannot read small text will be able to increase the font size as needed. Image maps, in addition to being an outdated method of navigation, are often unreadable by screen readers and should also be removed from your website.
8. Add a site map. Site maps are a useful navigation item, as they provide a quick reference point for the link hierarchy of your site. Site maps list all pages within your site, providing an alternate method of accessing information to your customer.  As a bonus, site maps improve search engine optimization by ensuring that all pages can be located by search engine crawlers. In the past, site maps were often included as a link to a separate page away from the main navigation. The emerging trend is to add your site map as a part of your website’s footer area, creating a table of contents for your entire site. Your best approach to including a site map depends on the design and layout of your website, so ask your designer about best approaches.
9. Eliminate spam comments from your blog or forum. Spam is a nuisance to everyone and no one wants to read spam comments on your blog or forum. Spam takes away from the important information and can annoy your reader into leaving your site. Blogging software such as WordPress includes plugins that allow you to monitor comments before they are posted, which can greatly reduce the amount of active spam on your site. If you find that you do not update your forum or blog often and that there is more spam than actual content on either, you may want to consider removing your blog or forum completely.
10. Check keywords and site statistics. Are you including keywords throughout your website that are appropriate for your business? Make a list of words and phrases that customers might associate with your business, including what products or services you offer and your location. Then, be sure that these words and phrases are included in page titles, HTML meta tags and page content. Generally, each page should include one to three words or phrases that are related to your business. These are the keywords that customers will enter into a search engine when looking for businesses such as yours. Including keywords on your site improves the chances that your website will be crawled on a search engine and returned to the user. Also, consider integrating web statistics into your site. Statistics software, such as Google Analytics, not only shows you how many visits your site has obtained in a span of time, but also shows what keywords were entered to find your site. Statistics programs can provide insight into what campaigns work to drive business to your site, and which are falling short.
11. Add a News and What’s New section. Adding a news section to your home page is a great way to assure that content is constantly changing. Allowing the same old content to linger on your home page for too long gives the appearance that you have allowed your website fall by the wayside. Add a section with news tidbits from your business. Or, if you have a Twitter account that you update regularly, consider adding your Twitter RSS feed to your home page. This is a great way to update both your Twitter account and your website simultaneously.
12. Consider a redesign. All website designs become outdated with time. You should consider a redesign within at least two years of your last design update, as long as your are continuously monitoring your site and making tweaks and minor updates in between. Redesigning your website lets your customers know you are up with the times, and also gives you a chance to reorganize information that is more beneficial in attracting visitors. If you do not currently have the time or budget to undergo a complete website redesign, consider just redesigning the home page. This brings a fresh look to your site, while keeping the majority of your site familiar to regular visitors.

By making some of these tweaks and adjustments to your current site, you will be well on your way towards running a user-friendly website that promotes your business and provides a strong professional image.

What are jQuery and JSON?

Simply put, jQuery is Javascript. If you can write and understand  JavaScript, then jQuery is already a familiar concept to you. jQuery promotes interaction between JavaScript and HTML, which is accomplished by linking to a simple script in your HTML (the latest download is available from the jQuery website). Tutorials are also available on the jQuery website if you aren’t already familiar with jQuery, or if need to brush up on the key concepts. It is well worth your time to learn jQuery, as the amount of plugins and effects that can be accomplished through jQuery are growing daily, and it is a valuable resource for any developer looking to save time and expand website functionality.

JSON (JavaScript Object Notation) is a data interchange format that is easily parsed by computers and easy to read by humans. Written using a format that is readily-recognized by programmers, JSON allows data to be passed between websites through a request and a callback format. For example, if you run a website and want to retrieve a list of your Flickr photos for use on your own site, you would make a request to the Flickr API for a list of photos, and Flickr would respond with a callback, which would include a list of your photos, in JSON format.

Setting up Your Gallery

The best way to understand JSON and how you can send requests to Flickr using jQuery is through an example, so let’s jump into one right away. What we will be developing in this tutorial is a jQuery slideshow gallery that pulls photos from a Flickr gallery, and allows the user to switch between Flickr galleries through a drop-down menu.

Slideshow tutorial example

The slide show gallery that we will be developing will be built using the work of User Friendly Thinking’s Open Source Flickr Photo Gallery using jQuery. For this example, you will need to download a few code snippets:

• The latest version of jQuery
• The script package available on User Friendly Thinking’s example (be sure to select the Download Entire Package link)

You will also need a Flickr API key, which is easy to obtain if you are developing your gallery for non-commercial purposes. To obtain your key, register for a Flickr account, then navigate to the Flickr Services page to apply for your key. Once the application process is completed, you will be provided with your API key (which you should copy and paste in a new document for future reference). Once your Flickr account is established, you should upload some photos to your gallery and organize these photos into Photo sets (albums) before integrating the gallery into your website. A quick tutorial on how to organize your photos into Photo sets is available here.

To set up your gallery for use on your website, use the implementation process as outlined in the open source Flickr example. This will provide you with the basic gallery, which enables you to show one Photoset per implementation.

But what if you want to show multiple Photosets within one gallery? In this case, you would need to retrieve a list of Photo sets that have already been created under your Flickr account. This is where JSON and a little jQuery tweaking come into play.

Using JSON

JSON provides a method of establishing communication between the application you have just set up on your website, and the Flickr API on the Flickr website. The Flickr request is developed by building a URL in the format of:

http://api.flickr.com/services/rest/?

All requests  to Flickr begin with this basic URL. What you append to this URL, however, depends on what information you would like to retrieve from the API. To determine what parameters to append to your URL, you will need to refer to the Flickr API Documentation. The right column of the documentation includes the API methods you will be using to communicate with the API. Keep in mind, however, that you can only use one method per request.

In our example, we want to request a list of Photosets that have been created under your Flickr account. So in the API documentation, we look under the “photo sets” heading for a list of methods we can use to access our Photosets. Since we need to retrieve a list of Photosets that are available, we will want to use the flickr.photosets.getList method. Click the link for this method, and we are provided with the arguments that we need to provide in order for this method to properly retrieve our list of photo sets. In this method, the two arguments are api_key for the Flickr account, and the user_id, which is the NSID of the user requesting the list (by the way, you can determine your NSID by logging into your Flickr account and navigating to this page. Your NSID is provided beneath the “Your user ID:” heading in the right column).

Now that we know what method and arguments we need in order to access our Photoset list, let’s continue to build our URL. Begin by specifying which method you will be using:

http://api.flickr.com/services/rest/?&method=flickr.photosets.getList

You will then want to append your two arguments, the api_key and the user_id:

http://api.flickr.com/services/rest/?&method=flickr.photosets.getList
&api_key=yourAPIKey&user_id=yourUserID

(Keep in mind that you will want to replace the values for api_key and user_id with your actual values).

Once you have built your URL, you can enter it into your browser and the request will return the callback data. However, the information presented will be returned in XML format.

Correct data, but not the format we're looking for

XML is the default callback format, so in order to retrieve our request in JSON, we need to append one more parameter to our URL in order to specify that we want to receive our callback in JSON format:

http://api.flickr.com/services/rest/?&method=flickr.photosets.getList
&api_key=yourAPIKey&user_id=yourUserID&format=json&jsoncallback=?

Now if you enter this URL in your browser, you will see that the data is relayed in the JSON format.

JSON format!

Retrieving Photosets using jQuery

Now that we have built our request URL, we can retrieve our list of Photosets using jQuery. Luckily for us,  jQuery includes a built-in method for making JSON requests, namely jQuery.getJSON(url,data,callback). We have already built the URL, the first argument of the getJSON method, so we can begin to develop the rest of our getJSON function.

Before the $(document).ready line in your jQuery, add the following two Array variables, as we will need them later to store information about our Photosets:

var ids = new Array();
var titles = new Array();

Within the $(document).ready script, add the following code:

$(document).ready(function(){

$.getJSON("http://api.flickr.com/services/rest/?
&method=flickr.photosets.getList
&api_key=yourAPIKey&user_id=yourUserID
&format=json&jsoncallback=?",

});

});

The second argument of our getJSON method comes in the form of a function that will help us parse the JSON data that we receive.  Before we develop our function, however, we need to understand how to read the data that is sent back to us in JSON format. Here is an example of JSON-formatted data that we might receive when we make our API request:

jsonFlickrApi({"photosets":{"photoset":[{"id":"72157622889773773",
"primary":"4185579408","secret":"31db7024d6", "server":"2671", "farm":3,
"photos":"1", "videos":0,"title":{"_content":"Sample 2"},
"description":{"_content":""}},{"id":"72157622875855857",
"primary":"4184819047", "secret":"c913dd1d21",
"server":"2660", "farm":3, "photos":"2", "videos":0,
"title":{"_content":"Sample 1"},
"description":{"_content":""}}]}, "stat":"ok"})

On its own, the returned data is difficult to comprehend. But if we break down the data line-by-line, what has been returned to us starts to make a little more sense:

Organizing the returned data in this manner allows us to see just what data has been returned in our callback. We can see that the data has been returned to us in an array, which in this example consists of two elements (as there are two Photosets in this example gallery, titled “Sample 1″ and “Sample 2″). Also, traversing the arrays shows us how we can access each data element that we are looking to use. For this example, we will need to know the ID of each element, and each title. Therefore, we would access the ID and title of the first Photoset the following way:

data.photosets.photoset.id[0]
data.photosets.photoset.title._content[0]

This is a handy reference point if you want to access just one Photoset, but in this tutorial, we are looking to retrieve all Photosets associated with a Flickr account. Doing so will require us to loop through all of the Photosets, storing all Photoset IDs and titles as we loop. Here is where we will construct our data function, which acts as the second argument on our getJSON function:

$(document).ready(function(){

$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getList
&api_key=yourAPIKey&user_id=5yourUserID
&format=json&jsoncallback=?",

function(data){

var photosetID = "";
var title = "";
$.each(data.photosets.photoset, function(i,set){

photosetID = set.id;
title = set.title._content;
ids.push(photosetID);
titles.push(title);

});

});

});

Here, we use jQuery’s each() loop to iterate through all Photosets. As we loop, we grab the ID and title of each Photoset, which we add to the “ids” and “titles” arrays we created earlier. Once we have looped through each of our Photosets, we will have two arrays consisting of all Photoset IDs and titles associated with our Flickr account.

Creating a Drop-Down Menu of Photosets

Now that we have retrieved all Photoset data and have built our ID and title arrays, it is time to construct a drop-down menu that will allow users to select which album he/she wants to show in the jQuery slideshow player. Placement of this menu is up to you, but I prefer to place the drop-down directly above the slideshow player. To start, create an empty “select” menu in your HTML titled “Galleries.” Also, be sure to add an “onchange” event handler to your drop-down:

<label>Please select a Gallery from the drop-down menu to view.</label>
<form action="" method="get" name="choose_gallery" id="choose_gallery">

<select name="Galleries" id="Galleries" onchange="showGallery();"></select>

</form>

We now have a drop-down menu where we can list all of the Photosets associated with our account.  Our next task is to add the Photosets from our arrays to our drop-down menu. Directly after the getJSON function, add the following code:

for(i=0; i<ids.length;i++){

var option = new Option(titles[i],ids[i]);
var dropDown = document.getElementById("Galleries");
dropDown.options[i] = option;

}

This “for” loop will add a new option to our drop-down for each Photoset. The Photoset’s ID will become the option’s value, and the title will become the option’s text.

We now need to change one value in our flickrGallery() function that we added at the beginning of the tutorial. In my gallery, I wanted to assure that the first gallery listed in my drop-down menu was the default gallery being displayed in the slideshow. To make this happen in your gallery, simply change the value for photosetID to the first ID in “ids” array:

photosetID: ids[0],

Our final step is to build the functionality for our “onchange” event function, showGallery(). I placed this function outside of the $(document).ready script, directly below the array variables:

function showGallery(){

var sel = document.getElementById("Galleries");
var selectedID = sel.options[sel.selectedIndex].value;
$(".largeImageWrap").each(function(i){

$(this).remove()

});
$(".sliderGallery_Wrap").each(function(i){

$(this).remove()

});
$('#flickrTest').flickrGallery({

galleryHeight : 'auto',
useFlickr: 'true',
useFlickrLargeSize: 'true',
useHoverIntent: 'true',
flickrAPIKey: 'yourAPIKey',
photosetID: selectedID,
useLightBox: 'true',
per_page: 50

});

}

The showGallery() function is triggered when a user selects a gallery from the drop-down menu. This function loads the selected Photoset into the slideshow player, effectively allowing the user to choose between Photosets while using one player. First, we need to discover which Photoset has been chosen in the drop-down. Once we know this, we switch the current photosetID to the selected ID. Note that in my case, the “sliderGallery_Wrap” and “largeImageWrap” classes were preventing the slideshow player from resizing appropriately, and removing them had no effect on how the player appeared and functioned.

Tying it all Together

Here is how my final code looked after all was said and done. Yours may differ slightly, depending on what size and display options you selected for your slideshow:

Javascript:

<script type="text/javascript">

var ids = new Array();
var titles = new Array();

function showGallery(){

var sel = document.getElementById("Galleries");
var selectedID = sel.options[sel.selectedIndex].value;
$(".largeImageWrap").each(function(i){

$(this).remove()

});
$(".sliderGallery_Wrap").each(function(i){

$(this).remove()

});
$('#flickrTest').flickrGallery({

galleryHeight : 'auto',
useFlickr: 'true',
useFlickrLargeSize: 'true',
useHoverIntent: 'true',
flickrAPIKey: 'yourAPIKey',
photosetID: selectedID,
useLightBox: 'true',
per_page: 50

});

}

$().ready(function(){

$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getList
&api_key=yourAPIKey&user_id=yourUserID&format=json&jsoncallback=?",

function(data){

var photosetID = "";
var title = "";
$.each(data.photosets.photoset, function(i,set){

photosetID = set.id;
title = set.title._content;
ids.push(photosetID);
titles.push(title);

});
for(i=0; i<ids.length;i++){

var option = new Option(titles[i],ids[i]);
var dropDown = document.getElementById("Galleries");
dropDown.options[i] = option;

}

$('#flickrTest').flickrGallery({

galleryHeight : 'auto',
useFlickr: 'true',
useFlickrLargeSize: 'true',
useHoverIntent: 'true',
flickrAPIKey: 'a22b1a90b000578e1854ebdb3a3b5ba7',
photosetID: ids[0],
useLightBox: 'true',
per_page: 50

});

});

});

</script>

HTML:

<label>Please select a Gallery from the drop-down menu to view.</label>
 <form action="" method="get" name="choose_gallery" id="choose_gallery">

<select name="Galleries" id="Galleries" onchange="showGallery();"></select>

</form>
<div id="flickrTest"></div>

When we push a button on a cell phone, for example, the button moves inward, or to a “down” state. Pushing the button triggers an action, such as displaying a letter in a text message. When the button is no longer being pushed, the button returns to its “normal,” unpressed state. We can tell if the button is being pushed by getting a feel for the current “state” of the button. As users, we are accustomed to how buttons behave, but as web developers, we must think about concrete button states in order to successfully carry button behavior over to the web.

All buttons, electronic or non-electronic, share three states: Normal (or Default), Over (or Hover), and Click/Push (or Active). Electronic buttons also have a Focus state. Below is a review of the four electronic button states, and how they relate to their non-electronic counterparts:

1. Normal or Default state – The state when no action is being taken on the button. The button is at “rest.”
2. Over or Hover state – On the Web, this is how the button reacts when the mouse is moved over the button. This state tells the user, “Yes, you are able to click me.” This is the non-electronic equivalent of running your finger over a button to get a sense of how the button “feels.”
3. Click/Push or Active state – How the button reacts and appears when the button is clicked. Usually, the button takes on a darkened or lightened appearance with an embossed outline, or switches to a reverse gradient pattern if the Default button state includes a gradient pattern. This is the same as pressing a button on your mobile phone.
4. Focus state – This occurs when the user tabs to the button with the keyboard, as opposed to navigating with the mouse. The Focus state shares its appearance with the “Hover” state.

As developers, we are accustomed to coding the Default and Hover states of our buttons, but not much attention is paid to the Active state. The Active state is essential for providing feedback to the user, as it tells him or her that the button has been clicked, and action is being taken. If no Active state is provided, users on slower connections, for example, may be left wondering if the button was actually clicked, since so “push of the button” response was given. Keep in mind that users are already familiar with this behavior, since operating system buttons typically account for all four states. For instance, move your mouse over and click the Start button on your Windows OS, and you will see the button change appearance according to the action taken on it.

The good news for developers is that these four states are not difficult to build, as each state can be developed through simple CSS. Below is a description of how to design and develop each state, using examples from a client website I recently developed.

1. Design for the “default,” “hover,” and “active” states. A good starting point is to design your “default” button, change the text color for the “hover” state, then lighten or darken the button’s background color or gradient for the “active” state.
2. Instead of placing your button as an image directly in your HTML, create a link with an id.
   

   <div class="button"><a href="services.jsp" id="services"><!--empty--></a></div>

3. Now in your CSS, assign a height and width for the link using the ID you assigned to the link. Assign a different background image for each of the three button states. Use the pseudo-class “:hover” for the mouse-over state, and the psuedo-class “:active” for the active state. I use the “outline:none” property to remove the dotted outline that surrounds the link when clicked in most browsers, but this is a matter of personal preference.
   

   #services{

    background: url(../images/services_btn.jpg) no-repeat top;

    display:block;

    height:41px;

    width:138px;

   }

   #services:active{

    background: url(../images/services_btn_active.jpg) no-repeat top;

    outline:none;

   }

   #services:hover{

    background: url(../images/services_btn_over.jpg) no-repeat top;

   }

4. You should also pre-load each button image using a traditional Javascript or newer CSS approach. This will prevent the button from disappearing and reappearing between state changes.

The bonus of using this method of switching button states is that it is also compatible with Internet Explorer 6 (IE6), since all actions are taken on links. IE6 is notorious for only allowing pseudo-classes to work on links, and not on divs or other HTML elements.

With just a little added effort, all online buttons can reflect the behavior of offline buttons. As buttons continue to grow in popularity and replace text links, more attention will need to be paid to how these buttons are used. While the design of a button may change, its behavior will not, and users will continue to count on the feedback from a button-click or push to know that their transaction is being processed, or that their comments are being submitted. If the user is satisfied, then our added time and efforts have been well spent.

Grammar Hammer- Don’t forget to use proper grammar online. Just because we all live in a fast-paced world, doesn’t mean we should throw grammar out the window. The Web is a more informal place but this is no excuse for not using the correct punctuation and spellings. There is nothing more baffling than receiving an email from a respected owner of a company and it reading like this:

“hi, good 2 see u last night. lets talk sometime over coffee. ttyl”

This doesn’t seem that professional, does it? Many successful business people send emails like this all the time. No capitalizations, periods, commas, apostrophes, etc. It makes people look less intelligent. You should always use complete sentences, spell check, punctuation, and proof your professional emails before sending them. Chances are if you are too busy to write a decent email, then you might be too busy to get a new client.

Think Before You Tweet- Alright, so your cat is sick and it’s raining outside. This doesn’t mean that the entire Web needs to know this. For business, Twitter can be a great tool but only if used in a smart way. Using Twitter to announce a press release, a new product, upcoming event is genius. Revealing to the masses what you ate last night, not so much. There are many workshops and presentations on how to use Twitter for business. If you are using Twitter right now for business and you have been tweeting about your personal life, the weather (unless that is your industry) or how jammed the Parkway East was this morning, it is time to rethink your Twitter approach.

Picture This- Once an image is on the Web, there is no way to recover it. Same goes for videos, audio files, etc. If you are a business professional, remember this rule: If you wouldn’t show it to your grandma, don’t put it online. Reputations can be tarnished by pictures and videos that reveal less than desired acts. Remember that one time you drank a bottle of wine and thought you were a butterfly? Well, the next door neighbor’s son does too because he took pictures, posted them on his Facebook page, and tagged you. Then, your boss saw it and suspended you for making the company look bad.

If you are in situations where people post images of you in comprised situations, ask them to remove them or untag yourself. If you are a young professional, make sure there are no keg party pictures of you during Rush Week floating around out there still. HR managers will find it.

For more information about social media, check out our latest presentation Social Media Revealed on SlideShare. Also, if you have a group or company that might benefit from a presentation like this, contact Heather Jewell at 724-430-0490 Ext. 204 to find out about our workshop series.

It goes without saying that Web site statistics should be regularly reviewed for changes in traffic patterns, but other evaluation methods should be used to ensure that your Web site is properly reaching your target audience:

• Evaluate your Web site on the newest versions of each of the popular Web browsers: Display capabilities change with each new browser version, so it is imperative that you stay on top of how your Web site appears on the latest browsers. At a minimum, test on the latest Microsoft Internet Explorer, Mozilla, Mozilla Firefox, and Netscape. If you have access to a Mac, be sure to test Safari as well. Some advanced statistical packages will also tell you which browsers are being used to view your Web site. If you are getting significant traffic using an alternative browser such as Opera, be sure that your Web site works with it as well.
• Evaluate your Web site at different screen resolutions: There are several display resolutions currently being used by the vast majority of Web surfers. Change your Windows display resolution to match some of the different resolutions and visit your Web site. If you have a difficult time finding information on it at a different resolution, chances are that your visitors are too.
• Search for and compare with online competitors: Just because you’ve always faced the same competition from the same firms since the inception of your business doesn’t meant that there aren’t new competitors out in cyberspace who are taking your business. You may be pitted against many competitors that you’ve never heard of and your Web site might not be stacking up well.
• Determine what questions an interested member of your audience would be seeking answers to on your Web site and determine if the answers are easy enough to find. Many Web site owners approach their Web site as being a method of “telling visitors what I want to tell them”, but the most effective Web sites are constructed to easily allow visitors to find answers to questions that they have. After all, your visitors are the reason that the site is there. If they cannot find the information they are looking for, then your Web site is not doing its job.

Tools

There are many powerful tools that are inexpensive or even available at no cost that can help you evaluate and evolve your Web presence:

Evaluation Tools

• Google SiteMaps. This free service from Google allows you to learn a great deal about the searchability of your Web site and even allows you to “push” new content to Google instead of waiting for their spider to revisit your Web site every few months.
• Advanced search engine. An advanced search engine that shows the popularity of searches will help you determine what your visitors are looking for but cannot find in any other way than through the search engine. These results will allow you to more properly position and develop your content.
• Advanced Web statistics. An advanced statistical package will show you which browsers at what screen resolutions are being used to view your Web site, which pages are being visited (and which ones aren’t), and more. Services such as WebTrends and Web Side Story can help you evaluate the effectiveness of new marketing campaigns and edited Web site content.
• Feedback solicitations. Perhaps the best way to gather feedback about the effectiveness of your Web site is to solicit feedback on every page of your Web site. This will not only make it easy for your visitors to submit their comments, but will show them that your company is committed to delivering the content that they are seeking. Survey tools can also be used to solicit feedback.
• Link checkers. Most modern Web sites are built in such a way that internal links (links to other resources on the same domain) are always accurate, but even if yours is built in this manner, mistakes can still happen and external links (links to pages or resources on another domain) are always at risk of being broken.
• Browser checkers. There are many resources available to automatically check the appearance of your Web site in multiple browsers, platforms, and screen resolutions.

Evolution Tools

• Web content management (WCM). Web content management is a simple solution that allows your Web site to be changed as quickly as the market demands it to.
• Dynamic reorganization of content. Your Web site can be set up so that popular searches and links appear more prominently on your Web site automatically to help visitors easily find what they are looking for.
• Personalization. Each visitor has his or her own unique needs and viewing preferences. Allowing your visitors to personalize your Web site to their tastes will allow them to stay more informed about your company. The drawback to personalization is that a login is required.

NuRelm offers complimentary, personalized assessments of Web sites with no obligation. To request a free assessment, please visit NuRelm’s Website assessment page and one of our Web experts will be in touch to present a professional analysis of the strengths and weaknesses of your Web site.

• Google
  • Search box, with searched words, remains prominent at top
  • Option to view an “advanced” search page
  • Total number of results shown at top
  • Ajax-driven auto-complete for typed follow-up searches
  • Sponsored links at top and right
  • Paginated results
  • Results titles are large, bold, and hyperlinked
  • Searched words are shown in bold in a page snippet, in context
  • URLs shown in a different color under each result
  • Each result allows options to view “similar” and “cached”
  • Visited links are in a different color
  • Related search phrases listed at bottom
  • Search box with search terms repeated at the bottom
  • “Show options” link opens a sidebar for further filtering of the results
• Bing
  • Very similar to google but has some differences
  • Lists the user’s “search history” in the sidebar
  • The history to be cleared or turned off
  • The search history remains intact
  • Pagination unit at the bottom of the results page is more user-friendly
  • Pagination rolls over when moused
• Yahoo
  • Yahoo’s search results page includes a couple of JavaScript-driven enhancements
  • Ajax-driven slide-down unit that appears below the search box when a search query is being typed
  • “Search Pad” which allows the user to record notes on searches
  • “SearchScan” to help protect from harmful websites
• Youtube
  • Easily-accessible filtering options near the top of the search results
  • YouTube search result page lists detailed information
    • Including a thumbnail preview
    • Running time of the clip
    • User rating
    • And age
    • Also if a particular item is part of a series
• Twitter
  • Offers a very clean, intuitive JavaScript-driven interface that includes “Realtime” results
  • Their page also offers a list of “Trending topics” and a “Search tip”
  • Additionally, Twitter gives the user the option to refresh the page after it detects additional results in real time
• Digg
  • Each result on the Digg search results page includes the number of comments that have been posted for that particular story
  • In addition to other features that are unique to Digg, including “share” and “bury”
• Delicious
  • Lists search results in a very simple, list format that includes tags associated with each result
  • Plus the number of times the result has been bookmarked
• Amazon
  • Allows for the results to be sorted based on a variety of methods, including “Bestselling” and “Avg. Customer Review”
  • Amazon’s results page indicates if a book has the “Look Inside” feature
• Ebay
  • eBay’s search results page  allows for easy filtering via tabs at the top
  • eBay also has the option to view the thumbnail preview images in a different size:
  • Other features unique search results page are the options to change the amount of items displayed per page and the ability to go directly to a specific page by entering a number into a text box
• Flickr
  • Flickr  displays results by default in a simple grid-based format
  • Flickr also allows the images to be displayed either in a detail-heavy list-style view or inside of a Flash-based slideshow gallery
• Photobucket
  • Photobucket allows filtering of search results by “Most viewed” and “Most commented”. It also includes a link strangely titled “Follow”, which allows the user to enter their email address to receive notifications when the results for a particular search term are updated. A more appropriate title for this feature would be “Subscribe”, or similar.

For easy reference, here is a list of some of the best practices taken from Smashing Magaine’s Article:

• User should have easy access to the search box for follow-up searches
• Search terms should be clearly indicated at the top, and in context in the results
• Related sponsored links can be included below the search box, near the bottom, or on the right
• Titles should be clickable and clearly differentiated from details
• Visited links should be indicated
• Pagination units should be visibly block-shaped and have a hover effect, to easily differentiate from one another
• Related products, tags, or keywords should be displayed in a non-obtrusive section
• E-Commerce sites should allow the “view” to be toggled between “list” and “grid”
• Advanced search options should be easily accessible
• Should allow re-sorting or filtering of results
• Where possible, results pages should have RSS feeds or “subscribe” options
• For complex interfaces, clear, easy-to-access search tips or instructions should be provided
• Sorting and Filters should be JavaScript or Ajax-driven, where possible
• Popularity or star-ratings should be shown for individual results
• Include an option to increase the number of results per page
• To monitor future improvements, request feedback from users after searches are conducted
• If results span different sections of the website, indicate this by sub-headings or other dividers

So to sum it all up when building your own search engine try to come up with the best combination for your targeted audiance. But the overall goal should be your user’s experience and usability.

Although the World Wide Consortium has developed a set of “standards” that all browsers must comply with in order to properly display a website, each browser varies in its support of these standards, resulting in a variation of what functionality is and is not supported by a particular browser. Although most modern-day browsers, such as Internet Explorer 8, Firefox, Opera, and Chrome offer similar support of standards, Internet Explorer 6 lacks much of the support that we have come to expect from its successors. This is understandable, considering the browser’s age, but this lack of support has lead to many time-and-money consuming issues within the web development community.

IE6 Issues

One of the main goals of any web developer is to maintain website compatibility across all mainstream browsers in order to ensure that site visitors have the most consistent and enjoyable user experience possible. However, since IE6 does not support many current standards, web developers often find themselves devoting special attention to making websites work within the outdated browser. This process includes implementing “hacks,” or browser-specific workarounds, to allow the website to function as it would in a modern browser. Devoting special attention to IE6 cuts into production time, and often costs the developer, or the organization where the developer is employed, money.

The lack of support for standards also slows the progress and natural evolution of the web. For example, two new standards for HTML and CSS (HTML5 and CSS3) are under development and are already being adopted by most modern browsers. HTML5 and CSS3 will simplify the development process, and will present users with more advanced and visually-pleasing websites.  But since IE6 cannot support these standards, web developers are left with the choice of whether to use the latest technology and disregard a portion of their audience, or to spend the time developing for IE6 users, allowing them to access the site but forgoing the opportunity create a more advanced, more user-friendly site.

But even with the issues that IE6 has caused, support for the browser continues.

IE6 Support

The majority of IE6 users are, surprisingly, members of IT departments in larger organizations and universities. Many systems and applications used by these organizations are only compatible with IE6, and most employees are not permitted to download modern browsers without administrative access. Companies fear that the cost of upgrading the systems to work with new browsers are too expensive, especially in this time of economic recession.

A smaller percentage of IE6 faithful are non-tech-savvy browsers who mainly user their computer for basic functions, such as checking email and browsing websites. These users typically do not have a reason to spend the time upgrading their browsers, and may even be skeptical of downloading a new browser onto their computer.

Microsoft has announced that they will continue to support IE6 as long as Windows XP is supported (since the browser was bundled with XP). Therefore, support will officially be continued until 2014. In other words, anyone who currently uses IE6 at home, work, or school can continue to do so until 2014.

Suggested Remedies

Google has been at the forefront of eliminating IE6 once and for all. Recently, Google announced a plugin entitled “Google Frame,” which inserts Chrome’s (Google’s web browser) functionality and support for web standards into the Internet Explorer interface. The idea behind Frame is that by downloading the plugin, users can browse inside the Internet Explorer interface they are accustomed to, but will experience greater compatibility across the web and will be browsing with a faster browser in the process.

In addition to Frame, other web initiatives have been developed, such as IE6 No More and Save the Developers, to eliminate IE6 from the web. These sites promote upgrading IE6 to newer browsers by sharing information on IE6′s flaws, and some (such as IE6 No More) go as far as to provide code snippets for developers to insert into their websites. This code displays a banner across the top of the page to users of IE6, asking them to please upgrade their browser, and provides links to where new browsers can be downloaded.

Although these efforts are a great first step to phasing out the browser, there are criticisms as to why these methods likely will not work. The Frame method does not immediately solve the problem for web developers, since most IE6 users will likely not want or are not permitted to download a plugin, meaning IE6 will still need to be supported. Also, users will most likely not want to download a new browser when prompted, and may not visit a website in the future if their browser is not supported.

Recommendations

Even though it is unlikely that IE6 will be phased out soon, the initiatives presented by Google and website groups are a solid beginning to making users aware of the problem with their outdated browsers. But at this point in time, the decision whether or not to continue to support for IE6 is left to both the developers and the users of the browser. Web developers have the option to continue to spend time to build workarounds into their websites that ensure compatibility, or they can build only for the most recent browsers, potentially excluding a portion of their audience. In return, the user has the choice to continue to use IE6 and potentially experience problems viewing and operating their favorite websites, or they can upgrade to a new browser and continue to enjoy browsing with a slightly different interface.

For the developer, the choice of whether not to offer IE6 support should take the audience into consideration. Websites that attract younger, more tech-oriented visitors can likely skip on IE6 support, since these visitors will most likely keep their browsers up to date . However, websites that attract an older audience might want to take IE6 support into consideration, as these audiences are not as concerned with having the latest and greatest technology. When all is said and done, the website’s audience is of greatest importance and everything on the website must keep the audience in mind, even if it means devoting some extra time to make the website enjoyable for all.

1. Visitors: Analytics can help track how many people visitor your site every hour, day, week,  and month.  This can be beneficial to track results of eNewsletter mailings, press releases, promotions, etc.  Being able to visualize how many people are using your site is a key part of determining the success of any Online Marketing strategy.

2. Geography: Whether your business is local, national or international, being able to track where visitors are coming from is very important.  Analytics allows administrators and marketers  to see where people are visiting sites from based on I.P.(Internet protocol) addresses.  It is a good idea to track this kind of information so that local or regional ad campaigns can be carried out based on geographical statistics.

3. Pages: Analytics also enables marketers to gage which pages of a site are the most popular by tracking how visitors use the site and by following their most popular paths to the site.  This can also help track broken links on a site.  If an increased bounce rate happens on certain pages, it may be a red flag that something is amiss.

4. Incoming Links: A key success factor for increasing search engine rankings is having multiple incoming links to your site.  Analytics can help gage which referring/incoming links are the most valuable.

5. Keywords: Analytics lets you see which keywords are the most popular at driving traffic to your site.  This feature is a good way to judge the effectiveness of your site’s content.  By tracking the most popular keywords, you can find out if your site is sending the right message.

6. Bounce Rate: A bounce rate reveals how many times visitors exit your site from certain pages.  Being able to see where visitors are exiting can help troubleshoot issues such as broken links, page errors, etc.

7. Entrance Rates: The entrance rates on Analytics help you to track where visitors are entering your site.  If there are multiple incoming links to your site, such as to the products page, contact forms, or just the home page, the effectiveness of the content prompting visitors to click can be analyzed.

8. Goals: With the Goals feature,  it is easy to track specific parts of your site.  For example, if there is a contact form that should be filled out for interested visitors, the path to the contact form would be copied into the Goal tool.  When a visitor follows that particular path, it is called a Goal-conversion.  This is great for all important features of a site, such as portfolios, newsletter sign ups, promotional offers, etc.

9. Adwords: Another great feature about Analytics is that it works with Google Adwords.  By syncing these programs together, you can track returns on investment down to the cent.

10. Time: Analytics can also track how long people stay on the site and on each page.  Being able to track length of stay is a great way to judge how interesting the content is for each page in comparison to the rest of the site.

For more information on setting up Google Analytics, please Click Here to contact us.  For a complete tour of the free software, visit analytics.google.com.

RSS, or Really Simple Syndication, is a Web format that allows for certain information to be pulled from multiple Web sites into a central location.  What exactly does that mean?

Well, for marketers it means that RSS can be used to either:

A.) Keep prospects up to date with information that your business is constantly updating, like press releases or events.

B.) Increase returning visitors to your site by setting up an RSS feed to display current, pertinent information from other Web sites on your Web site.

For example, let’s say that you manage a local community Web site.  An RSS reader could be set up within your Web site to display items like current headlines from the local newspaper  Web site or school closings from the local school district site.   Also, if sections of your Web site  were RSS-compatible, like the news and events section, community members who have RSS readers could keep up to date with local information easier, and encouraged to visit your Web site more often.

RSS feeds are created in a language called XML (or eXtensible Markup Language), a technology already used for various other purposes on and off the Web.  Since it is so widespread, many Web developers find it relatively easy to set up these indexes on existing sites.  Not only can you keep your existing patrons coming back more often, it can help boost SEO to increase new site traffic by providing another way for Web users to experience your content.

There are many different reasons to use RSS feeds today, from making your Web site’s articles easily accessible to a wider audience, to making it easy for clients to keep up with your company’s blog.  The possibilities are endless and so are the sites that are adding RSS everyday.

The best way to learn about how RSS works is to setup your own personal RSS reader.  There are a number of readers out there, an example of which is Google’s new Reader.  To try it, go to http://reader.google.com (you need a Gmail account) and follow the instructions — it is easy to setup and starts out with a quick video tour.  Once you do this, you’ll have a feel for how RSS works from the perspective of someone using it to view your content, and how setting up RSS capabilities on your business Web site can help you boost Web traffic.

NuRelm is a software and services firm that helps non-technical business professionals compete in a technology-savvy world.  For more information on the benefits of RSS feeds, how to integrate them or any other interactive capabilities for your Web site, check out NuRelm’s free web site assessment page or call 1.877.2NuRelm ext. 204.  Don’t forget to visit: The Website Owner’s Manual for more timely info dealing with everything web.

1. Fonts are an important attribute of a Web site.  It is essential that fonts are large and clear enough for viewers to easily read.  Although it is tempting to use fancy, script-like font styles, the content’s message is lost in translation.  Not only can some fonts be hard to read, all computers do not have the same font files, causing them not to load properly.  Universal fonts are safe to use, including Arial, Times New Roman, and Verdana.  The standard font size advised is 10 point.  If you have another style or smaller size of font on your current Web site, you may want to reevaluate its use.
2. Branding is an important online marketing practice.  A company usually has a unique color scheme/logo that sets them apart.  To build more effective branding, the online presence should reflect offline marketing materials.  If different colors or images are used, consumers may become confused or think that the company is unprofessional.  If something familiar doesn’t immediately jump off the home pager, they might not even recognize you.   Always consider offline marketing materials when designing or redesigning a Web site.
3. Imagery is as important as the content of a Web site.  Results-oriented imagery is the most effective way to get the consumer’s attention.  Consumers can better relate to seeing a happy family standing outside of a brand new house rather than Joe President or Mary Saleswoman on the home page.  Imagery needs to assure consumers what they can achieve with the product or service being marketed and produce imagery that reinforces those feelings.
4. Web site content should always be in text format.  Web site content in an image-based format wards off search engines.  If you are not sure, ask your Web developer how the content is formatted.  This can seriously hinder the Web sites search engine rankings, because search spiders cannot easily pick out important keywords that are partially responsible for boosting your rankings.
5. There should never be broken links on a Web site.  It is a simple task to periodically check the links of a site to verify that they are working properly.  Broken links are a huge setback in search engine optimization, especially for an issue that can be easily monitored and fixed.
6. Clear navigation is another very important feature of a successful Web site.  Confusing navigation is a major reason why Web surfers leave Web sites.  Setting goals and tracking the steps to achieve them can help analyze the effectiveness of a site’s navigational structure.  For example, submitting a Contact Us form on a Web site is a very important goal.  Using Web statistics software, like Google Analytics, is an efficient way to track the path prospects must take to submit the form.

Creating an effective Web site can be a challenge and there isn’t a clear-cut path to success.  However, there are many aspects  you can control that will help the process.  Streamlining and regularly maintaining a Web site’s content, links, and images may not solely drive a business to become a Fortune 500 company, but it can help  to significantly increase the bottom line. Take advantage of NuRelm’s free Web Site Assessment services that can help you drive more relevant traffic to your company’s Web site.  To speak with a NuRelm representative about your Web site, please call 1-877-2NuRelm.