Website Design – Does your Current One Mean a 75% Conversion Loss?
Website Design Should Be Responsive Design: Here’s Why
If your web design isn’t responsive, you could be looking at a 75% loss when it comes to conversions. Here’s why (and how to fix it).
You might be losing money due to your web design choices. In fact, you almost certainly are.
At the very least, there are elements of your web design that are causing fewer conversions. A conversion is simply a preferred action taken by a visitor to your site such as clicking to the next page.
That conversion leak is likely happening in a number of places. But the main place it’s happening? Mobile.
A study from 2013 showed that 2/3 of the Fortune 100 were not ready for the changes in mobile search.
While the numbers have improved since then, nearly half of the Fortune 500 still hasn’t discovered mobile. Remember, we are just talking about the companies that are big enough for this to really matter.
The numbers are much worse than that when you consider the percentage of people who have some kind of mobile site, but who don’t really understand the mobile market or the mobile challenge. Their mobile efforts may actually be hurting more than helping.
To know whether or not you are leaking mobile money, we need to take a closer look at what the mobile web is all about:
Responsive Web Design
The web is as much about the end-user technology as it is about the content. The one determines the other.
If all you have is an 8″ monochrome display, the content you can access will reflect that reality, especially if that is all anyone has. Ad an old dialup modem to the mix, and you have a very different internet. That was yesterday’s internet.
Today, it is a very different world. One of the biggest differences is the great diversity of devices that are connected via the web.
Some devices are powerful computers with giant 40″ screens and blazingly fast connection speeds. There is no limit to what they can upload and download.
On the other side of the connection is a $99 Android phone with a 4.3″ screen of questionable resolution. It has a last-gen connection and a restrictive data plan. Timely sports scores are pushing the limits of what it can receive.
Somehow, these things have to live on the same web, send and receive, and generally behave as if they were equals on the net. The problem is that their not.
Responsive web design (RWD) is one of the ways we have come up with to bridge the gap.
Before explaining it further, try to more clearly picture the world of web interactions without it.
An Incompatible Mess
The modern web was designed for screen sizes of 13″ – 27″. While that seems like a huge range, it really isn’t. A 13″ laptop can mostly view the same content that a 27″ monitor can (albeit at a smaller size).
The real problem comes when it’s squished to 3.5″: the size of the original iPhone. Remember, the iPhone is the device that jumpstarted the mobile revolution as we know it today.
On screens up to 6,” the web is a very different beast than on the smallest laptops. Some percentage of the ideas being conveyed for the large screen are completely lost on the small screen. Hopefully, those ideas are not the ones that are supposed to make
Hopefully, those ideas are not the ones that are supposed to make money.
The powerful images you included no longer work on a mobile device. Three short paragraphs of text quickly become a squinting, scrolling nightmare.
There is also the incompatibility of connectivity. You designed your sight on a powerful machine that could crank out huge images, GIFs, and videos with reckless abandon.
Most mobile devices can’t handle that. They can’t load those elements very quickly. And to even attempt to load those heavy assets costs the user a fortune due to data plans.
The gap between desktop web designers and mobile web consumers is filled with a mess of incompatibilities.
RWD to the rescue.
Patching the Conversion Leaks with RWD
By now, you know about the inbound marketing benefits of SEO/SEM.
That’s a good start. But it means nothing if people arrive at your site, look around for an unproductive moment or two, then leave.
You paid per click and got what you paid for. But what you didn’t get is a conversion to the next step.
It could be that your conversion rate is just fine for desktop users, and lousy for mobile users. That’s too bad, as mobile is set to take over desktop any day now (if it hasn’t already).
This puts you on the losing end of the proposition.
There are many reasons for the mobile conversion leak. It all has to do with understanding what RWD is supposed to do. Once you implement that into your thinking, it will be relatively easy to spot and fix the leaks:
- RWD resizes images: Most people use smartphones in portrait, as opposed to landscape for desktops and laptops. That expansive landscape you chose is going to get cut off. Make sure the important part remains in view.
- RWD resizes sidebars and text fields: If you have what appears to be reasonably sized paragraphs on a desktop display, they will look like walls of text on mobile. People tend to skim or skip walls of text.
- RWD makes sites look different on different sized displays: Two people on a train sitting side by side can experience your site differently because it renders differently on a 10″ tablet than it does on a 4″ iPhone SE. If your message requires a uniformity of experience, it will be lost on some.
Initially, these might seem like reasons to avoid RWD. But take a closer look at what it is ultimately trying to do for you. Once you internalize it, you can use it to plug the leaks.
Making Mobile a First-Class Citizen on the Web
If your mobile site feels like a second-class citizen on the web when compared to full-sized counterparts, these 5 RWD principles should be your guiding star:
- Glanceability: You can take in a lot of information at a glance on a 20″ screen. Mobile information has to be even more glanceable, not less.
- Accessibility: Font sizes have to be somewhat scaled up for readability on small screens with questionable resolution.
- Navigability: Navigation is easy on a big screen. Landing pages often require no scrolling. And all the clickable choices are in view. RWD helps with navigation on a small screen. But you will ultimately have to rethink your navigation so that it is intuitive on mobile. Otherwise, people will not be able to go from point A to point B.
- Performant: A website attached to a quad-core i7 is going to perform differently than it does on a smartphone. A mobile aware site will shrink the assets, or swap heavy assets for lighter ones, making the performance equal on mobile by cutting the fat.
- Delightful: Ads are a fact of life. The desktop web can handle ads better because the screen is large and resources are more plentiful. Desktop web ads do not necessarily ruin the experience. The same amount and type of ads on mobile will turn delight into dread. Even if all else is perfect, visitors will not convert to the next phase on your site. They will leave and never look back.
There is a good chance your site is leaking mobile conversion. RWD is the beginning of the answer. Ultimately, it is just a starting point to help you rethink how your site is presented to end-users.
When your mobile site is as glanceable, accessible, navigable, performant, and delightful as your desktop site, the conversion leaks will be sealed.
Questions about RWD? Reach out to us anytime. We’re happy to help.