This Is How You Build A New Website

Are you looking to launch a new website?

Not sure where to start?

Or looking for some creative inspiration before you dig in?

Check out this article about 15 Addicting Web Design Guides To Get You Hooked.

Sooner or later, after you dig in, you’ll likely reach a point that you want to collect data on your static website. Maybe it’s a lead collection form or a registration form or even an order form. When you reach this point, you’ll learn that creating a form is relatively easy. You can learn most of what you need to know from w3schools.

However, things get a little more difficult when you start working on how to collect data from the form. Do you want the form submission to trigger an email, store data in the could or push data to another system? There are all kinds things you might want to do with a completed webform.

Luckily, FormKeep makes it easy to connect the webforms you create with a hosted database in the cloud to store your data (a form backend) and, even, connect that data to thousands of applications via Zapier.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

Dive right in on your projects and if you have any questions about how to store data from your webforms, contact us at https://www.formkeep.com

Your Form Design, Our Backend

One of the reasons that FormKeep is so popular with web developers and designers is that it’s easy to style your form exactly the way you want. Unlike alternatives that require you to use their form templates and layouts, FormKeep makes it easy to layout and style your form exactly the way you want without worrying about building a backend to receive your form data.

Material Design Screenshot
Learn About Clean Form Layout

Modern web design and form layout principles are always changing and, of course, design preferences vary depending on the developer, designer or target user. Material Design’s website https://material.io offers a great overview of how to style an impactful HTML form. Check out their HTML design overview by clicking here.

To learn more about how to capture your form data on the backend in a database or connect it with another application or receive your form data in email, check out formkeep.com. Once you set up a FormKeep free trial account, it’s easy to connect your form with FormKeep.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

What Your Tech Stack Should Look Like If You’re Building Static Sites

We’ve previously mentioned the many benefits of building static sites over using a traditional CMS like WordPress. But if you’re new to building static sites, it may feel intimidating to create something “from scratch” using a static site generator.

One of the biggest differences in building a static site is the technology involved, which scares many first-timers.

WordPress and other CMS’s may seem like a better choice because they claim to do much of the work for you, but many developers find the flexibility rather limited after a certain point.

And the good news is that building a static site doesn’t mean you’re left without help. In fact, there’s plenty of technology out there that can assist you in equal (or sometimes better) ways.

Here’s what you need to know about having a good tech stack when building static sites.

Languages

This is going back to the basics, but the first thing you need to consider before you determine your tech stack is what languages you will be using.

Preprocessor languages are programming languages compiled into three types: HTML, JavaScript, and CSS. Examples include CoffeeScript, LESS, HAML, and Dart.

Each offers different syntaxes, features, as well as other benefits, and each static site generator (SSG) will allow for different preprocessor languages. It’s important to determine what language you’re most familiar with before you decide on a SSG.

While you don’t necessarily need to know anything beyond HTML to build a static site, you may want to consider brushing up on a preprocessor language to gain some advantages. Chris Loos over at Urban Insight has 10 reasons for using CSS preprocessors.

Site Generators

Unlike CMS, building a static sites requires generating HTML files that are served “as is” with no other database involved. For many developers, that means using editors like Dreamweaver or Notepad to code everything and then hosting those files to create the finished project.

Thankfully, technology has evolved enough to give us SSGs, tools that allow the creation of static sites in any number of languages.

Some popular SSGs include Jekyll, MetalSmith, Grunt, and Pelican. These SSGs can be used either with markup files as a source or even using a hosted content API such as Contentful, Medium, or yes, even WordPress.

jekyll-1024x516

SSGs help developers perform important tasks such as combining multiple files into one, compiling preprocessor languages, or even packaging code into a mobile application without having to do everything “from scratch.”

So which do you choose?

Well, some SSGs are built for a specific purpose, while others can be used for almost any site. It’s essential to find something that fits your workflow, is actively maintained, and has an active user community for when you have questions. If you need help deciding, we’ve ranked a few of the top options here.

Templates

Of course, if you did want to take a more “from scratch” approach without needing to spend countless hours coding your site, you could always use a static HTML template.

HTML templates come with pre-made features that allow you to fill in the blanks, so if you’re used to plugging components into templates with a CMS but you still want the benefits of static sites, you can find a template to meet your needs.

You can find a variety of pre-made HTML templates on sites like Template.net, Template Monster, and ThemeForest.

Package Managers

