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.

“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?

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.

Is a Landing Page or Microsite Better for Customer Engagement?

So you’re developing a new website, or you’re thinking about launching a new product or service on your current website, and you’ve been strategizing the best possible way to make sure customers actually notice what you’re doing. You’ve done your research, and now you’re facing the same question many developers and designers encounter: should you use a landing page or microsite to promote your stuff?

It’s a difficult question, to be sure. Both are similar in nature, but does one offer more benefit when it comes to customer engagement? Possibly. It all depends on what you’ve got to offer. Let’s take a look at both options to see which one comes out on top.

The Case for Landing Pages

Landing pages are normally the go-to option, but what are they, exactly? And more importantly, are they really the better choice for engagement?

landing-page-form-encapsulation

 

A landing page is simply a page of content within a larger site that users “land on” when visiting your site. Most of the time when someone says “landing page” they probably mean home page, or “About Us” page — something that communicates essential information about something. But landing pages can be used for much more than that.

The best landing pages are about a specific call-to-action (CTA): they’re not just giving information, they’re expecting the visitor to do something, whether it’s purchasing a product, downloading a resource, or requesting additional information. Basically, landing pages are all about conversions — they’re designed to give users what they want (information and resources) in exchange for something you want (e.g. clicks, follows, or subscriptions).

Good landing pages are focused on getting visitors to take immediate action without ever leaving the page. This is called “closing the loop”: the goal is to keep visitors from leaving before they fulfill the CTA. If done right, good landing pages can seriously convert.

But what happens if they’re not done right? Well, let’s take a look at the pros and cons of using a landing page to engage customers.

Pros

They’re easier to measure. Landing pages are designed to make measuring their effectiveness easy. Basically, you would only need to know “out of X visitors, Y took action.” This means if you’re looking for a specific number of conversions to show the boss, landing sites are the perfect option because they provide instant results.

They cost less (than microsites). Since landing pages are single page additions to already developed sites, they don’t need a lot of fuss to get up and running. Using the style elements of the existing site also saves time that would otherwise be spent on creating CSS or HTML from scratch. Additionally, microsites often need separate domains (which cost money to host), while you can have a near infinite number of landing pages on an already-hosted site.

They’re CTA focused. While you could technically consider a microsite one giant CTA, oftentimes action steps in a microsite can be easily overlooked (we’ll get to that later). Landing pages, on the other hand, are only about the CTA, and they’re hard to miss. If you’re needing your customers to take an immediate action step, using a landing page may be the better bet.

They’re easier to A/B test. Because landing pages are often single pages, they can be easily updated and changed to test the effectiveness of different elements. Don’t like the button style? Just change it! You won’t have to mess with coding across an entire site just to see if one layout works better than another.

They’re easier to brand. Since landing pages are technically already part of a branded site, your customers will have no problem knowing that your business is the one behind the content. Microsites often include separate branding to make them stand out, which can make it harder to implement an integrated marketing strategy. If you want to avoid the question, “Will customers know this is us?”, then landing pages are the way to go.

Cons

They’re maybe a little too focused. While narrowing down your content and focusing on a CTA is a great way to engage certain customers, it may not always be what you want. Landing pages are designed to encourage visitors to respond to a specific service or product, and can often miss visitors who may want something else from you (or your site). This means that landing pages may actually miss a large chunk of your potential market if you’re not careful.

They’re not always compelling. In order to engage customers, landing pages need to include a lot of important information without being too long, while still being compelling enough to get reactions and responses to the CTA. Writing content that is impactful, brief, and equally fascinating can be difficult, and not all landing pages succeed in their attempt to impress.

They’re distracting (if not designed well). If it’s true that a well designed landing page is great at converting, it’s equally true that a poorly designed landing page is a disaster for customer engagement. If the page is distracting — offering too much content with no context, mixed messages, or too much media — it can actually send visitors away.

They can fail at converting (if there is “leakage”). As mentioned earlier, landing pages are designed to keep visitors on the page, but a poorly designed landing page (which are more common than you think) will mistakenly send visitors to outside sites, like Facebook or Twitter, without realizing that the more often you send someone away from your site, the less likely they are to come back to it.

They might be really, really boring. Having a unified brand is great for marketing, but if you’re launching a new product that needs to stand out, having the restrictions of a landing page’s one-size-fits-all design may be limiting.

Who is a landing page good for?

