Advertise here with BSA

Did you know that bad business habits can hurt your freelance design business?

It’s true, bad habits can keep you from earning to your full potential. They can also cost you money if they cause client dissatisfaction.

In this post, we’ll take a look at sloppy business habits you need to break. If you liked this post, you may also like 3 Freelancing “Bad Habits” That Cost You Money.

Habit #1: Not Asking for Testimonials

You finished the project and the client is thrilled. They’ve written you a nice thank-you letter for your work.

You probably think it’s time to move on, but you’re wrong! Now is the time, while the project is still fresh on your client’s mind, to ask for testimonials about your work.

Too many freelance web designers are hesitant to ask for testimonials. They may be too modest or they may simply forget. However, this is a mistake.

Good client testimonials can mean the difference between winning and losing a project.

Habit #2: Not Staying in Touch

Quick quiz–when was the last time you contacted your first client?

If they are still in business, you should be in regular contact with them as well as with all of your former clients. There are several reasons for this:

• If they needed your web design skills once, they may need them again.
• They may change positions and move to a new company that needs your skills.
• They may learn of someone who could use your skills.

It’s easy to lose touch with people, but if you’re in business (and freelancing web design is a business) it’s not a good idea to lose touch with your clients.

Of course, you don’t want to harass them with daily emails, but there is usually no harm in checking in every month or so just to see how things are going. If you’re not doing this, you’re probably not getting all the business that you could be getting.

Habit #3: Not Keeping Adequate Business Hours

As a freelance web designer, you have no boss. There’s no time clock to punch when you start or finish work.

Sadly, some freelancers get into the bad habit of starting late and finishing early. Of course, this is fine if you are getting all of your work done and you are satisfied with your income.

Too often, however, freelancers procrastinate and don’t really allow themselves enough time to get the job done properly. This can lead to missed deadlines and/or sloppy work. All of which leads to unhappy clients in the end.

If this is you, quit it right now. Learn to manage your time well and make sure to allow enough time to do a good job on each project.

Habit #4: Not Keeping Your Home Office Clean

You’re rushing around–meeting deadlines and marketing your design business. It’s oh-so-easy to let housekeeping slip.

After all, your office is at home. It’s not like anyone ever sees where you work, right?

Well, there are at least three reasons why you should keep your home office neat:

• Things get lost in a messy office. Where is that design book you bought, but never read? If your office is messy, it could be under any of those stacks of junk. Even worse, you might lose records you need for your business. Where are your copies of last year’s receipts? You need them for your taxes.
• Someone may stop by. Just because you don’t usually have clients over to your office doesn’t mean that you can count on them never stopping by. What would your clients think if they saw your office right now? And don’t forget Google+ Hangouts and online conferences, where your messy office might be seen in the background.
• A mess can be disheartening. If you look around and see nothing but piles of paper, you may become discouraged. You may work at less than your peak efficiency. Never mind that the piles are months (or maybe years) old. Having stacks of paper around will make you feel overwhelmed.

Habit #5: Not Being Careful About Your Social Networking

You never know who is looking at your social media profile. That’s why it is really important to watch what you say or do. Something that is funny to you and your close friends may be misunderstood by others.

Remember that what you share online can be shared and reshared. You won’t always be able to control who sees it. The final recipients may not be those you originally had in mind.

Your social media profile is part of your online reputation. For a freelance designer, reputation is everything. So, be extra careful about yours.

What Do You Think?

I’ve listed some sloppy habits that can hurt your web design business. Nearly all freelancers struggle with these habits every once in a while. But, be careful if you find yourself falling into one of these habits on a regular basis.

Did I miss any sloppy freelance habits? Share your thoughts in the comments.

Image by amishsteve

Advertise here with BSA

Advertise here with BSA

Over a fourth of all workers are self-employed according to some studies, and now you want to join them. You’ve decided to become a freelance designer or other freelancer.

You’re especially looking forward to:

• Not having a boss
• Picking your own projects
• Setting your own hours
• Working from home

But, hold on a minute. You can have all that…maybe. However, if you’re thinking about freelancing design there are some things that you really need to know before you start.

In this post, I’ll list some freelancing details that many bloggers and gurus “forget” to mention. By considering these details up front, you’ll avoid disappointment later on and get more from your freelancing design career.

