42 Tools All Speedy Front-End Developers Use

Every developer has a preferred way to code.

Some use only the basics – a text editor and a browser. Others like to incorporate apps, platforms, and tools to make sure everything gets done.

If you fall in the latter category, you’re probably always on the lookout for the next best tool to aid your projects. After all, who doesn’t love something that can reduce your time and increase your productivity?

That’s why we’ve put together a list of the best development tools for those who want to get things done quickly and efficiently.

Take a look.

[content_upgrade cu_id=”420″]Download our free resource to find 36 more unique tools for devs not listed here.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Source Control

github

GitHub – GitHub is probably the most well known platform, but not everyone uses it. But if you’re looking to build a site efficiently (especially a static site) then GitHub is perfect. It includes a source-code browser, in-line editing, wikis, ticketing, and more. The best part is that it’s completely open source (that means free!).

bitbucket

Bitbucket – Bitbucket is another free source code host. It’s a distributed version control system that makes it easy for you to collaborate with your team. Approve code review with pull requests, use flexible deployments models, and take advantage of their private and public repositories.

sourcetree

SourceTree – Whether you’re a newbie developer or you just love using Mac, SourceTree is a free Mac client for Git and Mercurial version control systems. Manage all your repositories, hosted or local, through SourceTree’s simple interface.

Other Options

Versions – Another subversion Mac client

Tower – Another Git client for Mac.

Offscale – A tool for database version management

Development Platforms

heroku

Heroku – Heroku is a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Build, manage, scale, and deploy great apps quickly, without needing to worry about updating or patching.

kinvey

Kinvey – If you’re more interested in mobile app development, Kinvey is a back end as a service (BaaS) provider that makes it easy for developers to set up, use and operate a cloud backend for their mobile apps.

firebase

Firebase – Another BaaS, Firebase is a scalable real-time backend for your website. It’s made up of complementary features that you can mix-and-match to fit your needs.

cloud9

Cloud9 – An online IDE that combines a powerful online code editor with a full Ubuntu workspace in the cloud. Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance.

appharbor

AppHarbor – Used by thousands of developers for everything from simple blogs to high traffic web applications, AppHarbor is a fully hosted .NET Platform as a Service. This PaaS can deploy and scale any standard .NET application to the cloud.

Other Options

Parse – Another mobile app platform

CloudMine – Another BaaS for mobile and web apps

Koding – Browser-based IDE

dotCloud – Deploy, manage, and scale any web app

StackMob – Powering mobile applications

PHP Fog – Cloud platform for PHP

Backrest – Easy creation of SaaS data backends

Codeanywhere – Online code editor

NeptuneIDE – Full-featured, cloud-based IDE for PHP

Fusegrid – ColdFusion in the cloud

Cloud IDE – Code and deploy in the cloud

ToolsCloud – Development environment in the cloud

Bug Tracking, Feedback, and Monitoring

crashlytics

Crashlytics – This powerful and lightweight crash reporting system for iOS and Android is perfect for mobile app developers who need to work out the kinks in their system before, during, and after launch. Every crash report is analyzed and every bug tracked so that you don’t have to do it.

usersnap

Usersnap – If you’re more of a visual person and you prefer snapshots to track bugs or share potential issues with your team (or clients), then Usersnap is a great option. Organize your web projects and create screenshots of any potential problems.

rollbar

Rollbar – Rollbar collects errors that happen in your application, notifies you, and analyzes them so you can debug and fix them in real time. Works with Ruby, Python, PHP, Node.js, JavaScript, and more. It’s “Full-stack error monitoring for all apps in any language.”

Other Options

New Relic – Web application performance management (APM)

Exceptional – Tracks errors in web apps and reports them in real time

BugSense – Mobile app insights and crash reporting

Bugzilla – Server software to help you manage software development

Bugify – Simple PHP issue tracking for small teams

BugHerd – Tracks bugs and allows you to capture and share feedback

Snowy Evening – Bug and issue tracking with Github integration

APIs

twilio

Twilio – Twilio is a cloud communications platform for building SMS, Voice, and Messaging applications on an API. Embed messaging, voice, and video in your apps with their API, and the best part is that you can get started in as little as five minutes. So, if you’re in a rush, you have help.

cloudeo

Cloudeo – If you’re into geo data, then this is the perfect solution for you. Cloudeo is another SaaS that allows you to rent, evaluate, and stream geo data in all of your applications. It’s a unique option for developers needing to include more complicated APIs like this.

embedly

Embedly – On the simpler side of things, Embedly delivers ultra-fast and easy to use products and tools for richer sites and apps. Convert standard URLs into embedded videos, images, and more to engage your audience through rich media.

mailgun

Mailgun – Mailgun is a surprisingly powerful API that lets you send, receive, and track email effortlessly. Easy SMTP integration and a simple, RESTful API removes the messy details of sending transactional or bulk email. Everything is built API first with a focus on simplicity and compliance to standards.

Other Options

Factual – Structured data APIs

PubNub – Cloud-hosted messaging service for real-time apps

Context.IO – Leverage email data in applications with this API

Semantics3 – APIs for product data

Sent.ly – SMS HTTP API using your own Android phone

[content_upgrade cu_id=”420″]Looking for even more tools? Check out our list of 36 more tools for devs.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

Finding the right app, platform, or tool to help you get through projects isn’t easy. A lot of it depends on preference, working style, and sometimes the power of the tool itself to get the job done.

But one thing’s for sure: If you need help moving a project along, there’s probably a tool for that.

This is great for developers who want to get things done as fast and easy as possible. Or at the very least, it can inspire you to create a SaaS, BaaS, or PaaS of your own to help other struggling developers get the job done.

How to Deal with Clients That Aren’t Designers (But Think They Are)

Look, you’ve spent years honing your craft, learning the tricks of the trade, and working hard to set yourself apart from the competition and make a name for yourself as a real expert in your field.

That’s why it can be particularly frustrating to encounter a client that doesn’t see you that way – or, at the very least, thinks they can do what you can do without half the training or talent.

Sure, they appreciate your portfolio and they know what you have to offer is probably better than what they can do. Yet whenever you send your designs for approval, they always have something to tweak. There are always one or two things they want done differently.

That’s when you politely remind them that there’s a reason for everything you’ve done, and changing it would significantly impact the work as a whole.

But what happens if they insist that you make changes, even though you know those changes will ruin your work?

Well, there’s good news and bad news…