Landing pages are transactional in nature — for example, visitors give their information (credit card, email, etc.) in exchange for a product, resource, or service — which makes them great for businesses that need immediate results that can be measured by transactions. If your goal is to get your customers to take an action (and/or complete a simple task), and you don’t want to do a lot of extra work when it comes to design and branding, then landing pages are the perfect choice.

The Case for Using Microsites

Microsites are less well known than landing pages, but depending on how they’re used, they can make a powerful impact on engagement. But what is a microsite, exactly?

screen-shot-2013-05-09-at-10-01-44-am

A microsite is like a mini-website made up of several pages or sections (3-5, typically). Unlike regular websites, however, a microsite is focused on one campaign or promotion. They’re designed to let the customer know about one thing, and one thing only.

Most microsites are built to hold more information than can be contained on a single landing page. They’re created for bigger, more complex marketing campaigns of a particular product or service. But they’re not for everyone. Certain industries seem to thrive with microsites more than others.

A great microsite will convert customers through different tactics than a typical landing page. While landing pages focus on the immediate action, microsites will focus on informing now and creating action later (think: “Call us for more information” instead of “click here for more information”). A good microsite will create curiosity that sticks with a customer, and it will use “leakage” into social sites to create buzz that brings customers back repeatedly.

Of course, this means microsites are a bit riskier when it comes to engagement, but could they possibly be more effective? Let’s take a look at the pros and cons of using microsites.

Pros

They’re better for relationships. Because landing pages are designed to create action, they don’t always give your customer a real look into who you are as a company. Microsites, on the other hand, offer in-depth information about you (and what you’re promoting). Since most microsites are made up of several pages, they give visitors a chance to spend a significant amount of time learning about the benefits of working with you. Their “soft-sell” nature creates a sense of awareness that can boost your brand and public relations.

They’re more flexible (than landing pages). Microsites offer much greater flexibility than landing pages in both design, content, and function. While landing pages try to squeeze as much content into a single page as possible, microsites let you take your time with your story; allowing you to show what you want, when you want, and where you want. You can also come up with some really clever ideas for site designs that wouldn’t work on normal landing pages.

They can include multiple engagement points. Because microsites encompass several pages, you can include several different CTAs, which means that visitors have multiple chances to engage with your company. This is especially beneficial if you think about the narrowness of landing pages (which, as mentioned, may miss certain customer demographics). If your microsite doesn’t entice someone on the first page, they may be enticed on a different page.

They’re perfect for certain industries. Due to their flexibility, microsites can be a great advantage depending on the industry you’re in. A great example of an industry that uses microsites to their advantage is the auto industry. Companies like Ford often build microsites for specific vehicles or contents and giveaways. If your industry often rolls out large campaigns or products, microsites are a great choice.

They work with leakage. While having “leakage” — a place where visitors can click away from your site (e.g. to Facebook) — on a landing page is bad for business, leakage on a microsite is no problem at all. In fact, microsites are the perfect choice if your desired method of conversion requires earned trust (brand awareness, relationships built through networking and blogs, etc.). If you’re okay with a “sales cycle” approach to engagement, then microsites may be for you.

Cons

They cost more (than landing pages). Because microsites are technically separate (albeit smaller) sites, they require separate hosting fees and URLs, which can cost more than just adding a landing page to an existing site. If you’re being creative with your microsite (or even if you’re not) you’ll still need to pay a designer to design the site for you, which can eat up time and money.

They don’t always measure well. When it comes to conversions, landing pages are easy to measure, but microsites can take time to see the same amount of engagement. Visitors will generally linger longer, which means they may be more likely to activate a CTA, but it also means they’re more likely to click away from the site all together. You’ll have to find alternate ways of measure engagement to make sure you’re getting the figures you want.

They require dedicated content. Creating a content and marketing strategy for a microsite can be more time consuming, as well. Because their focus is to tell a story more than share information, you’ll need to create more content to fill the pages and make sure that all of it is equally engaging. If only one page of your site is interesting, you could risk turning away visitors faster than a landing page.

They could dilute brand identity. If your goal is to use your microsite for creativity and you don’t mind people confusing your business for something else, then microsites are great. But if you’re concerned about that confusion, you might be better off with a landing page (or at the very least a less creative microsite).

They mean a little more work. When it comes to changing a landing page, a few clicks usually does the job. With microsites, however, you’ll need to login to an additional site to make changes, and if your company has more than one person monitoring sites, this can make things a little more challenging. Microsites also mean more work if you’re constantly A/B testing, too, as it takes more effort to rework an entire site than it does a single page.