Another important aspect of building a static site is packaging your files together. But keeping track of all those packages and making sure they stay updated can be difficult, which is why many developers choose CMS over SSG.

However, there are package managers designed to help you manage things like your libraries, languages, fonts, and even images. A couple of popular package managers include Bower, which allows you to install open source or shared library code, declare dependencies for your projects, and more.

bowerio

APIs

One of the noted downsides to using static sites is the lack of APIs, meaning that there’s little interactivity, which, of course, is the point of doing something “static.” But if you still wanted the functionality of a dynamic site while building a static site, there are a few workarounds you could consider.

Raymond Camden has a tutorial for adding the “read” aspect of an API to your static site using any SSG.

Brandon Brown has another post on how to develop JSON APIs using Surge.

Static Web Hosts

Finally, and perhaps most importantly next to choosing a SSG, you will need a place to host your project once you’re ready to launch.

amazon-web-services-logo-cc90d03c8e148873b8b6cc1a7fdbdf1a

There are many options for static web hosting including traditional shared hosts, online storage with hosting, and a few services even have dedicated static web hosting.

So how do you choose a good host? Here are a few things to look for:

  • What is the cost you’re willing to pay for hosting?
  • Does the host support HTTPs? Do you need HTTPs support?
  • What is the upload method to host files? (GitHub, manual upload, etc.)
  • Does the host offer a Content Delivery Network (CDN)?
  • Do they support form handling?
  • Do they support build automation?
  • How easy is the deploy process?
  • Are there other developer-friendly features like rollback?

A few of the top hosting services for static sites include GitHub Pages and Amazon S3. You want to find a service that will give you the flexibility and support you need for every project. And, while many hosting services are cheap or free, be careful that you’re not undercutting your value.

Final Thoughts

At the end of the day, choosing a tech stack comes down to finding technology that works well for you and your team and will help you stay productive.

If in doubt, you can always ask around (or check on the links we’ve offered). But, remember that what works well for one developer or site may not work well for yours, so it may require some testing to get things just right.

Remember, one of the benefits of building static is that you also have more flexibility to build your ideal stack, one that fits your needs and helps you do the work faster and keeps things maintained and updated with as little stress as possible.

How to Create a Higher Converting Form Landing Page

Landing pages are kind of like snowflakes – no two are exactly the same.

Though there are plenty of similarities between landing pages, and for good reason. There are certain strategies that simply do better for conversions, and so almost every page you see has some version of the following: a headline, explanatory text, and a call to action.

Why? Well, because these elements work.

But the exact application of each of these elements varies, with factors including things like audience, purpose, intent, angle, focus, industry, niche, and overall value.

In other words, one size doesn’t fit all. In fact, the way you blend these elements and factors together can make or break the effectiveness of your page.

Here’s what you need to know to create the most effective form landing page possible.

Dos and Don’ts for High Conversions

The average landing page conversion rate is around 2-3%, but the top 25% are converting at 5% or higher, with some reaching 10-11% or more. Here are some do’s and don’ts to follow if you want to see your numbers cross above the 5% threshold.

DO Include a Powerful Headline

It may feel cliché to include a catchy headline, but think of it as your first CTA. The headline is where everything begins – where your audience decides if they’re going to stick around or not, whether you’re interesting or boring.

But it’s not just there to grab attention, it’s there to inform. It should be short (preferably 10 words or less) and to the point, and your audience should think, “Oh wow, tell me more!” by the time they have finished reading it.

headline

(Neil Patel over at Quicksprout has some suggestions for writing powerful headlines here.)

DO Include a Persuasive Subheadline

If the headline is your “oh wow”, your subheadline is your “let me hear more”. Your audience should be able to say, “This is why this page exists” by the time they finish reading it.

You should position your subheadline underneath the header (obviously), and it should be more persuasive than your headline copy. You can also give a little more depth and detail, as it can be longer than your headline.

DO Include Explanatory Text

It doesn’t have to be paragraphs upon paragraphs, but even something like a little extra wording to clarify the header/subhead can go a long way, especially if you get creative with the latter.

explanation

You also want to make sure that if you do include longer text, it explains the benefits that the user will receive if they fill out your form or otherwise engage with the CTA. They should be able to answer the question, “This is what I get out of the deal.”

DON’T Spend Too Much Time Explaining

That being said, you don’t have to give your audience the entire history of your company or really any more information than they absolutely need. Too much text can be visually overwhelming and make people think that your offering is more complex than it is.

