Building a jQuery plugin is relatively easy if you know the basics. In this article we are going to build a simple plugin which highlights (actually blinks) the link, paragraph, span or any text element on the page.

For a printable reference guide to the jQuery API I suggest you to download this interesting jQuery Visual Cheat Sheet designed by Antonio Lupetti or take a look at the official jQuery documentation.

How to start implementing a plug-in

First start with an empty jQuery plugin template.

(function($){
    $.fn.woorkBlink = function(){
        // all plugin stuff will be here
    };
})(jQuery);

I always start with this structure and fill the blanks as the building goes on. In details, first and last lines are for registering our plugin to jQuery. Our actual plugin starts with the second line. $.fn.woorkBlink defines the plugin name. So you can call it as $(target).woorkBlink();.

After naming the plugin, we need to find all target elements in our page by using each() function. each() executes the called function for every target element in the page.

return this.each(function(){
    var $e = $(this);
});

where $(this) means the target elements in the page and by defining a variable $e, we call the target element freely everywhere in the plugin. This finishes the needed setup for plugin. Now lets blink our texts.

Blinking is a repeating action which executes a certain function in a defined time interval, lets say in every 1.5 seconds. We need to simply create a function which adds a ‘blinking’ class to the target element, then waits for half of our interval and removes the ‘blinking’ class to complete the action. Then we repeat the function in every 1.5 seconds with setInterval() function. setInterval() function’s usage is like this

Here is the jQuery code what we are trying to do.

setInterval(function(){
    $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
        $e.removeClass('blinking');
        $e.dequeue();
    });
    },
1500);

Antonio previousy mentioned about addClass(), removeClass() functions in Manipulating CSS Classes lesson and animate() function in this lesson. But the usage of animate() function is a bit different in here. I used it for only nothing but the waiting for 750 milliseconds.

There are two new functions which we were not mentioned previously, queue() and dequeue(). The queue() function, queues and waits the execution of functions until the end of previous actions. In our example, queue() function waits to removing ‘blinking’ class until the aanimate() function finished, and by ddequeue(), we removed our actions from the queue.

Overall code for the plugin is as follows;

(function($){
    $.fn.woorkBlink = function(){
    return this.each(function(){

         var $e = $(this);

        setInterval(function(){
            $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
            $e.removeClass('blinking');
            $e.dequeue();
         });
    },
1500);
});
};
})(jQuery);

To spicing up our effect, add some css for different text elements like

a.blinking { color: green; }
span.blinking { color: red; }
p.blinking { color: blue; }

Resulting a blinking link will have green color, text will have red and a paragraph will blue color. The final html will look like.

Here is the CSS code:

a { color: black;  }
a.blinking { color: green; }
span.blinking { color: red; }
p.blinking { color: blue; }

Here is the JavaScript code:

$(function(){
    $(".highlight").woorkBlink();
});

(function($){
$.fn.woorkBlink = function(){
return this.each(function(){

    var $e = $(this);

    setInterval(function(){
        $e.addClass('blinking').animate({ opacity: 100 }, 750).queue(function(){
        $e.removeClass('blinking');
        $e.dequeue();
     });
},
1500);
});
};

})(jQuery);

and here is the HTML code:

<a href="http://woorkup.com" class="highlight">Woork Up</a>

<span class="highlight">This is a blinking text</span>
<span>This is a normal text</span>

<p class="highlight">Woork Up is a web community about Web Design, 
Tech News and Digital Inspiration with tutorials, code snippets, reviews 
of products and services for web designers and developers, and daily fresh 
news provided by users. Woork Up is currently available by invite only. 
<span class="highlight">This is a blinking text inside a blinking 
paragraph</span>.</p>

where all text elements with a highlight class blink by changing their color.

Demo

Woork Up

This is a blinking text
This is a normal text

Woork Up is a web community about Web Design,
Tech News and Digital Inspiration with tutorials, code snippets, reviews
of products and services for web designers and developers, and daily fresh
news provided by users. Woork Up is currently available by invite only.
This is a blinking text inside a blinking
paragraph.

