How to Create Mobile Friendly Landing Pages

By Micah Iriye | Webity

In our last blog, we took you through 9 essential rules to help you create emails that keep their good looks across mobile devices — the very devices that are used today by 4 out of 5 customers for shopping, and which Americans switch back and forth between on any given day.

But once your email campaign is ready to go, what's next?

Email is simply the doorway to a glorious new world for online marketers; you still have to build the foyer. A landing page is the perfect way to guide visitors along their buyer's journey, and to introduce them to all that you have to offer.

Your Client's Seamless Guide

It is imperative that, no matter what device is used to read an email, the transition to a landing page be seamless. If an iPhone or Samsung user clicks through to your page from your email, it would be a complete waste if they were presented with a large, hard-to-navigate page intended for a desktop user.

It's a waste because, despite all your efforts, you've already lost most of them: Repeat research shows that 57% of mobile users will abandon your website if it takes more than 3 seconds to load. Three seconds! What's more, the conversion rate for smartphone shoppers on mobile-optimized sites is 160% higher than the rate for smartphone shoppers on non-optimized sites. 

What all this means is that optimizing your landing pages (here's a guide to learn more about them) to work across platforms is crucial in the success of your online marketing efforts — they're your online foyers, after all. And if you're planning for presentations that are mobile friendly, and you should be, you need to make certain your landing pages are mobile friendly, too.

If you're wondering how, here are 5 helpful points to follow:

1. Keep it simple

Focus on a very specific topic. This means you can eliminate extraneous elements that appear on your main website to focus on the subject at hand.

Try to maintain your logo, header, and footer, with links to your main website. This will also make the transition between devices views easier to accomplish.

2. Hide unnecessary elements on the phone

You have lots of space on a desktop for content and graphics. On a phone and tablet this space becomes much more valuable. Use CSS media queries to hide unnecessary icons and text that will distract from the main message and will increase the page's length.

3. Break your content into chunks

Unlike with emails, you are no longer limited to a maximum width of 600 pixels. If you have a screen that is 1200 pixels wide, you will want to utilize as much of that space as possible, while making sure your content is readable on a phone.

One way of doing this well is to insert four columns to be read left-to-right on the 1200 pixel screen, which will then collapse down into a single column for easy top-to-bottom scanning on a smartphone.

4. 'Alt text' it

As we discussed with emails, chances are that images added to landing pages won't show up on all mobile devices. Plan for the possibility that it'll happen to you. Add "alt text" to all your images to ensure your content can be seen in the absence of images. 

5. Keep it easy to respond to calls to action

A signup form or download link might look perfect on the desktop, but make sure that it is just as easily accessible on a phone or tablet.

Don't force a mobile visitor to have to arduously scroll to the bottom of a long page to find what they want. Position your call to action close the top, just after your most important and informative content. The experience should be just as pleasant and easy to navigate and use as the desktop.

In conclusion

As more and more individuals turn to their portable devices for everything from directions to a favorite restaurant or shopping for gifts to scheduling a dentist appointment, it's vital that you make your content accessible and easy to use.

By utilizing the tools and techniques we offer here and in our earlier posts, you will be able to do just that.

Interested in learning more about mobile-friendly landing pages or emails, or simply have questions to run by an expert? Call us at 214-937-9521 or go here to contact us today.

Micah builds awesome custom web applications for Webity, DMD's development partner in San Francisco.