badlandingpage

No. Don’t do this.

DO Include Large, Relevant Images

Did you know that the brain processes images 60,000 times faster than text? Now you do.

The images you use are just as important as your text, if not more so. They should be large, high quality, and relevant to your product or service. Like a headline, the primary goal of your image is to grab attention and help your audience relate to your product or service.

DO Include Visual Cues

Having a picture of a smiling person may do a good job of commutating how your customers will feel when they fill out your form and receive their product or service (or free eBook, etc.). But if you want to be more effective, use other visual cues to help users out.

Arrows are one of the most effective tools since they can easily guide an eye line to the right place (e.g. your CTA). You can make them noticeable:

arrows01

Or keep them subtle:

arrows02

DON’T Forget Smaller Visual Cues

If you’re a fan of the subtle route, there are plenty of ways to incorporate tiny visual cues that can be high converting without needing to draw a big red circle around your CTA.

Velaro, for example, uses a small PDF symbol on their image (above their form) to signal to the user that something can be downloaded and in what format it will arrive.

velaro-landing-page-example-1

Instead of using an image of a person or scenery, Single Grain uses the elements in the background to point toward the form itself. The average user wouldn’t even give it a second thought. (They also include a small animation that makes the CTA button wiggle).

singlegrain-homepage-form

DO Include a Demo or Test Drive

Some forms are dedicated to letting users sign up for a demo of their product, but some regular forms include a demo video or a “see how it works” link on their landing pages to help users decide if they want to sign up before they absolutely need to commit.

“Try before you buy” can be helpful for new companies that don’t have significant reputation in their chosen industry.

DON’T Forget Your Value Proposition

Finally, your value proposition is the most important part of your landing page. Another word for it would be your CTA, but unlike the “submit” CTA on your form, this one comes with more of an invitation.

Your value proposition can be spread among any of the above elements. In fact, it should be in all of the elements – in your explanatory text, in your buttons, in your images, and in your headline.

By the time they scroll to the very bottom of your landing page, your audience should know exactly why they’re there, what they’re going to get, and how they can get it.

Final Thoughts

Creating a killer form is one thing, but creating a landing page that truly converts (to put that form on) is another animal entirely.

If you want to see higher conversion rates, be sure to include elements that bring the focus on the action you want the user to perform.

Use a good headline to draw them in, choose relevant images that highlight and point to your CTA, use text that explains the benefits of the form, and don’t forget to mention any additional goodies that they may get out of the deal.

3 Major Speed Hacks for Busy Developers

Web developers sometimes get the short end of the stick when it comes to building websites.

They’re not quite as lauded as the designer (unless they’re also doing the design), but without them you wouldn’t have much in the way of functionality.

Truly, developers are the heart and soul of a website, and they understand one simple principle: Even the simplest website has a lot of code.

Which means that if you’re working as a developer, you’re going to be busy.

Now, there are a lot of ways you can build a website quickly, like using a CMS or a static site-generator. But sometimes you have to handle code the old fashioned way, and you just need a little help.

The good news is that there are a few things you can do to make building a website faster and more efficient than ever. Let’s take a look.

#1. Use Browser Tools

It should go without saying that if you’re building a website, you’re going to spend a lot of time on the web. So, as long as you’re there, why not put your browser to work for you? Here are a few popular options for browser add-ons that can save you time.

FireBug and Chrome DevTools

Sometimes you’ll run into problems with your code not displaying properly on the front-end. Instead of searching through lines of code, you can quickly find the problem by using a browser extension like FireBug (for Firefox) or Chrome DevTools (for Chrome).

chromedevtools

Each allows you to inspect, edit, and monitor your code in any web page to see where things are working (as well as where they’re not working).

Web Developer Toolbar

Available for Firefox, the Web Developer Toolbar gives you a few options for editing style sheets in real time. You can also perform a variety of other helpful tasks straight from your browser’s toolbar, including disabling problematic JavaScript and CSS, quickly validating HTML links, and more.

ColorZilla

Have a designer or client that’s super picky about the color of a font or element? Well, don’t sweat it. Available for both Chrome and Firefox, ColorZilla lets you select the exact color of an image or element and gives you the right color code. It can also be used to add and edit gradients in addition to some other helpful features.

colorzilla

Instant Wireframe