[content_upgrade cu_id=”286″]Don’t Miss: Agency-Client Conflict Resolution Guide[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

The Good News: You’re the Expert

There’s a reason they hired you, and it’s because you know what you’re doing. The trick is convincing them that you see a perspective they might have missed.

Be Prepared

BoredPanda-Designer

Source: BoredPanda

Make sure that every time you present your work, you’re fully prepared. Common issues that come up with design work in particular include logo sizes, choice of fonts (anything but Comic Sans, please), and content location.

The best thing you can do is to have a solid explanation for why you chose the size/font/placement that you did, and include those reasons when you submit your work. Sending a file without context is simply begging for unwanted commentary.

Don’t forget that designs get passed around too, and clients may not always include your explanation when they share your proposals with others. Be ready to rehash your reasoning as many times as possible, if necessary. Yes, it’s annoying, but it may save you from having a major headache later on in the process.

Choose Your Battles

bad-clients-cartoon

Source: Smashing Magazine

Remember, when it comes to their business, your clients are just as protective of their creative vision as you are of yours. Your clients are not the enemy. They’re coming to you because you know what you’re doing, so you want to make sure you present yourself as an expert without belittling their approach.

If changes they suggest aren’t absolutely vital to your design aesthetics or aren’t time consuming to make, you can let your clients win. If, however, you find yourself fighting the urge to vomit when you think about tweaking your design, stick to your guns.

Act Like An Expert (But Not A Jerk)

Sometimes “sticking to your guns” will mean telling the client that their ideas are terrible, which may or may not go over so well depending on the client. But there are a few ways you can frame the conversation so that you both walk away winners.

#1. Reframe their concerns to solve a problem. Every client has an underlying reason they want a project done a certain way; maybe they have a specific audience or goal in mind. Assure them you really are acting in the best interests. Let them know that you were really listening during their proposal, you’ve done some research of your own, and according to that research, your approach may actually improve their desired results. If you really want to go the extra mile, have some studies on hand that back it up.

#2. Make sure to include them in the process. You’re an expert in your field, but they’re also experts in their respective fields. If they have certain colors they want to use or content they want to include, do your best to incorporate what they want it in ways that work for you too. Again, if something they suggest is just too far out there and you simply can’t make it work with the current project, suggest another project or solution and help them understand why it won’t work with the current design.

#3. Use the right language for the right situation. Telling your clients that they’re terrible people is a lot different than suggesting that a design strategy may not work as well as they’d hoped. But it’s incredibly easy for frustration to turn an innocent suggestion into an actual insult. Remember that words can start wars as easily as they can solve problems, so choose your words carefully. (Mike Michalowicz over at Amex’s OPEN Forum wrote a great article about using the right language with difficult clients.)

The Bad News: The Client Is “Always Right”

Of course, at the end of the day, what really matters is what the client wants. As much as you’re an expert and a highly valuable member of the team, they’re the ones writing the checks, so what they say, goes.

But what happens if you just can’t come to a feasible solution that works for both you and the client? Well, you may either have to do a little conflict resolution, or you may have to straight up dump them as a client.

Handle Conflict Like a Pro

Comic45

Source: Millo

The absolute best thing you can do is to remain as professional as possible. No matter what, keep your cool.

Let’s say the worst has happened and you’ve done hours of work only to have the client reject everything and ask you to start over. Maybe you’re even willing to do so, but when you tell them how much a new design will cost, they freak out. The last thing you want to do is add fuel to the fire by blaming others or being rude.

Listen to what they have to say, admit any faults from your end, offer any alternative solutions you see, use positive language, and if things get really heated, walk away.

Not only will keeping calm potentially save your relationship with the client (should you choose to continue working with them) but you’ll also save your reputation in the industry over the long haul.

Make Your “Dear John” Sweet But Swift

Of course, having a high level of professionalism on your end doesn’t mean that the client will respond with the same attitude.

Sometimes clients will come to you because you’re just another creative type who can get things done, and not because you specifically have skills they want. If you can’t do what they want, they might throw a fit or – worst case scenario, decide to withhold payment or otherwise make your working relationship a living nightmare.

If things just aren’t working out the way you’d like, you always have the option of walking away. Here’s what to keep in mind while doing so:

#1. Finish any work related to your written contract or verbal agreement. The last thing you want is to get sued by a vindictive client who paid you money to do a project you didn’t finish (at least finish from their perspective). Make sure that you’ve fulfilled any obligations that you signed up for, or that you have an escape clause in the contract that you signed before you start working with them (an ounce of prevention…).

#2. Set a firm “leave by” date and stick to it. Let your clients know that you’ll be moving on and that they can expect to receive any remaining files from you by a certain date.

#3. Try not to burn a bridge (if at all possible). If you can, include a few positive statements in your “Dear John” email about why you liked working with them and let them know that you’re available for other work in the future (if you’re open to that, obviously). Remember that referrals are a great source of business, so if you can salvage the relationship professionally, do so.

[content_upgrade cu_id=”286″]Need help dealing with difficult clients? Check out our Agency-Client Conflict Resolution Guide.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

Dealing with clients can be tricky, especially when they feel like they can do your job as well as you can. But remember that you’re the expert and you know what you’re doing, and they’re coming to you for your design prowess.

If the time comes where you need to convince a client that your way is best, remember to backup any suggestions with resources, use positive language, offer alternative solutions, and try to incorporate their ideas as much as possible (without sacrificing your time and talent, of course).

If things just aren’t working out and you simply need to move on, be professional, be quick, and don’t burn a bridge unless absolutely necessary.

Why You Might Want to Ditch Your CMS If You Have THIS Client

Stop us if you’ve heard this one before: “Can you build me a website?”

If you’re a web developer or designer, at some point in your career you’ve probably been asked to build someone a website, whether it’s a high-paying client or your mom’s neighbor from down the street. If you can build it, they will come.

The go-to solution to building said website is usually to choose whichever CMS you’re most comfortable with – WordPress, Drupal, Joomla, etc. – and start building from there. After all, that’s what CMS is designed for: building websites with ease.

But, depending on whom you’re building the site for, a CMS may not actually be the best choice. In fact, depending on the client’s needs, you may want to consider building a static site instead.

[content_upgrade cu_id=”274″]Don’t Miss – Quiz: Should Your Client Use a Static Site or CMS?[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

htmlvswordpress

SSG vs. CMS

CMS platforms, like WordPress and Joomla, are popular for a reason: they’re multi-media friendly, SEO-friendly, and most importantly, contributor-friendly, at least for the non-technical folks out there.

But, static sites have many benefits that a CMS can’t offer, especially for devs and designers, like lower development costs, simpler hosting, greater security and markdown support.

The best part about static sites is that you can use a static site generator, such as Jekyll, to help you manage your site – which is similar to using a CMS but with more access to the code – but you can also build a static site on your own using a handful of HTML files, too. This, along with the other benefits, makes static sites a great alternative to using a CMS, especially for devs and designers.

Static sites may also be helpful for certain clients, too, depending on their needs…

Which Client for Which Method?

At the end of the day, building a website isn’t really about what you want, it’s about what the client wants. Unfortunately, clients don’t always know what they want, or sometimes what they want isn’t the best option. That’s why it’s important to know which clients might benefit most from a static site and which should probably stick to using CMS sites.

20151117222236-cellphone-guy-designer-web-architechture-working

Clients that Benefit from Static Sites

Here are the types of clients that should probably let you build a static site for them:

They’ve put you in charge. If they want nothing to do with the website and are more than happy to pass off the management to you, then you might want to consider creating a static site. If they’re not messing around with the code, you might as well have full control. Nothing lets you do what you want easier than a static site, because you can hand-write anything you need directly into the text editor quickly and easily.

They don’t plan on updating the site often. Maybe they’re just using their website as a virtual business card, or they don’t have content that frequently changes. If this is the case, using a full blown CMS to build a simple, unchanging is a waste of time and energy. A static site will give them everything they need with less hassle on your end, especially if you do decide to use a generator.

They’re bloggers who know what they’re doing. Static sites are great for bloggers, even if the CMS (cough – WordPress – cough) holds a fair share of the blogging market when it comes to advertising. Static sites have less security issues and generally load much faster than CMS blogs, which makes them great for traffic. The only caveat is that the blogger must know how to work in a SSG, or at the very least know how to pass things off to you to get posted.

They’re have a limited budget. If they don’t have the money to spend on developing a fully hosted, fully CMS powered site, then a static site is seriously the best bet for saving them money. That also means that more of their money is going to you and not the CMS.

If your clients fall into any of these categories, consider switching them from a CMS to a static site and save yourself some hassle.

Clients that Benefit from CMS Sites

Of course, not all of your clients will fall into those categories, which means that you might want to stick with a CMS – or at the very least use a static site generator instead of hand-coding – if your client is like this:

They’re bloggers who don’t know what they’re doing. While there’s a big case for using static sites over CMS for blogging purposes, most bloggers are not expert-level developers and designers like you. If they want you to build the site but they plan on managing it afterwards, a CMS may be a better option since it gives non-technical people the upper hand.

They need a large site or blog with frequent updates. If the blog or website is large – like enterprise level with many pages and complex site structures – then a CMS will save you more time than having to code a static site. Plus, if you have to be in it making changes every day, you don’t want to dig around code, because there are CMS plugins for that.

They have a need for dynamic applications. If they really, really want “cool” features on their website like Disqus for comments or specialty plugins for different functionality, there’s probably no way to get around using a CMS.

They have the money, but not the time frame. Building a website is always going to be expensive (for a good website, anyway), and if they want something good, they should be able to pay for it. If budget is of no concern but they need a quick turnaround on a big site, then a CMS is probably a better option.

If your client falls into these categories, your best solution is probably to stick with a CMS, since they tend to be easier on non-devs and designers.

[content_upgrade cu_id=”274″]Still not sure which to use? Try our quiz: Should Your Client Use a Static Site or CMS?[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Web-Design-Companies-In-Dubai-That-Go-Above-And-Beyond-For-Their-Clients

How to Suggest Static Sites to CMS Clients

So what happens if you’ve figured out that a static site will benefit your client more than a CMS, but your client absolutely insists on using something like WordPress, because it’s all they know? What’s the best way to suggest an alternate option?

Reassure the client that you’re after the same goal. They know their objectives better than you do, so make sure to listen and ask plenty of questions first before you start giving your opinion.

Speak like an expert. They’ve come to you for your expertise; don’t be afraid to speak with expert authority. Tell them that you’ve assessed their situation and their goals and you feel the best solution might be to use a static site. If they’re not sure what a static site is, explain it to them the best you can in non-technical terminology.

Present the benefits. People want solutions that help them move forward, so instead of arguing about why a static site is better than a CMS, tell them what makes static sites so great and how those solutions will help them achieve what they want. Especially tell them if using a static site will save them time and money.

Have a plan in place for building the site. People can be wary of anything that sounds too good to be true, so if you’re going to suggest a switch for their website, show them that you’ve really thought it through. Have a plan written down for timeframe, needs, requirements, and options for SSGs should they choose to use one. Show evidence of other static sites you’ve built with success, if possible.

Be professional. Above all, don’t start arguing with the client. Even if they know less than you about static sites, they’re still the ones in charge. If they decide to use a CMS, just work with it or point them to another dev or designer who can help.

12 Pre-Fill Tools You Can Use to Improve Form Conversions

If you’ve been on the Internet for any length of time, you’ve probably filled out a form.

It’s inevitable. Forms are everywhere – from online shopping, subscribing to blogs, and even logging in to your favorite sites. And if you’ve spent any amount of time filling out a form, you know that they are seriously tedious.

But that’s where you – the developer and/or designer extraordinaire – come in. Your job is not only to make those forms functional, but also to get users to actually want to fill them out.

One of the best ways to do that is by making forms as fast to finish as possible. Enter scene: pre-fill.

Also called autofill, this tool allows user information to be automatically populated on your form, so that users don’t have to waste time filling in standard details like name, email, or home address.

Pre-fill can also store more sensitive data like credit card information for quick checkout using e-commerce forms. While this can pose some inherent security risks, some users still prefer to have information at the ready for forms and other data-heavy processes.

Whether pre-fill is used simply for remembering names and emails or more complex personal data, it’s still a great way to help users have a little fun amidst the tedium.

online-shopping2

[content_upgrade cu_id=”269″]Don’t miss: 6 Pre-Fill Apps for Mobile[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Pre-Fill and Conversions

Of course, more importantly than fun, pre-fill tools are also good for conversion rates.

Studies show that up to 86% of users will leave a page instantly when they’re required to fill out a form. Part of the reason for such a high number of abandonment is energy preservation; simply put, users don’t want to spent copious amounts of time filling out forms.

One study actually tested the effects of pre-fill on social media forms and found that conversions increased by 200% when businesses allowed forms to be autocompleted.

Basically, the less you ask users to do, the more inclined they’ll be to fill out your form.

Pros and Cons of Pre-Fill

However, as we mentioned earlier, all of that hassle-free, conversion-boosting fun doesn’t come without its own set of risks. Here are a few pros and cons of using pre-fill features in your forms.

Pro: Browsers can be programmed to store information for quickest time filling out forms, which can improve conversion rates.

Con: Some browsers can be buggy, and often put the wrong data in the wrong fields. When that happens, users have to perform an extra step to delete the wrong data in order to put in the correct data. If you thought an 86% abandonment rate was bad before, then you’ll definitely want to run multi-browser testing before implementing pre-fill.

dc59388737099.5602c53910639

Pro: Pre-fill can save passwords for quick login, saving time having to fill in form data every time a frequent user returns to your site.

Con: Pre-fill saves passwords, making them less protected (unless users have tools like LastPass).

Pro: Address validation can be a big plus for forms with pre-fill enabled, like e-commerce sites (think Amazon). This is especially helpful for users who might not remember their postcodes, because the validation tools fill those fields in automatically. Other features like geolocation can be helpful both for e-commerce and other sites that require a location.

Con: Address validation might be buggy and input the wrong information (see above).

Pro: Search engines often use pre-fill to allow users to select the most popular searches, and shoppers who use internal search are six times more likely to convert.

Con: The quality of search results affects a searcher’s ability to find what they want, so unless the pre-fill does a great job of finding results, it most likely will have minimal effect on search.

There are many different ways to apply pre-fill to forms to achieve the desired effect, but the biggest concerns to watch out for include safety concerns for saved passwords and buggy browsers that input the wrong data. So if you’re going to use pre-fill, make sure you’ve tested on multiple browsers and that you have a protection system in place for keeping passwords secure.

Another important thing to keep in mind when it comes to pre-fill tools is that they aren’t naturally accessible for many users, especially those using mobile or older browsers that don’t have extensions to help autocomplete their forms.

Pre-Fill Tools

But let’s get into the nitty-gritty of why you’re actually here. If and when you do decide that there are more pros for your users than cons, here are a few ways you can incorporate pre-fill tools into your forms.

HTML Form Autocomplete

This pre-fill attribute can be incorporated into your form’s code to trigger a browser’s natural autocomplete function. Just make sure to do some extensive cross-browser testing to ensure your forms work across multiple platforms.

Form Filler

This is an extension for Chrome that lets you fill in forms with dummy data. While not useful to your users, it will help developers test form functions and pre-fill features without having to go live first.

Form Auto-Completion Tool

GitHub has another tool for inputting dummy data quickly for testing purposes. According to the website, you can run this simple JS code by using Scratchpad or in a console.

Google Developer’s Autofill

This site will help developers implement Google’s Autofill add on for Chrome. It has a set of autocomplete attributes to help control how the browser will populate data for your users. They also have an autofill feature for Firefox, too.

Other Chrome Pre-Fill Add-Ons

Besides Google’s Autofill extension, there are several other browser add-ons you can use that are designed specifically for Chrome:

[content_upgrade cu_id=”269″]Don’t forget to checkout our list of 6 Pre-Fill Apps for Mobile![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

Pre-fill tools can be a great feature to add to forms in order to help users actually fill them out. Some of the places they can be particularly helpful include e-commerce forms or those that require a user to constantly login, like social media or membership sites.

One of the primary concerns surrounding pre-fill is the need for security, so you’ll want to make sure any browser extensions are encrypted and that passwords are stored securely using appropriate password management software.

You’ll also want to test any pre-fill forms in multiple browsers to prevent bugs, but you can use tools like Form Filler to populate dummy information for easy testing.

But don’t forget that pre-fill has the potential to significantly increase conversions and help users follow through on registering for accounts, events, and more.

The Quickest Ways to Modify and Optimize Your WordPress Themes

Do you remember the good old days when creating a website meant spending countless hours coding everything from scratch? Of course not, because you’re a WordPress developer, which means you have access to themes.

The great thing about themes is that they come pre-packaged with thousands of lines of code someone else spent time developing, which is truly life saving when it comes to time management. The downside to themes, however, is that someone else created them, so if the theme doesn’t match up with all of your needs, you’re going to have to put in a little extra work.

But the great thing about WP is that you don’t have to sacrifice your precious time to customize and optimize those themes. In fact, depending on your needs, there are several quick ways to make sure your theme has everything you need.

[content_upgrade cu_id=”261″]Don’t miss: Theme Optimization Checklist for WP Developers[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Pre-Optimization Cleanup

Before you really get into the nitty-gritty of optimizing your WP site, you can save quite a bit of time by going through your out-of-the-box theme and cleaning it up. (Actually, you can do this at any time of the process, but it’s arguably more helpful before you start working on a new theme).

Clean Up Messy Code

wp-codesnippets

Developers and programmers have a reputation of using messy code. But, to be fair, they often have a lot to do in a short period of time, and going back through hundreds of lines of code isn’t always on the agenda. It’s a “code first, ask questions later” sort of approach, which saves time but isn’t always the most productive in the long run.

Messy code in your theme can make it harder once it’s time to modify major sections of the site. Messy code can be anything from mixed coding styles, spaghetti code that can only be understood by the original creator, or unextendable code that just doesn’t play well with others.

Some things to look for when it comes to cleaning up code – even in a fairly clean, freshly downloaded theme – include hiding unnecessary or unused shortcodes (the good news is there’s a plugin for that), unwanted media (another plugin), and underused tags (did we mention there’s a plugin?). You can find more easy ways to cleanup areas of your theme at wpmudev, too.

You should also continue cleaning up your code as you go along, especially if you’re one to leave yourself comments or pieces of code that you plan to come back to later (but eventually forget about). At some point you should revisit your style.css file in your Theme folder and do some stylesheet housekeeping.

Ongoing Optimizations

Of course, once you start getting into heavier modifications to the site, you will inevitably wind up with more stuff than you really need on your site’s backend. All of the clutter can really bog down your overall speed, so the best way to optimize your theme is to get rid of all the extra stuff that came with it (or that you added).

Hide and Remove

A few immediate things you’ll want to remove include unused plugins. While you’re bound to keep a few around for functionality (and to clean up your code, don’t forget), there are just some plugins that you will have test driven with unsuccessful results. Ditch them as soon as possible.

Like we mentioned above, you’ll also want to remove any code (shortcodes, tags, etc.) that doesn’t add value to your site. You can use plugins to take care of them quickly. But you should also consider removing things like certain elements from your headers and even old themes that you’re keeping around “just because.”

In terms of usability, you can also hide parts of the dashboard or the visual text editor to give yourself a more seamless coding experience. Basically, if you don’t really need it, find a way to get rid of it. For things that build up over time like new code or plugins, like your mom used to say – if you’re done using it, put it away.

Selection_036

Source: WP-Optimize

Optimize Images

Images are a major part of your site, and not to beat a dead horse, but they’re important to your usability. But WP doesn’t always optimize images as well as it should.

For example, WP often adds layers of compression to their images. So, if you’re using the internal image editor to crop or edit a picture, the resulting image will be saved multiple times. Those images will also include their own attachment pages that quickly eat up space on the server if your site is image heavy.

One way to optimize is to pre-compress and crop images (using free tools) before you upload them. You’ll be saving yourself time later on when you’re trying to figure out why your site isn’t running as quickly as it should.

TinyPNG

Source: TinyPNG

Matteo Spinelli’s Cubiq.org blog also has some suggestions for practically handling images and removing attachment pages, among other things. And don’t forget that there are plugins that can help with a variety of optimization needs to save time.

Backup and Upgrade

Of course, one of the most absolutely essential components to optimization is backing up all of your data as you go, and then cleaning it up periodically as extra data piles up.

Again, there are plugins that can help you backup your database with little to no effort on your end.

Your database will also accumulate unnecessary data over time from things like revisions, spam comments, or even data from plugins that you’ve removed. All of this data can really bog down your site, so after you’ve made a backup, consider using plugins like WP-Sweep or WP-Optimize to remove the excess.

And you should always make sure that your site is running the latest versions of your theme as well as your plugins. You can easily update each from your dashboard, so that’s a no brainer.

[content_upgrade cu_id=”261″]Be sure to check out our Theme Optimization Checklist for WP Developers![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Ongoing Modifications

Finally, at some point you will probably need to make some larger tweaks to your site. If you’re working with a child theme in particular, you’ll probably end up creating additional styles and hooks. While all of that will still take time and energy, there are ways you can optimize to keep your expenditure at a minimal level.

Customization

There are generally two types of developers: one that likes to code everything by hand and one that likes to use editors and plugins to help. If you’re of the latter persuasion, you can always use WP’s built-in customizer API to give you a visual representation of the changes you’re making.

Before you go saying, “Well, duh!” you should know that there’s also a tool available that will help you take advantage of the customizer’s advanced features. Last year Redux and Kirki combined forces to create a framework that works fully in the customizer, giving you much more bang for your buck.

And if you still want to hand code, you can always use plugins like Simple Customize or Simple CSS to aide in your endeavor.

Switching Themes

Of course, there may come a time when your site is ready to move to an entirely new theme, which is a hefty task, but it doesn’t have to take as much time as you think.

Using plugins like All-in-One Migration or Duplicate, you can fully export/import your database, media files, plugins, and theme options. If you don’t mind paid options, you can also go with something like WordPress Theme Switcher.

But whatever method you choose, just make sure to follow all of the above tips by backing up your site, making sure there’s nothing miscellaneous in your code, keeping your images optimized, and using the right plugins to assist the job (and getting rid of the ones that don’t).

How to Build Efficient E-Commerce Checkout Forms

Forms come in many shapes and sizes, from the basic lead generation form that asks for a name and an email all the way to those pesky multi-step forms that will essentially require your entire life’s history to complete.

But somewhere in the middle is the e-commerce checkout form, which is a unique animal unto itself. But what makes it so special?

[content_upgrade cu_id=”239″]Don’t miss: 7 Examples of Truly Inspirational E-Commerce Forms[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Checkout Forms vs. Standard Forms

Well, for starters, checkout forms carry a bit more weight than standard forms, mainly because they need to process payments and fees. A standard form, on the other hand, is typically there to gather information, usually in the form of a name and email and not much else.

This means that checkout forms come with their own set of challenges. Some of those challenges include:

Calculating Payments

Your checkout form will undoubtedly pull a price from somewhere, and usually it’s a shopping cart. Even if your form is a simple one for processing a single payment (like downloading an e-book or a single product), there’s still payment involved, which means that your form has some calculating to do above and beyond a traditional form.

Even after calculating the price of the shopping cart items, your form will also need to calculate shipping costs (which can fluctuate based on a variety of factors) as well as any applicable taxes associated with the products. And you’ll need to make sure that you’re processing all payments through a secure gateway, which is another thing that you never have to worry about with standard forms.

Shopping Cart Abandonment

One other big factor when it comes to checkout forms is follow-through. Because most people who subscribe using standard forms are only asked for basic information, the follow-through rate is usually pretty high. But this isn’t always the case for e-commerce checkout forms. In fact, the average shopping cart abandonment rate – or the rate at which people don’t finish their purchase – is at a staggering 68%. That means 1 in 4 people will not finish using your checkout form.

The reason why people aren’t finishing their purchases is surprising: it’s about transparency. Customers often complain that they have little to no information about the purchase during the checkout process, including shipping fees and estimated delivery dates. Also on the list? Usability.

032

Basically, if a form isn’t upfront about the costs associated with the purchase, or the form itself is confusing and hard to use, people won’t bother filling it out. It’s those extra things that make a checkout form that much more harrowing for a designer or storeowner than a standard form could ever be.

So what’s the best way to overcome these challenges and create an efficient checkout form that customers will actually follow through on using?

Checkout Form Best Practices

To make sure that your users actually fill out your checkout forms, you’ll need to follow some best practices when designing them. Here’s a general rundown of things to include to make sure your forms are as efficient as possible.

Be Transparent

Like we said before, the number one reason people won’t use your form is a lack of transparency when it comes to prices. People want to see what’s in their cart, what their total cost will be (including shipping and handling), and when they can expect their product to arrive. Even if they’re ordering a digital download, you should still be upfront about when they can expect their download to be available.

Take a page from SodaStream’s book and include as much information as possible on your form’s landing page, even if you have to use multiple steps to do it (be sure to show the summary at the final step).

sodastream-blog-full

Don’t Force Registration

One surprising reason why people may skip filling out your checkout form altogether is being forced to register for an account in order to purchase something. When it comes to usability, forced registration is actually a top complaint.

While accounts are a benefit to anyone ordering – they make tracking packages and reordering easier, for one – they can turn people off if they’re mandatory. The best way to handle accounts it is to give your customers the option to setup an account (or save the information they’ve already inputted) after the checkout process is complete.

Make Your Form Fields Clear

While it may seem like common sense that people would know what to input into any given field, you would be surprised how often the wrong information ends up in the wrong place. To improve usability, try to make your form fields as clear as possible by including microcopy – little pieces of text that give instruction – above or below your form fields to eliminate any doubt.

wff1-blog-full

Include Fewer Fields Where Possible

The age-old adage “less is more” holds true here. Because checkout forms already ask for so much sensitive information, it’s important that you only ask for the things you absolutely need. Of course, this information will be more than a standard form because you’ll need things like shipping and billing address, but make sure that you’re only asking for information that helps verify a purchase so that users can get through it quickly.

Use Visual Cues

Because checkout forms are typically longer than lead generating forms, they will probably come in multiple steps, which can be confusing for many users, especially if your customer base skews toward the older generation. The more visual cues you can give – big, bold, colorful buttons, arrows, bullet points, or even small images – will go a long way to helping customers get through the process with minimal effort.

Use Progress Indicators for Long Forms

Speaking of multiple steps, the best thing you can possibly do for your long checkout forms is to include a progress indicator showing exactly which step the user is at in any given moment. If you’re able, you should also include a “save” feature so that customers can come back at any point in the process. Not only is this great for usability, but being able to come back to a purchase without having to do extra work is a great incentive for fulfilling purchases (and counteracting that pesky abandoned cart).

Include Trust Symbols

Finally, one of the most important things you absolutely must include in your checkout form is a symbol (or symbols) of trust. Trust symbols show that the user’s information is safe from hackers and that they can rest easy knowing that you’re not spreading their credit card information to spammers. If you skip anything else on this list, don’t let it be this!

oriental

Final Thoughts

Checkout forms may be a bit more complicated than standard lead generation forms, but that doesn’t mean they can’t be just as user friendly.

When designing or including these forms on your site, make sure to focus on elements like transparency and usability to eliminate the chance of abandoned carts.

Be sure to include only what’s necessary, and use visual elements like progress indicators, arrows, or images to guide your users through long forms.

And whatever you do, include trust symbols that show the user that their financial safety is your first priority.

[content_upgrade cu_id=”239″]Need a little inspiration? Check out our 7 Examples of Truly Inspirational E-Commerce Forms[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

9 Client Communication Tools for Designers and Developers

Working as a designer or developer is great when it’s something you’re passionate about, but that doesn’t mean it’s an easy job.

One of the biggest challenges is dealing with clients, especially if you’re working as a freelancer. But even if you’re part of an agency or larger organization, you still have to communicate with clients often.

If you have a relatively painless client, that might mean once a week, but if you have a more challenging client, that could easily be once a day (or more, if they’re micromanagers).

It’s easy for designers/developers to become overwhelmed by the level of communication going back and forth. How do you manage to keep your clients in the loop while retaining the majority of your sanity?

Well, we’re looking at a few helpful tips – and more importantly, tools – that are readily available to help out with all of your communication needs. Let’s dive in…

[content_upgrade cu_id=”229″]Skip to the chase by checking out our guide: Which Communication Tool Works Best for My Needs?[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Get Out of Your Inbox

getoutofinbox

One of the primary ways most creative types communicate with clients is email, which is an okay system if you hate being stuck in phone meetings. But the trouble with email is that sometimes wires get crossed: emails get stuck in spam folders or outboxes; people forget to hit “reply all” … The list of problems with email is unfortunately long, and it’s easy to miss something important in the chaos.

This is why one of the best things you can do is stop relying on your email inbox and use more collaborative software to help get your message across. This not only applies to simple things like asking a question or suggesting an idea, but using tools to share project proposals and previews of your work.

Here are a few great tools that can help you move outside of your email inbox:

ConceptShare

ConceptShare is a communication tool especially designed for creative types. It helps you streamline the review and approval process for any project, and it allows for online proofing with workflow automation, which means you can work with clients from one place without having to send a hundred emails back and forth.

InVision

InVision is web-based (and mobile) app that lets designers/developers turn their work into active prototypes with animations. Clients can provide feedback and comments directly on the site and track progress in real-time by looking at your to-do list.

Slack

Slack is a popular communication tool, and for good reason. It takes the best of email and live-chat features and combines them into one app that you can use on your desktop or mobile device. Aside from private messages you can also create collaborative boards around different projects or topics, which is helpful if you’re working with a larger team of people or on multiple projects with a single client at once.

Turn “Clients” into “Teammates”

turnclientsintoteammates

One of the most frustrating things about working with clients is dealing with someone who doesn’t understand exactly what it is you do. You might spend countless hours trying to explain to them why you can’t do what they want, or why it’s taking you so long to implement a certain solution.

While it’s easy to freak out about how much you need to communicate with your clients (time that could be better spent, you know, working on their projects), you can actually avoid much of that struggle by switching your mindset from communicating with a “client” to communicating with a “teammate.”

Clients are annoying bosses, but teammates are there to help and support you while you help and support them. If you’re feeling bogged down by a client’s level of interest in your methods, instead of pushing them away (or dropping them altogether), consider bringing them in as part of your “team” – even if it’s just for vanity’s sake.

Here are a few tools that can help you collaborate with clients:

Basecamp

Basecamp is a very popular web-based project management tool that helps multiple groups rally around a single project. Because the project is the focus, you can create a system where both you and the client are on the same page about various stages of the project.

Trello

Trello is another popular project management application system designed to break down projects into manageable “cards” that you can assign to different people. If you’re looking to create a collaborative team environment without worrying about being micromanaged (or needing to micromanage), Trello is the perfect solution. It also has the bonus of adding a visual element to otherwise technical projects.

Asana

Asana is a free project management tool designed to help teams track projects from start to finish. One of its best features is that it lets you see the overall progress of your project step by step, so your clients know exactly how long something will take without having to bug you about it.

Keep Track of Everything

keeptrackofeverything

The best case scenario for a developer or designer is to have a client that gives you a generous deadline and then trusts you to complete your project on time – meaning that they don’t hassle you at any point during the development project. But not all clients are easy.

If you’re working with a client that checks in with you constantly, whether about hours or project specs, it’s to your advantage to be one step ahead of them. The best way to keep micromanagers at bay is to make sure you’re already keeping track of everything before they ask about it. The more organized you are from the get-go, the better you’ll be able to squash any fears or concerns your clients have along the way.

Here are three tools that can help you stay organized:

Funnel

Funnel is a simple CRM tool that helps you keep track of all of your client information as well as project specs and more. You essentially create a pipeline that monitors all your activity with your client, which is especially helpful if you’ve been working with a client for a long time and want a detailed history of your projects. If clients are constantly asking about projects you worked on months or even years ago, Funnel can help.

Timely

Timely is a scheduling and time tracking app that helps you keep track of how much time you’re spending on a certain client or project. This is particularly handy if you have micromanaging clients, you bill by the hour, or you have someone on retainer for a certain amount of billable time each month.

Wunderlist

Wunderlist is a to-do list tool that helps you plan your individual tasks, set notifications and reminders, and collaborate with clients so they can see exactly what you’re up to and when you’re working. The best part is that it’s available on both desktop and mobile so you can update it on the go. If you have clients who want to see the project laid out in detail, this will help.

[content_upgrade cu_id=”229″]Still not sure which tool is right for the job? Download our free guide.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Final Thoughts

Working as a designer or developer isn’t easy, especially when it comes to communication. But you can lighten that load using tools specifically designed to help you communicate better.

Remember that email isn’t your only option when it comes to communication. In fact, you may be significantly better off staying out of your inbox altogether and creating a workflow that provides more visual and team-based communication for your clients, especially if they’re prone to avoiding your emails.

If you deal with needy clients, you don’t always have to push them away; sometimes the problem can be solved by bringing them closer to the project and making them feel like a part of the team.  Try using tools that let clients follow along with your project workload on their own so they don’t have to waste your time checking in.

Finally, stay on top of micromanagers by creating an organized system so you always know how to respond to pesky questions and requests. The more work you do on your end to keep everything running smoothly, the less likely they’ll be to light up your inbox or phone with messages.

Should You Use Single-Step or Multi-Step Forms?

When it comes to conversions, most marketers hold to the age-old adage that “less is more.” But is that always true?

Well, yes and no. When it comes to forms in particular, simpler is usually better, but that doesn’t mean it’s the only option for engaging customers.

There are actually a couple ways you can approach creating forms to maximize conversions. The first way is considered the “simple” way, and it involves creating single-step forms with only a few questions and one “Submit” button. The other way is, of course, the “complicated” way, and involves creating multi-step forms that have several pages worth of questions and multiple “Next” and “Submit” buttons.

Initially, it may seem like the simple way is the clear winner when it comes to boosting conversion rates. After all, the less work a customer has to do to get what they want, the better, right? Well, not necessarily.

When the folks over at Conversion Fanatics did an A/B of single-step forms versus multi-step forms, they found that the conversion rates were fairly similar. In one case, they found that the multi-step form actually performed better.

So which choice is truly the best for conversions? Well, the answer depends on the goal of your form.

To simplify the process, we’re taking a look at both options to help you figure out which form type is best to get you the leads you want.

Let’s dig in…

[content_upgrade cu_id=”195″]Bonus: 7 Tricks to Optimize Your Complicated Forms[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Simple, Single-Step Forms

Single-step forms are the most common type of form. They can include basic contact forms, subscription forms, and any form that gathers general information. For the most part, single-step forms are a great choice for conversions, especially when all you need is basic information. There’s no need to inundate your users with pages of form fields if all you want them to do is sign up for an email newsletter. But are they always the best choice? Well, it depends.

Single-Step Forms Work When…

In his research on optimizing contact forms, Neil Patel found that having only three form fields was better than having more fields when it came to conversions. By simplifying his forms, he improved his conversion rates by 26%. Basically, when it comes to contact forms, shorter is sweeter.

The same is true for forms that deal with opt-ins and lead generation. When dealing with users who are new to a site (or who essentially aren’t yet invested in your business), the single-step forms outmatch the multi-step forms more often.  

Single-step forms also tend to perform better for conversions when less information is needed or when enticing a customer to take a specific call-to-action.

Single-Step Forms Don’t Work When…

But single-step forms can actually backfire if you’re trying to gather too much information at one time. In fact, using more than 4 forms fields on a single-step form can send users running for the hills.

In one study, an 11-field version of a contact form was replaced with a 4-field version, which resulted in a 160% increase in the number of forms submitted and a 120% increase in overall conversions.

Not to mention that long forms can be extremely overwhelming to look at, even if they’re still considered single-step. In terms of conversions, single-step doesn’t work if the form is too long, like the example below.

longform

What Are the Best Uses for Single-Step Forms?

Single-step forms are a great choice for simple information gathering. If the majority of your forms are focused on opt-ins, contact information, or lead generation, then simple is the way to go.

Simple forms are also great for getting creative with animations, like the example below.

getstudiokit

Essentially, if you want to take advantage of single-step forms, remember to keep them short and sweet. Focus on the essentials and create a call-to-action that entices new customers without overwhelming them with information.

Complex, Multi-Step Forms

The general idea behind multiple-step forms is that the further the prospect goes down the sales funnel, the less likely they are to turn around when asked for valuable information. Essentially, they’re more likely to finish the whole form because they’re already committed. But does this idea hold up in the real world? Statistics point to yes.

Multi-Step Forms Work When…

One company compared user rates for single-forms versus multi-step forms and found that 14% more people finished the multi-step form than the single-step, including those who stopped filling out the form and returned to fill it out later. They found that people were more likely to finish longer forms when it required them to provide a lot of sensitive information.

Basically, people like filling out longer forms when they’re already invested in the process, like during checkout while shopping online.

Complex forms also work when you need to collect a lot of information, but you know that putting all of your form fields on one page will be overwhelming. By creating a multi-step process, the chances are higher that people will fill it out.

Multi-Step Forms Don’t Work When…

However, complex forms don’t work quite as well when you’re trying to generate brand new leads, or get people to subscribe to basic functions on your site like a newsletter or email list.

They also don’t work well if you don’t have the form’s progress clearly listed somewhere. It’s important to make sure that you provide the user with constant feedback on their progress to let them know how much more time they will require to finish the form.

What Are the Best Uses for Multi-Step Forms?

If you need a lot of information but don’t want to overwhelm your customers, multi-step forms are a great choice. If you’re curious about using multiple-step forms but still want the feel of a single-step form, you can also use what’s known as a single-field form. The single-field form includes multiple steps, but lets users fill it out one field at a time (like the example below).

Single-Field-Form-Interface

When it comes to conversions, however, the best uses for multiple-step forms include checkout processes (for e-commerce stores), and forms that require information from current customers or those who are already invested in your business.

Which Should You Choose?

Does the information presented here feel conflicting? Well, the reality is that either form will help you boost conversions if used in the right context. Certain form types work better in certain situations.

If you run an e-commerce store, for example, and you’re running into a lot of abandoned carts or find that your customers stop short of filling out the billing information, your forms might be better suited to the multi-step process. The same is true if you need a lot of information from your users upfront, but don’t want to overwhelm them with a single-page form. (Just make sure to include the progress as visibly as possible.)

On the other hand, if your forms are used more for gathering basic contact information or getting subscribers for a service or special offer, then single-step forms are a much better option. They’re quick to fill out and easy to animate, making them the perfect choice for quick conversions that don’t require a lot of investment from your users. And generally speaking, the age-old adage still stands… less is more.

[content_upgrade cu_id=”195″]Need help optimizing your complex forms? Check out our list of tips and tricks.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

How Integrating Your Forms With Other Apps Will Save You Time and Effort

Does your company use forms? If so, you already know there are plenty of creative ways to use them, from gathering customer feedback to processing product orders and answering questions. But do you also know that your forms can do so much more than that? Your forms, when combined with other helpful productivity apps, can save you a ton of time and effort. How?

Two words: automated tasks.

When you set up a form, the last thing you want to do is track every entry, send a bunch of emails, and follow up with everyone who’s submitted a form on your site. That’s why it’s a necessity to set up automated processes for everything that happens after users hit “Submit.”

If you’re using a content management system like WordPress, you’re probably using plugins to manage your forms, which means you already have some level of automation in place. But there’s plenty more you can do with automation that can save you huge amounts of time (and that lets you do much cooler things).

So where’s the best place to start? With tools, of course.

Automation Tools

When it comes to automating tasks, Zapier is the granddaddy of all automation tools.

zapier

Zapier helps individual apps work together to create an automated workflow. You choose two apps to integrate, and when something happens in one app – someone fills out your form – something happens in the other app – you get a notification (or something much more creative, but we’ll get to that).

There are other alternatives to Zapier, like Pipemonk. But with over 350 apps supported, you have a better chance of finding the app you need using Zapier.

Once you’re setup in Zapier, which apps should you combine? Well, you should start with your form, obviously. After that, you’ll need to determine which app will help accomplish your goals. Let’s look at a few options.

zapier-happyfox

[content_upgrade cu_id=”186″]Don’t miss: Which Productivity App is the Best Choice for You?[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

Integrated Apps

Apps are a great way to get things done with minimal effort. They take heavy tasks like sending emails and creating databases off your shoulders so you can focus on other things. Here are some great examples of how apps can integrate with your forms to save time.

Send Marketing Emails

Chances are if you have a form, you’re probably collecting emails. But once a user gives you their information, where does it go? Do you collect all the form data together and store it away in some spreadsheet never to be seen again? If so, you’re missing a huge marketing opportunity.

By using a tool like Zapier, you can integrate your forms with apps like MailChimp or Intercom to send targeted emails to your users. It could be something as simple as a quick thank you email, or a follow up to a question or concern, or even a promotional email targeting a product or service they were interested in. Either way, sending out a quick, personalized message is the perfect way to keep customer attention and make sure your piles of gathered email addresses don’t waste away in a database somewhere.

Apps to consider: Email or marketing app such as MailChimp, Constant Contact, Campaign Monitor, Intercom, HubSpot, Pardot, Infusionsoft, etc.

Build and Save Databases

Of course, if you’re the type who still needs to collect form data in spreadsheets (and you actually plan on using it later), you can still automate the process to save you some time. Integrate your forms with apps like Google Sheets or Excel to capture bulk information quickly to save or use how you please.

This is especially helpful if you share your databases with other businesses or clients. You can connect your customer forms to any app needed, whether it’s setting up a card in Trello or sending form submissions to Go-To-Webinar. Either way, having your databases easily accessible is a great benefit.

Apps to consider: Database and form apps such as Google Sheets, Excel, Zoho CRM, Knack, FormKeep, Gravity Forms, etc.

Send Team Notifications

Your customers aren’t the only ones that need to receive notifications once a form is complete. You might also consider notifying your team so they can work to process any data that’s been submitted. That’s where SMS and other team notifications come into play. Use apps like SMS by Zapier, Slack, or Flowdock to send notifications to those who need it.

Of course, different notifications work best depending on your situation. Sometimes sending an SMS to every team member is the best choice, whereas a private chat message to a specific team member may be a better alternative. Whichever way you choose, you can use notifications to keep on top of your workload in real time.

Apps to consider: Instant messaging apps such as SMS by Zapier, Pushbullet, Notify My Android, Slack, HipChat, Flowdock, GoToMeeting, Jabber, etc.

Gather Leads for Social Content

Maybe you need your apps to do something a little more creative than standard notifications. How about setting up a workflow that turns your forms into social media posts? Apps like Buffer let you integrate forms (that you can design to gather specific pieces of information) that you can use for social updates.

This system also works to help manage content for your blog. If you use your forms to gather information like customer testimonials, you can easily create documents full of content that can be used to develop new posts later on. The Vadamalai Media Group did something similar by creating a vBulletin forum about agriculture where members could post products they wanted to buy or sell. Then, they made a Wufoo form that allowed visitors to fill out information about the items they want to buy or sell, gathered that information, and used it to create content.

Apps to consider: Lead generation or social apps such as Wufoo, Unbounce, vBulletin, Buffer, Yammer, etc.

Create Surveys

Surveys are a great way to find out what your customers are thinking, but sorting through the data can be a time-consuming job. If you use forms to gather customer feedback, why not integrate with other apps that automate all that information?

You can input your form surveys to a database or spreadsheet, then have those databases send feedback emails and even Twitter mentions to keep your customers feeling special.

Apps to consider: Any survey, database, or social app such as SurveyMonkey, Webflow, SurveyMethods, Twitter, Facebook pages, Google Sheets, etc.

Track Purchases and Orders

While most forms are about collecting basic information like names and emails, some forms are used for more serious business, like processing transactions and purchases. If you use your forms to take payments, then integrating with apps that make that process easy and secure is a must.

If you need mobile payments, you can use apps like Xero to process payments and track invoices. PayPal and Zoho Invoice will also do the job nicely, and most pair well with Zapier to connect seamlessly to your form software of choice.

Apps to consider: Ecommerce or billing apps such as Xero, PayPal, Square, Zoho Invoice, WooCommerce, Shopify, Braintree, Chargify, etc.

Manage Schedules and Bookings

Do you use forms to manage your business calendar and schedule customers for appointments? If so, you might want to consider integrating your forms with your favorite calendar apps to save time.

Some businesses use forms to help customers manage bookings, like the Visit Sierra Leone team. They have an airport transfer and travel guide service, so they created a form for people to submit their arrival information. When someone fills out the form, Zapier connects with Google Calendar and sends a confirmation email to the customer and an SMS message to the airport.

Apps to consider: Booking apps such as Google Calendar, YouCanBookMe, ScheduleOnce, Calendly, etc.

Give Customer Support

If you have customers, you have customer inquiries. If some of the forms on your site are dedicated to taking customer questions and feedback, you’ll want to make sure that process is as smooth as possible. There’s nothing customers hate more than a delayed response when they need help.

That’s where Zapier and other integrated apps can help. Apps like Zendesk make it easy to answer customer questions from one location, and you can import your forms directly to the virtual helpdesk. Do you need to give real-time answers to your customers? Try using a text or chat app like LiveChat to reach customers faster.

Apps to consider: Customer support apps such as Zendesk, Help Scout, HappyFox, LiveChat, LiveAgent, Pure Chat, etc.

[content_upgrade cu_id=”186″]Still need help deciding which app to use? Check out our comparison list.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

“Above the Fold” Design Strategies that Turn Visitors into Customers

One thing’s for sure – we all want websites that convert. But getting random site visitors to turn into customers isn’t always an easy task. You have to balance the right amount of attraction with the right amount of useful information to keep them on your page.

That’s where site design comes into play. Eye tracking research conducted by Jakob Nielsen reveals that when visiting a new website, up to 80% or more of a user’s attention is focused at the top of the page, known as “above the fold”. What does this mean? It means your most important information should be located there if you want to improve your conversion rates.

But what exactly is “above the fold” and how can it help boost conversions? Here’s what you need to know.

Above-the-Fold

What is “Above the Fold”?

“Above the fold” is a term for any content that displays at the top of a website’s landing page. The “fold” itself originated in the world of print, when newspapers were folded in half and the most important stories, headlines, and graphics were placed above the crease line in order to grab attention.

When the Internet became the main source for major news in lieu of newspapers, the fold still remained a defining point between content that was considered compelling and content that was purely informational. Once the Internet evolved as a main source of information, however, the fold became synonymous with the content that a visitor first sees when landing on a website without having to scroll down (which, in essence, is a “digital” fold).

But websites are not newspapers, and when it comes to this digital fold the real question remains: Does above the fold still matter?

And perhaps more importantly, does above the fold design still work for conversions?

Is It Still Important for Conversions?

The answer? Kind of…

Chartbeat argues that most conversions (about 66%) actually happen below the fold instead of above it, while some designers feel that the fold concept is obsolete altogether, and may have minimal impact on conversion rates. In terms of conversions, above the fold may be technically irrelevant.

However, those same designers will still argue that first impressions are important. And since users spend a majority of their time looking at information above the fold to judge a website’s validity, above the fold design strategies are still the best way to make a great impression.

Above the fold design is about giving customers a chance to spend time on your page. Statistics show that the longer users are engaged, the higher conversion rates will ultimately be.

So while it may not have immediate impact on conversion rates, it’s still a vital component for engagement and long-term conversions.

But what should you put above the fold to entice visitors?

[content_upgrade cu_id=”178″]Bonus: Check out our “Above the Fold” Checklist for Designers.[content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]

What to Include Above the Fold

A 2014 Google study found that advertisements placed above the fold were rated with 73% viewability (defined as 50% of the ad’s pixels being onscreen for one second) compared to only 44% viewability for ads placed below the fold.

A Nielsen Norman Group study also noted that, “What appears at the top of the page vs. what’s hidden will always influence the user experience – regardless of screen size.” The Nielsen study found that the difference between how users treat information they see above versus below the fold is 84%, meaning users will only scroll below the fold when what’s above it promises significant value.

DO give a promise of value

Above the fold design should set expectations for future content: Is what’s being offered interesting? Is it worth reading? Is it helpful?

The best way to add value is to choose design elements that grab attention:

  1.  Use images to create a happy environment that draws people in. Whether you’re selling a problem-solving solution or a vanity product, you’re also selling an experience. Choose graphics and images that reflect happiness to set the mood. The New York Times found that happiness is one of the main drivers for social media sharing.

Men-With-Pens

Image source: Men With Pens. A great example of “happy” design.

  1.  Choose headlines that offer solutions to problems (even if you’re selling a
    vanity item). Your graphics, images, and colors will probably be the first thing your users see when they visit your site, but your headline is what really tells them whether or not they should stay. Having headlines that address problems or pain points has been shown to increase conversions by 32% or more. Copyblogger has a great article for crafting headlines that work. But if all else fails, stick with a “How To” headline, as they’re shown to be the most effective (e.g. “How to Cure Your Acne in Just One Week”).
  2. Offer website differentiations that prove your credibility. Placing your website’s credentials — trust badges, social proof, etc. — above the fold is a tried and true method to increase conversions. This is especially true if you have an e-commerce website, as studies show that buyer confidence is often linked to trust. Cars.com recently boosted their conversion rate 2.7% by having a security seal on their site. Adding social proof and credibility indicators can improve conversion rates by 144.1% on landing pages.

Image source: Sidekick (now HubSpot Sales). A great example of using social proof (‘200,000+ Weekly Active Users”)

SideKick

DO include a Call to Action, but ONLY IF…

While it’s important to include a Call to Action (CTA) somewhere on your website, above the fold may not actually be the best place to do it (though there’s still some debate). In the past, most CTAs have been placed above the fold to grab attention, but, as Chartbeat noted, most interaction actually happens below the fold, making above the fold CTAs essentially useless.

Oli Gardner from Unbounce echoes that sentiment:Placing your CTA above the fold is the most common placement choice. However, this can be expecting too much of someone who has just arrived at your page.”

So does this mean that you should never include a CTA above the fold? Not necessarily. It depends on the kind of customers you’re trying to attract. You should include an above the fold CTA if…

  1.  Your site visitors already know who you are and what you offer. It’s best to give the CTA right away in this case, as they’re visiting your page to get something accomplished, not to learn more about your product or service. Or…
  1.  Your site visitors are new but what you offer has immediate, noticeable value. If what you’re offering is fairly straightforward (e.g. you sell soap and only soap), then your newbie visitors would benefit from an above the fold CTA, assuming you give them some content and context. In this case, including a few sentences about your product or service along with your CTA will increase conversions.

Buffer

Image source: Buffer.

However, if your customers don’t know who you are and what you do needs some additional explanation, do not put your CTA above the fold, as it may put off potential customers.

If you’re having trouble deciding whether or not to put your CTA above or below the fold, just remember that it’s all about motivation: How motivated is your visitor to click that button? If you find that your visitors may benefit from more copy related to your product or service in order to help them decide, then it’s better for your conversion rates to keep your CTA further down the page.

DON’T create a false bottom

Even if you’ve decided to keep your CTA above the fold, don’t forget to actually include something below the fold. Many websites create what’s known as a “false bottom” – a design that makes it seem as though there’s more information on the page to scroll to, but in reality has nothing else but the CTA.

If you’re really after conversions, you can’t stop at above the fold design. You have to include something that users can scroll down to, especially if your visitors are viewing your page from mobile devices. A 2015 Q2 MOVR Report revealed that 11% of mobile users start scrolling within 4 seconds when the page has finished loading. If you have nothing to show below the fold, your visitors are more likely to move on, which means fewer conversions for you.

Joanna Wiebe of Copy Hackers & Airstory says, “Don’t cram everything above the fold. Countless tests and [scroll-tracking] studies have shown that visitors are willing to scroll… as long as they know there’s something to scroll down for.”

What’s the best way to keep people scrolling? Include great content below the fold, too.

DO include great content below the fold

Ultimately, your visitors will decide quickly whether your site is of value, which is why it’s important to have a great above the fold design (you should put your most compelling content up there!). But once they begin scrolling, they’ll need more substantial information in order to take the next step (e.g. click that CTA button). If your site is nothing but above the fold design, you’ll miss out on the chance to truly convert. Be sure to include content that keeps your visitors scrolling after you attract their attention.

[content_upgrade cu_id=”178″]Need help designing above the fold? Our designer’s checklist will help![content_upgrade_button]Click Here[/content_upgrade_button][/content_upgrade]