If you enjoy this post, you may also like 12 Reasons You Shouldn’t Freelance.

Not Everyone Can Freelance

To be able to freelance, you need to have a marketable skill or a product or service to sell. Some careers just don’t lend themselves well to freelancing and some people are not well suited to freelancing.

If you’re thinking of becoming a freelancer, spend a lot of time thinking about the product or service you will sell. Ask yourself why an individual or company would need that service (and be honest). Remember, competition is fierce.

It’s not enough to like what you intend to do as a freelancer–somebody also has to need it and be willing to pay money for it.

Freelancing design also takes a lot of patience and perseverance. It’s a fact that some people do better (and are happier) when they work for someone else.

Freelancing Is More Than Doing What You Love

Many freelancers are drawn to freelancing because they think that they will only have to work on those projects that interest them. The boring projects, the unchallenging projects…they’ll turn those down (or at least they think they will).

The truth is that sometimes the boring, unchallenging design projects are the ones that actually make you money. If you always turn them down, you may wind up short of cash.

Also, there are a lot of aspects to freelancing–marketing, accounting, paying taxes…that new freelancers usually don’t think about. In fact, if you’re used to working in a corporation, these roles were taken care of by someone else. As a freelancer, you’ll find that you have to do a little bit of everything because there is no one else.

You Still Have to Work for Others

If you’re leaving traditional employment because you don’t want to answer to someone else, think again.

Unless you can create and market a product, you will still have to answer to someone. It’s just that instead of answering to a “boss,” you’ll answer to your client (and in most cases, there will be more than one). You will need good people skills because some clients are very difficult to work with.

Even if you do create a product, you will still have to answer to your customers. You’ll become the customer satisfaction department and the customer fulfillment department all rolled into one.

You May Make Less Money

Many freelancers earn more money as a freelance designer than they did in traditional employment. Would-be freelancers hear this and look at freelancing design as a way to get instantly rich.

The fact is, however, that you may make less money as a freelance designer–at least at first. There are several reasons for this:

• Many new freelancers fail to take into account that most freelancers don’t bill for 40 hours a week. Therefore, they undercharge for their services.
• Many new freelancers also forget to count the value of their employer-paid benefits when setting their rates. Once they add those benefits back in, they actually wind up with less income.
• In the U.S. employers pay a payroll tax that self-employed individuals must pick up (the so-called “self-employment tax”).
• The famous “feast or famine” cycle can be very real, especially for new freelancers who haven’t mastered marketing skills yet.

Loneliness Can Be a Real Problem

While experienced and successful freelancers figure out ways to overcome loneliness, it is still a factor for many new freelancers. Even if you don’t consider yourself a social person, it can be disconcerting when days go by without you seeing anyone else face to face.

Although freelance designers interact with people through email, social media, and telephone calls–those aren’t the same thing as having someone right there with you. Plus, not having someone else there means that you don’t have anyone to run ideas by or to ask questions of.

To overcome the loneliness of not having colleagues nearby, I suggest:

• Cultivating local friendships
• Finding a mentor
• Participating in social media groups and forums geared towards your specialty

Vacations Will Require a Lot of Coordination

Back when you were working for someone else, you had to ask permission to get a few days off–remember how it was? What a hassle, you thought.

You may think that planning a vacation will be easier once you are a freelancer, but for freelancers planning a vacation can be complicated.

For one thing, for freelancers there’s no such thing as a paid vacation. So, it will be up to you to save enough money to make sure that you cover any loss of income during the days that you don’t work.

Also, in my experience at least, some clients seem to have an almost eerie radar about when I plan a vacation. No sooner do I get one planned than they contact me with one of the biggest projects that I’ve had all year. This has happened more than once.

For these reasons and others, many freelancers find themselves hauling their work along with them on their vacation. But that really isn’t very restful, is it?

Your Turn

The point of this post is not to talk you out of freelancing design, but rather to give you a heads up on some common problems freelancers face so that you can think about them before hand.

If you’re an experienced freelancer, feel free to add any other factors that you think a new freelancer or someone considering freelance design (or other freelancing) needs to know.

Image by z2amiller

Advertise here with BSA