Who is a microsite good for?

Microsites are relational in nature — for example, visitors spend time getting to know your brand and researching your campaign — which makes them great for businesses that want to create a personal touchpoint with their customers. If your goal is to create engagement through multiple channels and you don’t mind getting a little creative, microsites are the perfect option.

So, which should you choose?

When it comes to choosing between a landing page and a microsite, it all comes down to a few things: your industry and business goals, your preferred conversion style, your time commitment, and your flexibility with branding. Basically, the right option comes down to who you are and what you’re trying to accomplish.

If you’re a business that wants to build brand reputation, you have time and money and love being creative, and you really don’t need customers to fulfill an immediate CTA when they visit your site, then microsites are probably the best choice.

If you’re a business that wants to measure conversions on a daily basis, you want customers to know you but you’re more interested in getting your product or service to them as quickly as possible, and you want your brand to be unified so that people know you by sight, then landing pages are the way to go.

The biggest dilemma will be for businesses who see themselves as a mixture of both. You might be a business that wants to be able to measure your engagement rates, but you might also want people to trust your brand (and you don’t mind when they “click away” every so often because you know they’ll be back). If that’s you, then the choice becomes a little less clear. You’ll have to rely on conversion styles to make your choice.

Essentially, both landing pages and microsites are great for customer engagement, but they go about it in different ways. If you want fast, easy conversions, use a landing page; if you don’t mind a slow sales cycle approach, go with a microsite.

But ultimately, the choice is yours and yours alone.

Progressive Enhancement: Start Using CSS Without Breaking Older Browsers

Once upon a time (okay, the late 90’s and early 00’s) most websites were developed using Graceful Degradation (GD) – a web design strategy that attempted to standardize the way users viewed websites from different browsers (which was a reaction to the great Browser Wars, of course).

As browser development progressed, GD allowed users with updated browsers to experience the best and brightest design elements available, while users with older browsers had a slightly “degraded” (though still functional) experience. The aim was to encourage users to continually update their browsers as newer versions came out, or to switch to more popular browsers that supported more design elements. This strategy worked well in the early days of the web, as most browsers were still relatively new and needed fewer updates to be considered “modern.”

Flash-forward a few decades, however, and things are a bit different. Most browsers go through several updates annually, and some have ceased to be updated at all (Netscape, anyone?). What this means for web developers and designers is that sites created using GD are no longer functional with today’s modern browsers.

So, why not just force everyone to use modern browsers? Not everyone who uses the Internet is able to (or even wants to) update, which means that no matter how much developers want users to be on the latest version of their site, people will continue viewing web pages without proper support. So how should developers approach web design knowing that not everyone who visits their site will be using a modern browser? They should build their sites using Progressive Enhancement.

What is Progressive Enhancement?

Progressive Enhancement (PE) is an alternate design strategy that offsets any issues caused by older browsers. Unlike GD, which is optimized for modern versions and degrades with older versions, PE starts with the old – sites are built with basic HTML elements supported by older browsers – and adds the latest bells and whistles on top of it for modern browsers. PE builds sites basic enough that any browser can handle them, but complex enough to meet contemporary design demands.

PE works by using layers of code, with the first layer being HTML. CSS is then added on top of the HTML to alter the visual and design elements as needed. Then JavaScript is added to the final layer for modern usability (the “flashy” features of Web 2.0). The layers can be adjusted to create any look and feel, while the simplistic foundation makes it viewable from any browser without major complications.

PE-Friendly CSS Tools

The best way for developers to take full advantage of PE is to use CSS tools like flexbox (flexible box layouts), filters, and blend modes in their web designs to create sites that can be viewed on any browser.

Flexbox

One of the best ways to use CSS with PE is to create layouts with flexible box, or flexbox, instead of the standard grid layout. The boxes expand items to fill any free space, making sites adaptable to a variety of display and screen sizes. This is not only extremely helpful for older browsers, but for modern portable and mobile devices.

wp-blendmodes-1024x546

Flexbox adds to the four basic CSS layout modes: block layout, inline layout, table layout, and positioned layout. It’s intended for laying out more complicated pages, as it allows for the position and size of certain elements to remain consistent.

With flexbox you can also create fluid layouts, specify how excess space is used, control the direction of certain elements (left-to-right, top-to-bottom, etc.) and reorder any element as needed.

