Consider these Conversion Path Elements for Mobile Optimisation

Vee Tardrew | 13 January 2015

Mobile optimisation. Responsive web design. Mobile-friendly website.

No doubt you heard these terms being thrown around a fair amount in 2014. You can be sure you’re going to hear a lot more of them in 2015, too!

Fuelled by technology advancements in the mobile space, these days we’re seeing more and more traffic from smartphones and tablets compared to desktop browsers. It is imperative to your marketing success to ensure that you are delivering a consistent and optimised experience, irrespective of the device your prospects, leads or customers are using to access your content.

While a website redesign will address general mobile optimisation issues, it’s prudent to inspect the more intricate elements that you can optimise for mobile. Elements such as your conversion paths.

Conversion paths are, after all, the gateways to your content and provide users with a clear journey. Here are 4 aspects of your conversion path to check against mobile optimisation best practices that goes beyond standard mobile-friendly website design.

Conversion Path Optimisation Tips for Mobile Users

Your Blog Post

1. Post Length: If you’re in the habit of writing meaty, lengthy posts make sure you break up the content effectively using clear headlines and subheadings, bullet points and snappy paragraphs. This will make it easier to digest on mobile (and desktop, for that matter).

2. Image Size: We know that blog posts with appealing images outperform those without, but you need to ensure that your image is optimised for mobile and doesn’t take too long to load on smaller screens. Keep image file sizes to a minimum and be sure that its placement makes sense at mobile states.

3. Font Size: Ensure your font size is large and clear enough for mobile users to read without adding to facial wrinkles. Stick to universally accepted fonts with great readability and avoid fancy fonts that make reading difficult.

Your Call-To-Action

4. Size: Consider the size of your thumb or forefinger. Now consider your mobile device screen size. Now consider those two together when looking to click on a particular link. Your call-to-action should be no less than 40px in height and width to ensure that even my ‘pork sausage’ fingers can click it with ease.

5. Placement: Provide ample white space around your CTA or links to ensure that there is no confusion with regards to which link is being clicked.

Your Landing Page Form

6. Length: While it’s a general best practice to ask only for the bare minimum of information required to deliver your content offer, this is even more so the case for mobile. Long forms with numerous fields are going to cause frustration and friction on a smaller screen. If necessary, have two versions of your form available with the shorter of the two rendering on mobile devices.

7. Function: Be careful with radio buttons that create friction when trying to select on a mobile device. Opt for drop downs that are easier for mobile users.

8 - 12. Style: Use CSS media queries to tailor your forms for mobile. You can -

  • Increase the font size for labels
  • Shorten widths of form fields (you don’t want people to have to scroll horizontally)
  • Stack labels above form fields (especially if they are alongside fields in desktop view)
  • Increase the size of your ‘Submit’ button
  • Use input code such as ‘input type=”email” to display a special keyboard on iOS devices that includes required characters such as the @ sign, or ‘input type=”number” to show the numerical keyboard

Your Content Offer

13. Format: The most popular format of gated content is PDF. This is unsurprising as it presents a (mostly) uneditable view of your content and keeps any proprietary fonts or styling in place for readers. Keep your writing to a single-column for better mobile display and / or consider tagging your document for reflow to ensure that your PDF is easily readable on mobile devices.

14. Images: Our graphic designer recommends square images that are easily resizable and don’t become illegible at smaller dimensions.

15. Accessibility: Be sure to send an email with a direct link for the content they have requested. This will allow access from another location easily at your reader’s convenience.

Your Follow Up Email

16. Subject Line: Best practice for subject lines on a mobile device is to keep it under 50 characters to avoid truncation.

17. Images: As with blog posts, ensure your images are compressed for mobile optimisation and scale properly for smaller screens.

18. Length: Keep your email length to an absolute minimum so mobile readers needn’t scroll endlessly for the information.

19. Link: Put the link to the content as close to the top as possible and consider using a button for mobile viewers as opposed to text links that can prove difficult to click on. 

That wraps up my suggestions for mobile optimisation of your conversion paths. Can you think of any other aspects or elements you would look at optimising? Feel free to share in the comments below.

growth-driven design, your new approach to website redesign

Feature image is altered. Photo credit: mozillaeu via photopin

More Articles

Insights, learnings and takeaways passed on from our team to yours.
From educational pieces to comparison articles to hot off-the-press news all from the Struto universe.