Call-to-Action & Web Design: 4 Tips to Boost Conversion Rates

James Rehwald
, Marketing Director

Call-to-Action Sign, Web Design CTA Guide

Since the dawn of the internet, Call-to-Action (CTA) always had a special place in marketing-aligned web design.

For a high quality call-to-action today, this special place becomes more of a special throne.

And for a conversion-driven B2C business, B2B business, or non-profit company, this special throne gets polished, refurbished, and rebuilt a healthy amount.

So if optimizing your CTA isn’t quite your ballgame, take notes.

• Don’t neglect the throne or else the kingdom (your online business) suffers.
• Know that a great CTA copy, placement, and styling = more leads/sales.
• Learn your target user's precise needs to build a user-first CTA strategy.


A Quick Website Call-to-Action Review

A CTA as a part of web design is, put very simply, the element of a webpage that you want a user to interact with (a click).  More so, the interaction carries a favorable end result for the website owner and the business itself.

Mobile Click to Call CTA, Smartphone call-to-action

The call-to-action could be as simple as a “share” button on a blog post, a homepage’s text form to type in an email address for a newsletter subscription, a service page’s “get directions” map prompt for a storefront, a phone call button for mobile users, or a PDF download button for a desktop users.

Your CTA may look totally different across each of your website’s pages.

OR…it could be of the more complex variety.

A conversion funnel.

A collection of smaller CTAs (recorded as “micro conversions”) that lead to an almighty CTA (recorded as a “macro conversion”) for a behavior that is harder to commit to, such as the final buy button to complete an e-commerce purchase.

Micro Conversions, e-Commerce CTAs, Google Analytics Academy
credit: Google Analytics Academy

In this context, CTAs can include buttons, banners, check boxes, bubbles, images, videos, and whatever fits your business’s conversion strategy.  By creating these smaller CTAs leading to the big ol’ one, you’ll provide an environment that’s easier to navigate, an experience that feels secure, and an ending decision that is more comfortable to commit to.

Bottom line—you keep your target user in mind, as this is what user experience (UX) is all about.

Don’t fall into the large number of businesses who aren’t optimizing their CTAs correctly, or worse, completely lack visible CTAs on important landing pages, such as on the homepage for instance:

B2B Website Call-to-Action Usage Pie Chart, Small Business Trends Study

There’s a lot to be said about CTAs but let’s try to keep this guide relatively simple.  This walk-through will hone in on CTAs that generate macro conversions yet the same principles can still be applied to your micro conversion CTAs.

To create conversion-optimized call-to-actions, follow these 4 big tips:


4) Skip Clichés, Be Authentic, and Use Clear Benefit-Oriented Language

Regardless of your situation, you’ve probably got a button somewhere on your website that you need users to click on.  Right of the bat, let’s skip the clichés and over-done marketing ploys.  None of that late night 1-800 infomercial or salesy landing page “Buy Now!” or “Sign-up.” or “Click here to learn more.” or “Call us today!”

Yeah, no.

Users aren’t the eager-beaver clickers they once were.  They know the tricks and so should you.  If your offer is authentic, so should be your language.  Entice them with something that inspires curiosity, delight, mutual understanding, or relief.

No matter your exact offer, you want think benefit-oriented language.  Make users feel that they are benefitting themselves.

► Website not looking or working right?
Tell us about it.

Maybe you sell gardening supplies and have a button that takes the user to the algorithmically aggregated or hand-picked “popular items” page…

Well, the call-to-action button, as well as its surrounding text, should use language as such.

• Preceding text: “Our customers love durability and reliability.  Keep your garden healthy—see our popular gardening tools!”

• Button text: “Get Supplied.  Grow Your Garden.”


Or perhaps you provide digital marketing services so you desperately need a form with multiple business-sensitive text entries filled out…

Too hard a sale?  Nonsense.

Same principle—just apply it differently.

• Preceding text: “Need real business results?  Target your users with effective precision.  Data-driven strategy meets sheer innovation under our hood.  Let’s work together.”

• Button text: “Give us a clean look.  We’ll give you a full quote.”


BUT…with various types of offers (B2C vs. B2B), price involved, time required, and other obstacles for target users to hurdle over, you’ll be looking at different ways to present your call-to-action.

A clear-cut vital aspect of presentation is the actual CTA placement on your webpage.


3) A Lesson on CTA Placement: Simple vs. Complex Offers

To optimize user experience and your business conversion rate with call-to-action placement, you’ll need to follow some obvious guidelines.

Making your CTA noticeable, clearly clickable, and neighboring the correct content are a few of the many points.

Yet, regardless of your business type and site design/functionality, you’re going to face an unavoidable decision:

"How far should users have to scroll before seeing my call-to-action?”

Well, if your answer is no scrolling (at all), then that means you want your CTA above-the-fold.

If you want some scrolling involved, then your CTA will go below-the-fold.


Digital marketers and web designers say the two above terms for various reasons.  Mainly, it’s just to distinguish the importance of a visitor’s first impressions.