It does have a few drawbacks, however. While it’s technically supported across all browsers, it does require slightly different syntax for older browsers. For example, Google Chrome still requires a “webkit” prefix, and Firefox and Safari will still need to use older syntaxes to run properly. But despite these caveats, flexbox is a great way to give websites a modern feel (think mobile-friendly) without breaking older browsers in the process.

Filters

Another great way to use CSS without causing browser issues is to use filters to add graphic effects like blurring, sharpening, or color shifting to different elements. Filters can also be used to adjust the rendering of an image, background, or border.

cssfilters

Why is this important? Filters can be used through CSS to add graphical changes to a site without affecting the HTML. Any browser that has a basic Scalable Vector Graphic (SVG) specification will show filters (which include almost all browsers, regardless of version). Developers at Mozilla were the first to discover how useful filters and CSS styling could be. They combined CSS and SVG working groups to make filters available for HTML as well, making it a universal tool for adding graphic effects.

Filters work best as a post-processing step after page content has been laid out. Basically, when browsers load a page, they first apply styles, then layouts, and then render the page. Filters are the final step before the page is copied to the screen. They take a snapshot of the rendered page as a bitmap image, and create pixelated graphics over the top, which gives the page a “filtered” effect (like looking through a camera with a filtered lens). Any number of filters can be used to create effects without impacting the original HTML.

Of course, there are some limitations. Filters can potentially impact loading speeds (though very minimally), and while they work across all browsers, Internet Explorer has the most trouble when it comes to applying them. IE can only apply filters to images and text, not chunks of HTML, which could cause some rendering issues with older versions. But for most browsers, filters are a great choice for adding effects without compromising the site’s structural integrity.

Blend Modes

Though technically considered “experimental,” blend modes are another great way to add dynamic effects to a website without causing too much trouble for browsers (though it should be noted right off the bat that they do work better with newer browsers). How do blend modes work?

flexbox

Blend modes – like multiply, screen, overlay, and soft light – take layered pixels and combine them in different ways to produce a new effect (think of one picture on top of another picture, then blended together). Normally blend modes are created using Adobe Photoshop and implemented on static sites, but they can also be utilized on dynamic sites with CSS.

The most common way to do implement blend modes is with CSS Compositing and Blending, including background-blend-mode (which allows blending between background layers), mix-blend-mode (which blends elements with their backdrop), and isolation (which stops elements from blending with their backdrop). Using these modes, images can be manipulated without taxing the site’s HTML.

Getting blend modes to render smoothly across browsers is still a bit of a challenge, however, as they tend to be better supported by newer browsers. But they can still function in older browsers by using vendor prefixes or by activating experimental features. Similar to filters, IE has the least amount of support when it comes to blending modes (As of 2014, IE has them listed as “under consideration” for further support) but for the most part they can be used without too much drama across multiple browsers.

Final Thoughts

It can be a hassle to create websites that are viewable on old and new browsers alike. The best way to overcome browser issues when designing a site is to use Progressive Enhancement to layer HTML, CSS, and JavaScript to overcome any issues. By taking advantage of CSS tools like flexbox, filters, and blend modes, you can make the most of CSS without crashing older browsers. And while some tools may work better than others when it comes to browser support, they all have some advantage when creating dynamic sites that need to look good on any browser.

5 Creative Ways to Use Forms to Improve Your UX

Thousands of people use web forms every day. In fact, forms play such a key role in almost every online transaction – from newsletter sign-ups to surveys, checkout processes, event registration, quote requests, and even logins to social media sites – that you’d be hard-pressed to find a website that doesn’t include a form. Even typing a question into Google is considered filling out a form, and no matter where you go online, you’re bound to run across some little text field requiring your personal information. Don’t expect that to change anytime soon.

Top research company Gartner Tech predicts that the popularity of online forms will continue to increase as the years go on, stating that by 2020 online users “will manage 85% of [transactions] without ever talking to a human.”

With the popularity of online forms comes the increasing need to stand out in the crowd, however. The more that forms are used, the more users will expect something new and different to hold their attention. The best way to get your form to stand out from the thousands of other similar forms is to create a unique user experience (UX).

A good UX is one that makes forms fun, easy, and fast to use, while also including memorable features. With that in mind, here are a few creative ways you can design your forms with an interface that will never be forgotten.

Focus on visual elements

Most forms consist of a few basic elements: title, form fields, text input fields, and submit buttons. While these elements are standard (and necessary) for collecting information, they don’t necessarily make your form stand out from the crowd. The best way to get your form noticed is to make it as visually appealing as possible.