Advertise here with BSA

I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect.

More specifically I have seen a couple countdown widgets on landing pages. These are numbering systems for websites which count down to a specific launch date. You could alternatively use this code to create a live clock on your website – there are so many uses available! Check out my simple tutorial below and see if you can implement a similar ticker into any future web projects.

Live Demo – Download Source Code

Selecting Graphics

I am admittedly not an amazing Photoshop design guru. I can put together some unique web layouts and magazine themes – but I can’t create a whole rolodex stack from scratch. This is where the large network of PSD freebies comes in handy.

I really love this flip-clock countdown for both the gradients and textures. This was created by Orman Clark who also built the website Premium Pixels. Just download the PSD and extract a single card stack background. We will use this same background for each of the time slots – days, hours, minutes, and seconds.

However I want to use dynamic HTML inside each div to update the counter. So when you extract these blocks make sure you hide all the text layers, including the bottom labels. Or even easier just download my tutorial source code above and use the included images.

Core HTML Layout

For this example we don’t need a whole bunch of confusing HTML markup. I’m using a containing div #clock-ticker set with a clearfix class, and inside we have 4 different floating divs. These are set to the class .block and each contains a single column of the countdown clock.

<div id="clock-ticker" class="clearfix">
	<div class="block">
		<span class="flip-top" id="numdays">8</span>
		<span class="flip-btm"></span>
		<footer class="label">Days</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="numhours">14</span>
		<span class="flip-btm"></span>
		<footer class="label">Hours</footer>
	</div>

	<div class="block">
		<span class="flip-top" id="nummins">34</span>
		<span class="flip-btm"></span>
		<footer class="label">Mins</footer>
	</div>

Inside a single block area we have three core sections. The top two span elements contain the top and bottom portion of each rolodex card. By splitting up the card we could use some further jQuery UI animation effects. But this goes much further than I’d like to cover here – although it is possible to build off this preset code.

#clock-ticker { display: block; margin-bottom: 15px;}
#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; }

#clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }
#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; }

#clock-ticker .block .label { color: #fbfbfb; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif; text-shadow: 1px 1px 0px #333; }

The last area contains the label text for each card. This is held inside an HTML5 footer element and styled with a bit of CSS. I should point out how many of these elements are set to a fixed height. This means we can ensure the layout won’t break even if our numbers were “too big” and pushed outside the box model.

Detecting Clock Numbers

Inside the top span area of each column I’ve appended some default numeric values. You can change these to whatever you’d like and the script should still count down directly to 0. But just remember you don’t need anything in the bottom section, and actually I built it this way to keep the code cleaner.

Our goal would be to then check each of these numerical values on pageload and set them to static variables. You can see I have done this within the first few lines of JavaScript. The jQuery library is included in the doc header, but all our JS codes are actually inside a script tag towards the bottom of the page.