Instant Wireframe is a Chrome extension that lets you view web pages with a wireframe overlay, with options for both live and local viewing.

InstantWireframe

There are plenty of other browser tools that can help speed up your coding process. CreativeBloq has a list of 30 tools for handling various tasks directly from your browser of choice.

#2. Use Off-The-Shelf-Code

A lot can be said for a CMS that gives you pre-made templates to work with, but that’s not always an option if you’re coding a site from scratch.

That being said, coding a site takes a lot of work even with a template, so if you’re looking to save time and you’re not cornered into a particular template or design already, consider using a pre-made CSS library, boilerplate, or framework to help you out.

Bootstrap

Bootstrap is a powerful and popular front-end framework that gives you clean typography, form elements, and almost everything you really need to create a modern and mobile-ready website.

bootstrap

Grunt

Grunt is a boilerplate – a template for code – that gives you hundreds of plugins to automate just about any task. Many developers shy away from boilerplates because they either don’t know how to use them or they don’t know about them. But boilerplates like Grunt can help take care of recurring issues, hand off projects to other developers, and improve your process overall.

Grunt

Skeleton

Skeleton is another boilerplate framework that makes it simple to create a grid-based site. Their grid includes up to twelve columns and shrinks with the browser/device at smaller sizes. The syntax is also fairly straightforward, making coding response times faster.

skeleton

#3. Use Project Planning Tools

One of the biggest time wasters when it comes to coding is having to go back and repeat a task because it fell through the cracks the first time around. That’s why having a great plan in place from start to finish can save huge amounts of time for developers.

If you’re really looking to save time, you can use project planning tools and checklists to make sure that you’re covering all your basis so everything stays running smoothly.

Writemaps

Writemaps is a tool that helps you quickly create a sitemap and gather content before starting your project. It also gives you the ability to preview your sitemap with clients so they can approve everything before you start, saving you plenty of energy in the long run.

writemaps-slide1

Trello

Trello is a helpful project management tool that lets you create cards for each of your templates and elements so you can keep track of everything in one place. It’s also helpful if you’re working with a team of developers and designers, as you can assign different people to different cards, set due dates, and create notifications for tasks yet to be completed.

Trello

Web Developer Checklist

While technically this could fit into the browser tools category, Web Developer Checklist is an extremely helpful plugin for planning out your project, so we’ll include it here. This extension allows you to check to make sure your pages are following best practices when it comes to SEO, usability, accessibility, and performances, making it great for catching anything you’ve missed before your clients notice.

webdevchecklist

Final Thoughts

Keeping track of everything you need to do to build a website can be tough, but with the right tools, you can save massive amounts of time and energy.

If you’re constantly jumping from your back-end code to your front-end site to see if things are looking the way you want them to, try using tools that make your job a little easier. FireBug can help you detect major issues, while the Web Developer Toolbar can help you fix things up in real time.

If you’re tasked with building a site from the ground up and you’re not sure where to start, try using an off-the-shelf boilerplate or pre-made framework to save you time fiddling around with little stuff.

Finally, make sure you’re not falling victim to the biggest time waster of them all – poor planning. Use tools that help you track tasks, projects, and even team members if necessary, whether it’s through a browser extension like the Web Developer checklist or an external app like Trello.

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.

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.

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).

Why Integrating Zapier with WordPress Will Save You Hours of Work

If you’re a busy WordPress developer, the last thing in the world you need is to waste time fiddling around with unnecessary applications, moving content around, or really doing anything besides, you know, developing.

Whether you’re freelancing your services or working for an agency, time is your most valuable asset. So how do you maximize your time while minimizing your effort?

One word: automation.

Automation

zapier

Creating a workflow is essential to managing your tasks, and automating that workflow is essential to making sure you have enough time to do the things you need to do without pulling out your own hair. That’s why many developers choose to use Zapier, a popular web automation app.

Zapier allows you to integrate different apps together to complete certain tasks – or, as Zapier calls them, “zaps”.

These zaps create automated processes that allow you to set certain rules and then leave them be. Whether it’s creating workflow notifications or having your content posted to the correct sites in a timely manner, there’s very little that can’t be managed by zaps.

Which Tasks Should You Automate?

stressful-jobs-job-stress-work-time-clock-worker-18236949

Now, there are some tasks that really can’t (or shouldn’t) be automated and need your keen eye in order to complete, but for everything else, there’s a zap for that. So what falls in the category of “everything else?” Well, basically anything that needs to be done that you don’t want to waste time doing manually.

