Professor Moody: But first, which of you can tell me how many unforgivable curses of desktop to mobile are there?
Hermione: Eleven, sir.
Professor Moody: And they are so named?
Hermione: Because they are unforgivable. The use of any one of them will…
Professor Moody: Earn you a one-way ticket to the mobile conversion website hall of shame. From which there is no recovery, and where the dementors will eat your soul.
Oh, wait. You’re saying I changed the script a bit?
Ministry of Magic aside, there can be some serious, serious consequences of not properly taking care of how the desktop version of your website renders on mobile.
(And by “serious, serious”, I mean lost profits. Lost money. Lost dollar bills. Because getting less money than we’ve worked hard to earn is always a tragedy.)
Exactly how much internet traffic comes from mobile is up for debate.
Some say 15%, some say 20%, some say up to a full third.
And for eCommerce? Turns out you folks might be getting a full half of your traffic from mobile devices.
I don’t know what the exact numbers are, so I’m not going to waste time splitting hairs over it… because I think we can at least all agree on one thing when it comes to mobile internet traffic: it’s a significant chunk, and that chunk is growing.
And even though we all mean well with our websites, the problem is this.
We don’t really pay that much attention to our mobile versions… way less than we’d ever admit.
Because… really… why would we?
Most of us work in B2B, and most of our visitors access our sites while they’re at work, sitting on their company’s desktops, and at the end of the day, your site’s data is decent.
But, with that mobile traffic increasing, we’re unintentionally killing off profits we may have never even knew we had.
Even up to 15-20% of them, if that data is right.
(You’re not laughing at me when I call them unforgivable curses now, are you?)
Joking aside, there are loads of things that work perfectly for desktop versions of sites that either don’t work at all for mobile versions… or that you need to be really darn careful about so they don’t stab your profits in the back.
Getting a solid, responsive template with good reviews is a great place to start.
But there’s so much more to it, because you never really know when your best intentions will accidentally F things up and make you look like a total internet fool, turning your would-be customers completely off.
So, take care of what your site looks like on mobile.
Please. If not for me, then for the customers who are browsing on mobile for solutions and products just like the ones you’re offering.
Because those customers, even if they are on mobile, they’re still ready and willing to give you their money if you prove you’re worthy.
And it would be a shame if your site’s mobile errors were what was stopping them.
1) Field Forms That Go On Forever
If you’re using a desktop or laptop computer, it’s super easy to navigate from one field to another in a call to action form to enter whatever information is required to get to the other side.
But on a phone screen?
Not so much.
You’ve got to 1) tap in the form field, 2) wait for the keyboard to pop up, 3) hunt and peck with one finger for all the time it takes to enter that particular piece of information, 4) close the keyboard, 5) tap into the next form field, and repeat the process until you’re finally finished.
If you’re putting a call to action form on mobile, think seriously about whether or not you need to collect anything beyond an email ID.
Hubspot’s list of required fields goes on forever… to the point that I’d pretty much say “screw it”.
One downloadable report isn’t worth all that trouble for me. It’d be much better if they only asked me for my email ID.
2) Instantly Downloadable PDFs
You know when you click on a file (or what you think is a link to a file), a new tab opens, and a new download begins instantly?
While this is technically okay for desktop (I think it’s beyond annoying and anyone employing this technique on their site should stop IMMEDIATELY), it’s horrible for mobile conversions and doesn’t work for obvious reasons.
Do you really think your visitors are going to sit and read a 20+ page ebook from their phone screen?
(Especially if it’s a PDF sized to be rendered on a desktop?)
And they’re not going to be happy about an unwanted file on their phone that they now have to go and delete.
(Even less happy about an unwanted file on their desktop they have to delete.)
So can we all take one for the team and just stop this practice altogether?
3) No CTAs Placed Throughout
Although this isn’t a good practice on a site designed for desktop, you can kind of get away with it because scrolling all the way to the top (or all the way to the bottom) is faster & easier.
But on mobile, it’s more of a pain, so users will be more likely to drop off.
So by showing them a call to action periodically, (particularly ones worded in a way that makes them easy to say “yes” to), makes it easy for your potential client to keep clicking through your funnel to the point that they’re ready to hand over their email address for something… a free trial, an ebook, or whatever else you’ve got to offer.
4) Lots of Images
Because mobile bandwidth isn’t as fast as wifi, lots of images on a page can mean slower load times… which can be particularly annoying when someone’s just trying to use their phone to retrieve some kind of information, or, you know, read about your offerings to do some research.
To be clear, slow load times are also a bad idea on desktop.
But particularly if you’re creating a separate page for mobile, you might want to eschew the images altogether… or at least cut the amount you’ve got down to one or two of your most important ones.
5) Detailed Photos & Images
Going along with the image theme, detailed photos on a desktop are fine because your users have a big screen to view them on and see all the little details.
In fact, they can be a great way to get attention and show the details of whatever it is your offering… boosting your sales.
But for someone operating on a tiny screen?
Those details become even tinier. And then it becomes a game of pinch and zoom to try to find whatever detail it is you’re talking about, which doesn’t make for the best online experience.
Instead, think about the most important aspect if you’re showing a hugely detailed photo, and focus on that instead the whole entire picture.
For example, this site uses the exact same banner image from their desktop version, just squeezed down to fit on a phone screen.
It’s impossible to make out what all the little charts are talking about.
6) Flash, PNG, etc.
PNG, flash, and some other file types are at times inaccessible on mobile devices, so if you’ve got them on the desktop version of your site, don’t push them through to the mobile one.
In fact, as a rule of thumb, you could just replace them all with JPG, HTML5, or jQuery and not have to worry about it.
7) Videos Playing Automatically
We’ve already mentioned that mobile bandwidth isn’t as fast as most wifi signals, and this can make videos that play automatically on the top of your page particularly annoying for mobile browsers.
Chances are, the video won’t start playing right away, so once the sound does start, the user will have to frantically scroll to the top of the screen to stop the video that is now rudely interrupting whatever reading they were trying to do.
If you think the video makes your page, through, you can still keep it.
But it might be a good idea to set the videos to not play automatically when the site is accessed via mobile.
(Also, then, your reader won’t turn red in the face when their phone starts emitting sound about their embarrassing personal problems in public.)
8) Multiple Columns
Only one column on mobile. Obviously.
Instead, try something like this:
Above is the desktop version. Now check out the mobile version below:
See how the elements fall into one line instead of forcing everything side-by-side like the desktop version does?
But with product landing pages anyway, (even on desktop) you wouldn’t want a side bar.
Gotta keep their attention on the task (aka purchase decision) at hand, ya know?
If you’re using popups on mobile, make sure it’s a plugin that’s responsive to screen size and is easy to close out on a mobile screen if the visitor doesn’t want to opt in.
Otherwise, people will never even get to see your site on mobile, let alone interact with it and buy from it (which is the goal).
This pop up is a great example because it’s easy to close. And for the love of god, make sure your popup plugin sizes to mobile.
It would be the worst if this popup wasn’t scaled down to size and all I was looking at was this woman in blue’s backside, with no idea of how to get it off my screen.
Along with the popup theme, banners.
You know, those things that either come down from the top of the page or pop up from the bottom.
They’re usually as wide as the screen, and typically are there as a reminder that someone just needs to opt in and give you their email address for this or that.
On desktop, they’re cool and they catch some people who might otherwise fall through the cracks.
But on mobile, they can easily cover up a solid half of your content, which is something you want to avoid.
Either get rid of them altogether or make sure they’re easy to find the “x” and close out.
Now That You Know What You’re Up Against…
Professor Moody: The Ministry says you are too young to see what these curses do. I say different! You need to know what you’re up against. You need to be prepared…
Maybe Moody’s a little dramatic, but you simply can not leave the mobile version of your website to the wolves.
Because if you do, you’ll be a profitless prisoner in the mobile website hall of shame, with only the dementors to keep you company.