Archive for November, 2010

Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs

Advertisement in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
 in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs  in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs  in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs

In this post we release a yet another WordPress theme: Sight is a powerful WordPress 3.0.1-ready theme which will work best for magazines and blogs. The theme was designed in modern minimalistic style and has two views: the standard blog view and a grid view. A big image slider on the top gives you extra ability to show the most important content. The theme was designed by WP Shower exclusively for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.

Sight-500px in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs

Download the theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

Preview in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs

Features

  • WordPress 3.0.1 Ready
  • Theme Options page
  • Two Pagination types (Default + WP Page-Navi support & AJAX-fetching posts)
  • Valid XHTML 1.1
  • jQuery-powered Featured Post Carousel
  • Custom Widgets
  • 2 Custom Menu Locations
  • jQuery-powered Drop-down menu
  • Nested comments
  • Two post view types: standard blog view and a grid view
  • Google Analytics Ready
  • Custom Logo Upload
  • Gravatar support
  • Search Engine Optimized
  • Browsers compatibility (IE 7 , IE 8 , Firefox, Opera, Safari, Chrome)
  • Built in support for Social Bookmaking on Blog Posts – tinyurl.com API support for URL shorting

Main Page in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Front page (large preview)

Comments in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Comments (large preview)

Custom Widgets in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Custom Widgets (large preview)

Dropdown in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Drop-down menu (large preview)

Gallery in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Gallery (large preview)

Grid View in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Grid View (large preview)

Category in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Category (large preview)

Single in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Single post (large preview)

Slideshow in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Slideshow (large preview)

Social Widget in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Social Widget (large preview)

Theme Options in Sight: Free WordPress 3.0.1-Ready Theme For Magazines and Blogs
Theme Options (large preview)

Motivation for the design

As always, here are some insights from the designers:

Sight is a powerful WordPress theme, best suited for Magazines and Blogs. The theme was designed in modern minimalistic style with Golden Grid usage. It has two views to get information in the way you want — a standard blog view and a grid view. A big image slider on the top gives you extra ability to show the most important content.

The theme supports the newest WordPress versions and has 2 Custom Menu Locations. 2 pagination types are available: Default with WP-NAVI support and Ajax-fetching, like in previous Twitter interface. The Sight theme supports Social Media. It has links to share each post to Twitter, Facebook, Delicious Digg, no plugins needed. It is also Search Engine Optimized, so you don’t need to care about it, just set it up and get love from Google.

Please don’t forget to visit designer’s website for more free high-quality themes.


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,


Evolution

One of the things I’ve tried to maintain with the branding around here is a building on top of what currently exists. Rather than completely toss out the visuals of designs and previous logos, I like to keep hints to the past. Part of that helps familiarity, but it also maintains a path of evolution rather than revolution.

evolution

Last week I rolled out an updated SimpleBits mark and simplified layout. I started tinkering a few months ago over on Dribbble and after some great feedback, settled on hex shape borrowed from the inner cube of the old mark, which was carried over from the original pixel art logo way back when. The new mark should work far better at smaller sizes and applications (which was the reason for the tweaking) and seemed fitting to bring back the original orange from the first (extremely dated) design from years ago (11px Verdana still looks good, no?).

Along with the new logo I made some adjustments to the template here as well. Most of those changes centered on a new typeface: FF Milo Web Pro which is versitle in various sizes, looks great in all caps and can be served up via Typekit (you need to purchase the font from FontFont first, which then unlocks it for use with Typekit).

Here’s to personal sites being a perpetual sandbox.


Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates

Advertisement in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates
 in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates  in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates  in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates

The attention span on the Web has been decreasing ever since Google had arrived and changed the rules of the game. Now with millions of results available on any topic imaginable, the window to grab a visitor’s attention has decreased significantly (in 2002, the BBC reported it is about 9 seconds). Picture yourself browsing the Web: do you go out of your way to read the text, look at all the graphics, and try to thoroughly understand what the page is about? The answer is most likely to be a straight “no.” With bombardment of information from all around, we have become spoiled kids, not paying enough attention to what a Web page wants to tell us.

We make snap decisions on whether to engage with a website based on whatever we can make out in the first few (milli)seconds. The responsibility for making a good first impression lies with designers and website owners. Given that the window of opportunity to persuade a visitor is really small, most designs (probably including yours) do a sub-optimal job because the designer in you thinks in terms of aesthetics. However, most websites do not exist just to impress visitors. Most websites exist to make a sale. Whether it is to get visitors to subscribe to the blog feed, or to download a trial, every website ultimately exists to make a sale of some kind.