Social Media

Whether you’re marketing your own services or managing an account on behalf of a client or agency, social media requires a lot of attention, especially on sites like Twitter that need constant updates. If you’re not the type of person who enjoys spending time tweeting and retweeting, crafting media-friendly messages, or logging in and out of sites like Facebook on a daily basis, Zapier is your friend.

If your site involves written content of any kind – blog posts, Facebook posts, status updates, RSS feeds – consider pairing your site with apps like Buffer that automatically handle publishing and posting them to all the necessary channels. Alternatively, you can release posts on individual channels and have them automated, which works well if you only have one or two social accounts to manage.

Spreadsheets

Spreadsheets are another major hassle for anyone trying to sort through a massive amount of information. If part of your job revolves around building things that collect data, like forms or subscriptions, then you already know that data has to go somewhere, and it’s probably not somewhere you want to think about again.

By integrating your WP site with apps like Google Sheets, you can save time dealing with all of that excess information. Sync your WP forms with Google Sheets to capture user data, and then pair Google Sheets with another app, like MailChimp, to organize that data for delivery.

Data Capture

You’ve probably spent some time working on tasks that are designed to capture data and generate leads, whether it’s forms, emails, or web pages. While creating those things often requires the wisdom of your experience, like building a lead gen form, for example, there are many tasks that can just as easily be automated.

You can connect your WP site to things like SurveyMonkey to collect user data for A/B testing, link your forms with posts or pages to upsell a service or product, or trigger a Slack notification for updates you’ve already made on the site (or posts that have already been published) to let team members know you’re ready to move on.

Project Management

When it comes time to actually buckle down on a project, having a good workflow in place is essential to productivity. But if you’re sketching out your workflow in a notebook or sending emails back and forth to track your timelines, you’re wasting time. Zaps can connect different tools to help you manage projects faster with minimal effort.

Try combining apps like Slack and Trello together with your WP site to create a seamless workflow that allows your clients to stay connected to the process without sending them countless emails. This is particularly effective if you’re also in charge of loading up content for delivery on a regular basis. You can also manage your projects using something like Basecamp and integrate it with DropBox so clients can share files right to your project folders without having to chase anything down.

Time Tracking

If you’re the sort of developer who needs to keep track of how much time you’re spending working on a site, you can (and should) be using apps like Toggl to track your time. But did you know you can also pair Toggl with WP?

Pairing a time tracking app or a project management service like Basecamp will help to keep all of your information in one place so you know exactly what you’re doing and when you’re supposed to be doing it.

Notifications

Notifications are a big part of being a developer, whether it’s letting your team know about the status of a project, letting a client know when something is ready for review, or informing your audience that a post has been published.

Integrating apps like Slack can help your team stay organized while you’re all working on the same site. You can also use apps like OneSignal to create push notifications, which are especially handy for deadline driven jobs.

Events

Oftentimes companies will create both internal and external events that they want to market to their audience (or their team). These can be anything from a webinar, class, or even a fundraiser.

By using apps like Office 365 or Eventbrite, you can instantly create posts about upcoming events that can trigger notifications for team members to do certain tasks, or you can create Google Calendar events for clients to know when something is taking place.

Final Thoughts

These are just a few ways you can integrate WordPress with other Zapier apps to save time. No matter your work style, saving time and energy will always benefit you in the long run by automating your workflow to simplify tasks and projects.

Consider automating tasks that are data heavy, like forms or spreadsheets, email campaigns, and social media posts. This way you can dedicate most of your time to actually doing the work you want to do.

You should also consider using Zapier to track hours and manage projects so you don’t have to watch the clock. The hours you save can be put to better use building your business and reputation.

And the faster and more efficiently you get things done, the better that reputation will be.

Why Your Landing Page Color Scheme is More Important Than You Think

When you think about getting landing pages to convert, what comes to mind? A good design? Copy that grabs attention? A big, bold CTA button?

While those things are all important factors to improving conversion rates, there’s one aspect of your site you may be overlooking, and it could be costing you customers.

We’re talking about color.

Surprised? Don’t be. Improving conversions is all about persuasion. You have to convince visitors to become customers based on only a few elements of your site. The problem with our modern persuasion tactics, however, is that we often focus too much on numbers and statistics and forget that we’re trying to sway real-life human beings. As it turns out, one of the biggest influencers for human decision-making is color.

