Simply creating a responsive website or creating a separate mobile website is a step in the right direction, but a mobile-friendly website does not in and of itself magically improve (or maintain) conversion rates.
Like desktop-only websites, there are good and bad mobile designs. The challenge for designers is to discover techniques that boost conversions in mobile viewing. Here are three important things we’ve learned.
Keep It Simple
The BluePay mobile layout has an ultra-stripped-down header. Besides making the site inviting, simplicity makes it ultra-easy for visitors to identify and hit the generously proportioned phone icon to make an inquiry.
The site uses sticky navigation to keep the phone icon in view as the visitor scrolls down. A continuous view is very important, since visitors are not always going to remember the phone icon was at the top, or bother scrolling back up to use it. Any obstacle — no matter how small — a design puts between the visitor and the call to action reduces conversions.
Fixed Call to Action in Footer
The McLean DDS mobile website fixes a call-to-action menu with three options — phone, submit form and schedule appointment app — at the bottom of the page. This design, which highlights the calls to action with white icons behind a dark blue bar, essentially gives mobile users the ability to execute a one-click conversion from any position of any page.
In the desktop version of the website, where more real estate is available, these same call-to-action items appear in the page template header, which for desktop users is a more intuitive — and convenient — option.
Fixed Call to Action in Navigation Menu
The Treehouse Island mobile website features a free trial call to action visible in the header navigation when users click on the hamburger menu in the normal page view. This is a somewhat more subtle conversion approach than placing the free trial button in the page header, and yet sufficiently bold and noticeable enough to have the desired effect.
In the desktop view where, again, real estate is more spacious, the free trial option appears in the header navigation at the top right of the page template.
It’s How You Open and Close
All these examples illustrate the importance of concentrating on the top and bottom of the mobile Web page when designing for conversions. Often, designers and clients focus a great deal of attention on the body of the page and go through the motions of slapping together page headers and footers. Users, however, tend to scan, paying a great deal of attention to the top and bottom of the page. Mobile users look for conversion elements —phone icons, email options, scheduling buttons, etc. — at the top of the page first, and also at the bottom if the footer is fixed in its position.
Periodically inserting call-to-action elements in the body of the mobile Web page, using the same or similar design elements, is a good practice as well, provided calls to action are not so obtrusive as to put off users. The amount of repetition appropriate for the website depends on the nature of the target audience and industry. Treehouse, an online education business, is wise not to overdo call-to-action repetition; BluePay, a credit card processing service, would be consistent with industry practices and audience expectations to repeat calls to action with more frequency.
Thus, in addition to understanding mobile conversion design techniques, designers also need to gain familiarity with the client’s business and audience. A detailed review of competitor websites and focused discovery preceding actual design work yields the best results.
Author:
Brad Shorr has over 25 years of marketing experience. He is currently the Director of Content Strategy for Straight North, a B2B SEO, PPC and website design company. Throughout his career, Brad has been featured on sites, such as Entrepreneur, Forbes and Moz.