<script type="text/javascript">
$(document).ready(function(){
	var theDaysBox  = $("#numdays");
	var theHoursBox = $("#numhours");
	var theMinsBox  = $("#nummins");
	var theSecsBox  = $("#numsecs");

These variables target the span elements themselves, and not the internal content. We do this in a different set of vars because the numbers will be updated every second. I’ve stuck with plain JavaScript and the setInterval() method.

Using this predetermined timing function we offer an internal set of code to call every set number of milliseconds. In this example we call the function code every 1000 milliseconds, or 1 second. Let’s look at some example syntax first:

var myNewIntval = setInterval(function() {
   /// we use code here
   }, 1000);

The method only requires 2 parameters with the latter being a number of milliseconds. The first is the code you wish to execute every set interval of time – most ideally we want to use a custom function. Alternatively we could write a new function name and call this, but we aren’t saving much space either way.

JavaScript setInterval()

Even if you aren’t totally familiar with this method don’t worry too much since it’s easy to catch up. Let’s push forward with the script and look at our real-live example.

var refreshId = setInterval(function() {
  var currentSeconds = theSecsBox.text();
  var currentMins    = theMinsBox.text();
  var currentHours   = theHoursBox.text();
  var currentDays    = theDaysBox.text();

Inside the interval function we’re setting another four variables. These will be updated each second to contain the new value of each span element. Since we’re counting down to a specific number I’m going to use a very basic set of logic to check the timers.

In layman’s terms we need to see if any of the numbers reach 0 during any given interval. If that’s the case we can’t let it turn to -1 in the next second, and so instead we deduct a value from the next set (secs -> mins -> hours -> days).

Base Timing and Logic

Anybody who is familiar with basic if/else statements should be able to follow this script. We’re going to check at each interval if any of the numerical values have hit 0 – or if more than one value has hit 0.

For example, if the seconds and minutes have reached 0 then we need to remove 1 hour from the clock and reset the mins/secs to 59. Same when the hours, minutes, and seconds reach 0 and we need to remove 1 day from the clock.

if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
  // if everything rusn out our timer is done!!
  // do some exciting code in here when your countdown timer finishes
} else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
  // if the seconds and minutes and hours run out we subtract 1 day
  theDaysBox.html(currentDays-1);
  theHoursBox.html("23");
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0 && currentMins == 0) {
  // if the seconds and minutes run out we need to subtract 1 hour
  theHoursBox.html(currentHours-1);
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0) {
  // if the seconds run out we need to subtract 1 minute
  theMinsBox.html(currentMins-1);
  theSecsBox.html("59");
} else {
  theSecsBox.html(currentSeconds-1);
}

I’m using the jQuery .html() method to set the internal value for each span. The very first if() {} statement checks for the timer completely running out, and you can place any code inside here. This could fade out and display a signup/registration form. Or it could re-direct visitors to a new page once the timer has finished.

There is definitely a lot you can do to customize this code for your own ideas. The clock will always tick down in this code, but that is easy to change. And if you refresh the page all values will reset to their original static setup inside the HTML document. Unfortunately session variables are controlled on the server end, so there’s no way to do this using solely JavaScript.

Live Demo – Download Source Code

Conclusion

I hope this quaint clock ticker can be useful to some web designers. It’s a cool widget when you need it, but it’s also hard to just squeeze into a web layout. Practicing with JavaScript is also handy the more you move into web development techniques. Feel free to download my source code and play around on your own. If you have any ideas or suggestions you can share with us in the post discussion area below.

Advertise here with BSA

Advertise here with BSA

I remember how popular web design was even 5 or 10 years ago. Kids in high school were teaching themselves HTML and building small web pages from scratch. And nowadays this is possible because of the thousands of free tutorials and code online. Open source has dramatically shaped an industry of high-tech and high demand.

But it can still be difficult pinpointing exactly what you want to learn. Beyond straight HTML/CSS there is jQuery for frontend animation, PHP/RoR for backend web apps, and even Java/Objective-C for mobile apps. With this collection you should be able to track down a few tutorials in whatever topic catches your interest. If you notice we’ve missed a resource feel free to share with us in the post discussion area below.

Pixel2Life

Smashing Magazine Coding

W3Schools

Tizag

Webmonkey

Treehouse

Sitepoint

Student Web Design Guide

A List Apart

Web Design From Scratch

Net Tuts+

Web Design Tuts+

CSS Tricks

Developer Drive

Think Vitamin Blog

Ajaxian

.Net Magazine

Tutorialzine

24 Ways

Design Instruct

PHP Academy

Advertise here with BSA

Advertise here with BSA

There’s no denying that WordPress has become the leading CMS on the market. Anybody looking to launch a simple website would be foolish not to consider WP. It has the largest amount of free themes and plugins – not to mention the huge base of developers working to push out bug fixes every day.

But just working with the default WordPress options is not enough. That’s why I have this collection of 26 amazing resources for those interested in learning WordPress. You can find hundreds of free templates & plugins to mess around with. Additionally some web developers have written tutorials on how you can edit code and customize your installation. Spend some time going through these links and be sure to share your thoughts with us in the post discussion area.

Creative Office Aquarium

Office of Paku, Hamburg

MySpace

A Grown Up Job

New office!

Home Office Brooklyn NYC

Macbook Desk Setup

London Creative Space

Cluttered Desk

Freelancing Outside

Workstation

Quaint Home Office

Office Space

Office at Night

Dual-Monitor Work Room

Dual-Monitor Side View

Cleared Open Office Space

Freelance Office in Seattle, Washington

Corner Office Space

Working Freelance

Auxillary Desk

Office Cubicles

Home Desktop v2.0

2011 Home Office Desk

Office on the Ocean

Super-Simple Work Station

Cocoia Office

Ottawa, Canada Home Office

Apple Cinema Display

Home Office Furniture

iMac Custom Setup

Home Office circa 2009

Architect Home Office

Reorganized Office Salem, Massachusetts

Old Desk Setup 2005

Our Cavernous Office

Freelancing from Home

Sun Room & Home Office

Working on Windows XP

Big Space

Advertise here with BSA

Advertise here with BSA

Freelancing seems like one of the most lucrative job titles. And it’s true that setting your own hours and working on interesting projects can be a lot of fun. But there is also the matter of looming deadlines and touchy clients you need to keep satiated.

One of the most important tools for a freelancer is their work station. You can’t get anything done if your work area is poorly setup, cluttered, or too small to fit inside. In the gallery below I have put together 40 brilliant examples of freelance offices, both home & industrial. Your creative space is truly a sacred realm where you must remain focused and motivated. I hope some of these photos can enliven your spirit to continue designing and freelancing.

ThemeShaper Blog

WP Recipes

Blog Perfume

Theme Lab

WPBeginner

WordPress TV

WPDesigner

WPHub

WP Garage

WP Engineer

WP Inspiration Gallery

WP Themes Gallery

WPZoom

WPCandy

Digging into WordPress

WP Tuts+

WP101

wpSnap

Code Visually

WP Kube

WP Site

WP Theming

WP Fractions

WPShout

WordPress Tavern

WP Hacks

Advertise here with BSA

Advertise here with BSA

In this post we have put together some high quality free fonts. If you like these fonts you might also want to check out our previous posts below.

30 Free And High Quality Fonts

50 High-Quality Free Fonts for Professional Design

Silverfake 

Metropolis

Intro

Graduate 

Bobber Typeface

Grammatica

Nougatine Font

GEARED

Henry

Valentina typeface

Frontage Typeface

WELLFLEET

TITAN ONE

FORO

TROCCHI

SIMONETTA

OSWALD

ITALIANNO

ZNIKOMITNO24

Sornette

Piximisa

Deathe Maach NCV

Advertise here with BSA

Advertise here with BSA

Using jQuery we can build some incredible web-based applications. The animations and manipulation of DOM elements using jQuery are much more intuitive than coding regular JavaScript. Because the syntax is so minimalist it’s possible to scale a very complex idea within a few hours time.

In this tutorial I’ll demonstrate how we can build an HTML5 invite form and check the results through jQuery. I haven’t gone into any backend PHP as this isn’t always the best solution for an invitation system. You may want to tie into another e-mail campaign such as MailChimp or Campaign Monitor. But with this technique running the frontend you can quickly implement a backend language to manage the e-mail submissions.

Live Demo – Download Source Code

Coding the Index

Start by creating a new index.html file and include a basic HTML5 template. I’ve used the skeleton found in Coda’s HTML clips, and I also duplicated the code below. Feel free to copy/paste into your own document and edit as needed:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>E-mail Invite Form Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

</body>
</html>

One other thing to point out is that we’ll need the jQuery library included for our script later on. It would be easier to add this now – and we can even use the online Google CDN so we don’t need to host anything. Inside the header right underneath the stylesheet link add this line of code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And now we’re all set to build inside the body. All I’ve done is setup a wrapper div with some headings talking about the form. To spice up the layout I’ve also included a small envelope icon floating off to the right side.

E-mail Invitations

The purpose of our form is to grab the user’s e-mail address and somehow keep a list of interested users. We just need an HTML5 e-mail input along with a submit button to handle the verification.

<div id="completeform">
	<span id="error"></span>

	<form id="inviteform" name="inviteform" method="post" action="#">
		<input type="email" name="email" id="email" placeholder="E-mail address" autocomplete="off" autocorrect="off" autocapitalize="off">

		<div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Send</button></div>
	</form>
</div>

I wrapped the form inside a div #completeform so that we can use animations later. Once the user successfully submits we want to drop the form opacity and display a success message. Also notice I have the form’s action set to a hash(#) because the submission process is taken over by jQuery. You could put a PHP or Ruby script in here – but for this scenario I’ve left it blank.

I’m also using a couple new attributes on the input field. First our type is set as “email” so that mobile browsers can display the appropriate keyboard. Chrome and some webkit browsers will use this to detect if the user hasn’t typed an appropriate address. The attributes autocorrect and autocapitalize are targeted specifically to mobile browsers. It can be a real pain typing on the iPhone/iPod Touch keyboard, and we want to make this signup easy as possible.

The span with an ID of #error is also important to the script. This is set to display: none; inside our CSS so that nothing appears at first. But if the user submits an invalid e-mail address we quickly display the error message.

Coding Gritty jQuery

There isn’t a whole lot to say about our page styles. The file contains very basic properties using some CSS3 linear gradients and box shadows for the form submit button. If you’re interested check out the source file from my live demo. Otherwise we can jump right into the jQuery.

Let’s start with a simple function checking for valid e-mail addresses. I have used a long string of Regular Expressions to verify if the text string matches a standard e-mail syntax. And because I’ve written this code in a function we can reuse it over and over again.

function isEmail(email) {
	// pass regex for validating an e-mail address
	var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	return regex.test(email);
}

The other function block is called when we successfully match an e-mail address. Inside here you could add an ajax() call to pass the address into your database, a local .txt file, or even message yourself in an e-mail.

function completeInviteForm() {
	setTimeout(function() {
		$("#completeform").fadeOut(400, function(){
			$(this).before('<span class="msg">All set! We will be in touch.</span>');
		});
	}, 1100);
}

Currently the function just fades #completeform out to 0% opacity over 400 milliseconds. Then inside the callback function(after the animation is complete) I’ve appended some HTML saying the invite request was successful. I’m using the setTimeout() function only for this example so you can see the animation unfold over time.

Handling the Form Submission

Right before our opening clause I have setup two variables pointing to page elements. This code gives us easier access to the submit button wrapper and the input text field. We need these elements to hide the submission button and pull the current e-mail value, respectively.

var erdiv    = $("#error");
var btnwrap  = $("#btnwrap");

$(document).ready(function(){
	$("#sendbtn").live("click", function(e){
	  // once the send button is clicked we perform some functions
	  // and setup a few variables
	  e.preventDefault();
	  var emailval = $("#email").val();

The statement e.preventDefault(); is fairly common for live click events. This stops the default action from taking place, and we can then execute code without the page refreshing. Focusing on the emailval variable we can begin imposing logic on the e-mail address.

if(!isEmail(emailval)) {
	erdiv.html("enter a full e-mail address!");
	erdiv.css("display", "block");
}

if(isEmail(emailval)) { // email address looks good!
	erdiv.css("color", "#719dc8");
	erdiv.html("just a sec...");
	btnwrap.html('<img src="img/loader.gif" alt="loading">');
	completeInviteForm();
}

The first if() statement checks user input against our validation function as false. This means if the user’s input does not match the regex for a natural e-mail, we respond by setting the error HTML and display: block; style.

Now the second logic statement is executed only if the user’s e-mail passes our validation function. Then we know the string at least looks like an e-mail, so we can begin processing this data. If the error block is already displaying we update the inner text – but if it was never displayed the user does not ever see this message.

Finally we need to hide the submit button to prevent users from submitting twice. Our code replaces the inner HTML with a loading gif image instead. Then ultimately we reference completeInviteForm() which carries out the final bits of JavaScript.

Live Demo – Download Source Code

Conclusion

I hope this tutorial can give you some insight towards coding municipal jQuery functions. The e-mail validation is an important aspect to managing web forms – but with so many startups around invitation systems are hard to come by. With this Ajax-style method you can even offer functionality without refreshing the page!

Feel free to download my demo source code and play around on your own. This is the best way to become familiar with HTML/CSS/JS and even port code into your own projects. If you have similar questions or feedback be sure to let us know in the comments discussion area.

Advertise here with BSA

Advertise here with BSA

A lot of web designers – both beginning and advanced – ask me how they can increase their hourly rate.

They want to work fewer hours and make more money so they can have the things they want without sacrificing time with their family and friends.

Some web designers know this is possible, they just don’t know how to do it. Other web designers think it’s a “pie in the sky” kind of dream.

I’m here to tell you, making $125 (or more) per hour as a web designer is not unheard of. In fact, it’s the average rate my students are able to make after completing our training programs at LearnWebDevelopment.com.

For the past 8 years, I have worked with tens of thousands of beginning web designers and, as a result, I’ve developed the best way to start and run a web design business.

For both beginning and advanced web designers, one piece of advice comes up frequently: To increase your hourly income, build your websites in WordPress.

Over the past few years, since I started recommending WordPress, it’s only increased in popularity and demand. It’s gone from a simple blogging platform to the most popular content management system around. It’s so popular that clients are now asking for WordPress websites.

If you’re still not using WordPress to increase your web design income, what are you waiting for? Here are three ways WordPress will make you a more profitable web designer:

1. WordPress is open-source (that means it’s free!)

For beginning web designers, money is tight. Several thousand dollars, up front, for typical web design software means you’re working for weeks – and doing multiple projects – without pay just to buy your business tools.

For some, this route might not be an option. Luckily, there’s a better way.

With WordPress, your websites will look just as good (if not, better) and you won’t have to invest a dime to use WordPress. You can get started today with almost no investment.

This will make you more profitable because you’re saving money up front – and you’re saving money over the life of your business because you don’t have to buy the latest upgrades every year.

Then, you can keep more of your profit for other things – like advertising to bring in even more clients.

2. WordPress websites can be built in a fraction of the time

If you’ve ever built a website from scratch, then you know how much time it takes. A typical HTML website can take weeks. But, the great thing about WordPress is you can charge just as much as an HTML site, but you can build it in a fraction of the time.

And, with WordPress plugins, you can increase your project fee while barely increasing the hours you spend on it. For example, your site can include functionality that clients would spend a lot more for (like e-commerce or a slider) with just a few clicks.

As an example, when students come into my training program they’re used to building HTML websites in about a week. If they charge $1,000 for the website, they are making about $25 per hour.

After they finish my training program, they can make a custom WordPress website in less than 8 hours.

I also teach them how to increase their income, but for this example, let’s say their project fee stays the same. At $1,000 per website, they just increased their income to $125 per hour.

At only 8 hours per website, you might think I’m talking about cookie-cutter, boring websites. I’m not. I’m talking about creative, custom WordPress websites that include functionality like shopping carts, sliders, social media integration and more.

3. WordPress is easy to update

One of the best things about WordPress is how often they update their technology. These updates give you a few options, as a web designer, to make even more money.

First, you can charge your clients a monthly fee to keep their websites up-to-date. Then, you might spend an hour or two per month updating their WordPress installation, theme and plugins.

With a few clicks, you can have a WordPress website updated, without having to take a big bite out of your busy schedule. I have some students who use this model to build up recurring income. Then, they can take on fewer one-time projects and spend more time away from the computer.

As you can see, using WordPress is one of the smartest ways web designers can build quality websites quickly and increase their web design profits.

Plus, the more you work with WordPress, the faster you’ll get and the more money per hour you’ll make.

Sign up below to learn the fastest ways to build WordPress websites, how to find clients who will pay you what you’re worth and how you can make $125+ per hour, even if you’re just getting started.

Advertise here with BSA

Advertise here with BSA

In this roundup we have collected some mini icon sets to download. Enjoy!! If you like these icons you might want to check out our previous posts below.

35 Free Icon Sets

43 Free Social Media Icon Sets

25 of the Best Blogging and Social Media Icon Sets

Micro Icon Set

Minicons.

Bijou 

Pixel UI Icon Set

12 px glyphs

Mini glyphs

Glyph UI Icon Set

Pursuit

Strabo II

Pixicus Icon Set: 106 Pixel Perfect Icons

Minimicons

Free Mini Vector App Icons

Mimi Glyphs free psd file

Mimi Glyphs

50 Crisp Web UI Icons

Vento Icon Set 

160 Tiny Icons

16px Glyph Icons

Washing Machine Icons

Soft Media Icons Set Vol 1

Soft Media Icons Set Vol 2

Pirate Icons

128 16px Toolkit Icons

Shopping Icons

Advertise here with BSA