In this post we will talk about how to tweak a website for generating more sales, downloads, membership (or any other business goal) in a scientific manner, using A/B split and multivariate testing. Like everything else science-related, this article will explore a step-by-step, reproducible method for increasing your conversion rate (the percentage of visitors converted to customers). Also, you may be interested in the Ultimate Guide to A/B Testing that was published earlier here, on Smashing Magazine.

Step 1. Identify a Challenge

How to have website visitors notice your offering, then get them to act on it? I wanted to answer that million dollar question for a software download page on my personal homepage. That page had all the right ingredients: product name, product description, testimonials, awards, ratings and a prominent download link. Yet, only 40% of the visitors downloaded the free software. Note that almost all traffic on that page was targeted as it arrived, either through doing a Google search or via a relevant referring website. So, why didn’t the remaining 60% of visitors download the software? Fixing that leaky bucket was my challenge.

Pdfprod in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates
Key point: Clearly identify the goals of your website (or a particular Web page).

In my case, the desired action is to have visitors download the software and the challenge is to increase the download rate from 40% to as high as possible. Some of the most common challenges which can be solved using A/B split testing are:

  • Improving sign-up rate, reducing bounce rate, increasing newsletter subscriptions,
  • Increasing number of leads collected from landing page, increasing whitepaper or software trial downloads and
  • Optimizing purchases and sales, converting a higher percentage of visitors to customers.

It is entirely possible that your website may be serving multiple purposes. An example would be a blog where the challenge is to get more subscribers and to increase visitor engagement (in terms of number of comments). In that case, the best strategy is to tackle one (clearly defined) challenge at a time.

Abtesting-small in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates
Quick overview: A/B Testing. Large version

Step 2. The Hypothesis

The next step is to make a list of hypotheses for the low conversion rate (percentage of visitors taking the desired action). Agreed, it is tough to come up with exact reasons (that is why we are calling them hypotheses) for a low conversion rate, but there are three excellent resources to help you:

1) You: Yes, you! Though it is hard not to fall in love with one’s own website, it is now time to be extremely self-critical. Try to step into your visitors’ shoes and ask yourself, is your Web page compelling enough to engage a visitor with no background knowledge about your offering? Remember that unlike you, your visitors don’t wake up in the morning saying, “Oh wow, this thing is fantastic!â€� Being critical towards your own website is an excellent way to improve it.

2) Web analytics data: Another source for getting a list of improvement ideas is your analytics tool. Specifically, data on referral sources and search keywords can provide interesting insights. For example, a lot of visitors may be arriving on your webpage by searching for keywords which you haven’t even thought about. In that case, your visitors may leave the website mistakenly thinking that your offer is not what they were searching for. Addressing such cases can increase the conversion rate.

3) Usability testing: Getting independent feedback from a usability test will always surprise you! Perhaps you will discover that visitors are not even aware that you are offering something on the page. In that case, a great idea would be to test the color and size of a prominent call-to-action. If you don’t have a large budget for usability testing, try out affordable services such as Feedback Army or UserTesting.

Key point: Determine what influences conversion rate.

Take feedback from others but evaluate your Web page honestly, and jot down a list of ideas on what could be affecting conversions. For my software download Web page, I had a hypothesis that the download rate was low primarily due to two reasons: a) a lot of visitors didn’t notice the download link and b) many didn’t know that the software is free to download.

My guess was that a normal visit went something like this: a visitor arrives at the website, sees a bunch of text, looks around for the download link, somehow misses it (possibly due to uniformity in color of headings), and finally leaves the website. Those who notice the download link probably don’t go to the trouble of reading the text, where it says “… is a freeware…�, so they assume that the software is a trial or a demo.

The kinds of hypotheses you may have at this step:

  • Maybe your sign-up form is too long, and a shorter version will help increasing total number of sign-ups?
  • Maybe your “Free Trialâ€� button isn’t noticeable; will a larger button help in more downloads?
  • Maybe your headline contains a lot of industry acronyms, or is too generic?
  • Maybe your landing page has no obvious next step, which is leading to high bounce rate?

Step 3. A/B or Multivariate Testing?

Once your list of possible reasons for low conversion rate is ready, it is time to crank your brain once again to come up with different ideas for addressing those reasons. What you do in this step, is to come up with multiple different versions for all the factors you came up with in the last step. For the “Sign Up” case, for example, different versions will be:

  • Form variations: Minimal form with just two fields; form not asking for email address; multi-step form; long form.
  • Submit button variations: “Submitâ€� or “Sign Up for Freeâ€� or “Instant Signupâ€� or even “Sign Up Now!â€�

If you are skeptical that such minor differences cannot make any significant impact on conversions, read a case study where 37Signals increased sign-ups by 30% by testing a simple headline change. Also read how Dustin Curtis increased his Twitter followers by 173% by simply changing the link text to “You should follow me on Twitter.�

A/B Split Testing

In A/B testing (also known as split testing), you vary only one element on the page at a time. This element may be any part of the Web page critical to conversions (e.g. button color, size, ad copy headline). Contrast this to multivariate testing, where multiple different elements are tested at a time. However, A/B tests are simpler and easier to implement than multivariate tests.

Multivariate Testing

In multivariate testing, you identify different sections/factors on a page which effect conversion rate. Different variations of those factors are created, which are then combined to give rise to multiple different versions of the website. Multivariate tests take more time than A/B tests to show results, but are more likely to produce better results.

Key point: Create variations.

Conducting Tests

Coming back to the challenge of increasing downloads for the software page, I used my own tool, Visual Website Optimizer, that provides a visual interface for creating variations, but you could use other tools as well. An obvious solution to make visitors notice the download link is to make the download section the most prominent part of the page. In the page design, the “Download� heading size and color blended well into the rest of the page, which resulted in people missing the download link.

For the multivariate test, I selected two factors on the page for creating variations: the “Download� heading in the sidebar and the “PDFProducer� download link below it. The focus of the test was to observe the effect of the word “free,� and the effect of highlighting the download section. Here are the variations I came up with for this test:

For “Download� headline:

  • “Downloadâ€� in red
  • “Download for Freeâ€� in red
  • “Downloadâ€� in default color, but a larger font size

For “PDFProducer� link:

  • “PDFProducerâ€� in default color, but a larger font size
  • “PDFProducerâ€� in red

In a multivariate test, different variations are combined to produce multiple versions of the Web page. In this case, combining the above variations, a total of 12 (4×3) different versions were produced (automatically), each with a unique combination of “Download� headings and “PDFProducer� links (variation 1 is the control, or default, variation).

Combinations in Multivariate Testing in Action: Five Simple Steps to Increase Conversion Rates
Different versions of the download section used in the multivariate test.

For definition’s sake, because I have combined variations of two different sections, the test is called a multivariate test. If I had just varied a single section, say the “Download� heading, the test would have been called an A/B split test.

Key point: Define the goal of the test.

Every test has a goal against which the performance of different versions is measured. In this case, the goal was the number of downloads. Other types of goals may be sign-ups, purchases, clicks, leads, page views, or bounce rate. It is important to define the goal which is closest to your business objectives. For example, an eCommerce store optimizing for sales shouldn’t define clicking on the “Add to Basket” button as a goal. Rather, it should define the goal as a visit to the “Thank you” page after a purchase is completed.

Step 4. Running the Test and Analyzing Results

What an A/B split or multivariate test does, is simple: whenever a visitor arrives on your Web page, it displays a randomly chosen version of the Web page. In other words, your traffic gets equally distributed amongst different versions. The performance of the different versions is tracked against the conversion goal(s) defined for the test. For example, in my case the goal was increasing the number of downloads; each time a visitor downloaded the software, Visual Website Optimizer tracked which Web page version was shown to the visitor. Setting up a test using this tool helped here as I could select the sections, make variations in a WYSIWYG editor, and immediately preview how it will look live on the page.

After a large number of visitors have been included in the test, different versions are compared to see which one of them performed the best and how much improvement (over the default) it achieved.

Key point: Analyze the results.

After running the test for about 4 weeks, I had results for my software download test. Can you guess which variation resulted in maximum downloads? Any guesses on how much improvement I was able to achieve over the existing 40% download conversion rate?

Hold your breath, here are the results:

#DetailsConversion rate% ImprovementConfidence*
1Default combination (control)39.4%--
10“Download for Free� in red, default “PDFProducer� link63.2%60%99%
9“Download� in big font, “PDFProducer� link in red56.5%43.3%98%
12“Download for Free� in red, “PDFProducer� link in red54.2%37.7%95%
……………
2“Download� as default, “PDFProducer� in big font41.3%4.76%56%

Note: % improvement over default is calculated as 100*(Variation % – Control %)/(Control %)
# refers to the combination number as described in the screenshot above
Confidence*: Statistical confidence in beating the default combination.