Creating animated transitions (also known as text input effects) is a great way to pump up the visual elements of your forms and make them both fun and functional. The best way to do this is using CSS transitions and pseudo-classes. The folks over at Codrops give a few inspirational ideas for adding animated transitions to your forms.

Bart-Nederveen-Sign-Up-Form

If you don’t want to go the animated route, you can always use additional visual cues to improve UX without all the fancy CSS. Using simple elements like lines, arrows, and photos (especially photos that use eyelines to lead the user’s gaze to where you want them to look) will help draw attention to your form. Other design focus points like contrast, complementary colors, and the use of blank space will help your form get noticed in all the right ways.

Think like a mobile phone

When it comes to being visually appealing (and super UX-friendly), mobile forms can’t be beat; they’re easier to use, cleaner in design, and faster than their online counterparts. In many ways the mobile form is preferable to fill out, but that doesn’t mean you should ignore your web form. In fact, you could use the same design features that make mobile forms so great to boost your web forms.

For example, try designing your web form to align vertically, like it would appear on a mobile screen (or eliminate the use of above-field labels all together and put your labels in the text fields). You don’t even need to design two forms: simply use the same number of form fields and headers you would put in your mobile form in your web form, too. The benefit of this is not only a seamless integration when it comes to branding, but it also improves your UX by making the transition from web to mobile a lot smoother.

Card_scan

Use single-fields for a unique UX

As Shakespeare says, “Brevity is the soul of wit.” This sentiment is also true when it comes to building forms: the simpler the better. While most contact forms are already fairly simple, you can’t get much simpler than the single-field form interface (also called the minimal form interface).

The concept is pretty straightforward: a form interface that only shows one text input field at a time, and reveals the next input field with a subtle transition. The idea is to eliminate clutter and distraction by using only elements that are helpful for the information needing to be filled in.

Single-Field-Form-Interface

This form style is probably most useful for short forms, questionnaires, or contact forms, as they require much less work than longer, more complicated forms (like registration forms). Of course, simple-field forms have their disadvantages (you can’t go back and change your answers, for example), but the sheer simplicity makes it a great option as a creative alternative to the traditional form.

Try focusing attention with fullscreen

Similar to the single-field concept, the fullscreen form is another great, minimalistic option if you’re looking to experiment with your forms. Fullscreen forms aim to provide a completely distraction-free experience for users by making your form the focus of the whole page.

Fullscreen forms usually come with a few basic elements, including standard form fields, navigation dots (or numbers) that show form progress and steps, and a continue (or “next”) button that moves the form forward. The fullscreen really only displays one field (or grouping of similar fields) at a time, creating a focused experience where users can carefully review the information they’re inputting.

fullscreen-form

Fullscreen forms are especially beneficial when you require slightly more information from the user but don’t want to over-complicate your fields. The focused UX provides a visually appealing option that allows for more information while giving you all the simplicity of a single-field or traditional form.

Go “Mad Libs” with form function

Perhaps one of the more innovative ideas when it comes to forms, the natural language user interface (NLUI) – a “Mad Libs” style form generated from pre-selected sentences and dropdown menus – is a creative deviation from tradition.

These forms take a very human approach to submitting information. Instead of the standard label-plus-input-field, they use common phrases or fill-in-the-blank style language prompts to encourage specific user input. For example, if you were attempting to find out where you users liked to vacation, you would have them complete the sentence “I feel like travelling to…” instead of answering a question like “Where do you go on vacation?”

Natural-Language-Form

The personalized sentence feels more relatable – like talking to a friend or trusted colleague – and less like you’re answering questions at a mandatory deposition. The benefit to UX with natural language forms is that they humanize your brand while also letting users feel excited about providing their personal information.

In terms of numbers, NLUI forms have also been shown to increase conversions. In 2014, GoodUI.org tested natural language forms on one of their sites and found that signups had increased by up to 29% compared to their standard forms. While the “Mad Libs” style NLUI form is still relatively new, it’s nevertheless an extremely creative and potentially lucrative option when it comes to changing up your form type.

Final Thoughts

Good UX relies on quickness and ease of use while also providing creative elements that make the experience fun. By incorporating features that both simplify and beautify your form, you can hold user attention and get people to actually want to fill them in. Using CSS for animation, developing humanized questions with your text fields, or eliminating text fields all together and switching to a mobile-friendly design will help move your forms from ordinary to extraordinary.

Not Sure Which Static Site Generator to Pick?