In fact, there’s an entire branch of psychology dedicated to finding out how color affects human behavior (it’s called color psychology), and studies show that when it comes to converting customers, visuals matter.

In a peer-reviewed study, Dr. Satyendra Singh discovered that it takes a mere 90 seconds for customers to form an opinion of a product and that 62-90% of that interaction is determined by the color of the product alone.

So what does this mean for you? It means that if you’re looking to boost your conversion rates, your color scheme matters.

Here’s what you need to know…

Choose Colors by Target Market

The human brain is designed to be a visual processor. It can digest visual information 60,000 times faster than plain text. This means that the colors you use on your landing pages will be instantly processed by your visitors, so knowing which colors will win them over is important.

But there are several ways you can go about choosing the most affective colors for your site. The first way is by assessing your target market, because different people process colors different ways.

Women Prefer…

In a survey on color and gender, 35% of women said blue was their favorite color, while 33% said orange was their least favorite color. If your target market is primarily women, stick with tints of blue, purple, and green, and avoid earthy tones like gray, brown, and orange.

Men Prefer…

If your target market is primarily men, you should use bold colors like red, blue, greens, and even black (it turns out you still want to avoid earthy tones, though). Use deeper and bolder shades of these colors, as they’re traditionally associated with masculinity (and avoid lighter “feminine” tints).

3-color-targeting-demographics

Source: Kissmetrics

If your market is mixed, however, don’t worry. Both men and women are shown to like popular colors in neutral shades, like blue or green. If you have a mixed market you can also choose colors based on nationality instead of gender, too.

International Markets Prefer…

If your company targets an international audience, be sure you understand how color is viewed in other nations. Americans tend to favor the color blue, for example, while Scandinavian countries prefer multi-colors.

In countries like China, for example, white is used for solemn occasions like funerals, so it isn’t associated with the same “happy” emotions (weddings, purity, etc.) that Americans attach to it, while bold colors like red or yellow are highly favored. Americans love blue for its sense of strength and security, but in some countries it’s symbolic of loneliness and sadness.

If you’re still not sure about choosing a color scheme based on your target market (or your market is too broad or convoluted), you can always choose colors based on your company’s personal branding instead.

Choose Colors by Brand Identity

Branding is an important part to any company, and because certain colors convey certain emotions, you want to make sure that your color choices reflect positive emotions for your business.

Red Conveys…

Red conveys a sense of excitement and boldness and is commonly used to advertise sales. It also ignites ideas of passion and hunger, so if you’re looking for immediate action (like a CTA button or a flash sale), use red.

Orange Conveys…

While not the most popular color, orange still has its place on your landing page if you want to communicate friendliness, fun, and confidence, which is why it’s often used for sports and children’s products. It can be used as an accent, or, if you’re an e-commerce site (think Amazon.com), you can use orange to encourage sales during the checkout process.

Yellow Conveys…

Yellow, arguably the happiest of all colors, reflects optimism, warmth, and happiness. If you want to communicate that your business is family-friendly, go with yellow shades. Oppositely, it’s also the color for warning. If you have elements of your site that need to be read right away, use a yellow accent color. Just make sure you don’t use it as a font color, as it can be hard to read if there’s not enough contrast.

Green Conveys…

Green is the color of tranquility, peacefulness, and nature. If you want customers to know that you’re eco-friendly and low maintenance, using green is a great way to do that. It’s also the perfect color for creative industries (graphic design, web development, arts, etc.) as one study indicates that when presented with flashes of green, people had more bursts of creativity than when shown any other color.

Blue Conveys…

Blue is one of the most loved and most used colors, which can be either good or bad depending on your goals. Blue conveys a sense of security, trust, and connection, which is why sites like Facebook use blue (and most of corporate America). But using blue can also mean you’re just like everyone else, so pairing it with less-used accent colors (like orange or yellow) can help differentiate you from your competition.

Purple Conveys…

Purple, like green, is the color of creativity, but it also conveys a sense of sophistication and wisdom, as it’s often associated with royalty. This is one of those colors that work well with luxury goods and services. It’s also heavily associated with femininity, especially in America, so if your target audience skews toward women, this is a great choice.

Black Conveys…

While black may or may not be an actual color, it is a standard for most text. But it can also be used as a deluxe tone. According to an article from Lifescript, black conveys elegance, sophistication, and power, and is considered timeless and classic. Black can also be used to communicate exclusivity and has an added sense of value.