You can observe that the headline “Download for Free� in red pushed the download conversion rate from 39% to 63%, a whopping increase of 60%. Having “Download� in large font size (combined with link color as red) also had a positive (43%) improvement over the default. Of all results, the top three are statistically significant at 95% or more confidence level. It means that I can safely implement winning versions on the Web page, to see a permanent increase in downloads. Also note that even the worst performing combination has about a 4% improvement over the control, though it is not statistically significant.

A common concern is that the test results may not be reliable and that the improvement seen may be due to chance. It is, therefore, important to understand different parameters that influence reliability:

  • Number of visitors: the higher the number of visitors, the more reliable the results. You can use tools such as a split test duration calculator, to estimate how many visitors will be required for your test.
  • Conversion rate: in general, results for pages with a low conversion rate (say 1-2%) take a much longer period to produce statistically significant results, than pages with a higher conversion rate (say 40-50%).
  • Difference in performance: testing with a large difference in the performance of variations (say >10%) is always more reliable than one where the difference is extremely small (0.5% or so).

It is important to either use a tool which automatically crunches the reliability of results for you, or to use online calculators to gauge the confidence in results. Taking unreliable results and implementing them can actually cause decreased performance. The exact mathematics of what goes on behind split testing reliability analysis can be read in the 20bits article Statistical Analysis and A/B Testing, or my blog article Mathematics of A/B testing.

Step 5. Learn From the Test Results

Irrespective of whether improved versions of your page are found or not, every test ends up with a good amount of learning. Here are a couple of key takeaways from my test:

  • The word “Freeâ€� is a very powerful attention grabber. You are doing a sub-optimal job if you offer something for free, and don’t make that super-obvious on the page.
  • Best location for advertising your “Freeâ€� offer is near (or on) a call-to-action. Like in this case, “Download for Freeâ€� is displayed quite close to the download link itself.
  • This brings us to next important point: why not make the word “freeâ€� clickable? I am sure if I had analyzed the location of clicks on the page, I would have found a lot of visitors clicking on the “Download for Freeâ€� headline, only to realize it is not a link. I should have definitely tested a version with a clickable headline.
  • The color red, matters, but only if it is combined with other elements such as “Freeâ€� (or other effective call to action texts). Red may bring attention to your call to action, but if the text is not persuasive, the visitor will probably not take any action.
  • The size of your call to action also matters. A larger size tells the visitor that you consider this particular section (in this case, downloading the application) more important than the other parts of the page.

Even if you don’t remember any of the points above, please take home one key point: don’t replicate the suggestions above without testing them on your website! Every website is unique, every conversion goal is different. While generic observations about the effect of the word “Free,� of the color red, and of the size of your call to action make logical sense, it is always wise to be sure of their effectiveness by setting up a quick test.

A/B split testing holds a lot of potential for positively impacting a company’s revenue and profits. In spite of that, surprisingly, adoption of testing is not that high. If you haven’t done any A/B split tests yet, why is that so? If you have done A/B split or multivariate tests in the past, please share your experiences in the comments below so that others can get to know real-world examples.

Related posts

You may be interested in the following related articles:

(ik) (vf)


© Paras Chopra for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


Tips for Fighting Freelance Burnout

Advertisement in Tips for Fighting Freelance Burnout
 in Tips for Fighting Freelance Burnout  in Tips for Fighting Freelance Burnout  in Tips for Fighting Freelance Burnout

Freelancers are somewhat of a singular breed according to some of the outside perceptions held about us. We hear it all the time from friends and family, even at times from near strangers, that they could never work for themselves from home and actually be productive. Without some predetermined hierarchical structure that pits someone above them demanding results from them each day they are in the office. They are amazed at the power of will that we seem to exhibit, without any pressure from the higher-ups to keep us motivated. But they fail to see that we are motivated by the need to remain in business for ourselves, and so the motivation to keep on task is generally already in place.


Matchheader in Tips for Fighting Freelance Burnout
Image Credit

Most freelancers have a powerful need to eat and have a roof over their heads (okay, so less over the heads and more over the workstation or proverbial power centers), and still there are motivators driving us forward. So for freelancers reaching that motivation is not so much of a problem, but holding on to it can be. As most people are aware, freelancers tend to work long hours and that can often lead to the more pressing problem for freelancers: burnout. When that virtual flame of initiative and drive has flickered and faded leaving us with nothing but its sad, smothered remains as a reminder of what we should be doing, but can’t.

The Basic Idea