Type and Font Inspiration from TypeGoodness – I only discovered TypeGoodness a few weeks ago, yet it is now become one of my most visited websites. Frequent updates, with articles covering many aspects of font and typography. An excellent variety of topics with the occasional free font for good measure.
Just when you thought you had an adequate selection of typographic and font related RSS feeds, new sites pop up without mercy. The incredible thing with the Internet is that there are so many doors still waiting to be unopened, by new unsuspecting people. Visit one new website, check out their blog roll and you nearly always find that next new ‘gem’. I make it my ritual, when I visit a brand new website or blog, to check out their recommended links or ‘friends blog roll’. It’s a great way to find those ‘underground’ or ‘niche’ websites and blogs.

This is how I came across Typegoodness. For the life of me I cannot recall with path lead me to find it, but I know it was through checking out the links recommended on other sites. And I realise it’s not a ‘new’ site per sai, and I am also sure many of you already have been aware of it. But for those that have not, I know you will enjoy it as much as I do.

I have linked back to TypeGoodness a number of times now on both my own website, ImJustCreative and my Tumblr and Posterous blogs.

About TypeGoodness

From the horses mouth so to speak: Typegoodness was created by Frederik Samuel to focus on all the beautiful typography around the world. This is a showcase, as well as a resource of inspiration and finding anything related to type. We cover anything from Digital, to Print, to showcasing free fonts.
You can also find TypeGoodness on Twitter

Submit Articles

As well as just reading articles, you can also sign-up to TypeGoodness and post your own articles. I have not yet done this, so am unsure about how easy it is to do so. But it’s something that could be worth checking out if tend to find new typographic treasures and like to share them with everyone else. If you have not yet visited TypeGoodness, then it could be worth doing. A healthy dose of archived posts will keep you busy for a while whilst you catch up.

Websites are bringing in more and more businesses to companies which are feeling the pinch of the global recession. And new companies are realising that a website is as important, if not more so, than every other aspect of their business. But it pays to get it right.

Following these four principles will help you generate a more successful website.

Bad marketing

Websites can fail in the same way as real-world businesses, but established businesses sometimes don’t have enough understanding of how websites work.
Websites don’t sell themselves. Open a new bricks-and-mortar shop in the middle of town and you’ll get a few passers-by popping in to see something they’ve never seen before, but if they don’t actively promote themselves, they’re likely to go out of business very soon.
The same is true with a website. Once a site is launched, and even before, active promotion is vital to its success.

Tips:
Make sure your marketing strategy promotes the website in advance of its launch. Have a pre-launch site on your domain, with incentives and calls to action, and actively get people to visit. An ISP’s default domain holding page is a marketing disaster.
Don’t spend all your budget on development and leave inadequate funds for marketing. Budget for a 50/50 split.
Consider investing in in-house training for web-marketing skills such as article-submission, blogging, etc.
Don’t make the mistake of thinking that adding your domain name to your stationery is enough.
Remember off-line marketing will sometimes produce better results in some cases.

Poor usability

Poor usability is more important for new site because 100% of your visitors will be new to it. In the same way you wouldn’t litter your bricks-and-mortar shop with obstacles, don’t put any on your website, such as flash intros and unnecessary sign-up forms. Usability can be improved by in-house testing using friends and family, but you need to know what you’re looking for in a usability test. Colour appreciation isn’t one of them.

Tips:
Find out what people want from your site, that is the number one objective. Make sure the thing they want is easy to find. And I mean real easy.
Remember, people will find it easier to walk out of your web shop than your real shop.
Use your friends and family to help with usability testing. They are people, right?
Don’t ask them what they think of the site. They will judge it as a work of art. Ask them to do things, then ask them ‘was it easy’, ‘did you get stuck’, etc.

No confidence in your site

A site must exude success and fulfillment. People will stay on your site if they feel confident that you can supply what they need. And they will spend their money when they have that confidence. Customers will be less likely to spend if anything breaks their confidence.

Tips:
ALWAYS include information about your company under ‘About us’ and contact details including phone number if you are selling on your site. If you hide your phone number, what else are you hiding?
Make sure all your pages follow a consistent design and that buying pages don’t take you off to another site (trusted payment gateways excluded).
Include promises such as delivery within three days or price match. Confidence improves when promises are stated.

