In my many years as a consumer I have encountered little customer service excellence. Don’t get me wrong there is good customer service out there but not what I consider excellent. Excellent customer service is going above and beyond the call of duty and tending to the very specific individual needs of your customers.

5 Points of Customer Service Excellence

First - Realize that your customers are the vitality of your company.

Second - USP “Unique Selling Point” Set yourself apart from your competition. You are not going to make it on Customer Service alone, however excellent it may be, you must have the goods to keep them coming back for more.

Third - Recognize the needs of your customers and adapt accordingly.

Fourth - Creative Solutions to your customer’s complex problems.

Fifth - Follow up is key to excellent customer service!

Customers are your Vitality

It goes without saying that without your customers you wouldn’t stay afloat long or in fact at all. Keep that in mind when dealing with you customers. They are an integral part of your business and keeping them happy equates to increased revenue. It’s not just about the money but forming lasting relationships and customer loyalty, which just so happens to equate to increased revenue. 

Your USP

If you don’t have a unique selling point then why should a customer choose you over your competition? It is going to require some research on your part or maybe you already know but it is important that your customers know.  Determine what sets you apart and play it up!

Recognizing Customer Needs

When you take the time to get to know your customers you will soon find that providing excellent customer service is beneficial to you as well. Give them what they need, sometimes they don’t have a clue what they need, it is up to you to do some fact-finding to help determine what is best for your customer.

Know your stuff! Being well informed about the operations of your business will allow you to better service your customers needs.

Inform your customers. Keeping your customer in the dark doesn’t benefit anyone. Try to keep it simple, using technical jargon only serves to confuse. Explain it in the best possible way sticking to the basics and allowing for customer interaction. Don’t overwhelm your customer with too much information.

Creative Customer Service Solutions

In customer service it has long been an adopted philosophy that the customer is always right. It is not a question of who is right or wrong but about taking care of the customers needs.  Providing excellent customer service is finding creative solutions to their unique problems that are beneficial to both your customer and your company.

Follow Up

It’s great that you have implemented the fore mentioned, but now comes the excellence. Contact the customer to verify they are completely satisfied. Get some feedback; ask them what you can do to improve in the future. Make sure their needs are fully met because in doing so you build a stronger relationship with your customer and validate in the customer’s mind that they are important and their opinion matters. Customers are much more willing to recommend you to others if they feel they matter and they do!

I needed a great slider for our home page at Nerdskoolmedia.com and I knew exactly what functionality I wanted it to have. Nothing canned would suffice. So I set out on my mission to code myself.

Overview: In this tutorial we will be creating a JQuery content slider with play pause functions, back next navigation and a mac style dock menu pager.

Step 1:

Html head section.

Html body section

Step 2

Css

#NS_Slider_container{
    background:url(../images/NS_Slider/slider-bg.png); 
    background-repeat:no-repeat; 
    background-position:center top; 
    width:918px; height:359px; 
    margin:0 auto; 
    padding:36px 0 0 8px;
    }

#NS_Slider_inner {
    float:left; 
    width:846px; 
    overflow: 
    hidden; 
    margin:0; 
    }

#NS_Slider_ul {
    position:relative; 
    left:-846px; 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    width:9999px;
    }

#NS_Slider_ul li{
    float: left; 
    width:846px; 
    margin:0;
    }

#left_scroll, #right_scroll{
    float:left; 
    height:310px; 
    width:32px; 
    text-align:center;
    }

#left_scroll img, #right_scroll img{
    border:0; 
    margin-top:136px; 
    cursor: pointer; 
    cursor: hand;
    }

#pagerWrapper{
    position:relative; 
    text-align:center;
    margin:0 auto;
    width:910px;
    }

#pager{ 
    margin-top:-25px;
    margin-left:40px; 
    z-index:50; 
    position:relative;  
    width:860px; 
    height:80px;
    }

#pager a{color:Blue;}

#pager ul{
    z-index:20px; 
    position:absolute; 
    bottom:0; left:40px; 
    display:inline-block; 
    padding:0; margin:0 auto;
    }

#pager li{
    display:inline-block; 
    width:125px; margin:0; 
    padding:0; 
    text-align:center;
    }

#pager img{
    border-style: none; 
    border-color: inherit; 
    border-width: 0; 
    height: 120px;
    }