If you have never experienced burnout, then consider yourself lucky, for it can be a long and arduous recovery from this imposed downtime. Burnout tends to follow a particularly long period of focused work where we tend to forget about any and everything else beyond the project finish line looming in the distance. When productivity has been the only order of the day for weeks upon weeks and your freelance dungeon has become your virtual creative cave where you have, for all intents and purposes, confined yourself for this extended period of time. As a freelancer who is dependent on having work to keep them afloat, this can seem like a solid, productive approach which will yield positive results in the long run.

Trouble is, no one tends to be able to run at this pace for that long. It catches up to you, and burnout begins. Suddenly you find that you are unable to force this creative drive to continue as your passion for your work has been reduced to ashes by burning your freelance candle at both ends. Then we find ourselves stuck, unable to move forward on this path until our passion, like a phoenix, magically rises fresh and anew from the ash. Burnout is hard to break free from once you are in its unforgiving, and unproductive grips, so our better odds come from avoiding this problem area, over getting out once we are in. It is so much easier to prevent than to escape, so that is what brings us here today.

Longrun in Tips for Fighting Freelance Burnout
The long run only matters if you have the steam to make it to the end. Image Credit

Below are seven helpful hints for freelancers to assist us in our struggles to avoid this costly roadblock from becoming an obstacle in our daily grind. These are techniques that have proven useful for some in the freelance field, so hopefully they can also help to prevent you from falling victim to freelance burnout. They are in no particular order as they all rank important in this battle for continued productivity and drive, and there is no one tip that can guarantee victory. You more want to use a combination of these approaches in your daily schedule.

1. Keep Up On Your Personal Projects

First up in this discussion of ideas is to keep up with you own personal projects and not let them slip between the cracks. These side projects that we do are vital to our freelance business in ways many of us do not even realize. When time begins to weigh in on us, one of the first things we tend to drop from our days are those personal side projects that we have going. We feel guiltily like we can no longer justify taking time out of our schedules to devote to the work that is only there to stimulate and feed us. Designers, developers, writers, whatever the creative freelance hat you wear, we all tend to have one or two little pet projects going at any given time. This is a necessary evil.

Petprojects in Tips for Fighting Freelance Burnout
Pet projects are always begging for our attention because we need them as much as they need us. Image Credit

Well, evil is a bit of a harsh assessment, but we tend to look unfavorably on these projects when our schedules are stressing us. We see them as expendable, not as the saving graces that they can often be for us. Whatever the creative freelance work that you do is, make sure that you are not just doing it for your clients, make sure that you do some for you as well. Designing, coding, no matter the outlet it shouldn’t always be about work when you sit down to play in the waters where you freelance or you risk losing touch with the fun of it all. And if you lose the fun, you often lose the passion, and thus your edge. So these personal projects keep us grounded in everything about the work that we love, even when the client side of the coin is becoming repetitive and stale.

2. Limit Work Hours On a Daily Basis

Now the discussion turns to an area that many freelancers, admittedly myself included, have trouble keeping under control, effective time management. Freelancers tend to take a different approach to the standard ‘work day’ as it is, but when we are feeling the pressure of approaching deadlines and the like it is hard to pull ourselves away from the workstation. We feel obligated to be there, right in the zone until our eyes are drooping and we can no longer force them to cooperate with us and stay open. We seem determined to defy any and all outside distractions giving the project before us our undivided throughout the day. Letting the hours fall from the clock unnoticed, believing we are in control, not on the way to losing it.

Eyeonclock in Tips for Fighting Freelance Burnout
Keeping one eye on the clock can do a lot to keep stress from bogging you down. Image Credit

If we do not force ourselves to unplug and clock out each day, then these extended work sessions are carrying us full speed towards burning out. We think we are mastering this creative drive, but we are essentially overdriving it and putting unnecessary strain on it. Strain that will stress it until it can no longer move forward, and we are stalled. No matter what we do, at that point, we cannot get that forward motion back. This is why we need to limit ourselves each day to ensure that the hours we do work, can remain productive and creatively stimulated. The last thing we want is to burnout during a project, causing us to effectively phone in the final results. Time off is important to this effort, even though it seems like somewhat of a contradiction.

3. Take Full Days Off

Speaking of time off, we segue smoothly into our next burnout combatant, taking full days off. Recently we have published a similar piece on Smashing Magazine about just that. The idea of being accessible and on the clock 24/7/365 and how this is not the most reasonable of expectations. But the thing is, we as freelancers often put these expectations on ourselves. Or we at least put ourselves in the position for these expectations to put freely placed upon us unchallenged. Once again, we believe that this is somehow a necessary compromise for us to remain effective and ahead of the game. But we do not realize that this can have negative effects as well. We think as long as we take some time off each day, we will be fine to continue pushing forward.

