Comfort is a must when it comes to reading, so make sure the information on your website is legible, otherwise the user, who's in a hurry or on a beach in Bali, will close the tab, not finishing a single sentence. Your primary goal is to make them stay on your website, whether they are on the bus, reading texts on a dark screen with a dying battery, or all the aforementioned situations combined. Nothing should spoil the experience, or instead of any profit, you'll observe nothing but a negative impact on the conversion rate.
To avoid losing leads, it’s essential to run a mobile-friendly test of your website or landing page before launching the campaign. This practice is often overlooked — which severely affects the performance, but there are a few things you can do to glue users' eyes to the screen.
Fonts
Text is the main tool that helps you reach out to your audience. The ability to attract user attention largely depends on the right choice of fonts. Sadly, the importance of fonts is usually neglected and website owners just settle for the first one they see in the library.
It’s better to opt for a simple and concise font instead of a decorative one and outline the general style of the website. If you feel artsy and want to play with fonts a little, go for it! But try to avoid mixing different styles and using more than three kinds of fonts at once.
The idea is that the font you choose is readable on any device and renders correctly in any browser. Here's a tip for you: recommended font size for mobile version is 12px, but it's not a hard and fast rule you can't bend. In fact, you can: the user may have poor eyesight, or they prefer bigger fonts in general, or there is another bunch of aspects we cannot predict, so to err on the side of caution, choose 14px. To improve the readability of the text, adjust the line spacing and use the same fonts for the headlines.
If you don't want to waste your precious time, find two tools that will make the font selection process less painful and more effective:
The font in the picture above is quite complex, and, in fact, you shouldn't get carried away with being too creative, especially if you have the intention to emphasize how unique your offer is. However, the text in the example remains intelligible, visible, and legible, so the designer achieved the goal.
By the way, you shouldn't rely on your own emotions and expectations from the design: before launching the campaign, always check the mobile version of the website. We've listed a few tools that may come in handy.
Another way to see how your website is displayed on different devices is by turning on developer mode. Just select the device type in the drop-down menu:
Color Combinations
Monochrome and muted shades are most commonly used as they are easier to work with, no matter whether you are the designer or the reader. The website color palette shouldn’t be overwhelming for the users, so avoid garish, vivid colors, especially if they don't mix well. Imagine a color frenzy your brain has to endure, processing acid green, pink, blue, and red in one place—you'd be tempted to leave the website the moment you entered it. Instead, save these colors for the buttons, let them stand out and attract attention.
It’s equally important to keep in mind the niche you are working in while choosing the color scheme. In gambling, for instance, bright colors do the job perfectly, but don't overdo and maintain the equilibrium, because in this case an unnecessary surplus can—and most likely will—backfire. Don't be scared, such problems can be easily solved: run a website check with WebAIM. The tool measures the contrast level against the background. The contrast ratio should not be less than 7:1 for an ordinary text and 3:1 for a larger one.
Buttons
According to MIT Touch Lab research, the recommended size of the buttons for the mobile version is 10*10 mm. Call to action buttons should be placed in the center of the screen to be clearly visible. Another good move is to place these buttons in several spots at once: in the header, in the middle, and in the footer. So instead of scrolling the page to the end to find the button, the user will be more likely to complete the target action. So even if your website is a long, practically endless page, you can still have a good conversion rate.
In case this technique doesn’t fit your overall website style, you can at least add clickable phrases like Order now and scatter them all over the page so that the user could easily proceed to checkout.
To sum up, if you want your website to have a high conversion rate in the mobile version, there are a few basic rules that you need to follow. Repeat it like a mantra: legible fonts, eye-catching buttons within easy reach, and a clear call-to-action. And always check the mobile view before launching the campaign (either yourself or with the tools), otherwise, you risk throwing your budget down the drain.