White Conveys…

White can mean different things to different people, but its primary function when it comes to design is actually to help offset other visuals. It may not have inherent meaning beyond “clean” or “professional,” it’s still a valuable color (or non-color, depending on who you ask).

image204

Source: Neil Patel

Choose Colors Strategically

If you’re still not sure which colors will help you reach maximum conversions, consider the following:

First impressions matter. You only get one chance (90 seconds!) to reach your audience with colors, so if you can’t decide between a bold red or a soft yellow, go for whichever will make the most initial impact. Just remember that you want to make a good impression on first-time visitors without alienating your returning customers, so use bold accents with white space to offset other elements. Keep your look clean, but attention-grabbing.

Use bright colors where action is needed. If color choice makes you panic because your current site feels boring (let’s say you used too many earth tones), don’t worry. Using color strategically is about finding areas that need to stand out. Use bright, bold colors like red, yellow, and orange on your CTA buttons, pop-up buttons, or as visual indicators of action steps (like arrows pointing on something to click). You can keep the rest of your page muted if you have standout colors in key areas to make up the difference.

Don’t fear a colored background. “Whitespace” doesn’t always have to be white. Your design may actually benefit from a colored background depending on your goals. In his book, Color Psychology: The Science of Using Colors to Persuade and Influence Purchase Decisions, Michael Campbell notes that colored backgrounds can actually create a personal encounter and stir emotions better than a plain white background.

Contrast your colors for legibility. As mentioned earlier, if you’re using bold colors like yellow or orange for your text, don’t put them on equally bright and bold backgrounds. If your text is muted, like gray or brown, make sure the colors are deep enough so they don’t fade into a white background. If you make content difficult to read, you won’t be converting anyone.

The Biggest Landing Page Design Mistakes and How to Fix Them

If you’re a web designer or developer, you know about landing pages. Chances are, you’ve dealt with your fair share, and you know that a good landing page will capture a visitor’s attention, drive ROI, and ultimately generate conversions that create more business. But what happens if your landing page is poorly designed?

Well, none of those things.

If you’ve been working on landing pages for a while and haven’t seen a significant boost to your conversion rates or leads, you may be making a few fatal design errors.

Today we’re looking at the biggest design mistakes when it comes to landing pages and what you can do to avoid them. Let’s dive in…

Unoptimized Images

If you’re a web designer or developer, you’re probably sick of hearing about optimizing your images. But the reason you hear about it so often is that images are a big deal when it comes to design. Pictures have the power to connect and communicate with your audience and draw attention in ways that words alone can’t achieve. But when your images aren’t optimized properly, they can do far more harm than good.

Uncompressed Images

One of the biggest mistakes when it comes to images on your landing pages is keeping them uncompressed. An uncompressed image – or an image that renders at full size every time the page loads – will cause your site to load significantly slower. If you’ve done your homework, you know that site speed is a major factor in conversions. If the design of your site relies on images (which it should, but we’ll get to that), make sure your graphics are working for you and not against you.

How to fix it? CreativeBloq has a list of compression tools available for designers and developers to help compress images.

Unemotional Images

While file size and type have a dramatic impact on your design, it turns out the subject of your images is equally important to optimization.

When it comes to visual marketing, people love bold images of other humans. Human faces draw more attention than any other type of image on the web, and people tend to mimic the behavior of the images they’re seeing. If you have a picture where a person is looking in a certain direction, for example, your visitors will typically follow the image’s line of site, too.

Chemistry-lineofsite

A good example of line of site from Chemistry.com.

People also tend to copy the emotion they see in the images. One study conducted by Basecamp actually showed that by featuring an image of a smiling person on a landing page, they increased conversions by 102.5%. Basically, if you’re not using your images to convey human emotion and connection, you’re missing out on a huge opportunity.

How to fix it? Choose high-quality images with an emotional appeal (specifically, happy people) and use graphics that include a line of sight that points to specific content whenever possible.

Content Overload

Of course, when you’re designing a landing page, you should probably be using more images than text anyway. Why? Because people are statistically more likely to skim text-heavy pages, whereas sites with simple designs that minimize text and focus on images are far more likely to engage visitors.

Too Much Text

One of the biggest mistakes when it comes to designing a landing page is including too much static text without enough visually pleasing elements to balance it out. As a designer or developer, you may not have a ton of control over how much content needs to be included on the page, but you can use the design to minimize a text-heavy look.