Workweek in Tips for Fighting Freelance Burnout
We just need to break up the work week, not keep going for weeks on end. Image Credit

However, we owe it to ourselves, our clients, and the work itself to take full days off to unplug and unwind, not just parts of them. As freelancers, this is not always the easiest thing for us to do, but unless we are taking full days off then we are never going to fully unplug from the work. This is vital in maintaining our passion and drive, even if we cannot see it. If our mind is always engaged by a particular project or idea, and we never allow that refresh, then our approach and our thinking become clouded. We are constantly processing the same ideas, never allowing for a virtual reset that can bring in new ones. They say distance makes the heart grow fonder and this can apply to our freelancing drug of choice as well. That day off can keep our passion igniting freshly with each return engagement!

4. Don’t Forget to Diet and Exercise

As the freelance stresses of our overactive schedules can get in our way and make us forget about the important times we need to virtually feed and nurture ourselves away from work, it can also distract us from the important times we need to actually physically feed and nurture ourselves. A healthy diet and regular exercise are things we often forget in the interest of making this freelancing way of life work for us. We see these once more as acceptable compromises in our means to reach our ends, without realizing the impact that correctly addressing these areas can have in keeping us on our creative and productive paths. But burnout can sneak up on us through these routes if we neglect them, and underestimate their importance to our drive.

By maintaining a proper, balanced diet and adhering to a regular exercise routine, our bodies and our minds are kept in harmony and in check. Exercise releases endorphins which keep us happier and deliver more peace of mind. Helping to keep the stress levels of our freelance business in check and from feeling overwhelming. Also, as mentioned before, the virtual mental unplug from work is vital, and exercise affords us an easy opportunity for said disconnect. A healthy diet helps keep our minds clear as well, while giving us bursts of creative and physical energy, both of which are needed when facing the potential long hours of the day ahead. Living glued to the workstation surviving off processed foods and chemicals, sublimated with caffeine induced energy pockets is on the way to stay fresh and out of the reach of freelance burnout.

5. Maintain Non-Work-Related Hobbies

Now keeping up with side projects in your chosen area of freelancing is important as we discussed, but there is another side to that coin as well. It is not enough to keep those creative fires stoked within your field, but also maintaining non work related hobbies also helps keep those creative fires burning all around. Often at times we find it hard to not only justify personal projects but to make time for them, then we are certainly not going to see the value in keeping up with creative hobbies that take our minds out of the proverbial zone we tend to keep it in for our freelance workmode. But the value is there, we are just overlooking and underestimating it.

Workmode in Tips for Fighting Freelance Burnout
We need to be able to unplug from workmode and switch gears to stay fresh and far from burning out. Image Credit

What we have to realize is that the more we can unplug and allow our creative efforts to find other outlets, the less likely it is that this creative flow will be stifled and interrupted in any way. As mentioned before, if our mind is always engaged in a certain way, then our thinking along those lines can become clouded and less vibrant. So if we are actively taking our minds into different directions for engagement then chances are less likely that any one of those paths will begin to stagnate. These other creative pursuits can also help us find new ways in our freelance work to come at projects and ideas. Allowing some crossover in methods or practices to allow our creative freelance processes to evolve and grow.

6. Get Outside

As freelancers, with our living and work spaces effectively combined, we can find ourselves needing a more physical unplugging of sorts over just the mental ones we have been discussing to avoid burnout. This unplugging is done by simply getting outside of your living/work space. That is all: just leave your domicile and get out into the real world. If you must, take the virtual one with you via some portable device, but get out of your proverbial place of business. Again, this is not easy for a lot of freelancers to justify. Time away from work is okay, because they are still in the vicinity, so that invisible lifeline is still intact. But if we do not get out of the building then we are doing ourselves and our work a complete disservice.

House in Tips for Fighting Freelance Burnout
The call is coming from inside the house…”Get outside!” Image Credit

We can say that we are unplugging all we want, but as long as we have some virtual umbilical cord connecting us to our work then we are not getting that true refresh. This is why it is best to leave the connections to the virtual world behind when venturing out if we can. This way we are truly leaving work and all of that behind as we go forward into the great outdoors to reconnect with the world in a completely different way than we do from behind our screens. Nature has a way of stimulating that creative flame inside us anyway, so this is a easy way to get your necessary recharges without having to even think about it. So give yourself some time outside away from your combined space so that it does not start to close in on you, sapping your creative drive and pushing you towards burnout.