Static Site Generators (SSGs) are a great option for many web developers and bloggers looking to build fast websites that can handle a lot of content without relying on bulky servers or databases. But there are dozens of different generators on the market, with each one declaring itself to be the “simplest and fastest” SSG on the market. So which one should you choose?

If you’re a newbie blogger who wants to get into coding, then you’ll need something a little more user friendly. If you’re a programming-savvy developer, on the other hand, you could tackle something a little more intense. Here we’ll compare a few of the most popular SSGs to help you decide which direction is the best for your site.

Jekyll

Website: jekyllrb.com

Language: Ruby

Templates: Liquid

License: MIT

Similar: Octopress. Serif, Enfield, JAQ

jekyll-1024x516

Jekyll markets itself as “a simple, blog-aware, static site generator” and it’s one of the most popular choices when it comes to SSGs, especially for first-time users. Jekyll allows you to blog straight from your desktop, giving you more control over every aspect of your blog without having to deal with heavy databases and bloated frameworks. In terms of speed, the performance is nearly unbeatable. But does that mean Jekyll is the right option for you? Let’s take a look at some of its best (and worst) features.

Best Features

User friendly. Jekyll is built on Liquid, a templating engine that originated with Shopify, which means that it includes ready-made templates that are fairly straightforward to use. If you’re a developer that doesn’t want to spend hours creating your templates from scratch, then Jekyll is the easiest choice by far.

Built for blogging. Jekyll is almost ready-made for blogging, as its pages are automatically organized by post. It also lets you import existing blogs from Joomla, Drupal, WordPress, or almost any other dynamic blog engine with relative ease, so if you’re transitioning from a current blog to Jekyll, you won’t have to go through the tedious setup process.

A large support community. Because Jekyll is so popular, it has a great community support system if you ever need to troubleshoot an issue. This is especially good news if you’re hosting your site through GitHub, the equally popular public webhosting service most commonly linked to Jekyll. If you ever have questions you can’t answer, the solutions are only a few clicks away.

Worst Features

Less customization. While the Liquid templates are great if you just need something basic to get started, they don’t offer much in the way of customization. Because its engine is primarily designed to support Shopify, it doesn’t allow for any custom code whatsoever, which isn’t helpful for developers wanting to give their sites a unique look and feel. If you want to do something more customized, you’ll need to develop your own Liquid helpers, which can be time consuming.

Poor support for Windows users. If you’re running your website from Windows, you might be at a disadvantage. Jekyll doesn’t officially support the Windows platform, so setup requires a lot more time, effort, and maneuvering to work properly if you’re not already on OSX.

Who should use Jekyll?

If you’re a first-time SSG user or blogger, Jekyll is the perfect choice. Because Jekyll doesn’t require advanced knowledge of web development, it’s extremely user friendly and still includes powerful features for those with more experience. If you like building your own templates in Liquid, you’ll also do great with Jekyll.

But if you’re not familiar with Ruby (or you don’t like it), or you feel limited by the templates supported by Liquid and don’t want to spend time building your own from scratch, you might want to go with a different SSG.

Pelican

Website: blog.getpelican.com/

Language: Python

Templates: Jinja2

License: AGPL

Similar: Urubu, Lektor, Hyde, Nikola, Acrylamid

pelican-1024x516

Pelican is another popular SSG built using Python. It incorporates templates from Jinja, a Python-based template engine, which gives it added flexibility when customizing themes and templates. Pelican also supports WordPress and Tumblr and includes its own RSS feed, making it a good choice for bloggers looking to make the move from dynamic to static. Let’s review a few features that make Pelican stand out from the crowd.

Best Features

Flexible options. Pelican features multi-language content posting and can use multiple formats, such as reStructuredText, Markdown, or ASCiiDoc. It also allows for code (syntax) highlighting and has a variety of plugin options, making it a good choice for developers who want to use styles that are familiar and friendly.

Great for full websites. Because it supports Jinja templates, Pelican can cater to a variety of unique templates that go far beyond basic blogging. The themes and templates coming from Jinja are also extremely easy to use, which means less time for developers when it comes to customizing and coding.

Import friendly. If you’re looking to move your dynamic site to a static site but don’t want to spend more time than is absolutely needed, Pelican is the perfect choice. It supports import from a variety of different blogging sites, making it one of the easiest to use in terms of moving existing sites over to a static platform.

Worst Features

Requires knowledge of Python. When it comes to coding, Python is a higher-level programming language and takes a fair amount of experience to use. For those who are familiar with Python, using Pelican shouldn’t be a problem, but if you’re more familiar with JavaScript or Ruby, then you might run into more problems than using Jekyll or another Java or Ruby based SSG.

