Web Design Tip: Have Big, Clear, Calls-to-Action

I was recently asked by @Ryan_Newland for suggestions on improving a website he’s involved with. My email response started getting pretty long so I decided to turn my email response into a blog post.

So my answer to you Ryan is to put some big, clear, calls-to-action on the homepage. Decide what one or two main things you want visitors to do when they visit your website, and put some big CTAs to fulfill those purposes.

For example, on BuildWithoutCode.com, the two main things I want people to do is leave their email and go to blog.buildwithoutcode.com.

Screen Shot 2015-02-26 at 2.11.14 PM


If you at look the homepage of Build Without Code, there is one sentence in big letters describing the site, and then two big CTAs. The buttons are big, the colors are bright, and they sit front and center. One or two calls-to-action are ideal. Any more than two and it becomes too cluttered. With too many objectives you start to spread yourself thin. One or two objectives, and focus the entire homepage on achieving them.

I’ve also given some incentives to click my CTAs. Visitors can get early access to my course and a discount, or they can get web tips for free.

Hopefully I’ve given my visitors a clear, concise sense of what actions I want them to take along with some incentives. If they do need more information to take action, then they can keep scrolling down.

As they scroll down the information is all geared towards helping visitors follow the calls-to-actions I presented at the beginning. You will also notice I have a sticky nav-bar. This means that the two main actions ‘Course Discount’ and ‘Blog’ will be within clicking distance no matter how much they’ve scrolled down. I’ve added one other item (‘Instructor Background’) to the nav-bar as well. I could have added other nav-bar items but I wanted as few as possible so it wouldn’t distract them from completing my main calls-to-actions (I know some websites need more items in the nav-bar for navigation, but when possible, less is more).

Screen Shot 2015-02-26 at 2.11.48 PM

So I start with clear calls-to-action, and if they don’t click initially, then as they scroll down, all information is meant to help them feel the need to click the calls-to-action. They can click any time with the sticky-nav bar but I also repeat the CTA’s again, as you can see below.

Screen Shot 2015-02-26 at 6.54.09 PM

Screen Shot 2015-02-26 at 2.12.36 PM


Hopefully that’s helpful!

For web help hit me up on Twitter @buildwithoutcod or via email hello@buildwithoutcode.com.

And don’t forget to leave your email if you want a fat discount on my course!