7. Keep Learning

Our final area of discussion comes from the fresh is better frame of mind with regards to our freelance choice of profession, and that is to keep learning. As long as you continue this pursuit of knowledge in your area of expertise, then you are always moving forward. Again, it is easy to get bogged down with work and begin virtually circling in the familiar waters we have been in, rather than reaching out for new areas to expand into. Seemingly justifying this by presuming some sort of lost clientele and revenue via this learning distraction, when it really is quite the opposite. We can gain so much more for our freelance business by allowing this sort of growth. Not to mention, it can stave off the burnout factor as our work is constantly evolving.

So the continued learning experience is not only a necessity because most of of us are operating within fields that are advancing and changing often by great leaps and bounds each year, but because through this continued exploration of our fields we are less likely to become bored by it. So we want to find ways to continue to challenge ourselves through our freelance field of choice, in order to have our processes and routines become less stagnant. Which always translates well for our body of work. These challenges prevent our work will from suffering through these stale periods of no growth, which can negatively impact our chances at gaining new clients. So be sure you are constantly looking for new challenges within your market to keep you learning and excited about your field.

Final Words

Burnout can be damaging to any person working in a creative field, but for those freelancing and running the entire show themselves, it can be deadly. Being able to keep refreshed and vibrant is vital to the growth and stability of your business. So taking whatever steps we can to prevent this burnout from rearing its ugly head should be considered necessary for the life of our freelance careers. What methods do you use to keep the burnout at bay?
(ik)


50 Useful jQuery Plugins to Enhance your Forms

Advertisement in 50 Useful jQuery Plugins to Enhance your Forms
 in 50 Useful jQuery Plugins to Enhance your Forms  in 50 Useful jQuery Plugins to Enhance your Forms  in 50 Useful jQuery Plugins to Enhance your Forms

Here we present some useful plugins and tutorials that will let you create awesome forms for your websites — whether it’s a sign up form or contact us form. You can enhance its functionality and usefulness with these plugins. Since these forms are used by the visitors of your website to interact with you, they are of great importance and for this reason you cannot just ignore them as they play an important role in the success of your website. So here we have gathered a bunch of jQuery Plugins, Tutorials and Resources which will help you in improving the effectiveness and beauty of these forms


Useful jQuery Plugins

Turn Any Webform into a Powerful Wizard ( Demo | Download )
The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.
Jqueryform1 in 50 Useful jQuery Plugins to Enhance your Forms

toChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

Jqueryform44 in 50 Useful jQuery Plugins to Enhance your Forms

FlexBox ( Demo | Download )
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.

Jqueryform33 in 50 Useful jQuery Plugins to Enhance your Forms

A fancy contact form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Jqueryform45 in 50 Useful jQuery Plugins to Enhance your Forms