Trouble with org-mode integration. If you’re one of the few developers using org-mode for Emacs to write your blog posts, you’ll have trouble using Pelican. While there’s a plugin to read org files (org_reader), it isn’t as well supported as other SSGs and often crashes. If org-mode is something essential for you, then Pelican isn’t the right choice.

Who should use Pelican?

Developers familiar with Python who want flexibility when it comes to coding will naturally gravitate towards Pelican. Those looking to build a website that goes beyond blogging, or who want to import existing WordPress blogs to a static site, will also love Pelican.

But if you’re a developer who is more comfortable using Ruby or JavaScript, then Pelican isn’t for you. And if you’re an avid org-mode user, you can probably find another SSG more suited to your needs.

Metalsmith

Website: metalsmith.io/

Language: JavaScript

Templates: HBS/Any JS

License: MIT

Similar: Brunch, Docpad, Cabin, Wainwright

metalsmith-1024x516

Metalsmith is perhaps slightly less well known than Jekyll or Pelican, but it is by far the most flexible. Branding itself a “pluggable” site generator, it boasts an impressive library of plugins that gives your site any feature it needs, making it useful as more than just an SSG. Metalsmith’s website showcases it used for everything from generating eBooks to creating technical documents in addition to building blogs. Let’s take a look at a few of Metalsmith’s unique qualities.

Best Features

Built for developers. Metalsmith utilizes a very simple core and the rest is managed through plugins, making it very flexible and easy to use (that is, if you know what you’re doing). You simply give the site a source directory and then tell it which plugins to use. If you’re a developer that has used Gulp and you’re very familiar with Node.js (or any .js), you’ll love Metalsmith.

Not just for blogging. While it will handle all the basics of a blog, it can also be used for a variety of other projects, like converting markdowns to ePub files or creating project scaffolds. You could also use it to generate PDFs for your blog posts, making it a super flexible option for anyone wanting to add interesting projects alongside their static site.

Supports chained API. Maybe the most programmer-friendly feature, Metalsmith uses consistent and simple chained API, providing significantly reduced processing time. It also allows for things like unlimited linking, reduced client/server coding, and ID security. If these are features you need in your site, then Metalsmith should be your go-to SSG.

Worst Features

Less user friendly. Even though Metalsmith is designed for easy use, it takes a fair amount of programming knowledge to get it working to its full potential. This is definitely an SSG for developers who know what they’re doing, so if you’re a newbie, keep looking.

Small community. Unlike larger SSGs like Jekyll, Metalsmith has much less support when it comes to troubleshooting. A lack of resources and experienced users means less help when you run into tricky problems, though they do have a Slack group to help developers ask and answer questions.

Who should use Metalsmith?

If you’re an intermediate or advanced developer looking for more flexibility and control over your content, you’ll love Metalsmith. It’s also great for those wanting to do more than just blog, and if you’ve got a good understanding of JavaScript and don’t mind spending a little extra time developing your site, this is a great option.

But if you’re a newbie developer or someone unfamiliar with JavaScript, or you just want a good support system if you run into trouble, this SSG is not for you.

7 Quick Wins to Improve Your Website’s Loading Speed

You could have the most visually appealing website with absolutely mind-blowing content, but if your site takes too long to load, your users won’t stick around long enough to experience it. Slow websites drive away potential business and prevent your site from being found on search engines like Google and Bing.

Slow speeds can also affect customer satisfaction. As one study conducted by the Aberdeen Group shows, even a one-second delay in page loading speed can decrease customer satisfaction by 16 percent and reduce conversion rates by 7 percent. Basically, speed sells, and slower speeds mean less return on your investment.

With that in mind, here are 7 quick wins – the easiest, most inexpensive, and quickest implementations – to improve your website’s loading speed.

1. Upgrade your hosting plan

The most obvious solution for speeding up your site is to have the most bandwidth available to you. Choosing a hosting plan with sufficient bandwidth is one of the most important decisions you will make when building your site, and choosing the wrong plan can have major consequences.

Many new site owners choose to host through a shared plan because shared plans are cheaper, but what they save you financially in the beginning will end up costing you down the road in slow speeds during high traffic periods. By investing in proper hosting from the beginning of your site’s development (or by upgrading your current shared hosting plan), you’ll eliminate the risk that your site will crash or stall when people need it the most.

For WordPress users, WPBeginner has a list of the top web hosting services that support high speeds.