Somebody else does it better

Research your market. Somebody else may already be doing what you do. They may have already gained the confidence in their customer. Will their customers suddenly switch to you? Your service must be better, faster, cheaper than your competitors.

Tips:
Have a unique selling point, such as free delivery. If your competitors are not doing free delivery, they may switch.
Publish testimonials from satisfied cutomers. They are your best PR.
Brand your product with your name. When people search for the product they will search for your brand.

I thought I would share with you my experience of PHP frameworks, and in particular a framework called CodeIgniter which I have been using a lot recently. A PHP framework is a platform which enables developers to quickly build web applications without having to re-invent the wheel every time they want to, for example, insert data securely in to a database. This article looks at CodeIgniter (http://codeigniter.com), an open-source PHP framework which in my opinion is fantastic.

The need for a framework

I am an English web developer who has been in the business for over 10 years. I started my business when I was just 17 and started coding in PHP when I was 21. I built my first PHP web application, which was a search engine for musicians, completely from scratch in 2003. It has since become a major success and I still proud of it, though when I look at the code I would love to re-build it knowing what I know today.

After working for many clients and after looking to try to develop my own ideas I soon realised that I was spending a lot of time re-producing the same code snippets on different sites. For example, by 2004-2005 I had written my own database interaction class as well as other functions which made life a lot easier when building websites, for example a function that formatted dates nicely.

This effectively was my own framework, but it suffered from not being very well organised and not very efficient. What I really needed was a tidy way of structuring my code, for example being able to separate my database interaction files from my view files which just dealt with logic (if statements) and the HTML. I had to wait a few years for the right solution.

Making those little ideas become a reality

I often get ideas for websites, some crazy and some simple. Most of them got written down and forgotten about because of the time required to build the ideas in to fully functioning websites. That was all until I discovered CodeIgniter in 2008. CodeIgniter in their own words: “is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks.”
In other words it’s a solution that provides most of, if not all of the tools you need to build your ideas in to websites. After downloading CodeIgniter, looking at their demo tutorials and actually having a play with it myself, I was very impressed indeed and realised I could make my ideas become a reality in very little time.

What about the other frameworks?

Before I jump in to my own opinions about how wonderful CodeIgniter is, let’s take a moment to explore the other frameworks out there. I am aware that there will be developers reading this who do not share my views and believe that the framework they use is best for them. I need to just point out that my findings and experiences of the different PHP frameworks have lead me to believe that CodeIgniter is best for me in my situation, but might not necessarily be the best for you in your situation.

Other PHP frameworks I have come across are:

Symfony is a very powerful framework with functions for practically everything. I worked at an agency that used this framework and though I delved into it a little bit, I never fully could understand it (also the manual for Symfony was very big and heavy!). However it was just right for the website that it powered and I know that a lot of big and well known websites use Symfony. Symfony isn’t that easy to install and does have a steep learning curve.

CakePHP, as far as I’m aware is very similar to CodeIgniter, so is easy to install and well documented. I have to say I haven’t tried CakePHP but would recommend you look also at this open-source framework as well as CodeIgniter if you want to make some comparisons between the two.

Zend in their own words, “is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase”. Zend is rather complicated and expects you to know quite a bit about coding, so is perfect for people who understood the previous sentence. Howerful Zend is also very powerful, widely used and supported by a large community.

Take also a look at this post: Best PHP Frameworks to build quickly complex web applications

Designers who are also developers

I don’t claim to be a hardcore PHP programmer and know plenty of programmers who are total experts in PHP. I would say that I’m more of a designer who became a developer. As a result of that I sometimes struggle trying to understand something like Zend or Symfony, as you found out above. What I needed was a framework that really explained everything clearly to me, was built specifically for people like me but also had a large community of users in the same boat as me.

I found CodeIgniter had all of these things. The minute I first landed on their website I knew that they had designed their framework with people like me in mind. After downloading and playing with CodeIgniter on my local machine I began to read their documentation and was worried that was where it would all end, but instead I found the documentation on their website really easy to understand and very clearly laid out.

I had soon built an idea that had been running around in my head in to a fully functional website, with user login, avatar upload, questions and answers submission and a very basic CMS. I built that entire website in a weekend, thanks to CodeIgniter. Every time I got stuck I simply searched the community forums, or asked a question and got a response very quickly, and that was only when I couldn’t find the answer I was looking for in the documentation, which was quite a rare occurence.

Tidy code makes all the difference

Tidy code, but also code you can re-use makes all the difference. CodeIgniter uses something called “MVC” which stands for “Model – View – Controller”. The idea behind this is you can separate your database functions (”model”), from your view files which contain your HTML (”view”), and link the two together (”controller”).

By using this practice your code is tidy and re-usable. For example, when building my questions & answers website I could simply just copy and paste the database call which selected all my users, rename the table name in a single line of code, then I would instantly have another function which selected all the questions. By using their “Active Record” class, you can easily put a ‘where statement’ in which only selects records from a certain category, for example.

After building one of my ideas in an entire website in just 3 days, I quickly found my dusty book of other old ideas and realised I could build these in to websites in very little time. How exciting!

Just have fun!

I suggest you download CodeIgniter, install it and have a play. Even if you don’t know much about PHP or programming I can guarantee that you will soon pick up enough of the basics that you will have a basic blog up and running in very little time, providing you follow their tutorials and documentation carefully.

Who knows, you might even end up putting your PHP developer that you hire in at a very expensive rate out of a job! Then again, if we all stick to what we are really good at doing, maybe not – but you can still have a lot of fun trying!

Though there have been many rumors floating around for the past few years about Apple moving from the decidedly unstable and lethargic AT&T network to the generally satisfying network of Verizon, I’m here to tell you it ain’t gonna happen. As recently as two weeks ago rumors sprang up again this time with photos of  parts of what looks to be a smaller version of the iphone.  At the same time Verizon was in the middle of its advertising campaign slamming both AT&T and the Apple iPhone. It immediately surprised me that these two things would be happening at the same time.  Would Apple really be ok with it’s hopeful future partner slamming its pride and joy? Doubtful.

Apple is well known for freezing out people who speak against it.  John Carmack, co-founder of ID Software, was quoted by the blog TUAW saying: “I’ll be invited up on stage for a keynote one month and then I’ll say something they don’t like and I can be blacklisted for six months.”

Even going back to the Intel relationship that took so long to cultivate, you can see how Apple’s hurt feelings and stubborn way of doing business ruffled feathers.  Much of this delay was caused by the ill-tempered words said between the two company heads.

Apple has proven that it’s partners will either play by their rules or not play at all.  Everyone should remember that Apple went to Verizon first with the plan of the iPhone. But Verizon acted like Verizon, never quick to adopt new and unproven handsets.  They passed and so Apple went to AT&T.  Without even seeing the proto-type AT&T agreed to Apple’s plan.  AT&T was in need of some revenue and had faith in the-way-of-the-Jobs.

There is nothing to suggest that Apple has forgotten the snub by Verizon and at this point there is no real reason for Apple to partner with Verizon. There are other options.  Both Sprint and T-mobile would certainly benefit more than Verizon by getting the next generation iPhone.

Sprint has the leading 4G network and has committed to moving past 3G in a major way with their WIMAX network.  They also have reasonable all-you-can-eat plans in place and have shown they are willing to take risky steps in order to separate themselves from the competition.  If Sprint was to get the iPhone they would almost certainly be propelled into the front past AT&T.  Sprint would, of course, have to avoid the same pitfalls that befell AT&T.  Spotty network coverage, even in highly populated areas, being the biggest factor.  If they don’t then both Apple and Sprint could see a large backlash from unhappy customers that may have just switched from AT&T hoping that Apple had finally found a fitting network provider for their beloved handheld.

T-mobile, in my opinion, has the most potential for not only improving its customer base and market share here in the US, but also for improving the iPhone itself.  T-mobile has just unveiled a new set of all-you-can-eat plans that are advertised at starting at half the price of its competitors and with any luck would be able to create a similarly competitive plan for the iPhone.  I would hope that Apple would seriously consider building in UMA capabilities so that iPhone could work like the UMA BlackBerry’s that T-mobile already runs.  T-mobile might be the only cell network provider that is not afraid of letting their customers use open Wi-Fi networks to take calls, thus not using their allotted minutes. This feature would also help eliminate the argument about T-mobile’s less than amazing coverage area. Even rural areas have Wi-Fi.  Imagine an iPhone that automatically switched to using the Wi-Fi network of your office or home and no longer cost you precious minutes….ah, what a wonderful dream. T-mobile is huge in the rest of the world and is hungry to capture more of the US market. Getting the iPhone on their side would be a massive win for the company.

Both Sprint and T-mobile would also be more likely to let Apple be Apple and control what it wants to control. Verizon has recently been quoted as saying that they are still hungry for the iPhone, and there is no doubt that the iPhone would benefit from its pre-existing network.  But Verizon should have done their homework and focused their ads on the AT&T and not the Apple iPhone.

Now, with all that said, I will admit that Apple has a tendency for misdirection and proven the power of rumors, especially rumors that last for years, to create frothing early adopters, but I don’t see them playing nice with Verizon anytime soon.  Apple has the power to choose and to bend its partner’s into the shape that they want.  Verizon has been and continues to be a very rigid company who is known for not bending to any imposed will.

In the process of developing a web site, there are many professional profiles that work on it, one of these is the SEO profile (Search Engine Optimization). If you are working in a web agency, usually there’s a professional profile that works only on search engine optimization, giving you the freedom to work with image editing, (x)html and css. But if you are a freelance, then you should spare money and do this your self.

I have worked as web designer and SEO, then I realized how important is, for a web designer, have at least, a basic knowledge of SEO. How many web designers, when are working on a layout, thinks about SEO? How many web designers really know the importance of the Page Rank? How many know that the massive use of Ajax can affect, negatively, the ranking of a page?

Yes, I think that every web designer, or developer, should know SEO. Ok you don’t need to know all the “secrets” behind the search engine optimization, but have a basic knowledge of SEO can help you in your freelance (and not only) work and receive more praises from your client.

Explain SEO in just a post is impossible, so I made a list of tips, tools and suggestion for a good optimization of a web page , that every one can do although is not a SEO.

Use Google Webmaster Tools

This is a must! The Google Webmaster Central is the best tools to help you improve the ranking of your websites. You can submit your sitemaps (xml), monitor your websites, keywords, ranking, and a lots of other factors that affect the ranking of a page. If you make web sites I really suggest you to register a google account and start using it.

Find the right keywords

Find the right keywords to optimize your web site ins the mainly part of the SEO workflow. Usually the suggestion comes from the customers, but in internet you can find a lots of tools that helps you to find the right keywords,one of this is the AdWords keywords tool.

This tool is used a lots from the SEO for find the right keywords, for use this tool must have a Google AdWords account (you can use your google webmaster tool account).

The tools help yu to choose the right keywords, analyze the trends, or you can also use the search-based keyword tool

Keywords or keyphrases?

The SEO world is always in changing, or better said, evolution, with the definitive die of the meta keywords’s importance, and the “evolution” of the internet user, the keyphrases are always more used and for my projects I prefer optimize for keyphrases and not for just only words. Here some further readers about this question:

Keywords and Keyphrases
Identify Your Niche and Targeted Keywords

Choose the right domain

The domain name is really important, or better is important to have at least one key in your domain name. This will increase your rank for the related key. So, try to choose the domain thinking about the key you will go to use for promote the web site. Here some further readers:

12 Rules for Choosing the Right Domain Name
Choose the Right Domain Name
The effective strategy for choosing right domain names

Google trends

Google trends is a good way to monitoring the of the search trends evolution located for country.

Title tag

The tag title is the most important tag, the keyword or keyphrase should be in the title. The title should not be more than 60 characters (some one say… ) and describe the page, the relevance of a keyword in the title is really important for all the most used search engines.

Keywords Tag

As Google confirmed, but this was already known, the meta tags keywords is not relevant for ranking, The meta tag keywords is useless.

Description Tag

The description tag is really important! Yes, I know, is not important for increase for the ranking, this is true, but is what google show in the SERP, if the page has not description tag, the bot will take the first part of text, so can’t be good.

Write a brief but good description, for each page, trying in a few words to describe the purpose of page. So is not important for your ranking, but, of course is a tag that you should consider for increase and attract more visitors.

Layout and SEO

Can a layout affect the ranking? yes, take care when you are designing a layout and remember always the first SEO rule: content is the king.

The classical two columns blog layout is a perfect layout for SEO! Gives to the content the priority , and in the source code too, and the sidebar is after the content. This is one of the lots of reason that make WordPress a really friendly search engine blog.

Write semantic and correct code

Write semantic and validated source code help the crawler to better read and interpret the page. Have a validate source code and semantic code help to increase the ranking, of course.

Div’s id and class names are important and relevant, try always to use the right and correct name for this, for example use:

rather than:

For the navigation bar use the following code:

rather than:

Use the alt for the images, put a brief description of the picture or the name and use the <ul> tag for menu:

<ul>
    <li><a href="#">text link</a></li>
    <li><a href="#">text link</a></li>
    <li><a href="#">text link</a></li>
</ul>

Use header, h1, h2, h3, em (emphasis) and bold for keywords. This doesn’t mean that you have to apply a bold to each words in the contents, but rather means that you have to write simply the text applying the right format to a paragraph. h1 is a title, you shouldn’t use it for a entire paragraph, or you shouldn’t use a span tag for a menu list as above.

Create a good internal links structure, linking the pages and use the anchor text in the link for keywords.

The anchor text is really important, the title attribute too. Try always, when is possible, to link the pages and put the keywords in the anchor.

Take also a look at this Fast Paper with some useful HTML quick guidelines:

The speed

A quickly load help the bot in the process of indexing the page in his database, a clean source code, image compressing and external request affect the speed of the web site and the indexing from the bot.

Avoid splash page

If is not necessary avoid the splash page.

Flash and Ajax

A massive use of Flash, or Ajax can decrease the ranking, so pay attention to not abuse of this technologies.

Conclusion

This post is just an overview about SEO. A post can’t be enough to explain the multitude of this “world”, what is SEO and how apply it at your pages. but I hope after this reader that you, if you didn’t, take care about SEO when start a new project. And for finish a collection of plugins, software and tools for SEO.

Plugin and Addons.

SEO quake extension
Rank Checker
SEO Toolbar
RankQuest SEO toolbar
SEO Open
Yslow for Firebug
Niche Watch Tool 2.0
User Agent Switcher

Software

Web Ceo
Link assistant

Tools online

Google Webmasters central
Google Analytics
Seomoz tools
136 SEO tools
SEO chat tools
68 Online SEO Tools and Resources
Multi rank checker
Key word density analysis tool

Good news: we have 8 invites for Google Wave! If you want to receive an invite the only thing you have to do is to leave here an original comment about Woork Up and retweet this post! Simple, no?

Remember to subscribe our Rss Feed and follow us on Twitter to be update about the winners! For my Facebook friends here is my profile. Good Luck!

This post illustrates how to design simple call-to-action buttons (inspired to Woork Up buttons you can find on the home page) using Photoshop. I prepared a Photoshop file you can download and reuse on your design projects. I hope you’ll find useful!

Design the background shape

Create a new layer and add a new shape using the shape tool. Set the radius parameter to 10px for rounded corners:

Select the layer with the shape and add the Gradient Overlay effect:

Add the Bevel and Emboss effect:

Add the Stroke effect. Set size to 1px and position to outside.

Here is the result:

Add text

Now add a a text over the shape and apply the Outer Glow effect:

Here is the final result:

Download the source file for Photoshop.

Some days ago my friend Grace Smith launched Freelance Feed a new project that was created to act as a centralized source of quality resources for all freelancers. It serves as a hand-picked aggregator of the most valuable articles, resources, tools, applications and tips available to the freelance community all in one place. The Freelance Feed even features a growing collection of e-books and guides that would fit neatly into any freelancers book shelf.

Grace: I had the idea over a year ago and bought the domain soon after, unfortunately due to work demands and my schedule I wasn’t able to work on it until one weekend this August. I finally finished the theme design last week and will continue to tweak and add new features over the next few months, including a community feed that users can submit articles to.

You can follow The Freelance Feed at: http://thefreelancefeed.com/,
Subscribe to RSS Feeds http://feeds.feedburner.com/TheFreelanceFeed
Twitter: https://twitter.com/freelance_feed

One of the biggest complaints I hear from prospects as they make their initial call to our offices is that their previous web development firm didn’t move quickly enough or that the process simply took too long and was too expensive. I am always cautious to jump in and say “yeah screw those guys… hire our firm… we’re much faster and our rates are better!”

That type of self-promotion would obviously be the kiss of death. I know all too well that the previous firm more than likely worked diligently on completing their assignments on time. In fairness, there are firms that get in over their heads and have too much on their plate, but from my experience, I know that time issues typically fall in the lap of the prospect’s perception of web design.

Web design/development is a problem solving art

Because web design/development is a problem solving art, it is important to document and log each “problem” as they arrive. It is equally important to document and log how you and your firm went about solving that problem.

For example: If you took your car to a mechanic because it was smoking and chugging and coughing, and you handed over the keys, dropped the car off, and came back the next day to a car that wasn’t fixed and a bill that was already $2500.00, you might freak out and say “why did this cost so much and why isn’t the car fixed already?” If the mechanic simply said to you, “it costs so much because we’ve done a lot of work and the car is in sad shape,” you might get a bit testy and chances are you aren’t going to be in any mood to refer that mechanic to a friend or family member. In fact, you’d probably take your car to another mechanic and complain that the last guy took too long, didn’t complete the project and the costs were entirely too expensive.

Now for an opposing example: Let’s say you took the same chugging, smoking car into the mechanic’s shop and turned it over and returned the next day to a car that still wasn’t completely finished and the bill was already $2500.00. Initially you may freak out but once the mechanic explains that they’ve replaced the head gasket at 5.5 hours, purchased 3 new hoses at $85.00 a piece and installed them at 4.0 hours, they drained the transmission fluid and replaced it at 1.5 hours, and while replacing the head gasket they noticed another glaring problem that needs to be fixed and they should be done with that operation by 10:00 AM tomorrow, your reaction will more than likely be much different than in the previous example. Why? Because the mechanic laid out the problems, they explained the labor and they clarified what remained to be done in order to have the car in optimum operating condition.

All of this seems so elementary in nature. All great web developers meticulously lay out their work in a way that their clients can clearly see the justification in time and price right? Apparently not.

Using Project Management Tools

One popular tool our firm uses to combat this misinformation and perception gap is BaseCamp by 37Signals. With BaseCamp, our company can create projects, log time, archive communications, store related files and keep a running tab of all problem-solving issues that arise in the development process. Anytime a task is performed, it is diligently logged into BaseCamp and our clients receive an email update, with a link to that particular post. There they can download examples, graphs, images, files and anything else that corresponds with that portion of the process.

(We pay 37Signals to use their service and they are in no way sponsoring our firm and we are receiving no compensation of any kind for this article)

What we have often found is that our communication may go unanswered for 3 or 4 days. But that’s OK because we know that the client received our alert in a timely manner and we know that the client now has a clear understanding of everything that went into solving that particular problem. If time becomes an issue down the road, we can show them where their lack of engagement slowed the process down dramatically. When the client begins to understand that their slow response actually cost them time and money, they typically begin to engage more appropriately. This undoubtedly increases your turn-around time and allows you to recognize more profits as your projects are not being strung out over longer periods of time.

Once our firm became more proactive in the logging process, we noticed a drastic decrease in the number of time complaints and cost complaints. Now when a client questions our processes, our timeliness or our costs, we simply export a full-length log of everything that has gone into the process and hand it over to them. Typically, when they see the entire process in black and white, they realize that getting from point A to point B in web development isn’t as simple as they once thought and they are generally more likely to continue their project with your firm.