Responsive Design is Killing Two-Thirds of Your Conversions. Here’s How to Fix It. – Moz
Skip to content
Moz logo
Menu open
Menu close
Search
Products
Moz Pro
Moz Pro Home
Moz Local
Moz Local Home
STAT
Mozscape API
Free SEO Tools
Competitive Research
Link Explorer
Keyword Explorer
Domain Analysis
MozBar
More Free SEO Tools
Learn SEO
Beginner’s Guide to SEO
SEO Learning Center
Moz Academy
SEO Q&A
Webinars, Whitepapers, & Guides
Blog
Why Moz
Agency Solutions
Enterprise Solutions
Small Business Solutions
Case Studies
The Moz Story
New Releases
Log in
Log out
Products
Moz Pro
Your All-In-One Suite of SEO Tools
The essential SEO toolset: keyword research, link building, site audits, page optimization, rank tracking, reporting, and more.
Learn more
Try Moz Pro free
Moz Local
Complete Local SEO Management
Raise your local SEO visibility with easy directory distribution, review management, listing updates, and more.
Learn more
Check my presence
STAT
Enterprise Rank Tracking
SERP tracking and analytics for SEO experts, STAT helps you stay competitive and agile with fresh insights.
Learn more
Book a demo
Mozscape API
The Power of Moz Data via API
Power your SEO with the proven, most accurate link metrics in the industry, powered by our index of trillions of links.
Learn more
Get connected
Compare SEO Products
Free SEO Tools
Competitive Research
Competitive Intelligence to Fuel Your SEO Strategy
Gain intel on your top SERP competitors, keyword gaps, and content opportunities.
Find competitors
Link Explorer
Powerful Backlink Data for SEO
Explore our index of over 40 trillion links to find backlinks, anchor text, Domain Authority, spam score, and more.
Get link data
Keyword Explorer
The One Keyword Research Tool for SEO Success
Discover the best traffic-driving keywords for your site from our index of over 500 million real keywords.
Search keywords
Domain Analysis
Free Domain SEO Analysis Tool
Get top competitive SEO metrics like Domain Authority, top pages, ranking keywords, and more.
Analyze domain
MozBar
Free, Instant SEO Metrics As You Surf
Using Google Chrome, see top SEO metrics instantly for any website or search result as you browse the web.
Try MozBar
More Free SEO Tools
Learn SEO
Beginner’s Guide to SEO
The #1 most popular introduction to SEO, trusted by millions.
Read the Beginner’s Guide
How-To Guides
Step-by-step guides to search success from the authority on SEO.
See All SEO Guides
SEO Learning Center
Broaden your knowledge with SEO resources for all skill levels.
Visit the Learning Center
Moz Academy
Upskill and get certified with on-demand courses & certifications.
Explore the Catalog
On-Demand Webinars
Learn modern SEO best practices from industry experts.
View All Webinars
SEO Q&A
Insights & discussions from an SEO community of 500,000+.
Find SEO Answers
August 7-9, 2023
Lock in Super Early Bird savings for MozCon
Snag tickets
Blog
Why Moz
Small Business Solutions
Uncover insights to make smarter marketing decisions in less time.
Grow Your Business
The Moz Story
Moz was the first & remains the most trusted SEO company.
Read Our Story
Agency Solutions
Earn & keep valuable clients with unparalleled data & insights.
Drive Client Success
Case Studies
Explore how Moz drives ROI with a proven track record of success.
See What’s Possible
Enterprise Solutions
Gain a competitive edge in the ever-changing world of search.
Scale Your SEO
New Releases
Get the scoop on the latest and greatest from Moz.
See What’s New
New Feature: Moz Pro
Surface actionable competitive intel
Learn More
Log in
Moz Pro
Moz Local
Moz Local Dashboard
Mozscape API
Mozscape API Dashboard
Moz Academy
Avatar
Moz Home
Notifications
Account & Billing
Manage Users
Community Profile
My Q&A
My Videos
Log Out
By: Talia Wolf
August 18, 2016
Responsive Design is Killing Two-Thirds of Your Conversions. Here’s How to Fix It.
User Experience (UX)
|
Mobile SEO
The author’s views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.
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 Site1. Optimize image scaling and consider valueMost 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 navigationPerhaps 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 overlaysOverlays 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 textWhile 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-actionA 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 todayWhile 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.
About Talia Wolf —
Talia is a conversion optimization expert optimizing websites using emotional targeting, consumer psychology and real time data to generate more revenues, leads, engagement and sales for business. She is the founder & CMO at Banana Splash, a frequent keynote speaker at marketing, growth and CRO conferences and was recently listed as one of the most influential voices in conversion optimization. You can follow her on twitter at @taliagw
With Moz Pro, you have the tools you need to get SEO right — all in one place.
Start your free trial!
Read Next
The State of Digital Accessibility: Three Key Challenges
Read this post
The New Moz SEO Q&A: 100K URL Migration Case Study
Read this post
Web Accessibility Myths: Debunking 7 Common Misconceptions
Read this post
Comments
Please keep your comments TAGFEE by following the community etiquette
Comments are closed. Got a burning question? Head to our Q&A section to start a new conversation.
Moz logo
Contact
Community
Free Trial
Terms & Privacy
Jobs
Help
News & Press
Copyright 2022 © Moz, Inc. All rights reserved.