Not sure how to deal with all the different device sizes for your landing pages? Read this to learn how.
For the longest time, you only had to build landing pages for desktop and laptop computers, all of which had full keyboards and mice.
But now there’s more internet usage on smartphones and tablets than on traditional computers, not to mention that it’s touch input, and they don’t have physical keyboards or mice, or even universal resolutions or screen sizes.
Despite almost universal mobile adoption, I keep seeing newly built landing pages, or even entire websites, that aren’t mobile or multi-device friendly.
Making a landing page work on multiple devices can seem like a difficult task, but it’s actually within anyone’s grasp, with the aid of a little bit of planning.
How to fix it:
Step 1: Start with a responsive front-end framework
Responsive front-end frameworks take care of 90% of the mechanics (and headaches) of making sure your site will work on different devices.
Two of the most popular responsive front-end frameworks are Bootstrap and Foundation and while these aren’t the only two options out there, they have been well tested across a large number of users and devices, and both have large communities behind them. Both are open source and free to use.
Right now UsersThink uses Bootstrap via the Shoestrap WordPress theme and like the frameworks themselves, this theme is also open source and free to use.
Compared to trying to do this from scratch yourself, these frameworks will save you an immense amount of work and effort.
Step 2: Style the responsive front-end framework to the design aesthetic you’d like for your landing page
One of the biggest criticisms against a responsive front-end framework is that pages built that way all look the same.
If you just use it as is, that’s true, but they’re designed to be altered to look however you want, while still trusting the framework you use will keep your landing page multi-device friendly.
Remember, the main job of these frameworks is to make sure your site works on different size devices, not to dictate the look and style of your landing pages.
Step 3: Make sure you’re not using any technology on your landing pages that could cause issues
The big no-no for mobile, and now pretty much for any landing page, is using Flash. Flash doesn’t work on iOS or new Android devices, and it isn’t that great on desktops or laptops either.
Another mobile issue is scrollable sections within an already scrollable page, such as embedded content like maps or surveys. If there isn’t enough room around those embedded sections to scroll the page, it’s easy for a user to get caught in a scroll trap.
Also be careful of tricky animations, large videos, or anything that requires minimum screen sizes to function properly.
Step 4: Test the page on your own phone and/or tablet
Sounds obvious, but after laboring over your landing page on a work computer, it’s easy to forget this crucial step.
Just email the landing page URL to yourself, open it on your phone, or tablet, or any other device you can grab, and check out the page. Scroll through it. See if you can complete the conversion goal of the page: if it’s easy to read, etc.
Make notes as you scroll through of possible issues or things to change. Take your time, you’re in no hurry.
You won’t catch all the possible issues, as there are so many different types of devices, but just by checking out your landing page for a few minutes on your phone, you’ll probably notice a few things worth changing.
Step 5: Use Mobile-Friendly Test (from Google) to check for issues
The Mobile-Friendly Test from Google is a quick and easy way to test how mobile friendly your landing page is.
If there are issues, the tool will give you feedback in terms of the general issues, as well as a few resources to help you fix them. It’s handy for finding issues you might have passed over in your own testing, as well as a few technical issues that are hard to detect with your eyes alone.
Step 6: Use a responsive test simulator
These tools can give you a quick sense of how your landing page might turn out on a slew of popular devices, and is especially handy if you don’t have the time, budget or resources to test on a large number of devices.
Step 7: Make sure the landing page conversion goal can be completed on any device
I recently came across a lead generation landing page for a large tech company. This is from a very large public company with considerable revenue, and the landing page was made near the end of 2014.
I don’t know why they decided to hide the form from mobile users, but the likelihood of someone emailing it to themselves, opening it on a computer, and then filling it out is pretty low.
Don’t add friction to a conversion process and punish someone for using a different device than you want them to use.
And here’s the thing: I discovered that page while on social media using my phone, because so many people were sharing it.
There are few things more frustrating than a mobile user getting a message of “you can’t use this device to access this page, please switch to a computer” when they try to check out your landing page.
Don’t punish people who are interested in what you offer.
Step 8: Don’t assume you can’t afford to be multi device friendly
Even though I already talked about the free, open source front-end frameworks, I still come across people who assume you have to be a big company to be able to afford responsive design.
Budget is less an issue than thinking ahead and building responsive design into your process.
Here’s a quick comparison: on the right is a screenshot of a page from UsersThink on a smartphone, on the left is a screenshot of another startup on the same smartphone.
The startup on the left just released (within the last month of this writing) a new website, which is very well designed and looks great if you’re on a desktop or laptop, but isn’t responsive and is very hard to use on a smaller sized device.
They are a much bigger company and not resource deprived, yet they didn’t make it a priority to have their site work on multiple devices, but we did with UsersThink.
You can make your landing pages work on multiple devices, without an additional cost, and very little extra work.