Posts Tagged "techniques"

There are a lot of factors that play a role in determining the success of a freelance web designer. Obviously, design ability and technical skills are needed, but other factors like customer service, marketing, networking, and work ethic will have a significant influence. In this article we’ll take a look at customer service as it applies to freelance designers.

Providing high-quality customer service can at times be frustrating for freelancers, but taking good care of your clients is critical for client retention and for encouraging word-of-mouth referrals. Here we will look at 10 aspects that should be considered by freelancers who aspire to provide a high level of customer service.

1. Being Reachable

When clients have a question or a problem, they want to know that there is someone they can contact to get help. Of course, freelancers don’t have a team of customer service people ready to handle calls and emails around the clock, but in general it’s necessary to be accessible to clients. Clients should know the best ways to contact you (office phone, cell phone, email, through a customer service portal, IM, Twitter, etc.) and when they can expect to get a response if they are not able to speak with you immediately. Most clients understand that freelancers will not be available 24 hours a day, but they should know that you are interested in helping them and the best way to go about it.

2. Timely Response

Since it’s very common to deal with customer service via email and voice mail, the client should be able to know that you will get back to them as quickly as possible. The amount of time will vary, but clients should not feel like their messages are falling through the cracks and only answered whenever you have the spare time. Clients will appreciate customer service that involves a prompt response, which shows that service is a priority to you.

3. Organization

Organization is important in order to be able to provide quality customer service with timely responses. Working on multiple projects at any given time, plus some questions/issues from other clients needing maintenance, means that without organization it will be difficult to stay on top of things. Some freelancers use a CRM (see 12 CRM Options for Freelancers), while others institute their own system for organization. Organization also has a major impact on the ability to meet deadlines, which is a critical aspect of keeping your clients satisfied with your work.

4. Patience with Explanations

Clients like to work with designers who are willing and able to meet them at their level, where the designer will explain things in a way that makes sense to the client. There will be plenty of situations where you will need to explain your reasoning to the client, whether it be in response to a question or suggestion from them, or whether it is something that you feel needs to be pointed out. Taking the time to explain things without technical jargon will help to educate your clients and should help to make your job easier going forward.

5. A System for Quotes/Estimates

Some designers use packages with set prices for specific types of projects, but many designers will provide a quote specifically based on the needs of each client. Even for those designers that offer prices by packages, there will be situations where a client’s needs do not quite fit into one of the existing packages and a quote will be needed anyway. Pricing design services is a hot topic that gets a lot of attention, but the quote/estimate process doesn’t get as much attention.

The quote involves more than just being able to price your services. It should also help you to evaluate exactly what the clients needs and what you can offer, the specific details of what is included in the price and what is not, any deadlines and/or project milestones that are involved, and any other relevant details. Having a system will help you to get information from the client that will help you to make better estimates, provide a timely response, and to cover all bases so that both the designer and client understand the specifics of what is being offered.

6. Effective In-Take Process

One of the most critical aspects to a successful design project is getting to know and understand the client’s specific needs, their business, their customers, and what is needed from the website. In order to get this right, it is necessary to dedicate the needed time upfront before the design work begins. Many designers have standard approach to client in-take that helps them to make sure all the right questions are asked.

Putting more effort in to the early stages of the designer/client relationship will help to improve the customer service down the road. A project that involves a solid in-take process will result in a more effective and efficient use of your time, and fewer issues that will need to be resolved at later stages of the process, which will make your customer service much easier.

7. Clear Contracts and Terms

Contracts not only serve to protect everyone involved from a legal perspective, but having contracts and clear terms with clients will help to reduce the potential for miscommunication and misunderstanding about pricing, payment terms, what is included in the price, and the responsibilities of the designer and the client. A lack of clarity in any of these areas can lead to problems and lots of customer service work.

8. A System for Working with Feedback

Every client project will involve some sort of feedback, and many will require revisions from the designer. In some cases, the feedback may be coming from a few different sources, and it could involve a number of different people. This contributes to making it even more important to have a system to deal with feedback and to incorporate it into the project.

There are a number of different resources out there, such as Proof HQ, that are available to make the process more streamlined and effective.

9. Concern for the Client’s Best Interest

In order to provide the highest level of customer service possible, it is necessary to have the client’s best interest in mind. There will be situations where you could recommend something to a client that would involve more money for you, but it may not be in the best interest of the client. While putting the client’s interests in priority may cause you to miss out on some income opportunities in the short-term, it’s a necessary part of providing good customer service. Clients will recognize when you are truly looking out for them and it will lead to increased trust in you, a greater chance of getting repeat business, and more referrals from current and former clients.

10. Respect for Your Time

Just like you need to respect your clients, you also need to respect your own work and time. Simply catering to unreasonable requests or doing endless revisions for clients that keep changing their mind is not required to provide good customer service. The ideal designer/client relationship involves mutual respect and a concern for being fair on both sides. There will be times when providing some type of service to your customer is outside the scope of the contract. In these situations the best customer service will involve a willingness to help the client get the service that they want, but at an additional fee.

Provide the best customer service that you can, but also have a respect for your time that prevents you from getting walked on. A healthy designer/client relationship will produce the best results for the client, improve the chances of a long-term working relationship, and promote a genuine interest in working together for success.

What’s Your Experience?

From your experience, what do you feel are the most essential aspects to customer service for freelancers?

WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme.

1. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

10 Impressive Techniques to Spice up your WordPress Theme

2. jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. The length of a breadcrumb menu may be very long, jBreadCrumb is a great solution for this issue. It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

10 Impressive Techniques to Spice up your WordPress Theme

Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. You can also use this great plugin or this interesting one to automatically create breadcrumbs in your blog.

3. Sliding Boxes and Captions with jQuery

The basic idea of the sliding box animations is very simple. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. I can see this script works great for a CSS gallery, really interesting.

10 Impressive Techniques to Spice up your WordPress Theme

4. How To Create An Amazing jQuery Style Switcher

Add a nice style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

10 Impressive Techniques to Spice up your WordPress Theme

5. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

10 Impressive Techniques to Spice up your WordPress Theme

6. MooTools Link Nudging

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.

10 Impressive Techniques to Spice up your WordPress Theme

7. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

There are many tutorials out there for creating a WordPress drop down menues. You might want to check here and there.

10 Impressive Techniques to Spice up your WordPress Theme

8. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your blog. I can see this very useful if you are having a news submission are on your website and want to display your user’s contributed links in a nice and fancy way in your sidebar.

10 Impressive Techniques to Spice up your WordPress Theme

9. Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.

10 Impressive Techniques to Spice up your WordPress Theme

10. J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.

10 Impressive Techniques to Spice up your WordPress Theme

The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. AJAX, javascript and CSS are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

There’s a lot of powerful interactivity you can bring to your site to spice up just about any web page using one of the most powerful and modular javascript libraries—MooTools! It’s important to note that small and useful features can cleverly deal with hiding and showing important information in non-traditional ways.

Today, we will have a look at 20 creative techniques using MooTools javascript framework for rich UI in modern day websites.

1. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login panel on top of your page using Mootools 1.2.

2. MooGenda

MooGenda is a javascript calendar based on MooTools, that reads events from JSON requests. MooGenda supports double click on event to see the deafult event view, drag and drop event in month view, every change send a request to back end, to store when and what changed in the event.

Check out the demo here

3. Morph Effect on mouseenter/mouseleave with Mootools 1.2

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Check out the demo here

4. Create a Simple, Powerful Product Highlighter with MooTools

Create a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Also, learn some of the many reasons why MooTools just might be the right javascript library for all of your future projects!

Check out the demo here

5. Jazz Up Your Forms With MooTools Pt. 1

A MooTools and contact forms with animated field highlighting, displaying/hiding instructions for each input field, live comment previewing and auto-resizing of both the comment preview and it’s corresponding textarea input.

Check out the demo here

6. Mootools CSS Styled Scrollbar

A small piece of javascript that creates a css styled scrollbar from the Mootools (version 1.2b2) Slider class. The example page shows three div elements with a styled horizontal and/or vertical scrollbars.

Check out the demo here

7. Delayed Image Preloading Using Mootools

There are possible scenarios that need image preloading. Most browsers only allow two concurrent requests at the same time to the same domain. When we do the image preloading on domready, it might hold up other resources that need to be loaded. Because we preload images that are not shown when the page loads, we can delay the preloading.

Array.each.delay(3000,this,[
	['foo.gif', 'bar.png','moo.png','tools.png', 'mootools.png'],
	function(src){var img = new Image();img.src = src;}
]);

8. Facebook-Style Modal Box Using MooTools

David Walsh took facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect of Facebook’s Modal box.

Check out the demo here

9. OmniGrid

The OmniGrid component is inspired by two similar components: FlexGrid jQuery and phatfusion:sortableTable and partly uses their source code.

Check out the demo here

10. MooTools Flashlight Effect

A nice neat effect inspired by the jQuery version found here.

Check out the demo here

11. FormCheck

FormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm…), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.

Check out the demo here

12. Fancy Upload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

Check out the demo here

13. AutoCompleter

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Check out the demo here

14. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a Newsvine News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your web projects.

Check out the demo here

15. mParallax

mParallax is a MooTools implementation of the popular jQuery plugin: jParallax. “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”. You can create parallax effects while having the option to customize various settings.

Check out the demo here

16. BySlideMenu

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text. You have the option to create it vertically or horizontally, the container width/height can be adjusted automatically, Menu can be pinned or not, by mouseover or click and with Overflow support.

Check out the demos here

17. mooCSSChart

Create animated Bar Charts using the MooTools.

Check out the demos here

18. MavSelectBox

MavSelectBox is a simple-to-use form select replacement that allows for better customization. MavSelectBox mimics the GUI interactions of a normal select element as much as possible. Up and down arrows move the selection, tabbing to it and hitting alt+down shows the menu, tabbing to it and simply hitting up or down selects the next available option in that direction, focusing then start typing and the option that matches what you are typing is selected, enter selects, esc closes, and so on.

Check out the demos here

19. A Better Pagination

It is only a little script that can turn your ugly looking numbers into a nice looking Slider using MooTools. The script only contains a little fix for the Slider in mootools-more so the “knob” doesn’t jump around when clicking it and is also packed up a little example in PHP to see how you can integrate this script in your blog easily.

Check out the demos here

20. SlideItMoo

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel. It supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.

Check out the demos here

Must Read Mootools Tutorials

30 Days of MooTools Tutorials

These tutorials will assume no previous Mootools or JavaScript experience, but will require basic knowledge of html and CSS.

Currently looking for permanent roles