Posted by TaliaGw
Allow me to start with a quick summary of this article:
There’s a 270% gap in conversions between desktop and mobile, because mobile websites suck and we’re all doing it wrong. (Now that I’ve gotten that out of the way, I’ll explain why and what needs to be done to fix this.)
At its essence, responsive design is supposed to make a cross-device world a more seamless experience by adapting your desktop design to a smaller mobile screen. Unfortunately, condensing all that desktop content into such a small screen has the exact opposite effect — it’s actually causing huge loss in conversion rates. But how?
Responsive design clutters mobile sites with irrelevant content for on-the-go visitors. Built with a desktop user in mind, a mobile visitor who has different intentions and a different state of mind may not find what they’re looking for, and leave your site feeling frustrated and confused. This is the source of your huge loss in conversions.
This isn’t to say you should abandon responsive design altogether. Rather, you must think more specifically about the mobile web experience and the mobile visitor’s state of mind instead of simply transferring the desktop design to a mobile one.
To develop a useful responsive mobile experience we must do two things:
- Most importantly, consider why a mobile customer has come to your site;
- And understand their intent.
(Here are 5 metrics you should follow to understand your mobile visitors better.)
These two parameters will help determine what you need to highlight, remove, or optimize on your mobile site and give greater clarity to what your responsive design should include. Below are the 5 basic elements you should consider when designing your mobile experience:
5 Steps for Optimizing Your Responsive Site
1. Optimize image scaling and consider value
Most images scale down with responsive design. However, an image that looks nice on a desktop can suddenly become a dominant and distracting part of a mobile site. Although images are scalable, depending on their value, they might not be necessary to mobile design. Consider the way an image appears within your responsive design. Is it an effective use of visuals? If the image is taking up the entire screen on a phone, or simply serves as nice centerpiece to the site, it’s time to rethink how that image is used device-to-device. For example, Simpsons Solutions’ desktop image doesn’t scale well and overtakes the mobile screen, cluttering the design and making it hard to comprehend what’s going on on that page.
Images (both logo and main image) that work well on desktop completely overtake the mobile screen, have almost no value on a phone, and make it difficult to understand the product.
Outdoor retailer REI’s website, on the other hand, uses the same photo as a focal point on both mobile and desktop, but it scales to the appropriate needs of the visitor.
2. Simplify navigation
Perhaps one of the most important features a mobile site can include is a clear and functional navigation bar. Having a visible, easily accessible menu or search bar helps mobile visitors get where they’re going quickly. Most mobile visitors are coming to a mobile site with a single objective in mind; they’ll waste no time in finding the menu bar, searching for a keyword, and clicking to the page they need.
Analyzing what your mobile customers are doing on your site and searching for is integral for understanding how to tailor your mobile site to those needs. You may discover most mobile visitors use the search bar rather than click on your main call-to-action button; as a result, you might redesign your mobile site to feature the search bar more prominently, helping mobile visitors achieve their goals more quickly. In addition, understanding what people are actually searching for on the site will give you an indication to what’s missing, what isn’t clear, and what needs optimizing.
Because they’re on the go, mobile visitors are often in need of a contact page, usually looking for an address or a phone number to easily reach your company. Brick-and-mortar businesses should be especially cognizant of this, ensuring they have an easy-to-find contact page directly via the site navigation or on the homepage itself. Customers are much more likely to complete an order, visit your physical shop, and leave satisfied with the experience if finding you is simple and straightforward.
3. Kill responsive pop ups, use mobile overlays
Overlays and pop ups built for desktop experiences on mobile tend to distract from a mobile visitor’s primary purpose for landing on your site. Instead, guide them and focus them on a singular goal — their goal. Using a desktop solution for a mobile experience kills conversions. Since desktop overlays/pop-ups aren’t designed to fit the 19,000 combinations of screen size and resolutions found on mobile devices today, it’s wise not to use them on mobile. You don’t want an overlay fit to the resolution and specs of a desktop — these won’t scale down, making mobile navigation unbearable.
A bad overlay, like the examples below, completely take over the mobile screen, prevent you from seeing any other content, are hard to click out of, and do not fit the mobile screen (see how the email field is cut on the LastKings example).
Instead, studying how a mobile visitor behaves on your site can help you determine what your overlay should ask for, lead to, or even just what information should be included. Take into consideration both the mobile technical necessities and the customer’s mobile behavior to design an overlay to the exact needs of your mobile visitors.
4. Less is more: simplify, shorten and optimize your text
While it might seem obvious, text is often one feature that very few brands take the time to develop for effective desktop (let alone mobile) sites. To avoid overcrowding and confusion, it’s always better to keep text brief and to the point in terms of how many words appear on a site. This is where information hierarchy comes heavily into play. Your company can rearrange, rewrite, and reformat any headlines and taglines to feature only the most important information for a mobile visitor. This practice also ensures that the text isn’t taking over a page with long and wordy visuals.
While all this text seems to work well on desktop, mobile is a completely different story. The text completely hides the page, is impossible to read, and all conversion elements (such as trust symbols and call-to-action buttons) have been pushed below the fold. This is yet another case of failed responsive design:
Another factor to consider is the automatic nature of scrolling on a mobile device. A desktop can capture a full message, words, and pictures in a single glance. While less people scroll when on a desktop, on mobile, visitors instantly begin scrolling hoping for something to catch their eye. This should influence how you write a headline based on where and how it scrolls. Text should be short and concise so it catches the eye and is valuable to the reader.
5. Reconsider and clarify your calls-to-action
A mobile site should have one clear goal that the call-to-action button should support. The call-to-action button should be the first element a mobile visitor pays attention to and it should instantly tell the visitor what to do. For example, Udemy, an online learning platform, puts a very clear call-to-action at the top of their mobile landing page that aligns with the company’s overall goal. They know their customers have come to their site to learn, so to help them accomplish this goal instantly, they provided a button for finding courses and a search bar for enhanced navigation.
Create seamless design today
While the goal is to create a seamless experience across all channels for your customers, in order to increase conversions and create a better experience on mobile or any other device, companies must get to know their customers better, understanding their behavior and state of mind before choosing to implement the simple, common solution that may kill their conversions and experience. Remember to always have your mobile customers’ specific behavior and needs in mind before designing your next landing page or site.
What mobile design tactics have worked for you? Let us know in the comments below.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!