2. Choose a responsive theme

When it comes to loading time, a basic responsive site will almost always outweigh a complicated, flash-based site. According to Yahoo, 80% of your site’s loading time will be spent downloading components like images, stylesheets, and scripts. These elements take a lot of time to load, so the more components there are on a page, the slower it will be. Basically, the simpler the site, the faster it will be.

The simplicity of your site’s theme also has a huge impact on loading speeds. If you’re using WordPress, it can be tempting to choose the fanciest flash theme to draw attention to your business, but bulky frameworks and heavy coding can slow down loading speeds for your users. The quickest way to overcome this obstacle is by choosing a responsive or mobile-friendly theme – a theme that responds to each individual user’s screen size.

Responsive designs cut down on unnecessary components and coding allowing for faster loading times. If you’re using WordPress, here’s a compiled list of 100+ responsive website themes that are both beautiful and fast.

3. Streamline your home page

Your homepage is the first impression you’ll make on any visitor. While it can be tempting to go “all out” and inundate them with as many widgets and graphics as possible, having an overwrought homepage can backfire on your site’s performance. By focusing more on content and limiting widgets, graphics, and extra features that may weigh your site down, you’ll not only reduce load times but improve your SEO and give visitors a chance to trust your expertise without the use of over-the-top gimmicks. A simple homepage is a win-win for you and your customers.

A few ways to improve your home page (or any high-traffic landing page) include:

  • Showing excerpts instead of full posts for blogs or news sections
  • Removing unnecessary widgets or sharing features and putting them on shareable content or on relevant landing pages
  • Minimizing flash features like rotating images or videos

4. Enable caching

Enabling caching lets you temporarily store data on a user’s computer so they don’t have to wait for each page to load as they click around the site. Most browsers will save anything from basic images to stylesheets, JavaScript, or even entire landing pages.

Be aware that most caches have a shelf life, however. Static elements like images can be cached up to a week, but third-party elements like ads or widgets can be cached for only a day or so. Optimizing your site with more static elements will help improve caching, which will in turn improve speed.

WordPress sites can use integrated plugins to handle caching for you, such as WP Total Cache or WP Super Cache. There are a few ways you can add caching without using a plugin, but if you’re looking to improve your WordPress site quickly, plugins are the easiest way to go.

5. Use Content Delivery Networks (CDNs)

Similar to caching, using a Content Delivery Network, or CDN, can reduce download times and improve your sites performance. CDNs take your static files (images, JavaScript, CSS, etc.) and host them on servers in geographic locations near your users, giving their computers quicker access. This system provides faster download speeds and can greatly improve your site’s traffic capabilities, as most CDNs also protect against large surges.

For WordPress users, using a content delivery network like MaxCDN will help reduce costs while providing easy-to-use integration with your current site.

6. Optimize your images

They say pictures are worth a thousand words, but pictures that are too big for your site are also worth thousands of lost conversions from slow load times. It’s common practice for many web developers to upload large images and then scale them down using CSS, but the problem with this method is that browsers still load the images at full size even if they appear smaller on the site.

The solution is to scale your images before loading them so you minimize the impact. As a note for designers and developers, make sure you’re using the correct file types, as they can make a big difference on loading speed. Using JPEG and PNG files instead of BMP or TIFF will help increase speeds and reduce download times.

If you have a WordPress site and you need a cheap and easy way to upload optimized photos without bothering your graphic designer, try using integrated plugins like WP-SmushIt or Lazy Load to simplify the process.

7. Delete unused plugins

One of the biggest changes you can make to improve your site’s performance is disabling unused plugins or widgets. It’s important to delete plugins you don’t plan to use – simply deactivating a plugin won’t stop it from taking up space.

It should also be noted that the number of plugins you have active doesn’t always affect loading speeds, and that well-coded and up-to-date plugins will not usually affect your site as much as poorly supported plugins. It’s important to keep track of which plugins you use on a consistent basis and eliminate the ones that don’t add value to your site, while keeping valuable plugins updated to the latest versions.

For WordPress users it’s important to find plugins that are WordPress optimized and have great support from their respective developers.

Final Thoughts

Improving your site’s loading speed can be overwhelming and often involves many different components of your site, but the main thing to remember is that simplicity is key. Focusing on strong content, simple design, optimized elements, and plugins that benefit your pages will all work toward improving speeds. If you’re unsure about your site speed, you can always start by doing a speed test. Below are a few tools to help you determine your site’s current speed.