Jquery Collapser ( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements.

Jqueryform27 in 50 Useful jQuery Plugins to Enhance your Forms

asmSelect – Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

Jqueryform42 in 50 Useful jQuery Plugins to Enhance your Forms

JQUERY: DFORM ( Demo | Download )
The jQuery.dForm plugin allows you to create your HTML forms programmatically from

Jqueryform31 in 50 Useful jQuery Plugins to Enhance your Forms

A jQuery Inline Form Validation ( Demo | Download )
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

Jqueryform36 in 50 Useful jQuery Plugins to Enhance your Forms

JQuery plugin for input text field filtering ( Demo | Download )
This is simple JQuery plugin for filtering text input field by using regexp. Only allowed characters will be inserted into input field, others will be silently dropped.

Jqueryform28 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Jqueryform18 in 50 Useful jQuery Plugins to Enhance your Forms

Simple Validation Plugin ( Demo | Download )
A simple validation plugin that comes in at about 1.5kb.

Jqueryform19 in 50 Useful jQuery Plugins to Enhance your Forms

AutoSuggest jQuery Plugin ( Demo | Download )
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

Jqueryform20 in 50 Useful jQuery Plugins to Enhance your Forms

How to create Skype-like Form buttons using jQuery ( Demo | Download )
If you use Skype then you have probably noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. In this tutorial Janko Jovanovic is going to show you how to create the same button using jQuery and some simple CSS.

Jqueryform21 in 50 Useful jQuery Plugins to Enhance your Forms

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

Jqueryform38 in 50 Useful jQuery Plugins to Enhance your Forms

JavaScript image combo box ( Demo | Download )
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element.

Jqueryform2 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery plugin: Password Valida ( Demo | Download )

Jqueryform3 in 50 Useful jQuery Plugins to Enhance your Forms

prettyCheckboxes ( Demo | Download )
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

Jqueryform5 in 50 Useful jQuery Plugins to Enhance your Forms

Boxy – Facebook-like dialog/overlay, with frills ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

Jqueryform6 in 50 Useful jQuery Plugins to Enhance your Forms

Enlarge input fields on focus ( Demo | Download )

Jqueryform7 in 50 Useful jQuery Plugins to Enhance your Forms

WordPress contact form without a plugin, using jQuery ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

Jqueryform8 in 50 Useful jQuery Plugins to Enhance your Forms

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

Jqueryform9 in 50 Useful jQuery Plugins to Enhance your Forms

In-Field Labels jQuery Plugin ( Demo | Download )
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

Jqueryform10 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Keypad ( Demo | Download )

Jqueryform11 in 50 Useful jQuery Plugins to Enhance your Forms

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Jqueryform12 in 50 Useful jQuery Plugins to Enhance your Forms

Autocomplete ( Demo | Download )
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

Jqueryform13 in 50 Useful jQuery Plugins to Enhance your Forms

jqTransform ( Demo | Download )
This plugin is a jQuery styling plugin wich allows you to skin form elements.

Jqueryform14 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery Validation ( Demo | Download )

Jqueryform15 in 50 Useful jQuery Plugins to Enhance your Forms

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Jqueryform16 in 50 Useful jQuery Plugins to Enhance your Forms

Selecting Multiple Select Form Elements on the Fly ( Demo | Download )
The following jQuery tutorial offers a simplified solution to selecting related select menu options within a form.

Jqueryform17 in 50 Useful jQuery Plugins to Enhance your Forms

timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

Jqueryform22 in 50 Useful jQuery Plugins to Enhance your Forms

AJAX forms ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

Jqueryform23 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Jqueryform24 in 50 Useful jQuery Plugins to Enhance your Forms

Give Your Characters a NobleCount ( Demo | Download )
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

Jqueryform25 in 50 Useful jQuery Plugins to Enhance your Forms

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

Jqueryform26 in 50 Useful jQuery Plugins to Enhance your Forms

“SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER ( Demo | Download )
If you want to disable your ajax submit buttons when clicked to disallow double submits, jquery.safesubmit makes it simple and safe.

Jqueryform29 in 50 Useful jQuery Plugins to Enhance your Forms

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

Jqueryform32 in 50 Useful jQuery Plugins to Enhance your Forms

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Jqueryform35 in 50 Useful jQuery Plugins to Enhance your Forms

Simple chained combobox ( Demo | Download )

Jqueryform37 in 50 Useful jQuery Plugins to Enhance your Forms

Changing Form Input Styles on Focus with jQuery ( Demo | Download )
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Jqueryform39 in 50 Useful jQuery Plugins to Enhance your Forms

Ajax Upload; A file upload script with progress-bar, drag-and-drop ( Demo | Download )
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Jqueryform40 in 50 Useful jQuery Plugins to Enhance your Forms

Select Multiple Form Fields ( Demo | Download )

Jqueryform41 in 50 Useful jQuery Plugins to Enhance your Forms

Masked Input Plugin ( Demo | Download )

Jqueryform43 in 50 Useful jQuery Plugins to Enhance your Forms

Elastic – Make your textareas grow ( Demo | Download )
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

Jqueryform91 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery “Highlight� Plugin ( Demo | Download )

Jqueryform92 in 50 Useful jQuery Plugins to Enhance your Forms

Ajax Fancy Captcha ( Demo | Download )

Jqueryform93 in 50 Useful jQuery Plugins to Enhance your Forms

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Jqueryform95 in 50 Useful jQuery Plugins to Enhance your Forms

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Jqueryform96 in 50 Useful jQuery Plugins to Enhance your Forms

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Jqueryform97 in 50 Useful jQuery Plugins to Enhance your Forms

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Jqueryform98 in 50 Useful jQuery Plugins to Enhance your Forms

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Jqueryform99 in 50 Useful jQuery Plugins to Enhance your Forms

jQuery.uiSelect ( Demo | Download )

Jqueryform100 in 50 Useful jQuery Plugins to Enhance your Forms

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Jqueryform1011 in 50 Useful jQuery Plugins to Enhance your Forms

Useful jQuery Resources

(ik)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress