Design Patterns in CTAs

What design patterns do you need to create an effective call to action? When you create a web design, you consider things like copy, color, fonts and images. The same things apply when designing your call to action.

Design Patterns in CTAs

Start with Copy

What should your call-to-action say? Use a minimal amount of copy. You want your visitors to scan your copy and quickly take action. Most calls-to-action have 1-2 sentences or a short bulleted list that convinces you to take action.

Nerd Fitness CTA

On NerdFitness.com, you can download a copy of their free weight-loss guide. Their copy uses a large heading that tells you want you are getting and 3 bullet points that explain what the guide entails. They use the copy to convince to give them your email address in exchange for their free weight loss guide.

Choose the right words for your Call-to-Action Button

You want to use words that get people to click. Start your button copy with a verb. Verbs like get, start or join. Avoid single word buttons. Instead use 2 or more words. You can add words like free or my to help people decide to click.

In the NerdFitness call-to-action, their button starts with a verb. They use “Get It Now” to convince you to download their guide.

Choose the right color for your button

Colors can affect whether or not people will click on your button. Your button need to stand out from the rest of the content. Be picky with the colors. Start with orange and test to see what colors work best.

Nerd Fitness used red. They use red on their website. It helps to make the button stand out and look like it belongs as part of the website too.

What size should your font be?

It depends. You may want to mix large fonts with small to make the copy stand out. Use a large font on your button to make it easy to read and entice your visitors to click on it. In the Nerd Fitness example, they use both large and small fonts. The size choices work to grab your attention.

How do you make it stand out?

Use photos, icons or background colors to make your CTA different enough from the rest of your content. Nerd Fitness used a yellow background, a black border and an image to make it different from the content of the page and compliment the rest of the design.

Summary

By combining copy, colors, fonts, buttons and decorative elements, you can create a CTA that entices your visitors to take the action that you want them to take. Not all CTAs work well. You may need to test and make changes to get the right design. Use these tips to incorporate current design trends when creating your next call to action.

Getting Started with using an API

You’ve heard about application programming interface. Companies like Twitter, FaceBook and Google have them. With an API, you can use it build new and interesting things.

Getting Started with an API

What is an api?

By definition, it is an application programming interface. Programmers use an api to create a new app that uses the data from another source like getting the current weather in Austin, TX.

How do I start using an API

To start learning how to integrate an API into a web project, you can use an API that provides photos as a placeholder. You could use an API like Dog CEO API to place photos of dog or other animals quickly in your design.

If you prefer, you can start with Programmable Web’s API University. The API University provides you with tips, tutorials and best practices on using and designing APIs.

Where do I find APIs?

You can find apis at Programmable Web , API List or API Hound. Or on Reddit where you can find recommendations from other programmers.

Summary

With an application programming interface, you don’t need to know the same programming language that they used to build the API. You can incorporate it into your WordPress, static website or other CMS easily. With so many APIs to choose from, you can create almost anything.

Should you build a website with a static site generator?

How do you build a website? For most developers, there were only two options to choose from. You create a website by hand coding every single page in HTML, CSS and JavaScript. Or you use a content management system like WordPress. Now, you have a third option. You can use a static site generator.

Static Site Generators

What is a static site generator?

Static websites don’t require a database. Each page displays images, videos and text. They don’t pull information from a database when you go to the page or do something on the page. You can build a static website using a text editor. A static site generator helps you to build a website quickly. It creates all of the html code for each web page. A generator lets you focus on the important part, the content, not the structure of a web page. One of the popular generators, Jekyll, lets you create websites and blogs.

Why would you want to use a static site generator?

  • Pages built in HTML load faster. They don’t have to make calls to a database in order to display a page.
  • You can control how the website looks. When you use a Content Management System (CMS), you must build your website the way the CMS wants.
  • Your website is too small for a CMS. For some projects, a CMS can be overkill. You wanted a site with 5 pages that lets people know about your business. A CMS has features that aren’t needed by this website.
  • CMS’s require continual maintenance. Your CMS may make changes to improve functionality and security. Any themes or plugins that you use may have additional updates that will need to be monitored and updated as needed.
  • Better Security. A CMS has a database, a login and other code that opens the site for attack. This can make it harder to find problems. You may have to start over by deleting everything including the database. With a static site, attackers have little or no opportunities to damage your site. They would need to gain access to your web host to damage your pages or upload malware. When that happens, you can change your password, delete the site and re-upload it again.

Why you should use a CMS instead of a static site generator?

  • Your website has a large number of pages to maintain. A CMS makes updating and changing a website quick and easy.
  • No administration. You have to know markup and generator tools in order to make a simple change.
  • Limited themes or other resources available. If you want to do something like moderate comments, you have a limited number of options. With a CMS, you can choose from readily available plugins or themes to do what you need.
  • Your client wants to update their website themselves. Static site generators currently lack an administration interface to make this easy.
  • You can’t decide which static site generator to use. With a CMS, you choose one of the popular ones: WordPress, Drupal, Joomla or Kentico. Static Site Generators come in many different flavors. You have to decide what programming language it is written, what kind of website you are creating and more in order to narrow you selection down.

How do I choose a static site generator?

You’ve decided that a static site generator is a good solution for your project. With many static site generators to choose from, which one do you chose? First, Use staticgen.com to review the Top Open-Source Static Site Generators. It allows you to sort by languages, stars, issues, forks and name.

Then, ask yourself the following questions to narrow your choices down:

  • What type of site are you going to make? Some static site generators work better for a blog.
  • What programming languages are you familiar with? You can choose from JavaScript, Ruby, Python, Go, PHP and more.
  • What templates does it use? Liquid, EJS, or Jade.
  • What type of license? MIT, BSD, or APL 2.0
  • How many people use this generator? The more popular it is, the more likely you can get help when you need it.

Summary

Is your next web project going to be built with a static site generator? A static site generator can help build a fast and functional website without the extras that a CMS needs. Static Site Generators as well as CMS’s have strengths and weaknesses that affect the design of your website. As with any web project, the type of tools you choose should work with the content you intend to put on the website and not against it.

What to learn more?

Mobile Design Typography

Content is the most important element of your website. With a wide range of mobile devices available to people, your websites and apps must be readable on all. To maintain the readability of your content, you need to consider the fonts you choose, size, contrast and line length. How do you use Mobile Design Typography to make your content responsive and readable?

Mobile Design Typography

Fonts

Not all fonts look good on a small screen. Display fonts like script fonts may look good on a desktop screen, but on mobile they can shrink down too small to read. A script font like League Font is fine for the desktop, but on mobile it can be unreadable.

League Font

What are your options?
You could increase the size of the font. At a larger size, your chosen font may be look better. Or you could replace the font with one that is readable on small devices. You have to decide if you really need to use this font in your design.

Size

Size is also important. Too small and your content is unreadable. People leave sites if they can’t read it on mobile. If you choose a size that it too large, it could dominate the content. It could take up so much space that you end up scrolling constantly while reading the page. You have to find a size that works well at that size.

Line Length

How long should a single line of text be? It depends. Readability is determined by the font, character and word spacing and the word lengths. Even the device that you are using can affect readability. A general guideline is 9 – 12 words per line. 9 – 12 words is a comfortable range for people to read. Line Length and Column Widths explains why your text should be about 9 -12 words long.

Contrast

What is contrast? Contrast is how every element in a design which includes font, size, color, line length and images works to create a good user experience. The easiest to learn is color. How do your color choices affect the design? With mobile design, you need to also think about size, font, line length, position and shapes. On Web Designer Depot, John O’Nolan explains how to fully understand contrast in design. He shows you how to use them for a better user experience.

Horizon Coworking in Madison, WI

Summary

Your content is an important element of your design, especially on mobile. When developing for mobile, consider how the font type, size, line length and contrast can effect the readability of your site. If it isn’t readable, your visitors will leave. Keep them on your site by focusing on how fonts look on mobile.

For more information on Mobile Typography, check out these articles:

Do You Need a Website Refresh or Redesign?

What do you do if your website is old or needs to change? Do you start over? Should fix what is not working for you? With a website, you have two options: refresh or redesign. Fix what you think needs an update or start over with a brand new site.
Redesign or Refresh?

Refresh or Redesign

What is a refresh? Fo example if your website was a house, a refresh would be like making over a room. To update your room, you may repaint the walls, replace a rug, curtains or even pillows and add new furniture. When you refresh your website, you leave the way the website functions and change how it looks. This may include changing the colors, fonts or even images.

What is a redesign? A redesign is where you start over. Instead of a makeover, you would tear the house down and build a new. With a website, you start over by building a new site.

When should I refresh my website?

Refresh or redesign? It depends on your needs. Why are you updating your site? Do you need to fix some small issues? Has your business changed and your website no longer reflects your brand? If you need to make small fixes, than a refresh will work for you. If you need to have it reflect how your business has changed, you want to redesign.

How do I do refresh my website?

  1. Decide what your goals for the website are.
  2. Look at your content and determine if you need to add, delete or update pages.
  3. Prioritize what you want to work on.

What are you site goals?

When looking at a redesign or refresh, you should reevaluate your site goals. Is it performing the way you expect? Does it reflect your current brand? Are there any pages that just don’t work?

Do you know what content your site has?

Audit your website by figuring out how many pages you have and what they focus on. Is each page current, out of date or needs a slight tweak? Decide which pages you want to work on, remove and update.

Prioritize

What do you want to work on first? Does your content need updating? Do you need to change the look and feel first? Decide what you want to work on and schedule how you are going to accomplish fixing or updating your site.

Summary

Your website should change to reflect who you are as a business. This means you may need to either refresh or redesign your website. What you choose to do depends on your goals. Sometimes, your may need simple fixes and refreshes your website is the best choice. Other times, you may choose to start over because it is just easier and a better way to achieve your goals.