#control{
    width:975px; 
    text-align:center; 
    position:absolute; 
    top:340px; z-index:10;
    }

#control img{border:0;}

.hide{display:none;}

Step3

Jquery

var timer;
var auto_slide = 1;
var hover_pause = 1;
var key_slide = 1;
var auto_slide_seconds = 5000;

$(document).ready(function () {

    //hide the play controls
    $("#control").addClass('hide')
    $("#control_button_play").addClass('hide');

    $('#NS_Slider_ul li:first').before($('#NS_Slider_ul li:last'));

    //check if auto sliding is enabled
    if (auto_slide == 1) {
        timer = setInterval('slide("right")', auto_slide_seconds);
        $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
    }

    //show hide play pause on hover
    $('#NS_Slider_ul').hover(function () {
        //show control
        $('#control').removeClass('hide');
    }, function () {
        //hide control
        $('#control').addClass('hide');
    });

    //avoid flicker add class on control hover
    $('#control').hover(function () {
        //show control
        $('#control').removeClass('hide');
    }, function () {
        //hide control
        $('#control').addClass('hide');
    });

    //dock animation
    $("#pager li").hover(function () {  
		$(this).find('img').animate({ marginBottom: '15px'}, 200);
        
    }, function () {    
		$(this).find('img').animate({marginBottom: '0px',}, 400);
    });

    //check if key sliding is enabled
    if (key_slide == 1) {

        //binding keypress function
        $(document).bind('keypress', function (e) {
            //keyCode for left arrow is 37 and for right it's 39 '
            if (e.keyCode == 37) {
                //initialize the slide to left function
                slide('left');
            } else if (e.keyCode == 39) {
                //initialize the slide to right function
                slide('right');
            }
        });

    }

});

//FUNCTIONS BELLOW

function control(action) {
    if (action == 'stop') 
    {
        clearInterval(timer)
        $("#control_button_pause").addClass('hide');
        $("#control_button_play").removeClass('hide');
            
    }
    else if (action =='start') 
    {
        timer = setInterval('slide("right")', auto_slide_seconds);
        $("#control_button_play").addClass('hide');
        $("#control_button_pause").removeClass('hide');
         
    }
}

//slide function
function slide(where) {

    //get the item width
    var item_width = $('#NS_Slider_ul li').outerWidth() + 10;

    /* using a if statement and the where variable check
    we will check where the user wants to slide (left or right)*/
    if (where == 'left') {
        //...calculating the new left indent of the unordered list (ul) for left sliding
        var left_indent = parseInt($('#NS_Slider_ul').css('left')) + item_width;
    } else {
        //...calculating the new left indent of the unordered list (ul) for right sliding
        var left_indent = parseInt($('#NS_Slider_ul').css('left')) - item_width;
    }

    //make the sliding effect using jQuery's animate function... '
    $('#NS_Slider_ul:not(:animated)').animate({ 'left': left_indent }, 500, function () {

        /* when the animation finishes use the if statement again, and make an ilussion
        of infinity by changing place of last or first item*/
        if (where == 'left') {
            //...and if it slided to left we put the last item before the first item
            $('#NS_Slider_ul li:first').before($('#NS_Slider_ul li:last'));
        } else {
            //...and if it slided to right we put the first item after the last item
            $('#NS_Slider_ul li:last').after($('#NS_Slider_ul li:first'));
        }

        //...and then just get back the default left indent
        $('#NS_Slider_ul').css({ 'left': '-846px' });
    });

}

function slideTo(index) {
 
    var ul = $("#NS_Slider_ul");
    //var li = $("item1");


    ReorderList();

    //li.detach();
    //ul.prepend(li);

    clearInterval(timer)
    
    $("#control_button_pause").addClass('hide');
    $("#control_button_play").removeClass('hide');

 
    //make the sliding effect using jQuery's animate function... '
    $('#NS_Slider_ul:not(:animated)').animate({ 'left': index }, 500, function () {
       
    });

}

function ReorderList(){

$("#NS_Slider_ul").html("");
var html = '
' +  
           '
' +  
           '
' +   
           '
' +   
           '
' + 
           '
';  

           $("#NS_Slider_ul").html(html);
}