The above-the-fold portion of a landing page, such as your homepage or services page, will be the first thing a user sees before they decide to read/scroll any further.

It’s what helps convince users to stick around instead of bouncing out of there.


HOWEVER, placing your CTA in accordance with an “above-the-fold vs. below-the-fold” framework isn’t exactly the way one ought to see things.

Rather, you want to look at your business offer and the copy required to communicate its value and persuade visitors into following your CTA.


Here’s a quick metaphor to explain this concept:

You’re a door-to-door salesperson.  You need residents to sign a piece of paper, indicating their interest in your product/service.

Depending on your exact product or service, you’ll be looking at a different approach and length to your sales pitch.

Does your product or service need a lot of explaining/persuading?  Is it inherently a pretty simple idea to sell?  Or is it a self-selling idea that requires hardly any work?

When do you go for the close?


Just as your in-person sales pitch close needs to be timed in accordance with your delivery of targeted, thorough, and persuasive information, so does your CTA need to be placed in accordance with your well-written content and well-produced digital media.

Hit ‘em with the CTA when impulse is at its highest.

Complex B2B Offer Call-to-Action Meme, CTA Placement Joke

If your call-to-action is put at the very top of your front page (thus, above-the-fold) for an expensive B2C product offer with various financing options, that’ll be like going up to someone’s door and asking them to sign the sheet and check a box without saying much prior.

And in other bad taste, sticking your CTA below (beneath-the-fold) a long poorly-written copy would be like dragging on a bad sales pitch until you close when they’ve already lost you.

It's a no-brainer, right?

As a general rule of thumb, the more complex (harder to understand, believe in, commit to, etc.) your offer is, the further down your CTA will be placed—as a direct effect of the necessary copy to go beforehand.

Conversely, for a simpler offer that needs not much explaining, or for an offer where landing page visitors have already been well-prospected prior, the CTA placement may end up closer to the top as a result of less copy—above-the-fold sometimes.

Call-to-Action Placement for Complex vs. Simple Offer, Content Verve

Oh and a quick tip on the side:  Thanks to various screen sizes and unique mobile device behavior, you’ll want to make sure your responsive web design’s performance (or your separate mobile site) account for the smaller above-the-fold section and narrower reading space.  Mobile users often tend to be a bit more impatient when it comes to information acquisition.


In summary, know your visitors and what they’re looking for.


If your landing page has high bounce rates and a bad CTA click-through rate, then you might be giving users too much info, too little info, poorly explained info, or have attracted them to said page with misleading info in the first place.  That’s a lot of potential issues to pick from.  This is why A/B testing different copies, CTA placements, and if applicable, ad copies + other external copies such as email, are essential marketing practices for conversion optimization on your website.

Test, test, test, track, modify, and repeat.

Use your web analytics software, such as Google Analytics, to understand your content drilldown and see how users respond to landing page changes.  Don't forget to filter out spam bots too for a clean look at your analytics.  Use all that data to find what works best for your business website.

Improve your CTA(s) and everything leading up to it/them.


2) Use Correct Color, Style, and Size to Improve Click-Through-Rate (CTR)

Designing a CTA button falls into the hand of your website’s entire visual design.  Your button should ideally align with your business branding, and sequentially, your web design.

NEVERTHELESS, despite the integrative nature of your site’s design elements, you should know some data-backed findings and tips regarding CTA design.


First, Color.

Email marketer Mike Nelson points out in Medium’s Email Design Trends of 2016 post that certain call-to-action button colors have become the top favorites for email marketers.  While it’s a different platform, email still tells us a lot of about web design, and vice versa.  As you can see from the usage distribution bar graph below, blue and green are the favorites:

Email Marketing CTA Button Colors, Medium study

The phycology of color in the context of web design, let alone marketing, makes a novel on its own.  Colors’ connotations vary culturally and on many social levels but there is a general consensus with how they are viewed in The United States, with respect to branding/logos.


Just a run a few non-exhausting examples past you:

Red is characterized by boldness, excitement, urgency, and energy (why we see a lot of fast food companies use them).

Blue is seen as indicating dependability, security, and trust (think bank and insurance companies’ branding).

Green is viewed for its calmness, affluence, growth, and stability (think nature/environment-oriented brands, medicine, human resources, non-profits).


These instances above tell us something about colors—they do have some intrinsic value.  Leaning on colors as a major marketing component for conversion optimization strategy isn’t recommended, though.  Colors should complement your website copy, media, and marketing efforts, obviously not the other way around.


There is no one-size-fits-all method:  Know your branding strategy, your customer’s marketing persona, and seek out opportunities to use color for solidifying your value statement.  This includes your header/footer, main content background, navigation buttons, imagery, and yes, the CTA button itself.  It’s a full-design-package which means your CTA button will need to properly contrast its surrounding color to stand out.

As I had mentioned before with call-to-action placement, optimizing your CTR and conversion rate involves a lot of trial testing.  So, A/B test color variations to track performance.  If you’re still at a total loss with what color to choose: Go Blue, Red, or Orange/Yellow for starters.  Avoid the bland Black, White, and Brown options.


Second, Style.

The style of your CTA fits into the larger theme of your website.  The button’s shape, the typography of your button’s text, and other visual elements surrounding more complex CTAs all are vital towards boosting click-through and conversion rates.

Wichita State University’s study of onscreen typeface, among many similar studies out there, reveals its psychological effects on document perception.  In other words, users associate characteristics or “personalities” with different fonts.  It also plays a big role in first impressions to visitors.

Call-to-Action Typography Examples for a Website

Thus, the typography is something that needs to be considered during your business’ branding stage, as well as the entire UX/UI (user interface) design and development stage on your website.  This includes CTAs.  A header (H1) tag’s font for a blog post, for example, will create an impression that will carry on over into the body text and its CTA button(s).  The CTA button itself will also need a font that makes itself noticeable while agreeing with what the copy and other UX elements have told us about your CTA’s offer.

Most importantly, however, is legibility.

Your writing should be easy to read, have the proper amount of spacing between letters, words, sentences, and paragraphs.  A neat-looking font won’t mean jack if your background, spacing, or body structure makes it difficult to read.

This especially applies to your call-to-action:  Make sure the font, color, and other styling attributes create an instant easy read.  Your CTA button’s text and the delivered result of interacting with the CTA should both be crystal clear.

If one or the other is unclear (God forbid both), it’ll hurt your CTRs and consequently, your conversion rates.


Third, Size.

Homepage CTA button, Website Tablet View, Vista CP

This one is pretty straight forward.

Make sure your call-to-action(s) are big enough to be noticeable and clear enough to be clickable!  Too often do I see a CTA that looks buried beneath its surrounding text or overshadowed by its neighboring images.

Conversely, don’t make them TOO big either—you don’t want to seem pushy and salesy with a gigantic banner screaming at your visitor’s face.

Know this:  You’ll want your call-to-action to follow the shape of a recognizable button so it can be immediately available for users who are already ready to follow your offer—try not to make a CTA button lookalike either.  Maintain an attractive uniqueness to engage your users and generate click-throughs.

Don’t be a CTA clone.

Don’t look like a spam link.

Be unique and easily accessible to your target users.


1) Multiple Call-to-Actions: Offer Different “yes” Options

At the beginning of this post, we briefly touched on “micro" conversions (from smaller CTAs) and macro conversions (from a main CTA) in the context of an e-commerce website.

While the process of setting up an online store is a whole other animal itself, the application of offering multiple CTAs spans beyond e-commerce sites.

e-Commerce Website Store, Multiple Call-to-Action Placements, Dosha

Being able to optimize your call-to-action on a single webpage for when impulse is highest doesn’t always mean having just one CTA.

I've got a few situations and examples to run your mind:


- When appealing to different marketing personas/readers, you may find that offering two or more CTAs, perhaps in far apart locations, is a better working strategy.

• For instance, if you are describing 3 different unique services you offer on your homepage, it’d make sense to have separate call-to-actions catering to your 3 audience types, based on their needs.


- Another way to think of multiple CTAs is placing two next to each other.  Giving a person two creative ways of saying “yes” helps provide you information with which CTA works better, can act as a way to further prospect/learn more about your users, as well as improving your click-through and conversion rates when done right.

• For example, if you are a restaurant that provides fine dining and have a multi-entry form to be filled out on your webpage to make a reservation, you could replace your “reserve” button with two CTA buttons:

Button 1: Reserve My Party for an Indoor Table.

Button 2: Reserve My Party for an Outdoor Table.

Simple and effective.


- Placing two CTAs next to each other can also be observed in situations where different platforms/mediums of contact are available for your users to use.

• Email and phone come to mind here.  Giving users these two options to pick from will allow them to choose the more convenient call-to-action from the get-go.


Multiple call-to-actions often forms a core part of a business website—especially if you sell multiple products or services.

You may find that your business benefits from multiple CTA offers such as:

• Purchasing item for yourself vs. gifting a friend.

• Sharing article to Facebook vs. Tweeting it.

• Downloading a case study vs. emailing it to an associate.

• Submitting a form vs. submitting a form + getting added to the monthly newsletter.

• Downloading certificate PDF/image vs. printing out certificate

• Posting a review to Google vs. Yelp. vs. Facebook.

• and so on…


Finding that balance of providing multiple avenues to one or more CTAs while NOT overwhelming/confusing/turning off users is something integral to your website’s entire architecture and user experience.

Research and truly understand your users’ needs before finalizing your call-to-action, as the CTA is truly the crux of a desirable business offer—it marks the finish line to your online conversion and sets the tone for what users expect next.


Need an e-commerce website set up?
A store added to your current website?
Or a site fixed up?

We’re web + marketing experts.  Send us some details so we can give you an estimate.

Add new comment