The best way to do this is using white space strategically to make certain features stand out (images and graphics) while minimizing other features (long paragraphs or unnecessary text). Of course, the best thing for your site is to remove unnecessary copy all together, but if that’s not an option you can always use the layout and design to your advantage.

How to fix it? Incorporate white space throughout your site to highlight specific elements, such as the CTA button or a lead capture form. If possible, eliminate or combine text to make it easier to skim. Jimdo blog has some great recommendations for designers working with text.

Amble-cleandesign

Clean web design and good use of white space by the Amble App site.

Too Many Options

Another common content overload error is presenting your visitors with too many options to click through. One study by Sheeya Iyengar, a social psychologist at Columbia University, found that people react differently when given multiple options versus limited options; specifically, the more options they have to choose from, the less likely they are to choose at all.

What this means for your design is that having too many places to click, multiple CTAs, or a general “cluttered” look will turn visitors away fast.

How to fix it? The easiest solution is to keep your designs simple. Cut away any excess until you’re left with only the absolute essentials. Keep navigation to a minimum (that means eliminating drop down menus wherever possible, too), create one clear CTA per page, and don’t redirect visitors off your page unless you need to.

Ineffective CTAs

Your call to action (CTA) is another major player when it comes to having an effective landing page. But the problem with CTAs is that if they’re not executed well, they’re not going to do you any favors. If you want to really engage visitors, you’ll need to avoid these common CTA mistakes.

Wrong Placement

The biggest mistake when it comes to CTA is location. You’ve probably read endless articles giving you a variety of advice on where to put it – whether it’s above the fold or below or whether it should be on every landing page or a select few.

For the most part, the “right” location will depend on your website design and visitors. Most of the time, you’ll probably want to include a CTA above the fold – or in the top part of your design, incorporated with a strong image or graphic that grabs attention. According to some studies, most people spend around 80% of their time above the fold when they visit a site.

But as we’ve noted before, the location really depends on your visitors. If your visitors already know what you’re about when they come to your landing page for the first time, then having a CTA above the fold is the best thing you can do. However, if all of your visitors will be visiting to learn who you are and what you’re about, then having a CTA after some vital information may be more beneficial.

How to fix it? Know your customer base. Because location of your CTA is important, you’ll need to determine whether or not the people visiting your page have brand awareness of your company, product, or service before they visit your site. Brandwatch has some good suggestions for testing your brand awareness.

Wrong Colors

Besides placement, the next biggest mistake when it comes to CTAs is choosing the wrong color. Surprising? Well, don’t be shocked. In a study called Impact of Color in Marketing, researchers found that up to 90% of snap judgments are based on color alone.

Kissmetrics actually made an infographic about how colors affect purchases. While some studies note that no single color is the “right” choice (because color is often associated with personal experience) they all show that color choice does play a role in conversions.

How to fix it? Choose colors for your CTA buttons associated with the goals of your site and customer base. Blue, for example, is often associated with trust and security, while green works well for the budget-conscious crowd. Here are a few tips from CoSchedule to help you choose the right color for your site.

Firefox-greenCTA

Firefox uses a classic green CTA button for its free product.

Unresponsive Theme

While the other mistakes listed above are certainly faux pas, the number one biggest mistake when it comes to designing landing pages is not optimizing for mobile viewing. In other words, if your theme isn’t responsive, you’re doing it wrong.

This is especially true if a lot of your visitors come from social media and search. According to research, nearly 80% of all Facebook users access the web exclusively through mobile, and a quarter of all Internet searches happen via mobile devices. These statistics are only going to increase as the number of internet-connected devices increase, too.

How to fix it? This really comes down to choosing a good responsive theme for your website as a whole, but you should also optimize each landing page to be designed for mobile use by using images, scroll-friendly layout features, and text that’s easy to convert to small screens.

Final Thoughts

Making sure your landing pages are doing their job can be tough, but there are a few great ways to minimize mistakes and boost conversions.

Optimize your images for fast speeds and choose pictures that people can relate to (i.e. happy!).

Minimize unnecessary content and focus on creating a visually appealing website that’s simple to use, so you don’t confuse or overload visitors.

Create a clear CTA that grabs attention where you need it and works for your purposes by choosing the right color, style, and placement.

Go mobile! Make sure your theme and landing pages are designed to be responsive to all screen sizes.

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

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.