How to Quickly Optimize Your Funnel Pages for Mobile

How to Quickly Optimize Your Funnel Pages for Mobile
Editor Features September 24, 2017 2 Comments

There’s nothing worse than a GORGEOUS funnel page that is completely unoptimized for mobile. Remember that over 50% of traffic is now mobile, so we should all be thinking about MOBILE first, desktop second. So to that end, I’d like to give you a few tips on how to style your pages.

Understand the mobile experience is one VERTICAL list

This means all those fancy columns and lists don’t render on mobile the way they do on desktop. When you’re working in the Power Editor, any blue columns will stack. Here’s an example of a blue column on desktop…

…and here’s the mobile version.

It’s not horrible right? But it’s clear that this design was not designed for mobile first, but rather second. So there are a few ways you can deal with this!

Modify the design with hide/show and font adjustments

The first thing you can do is simply hide the image element (in this case, the feather). Just click on it and choose the DESKTOP only icon in the settings. Then a red box will display so you can easily identify all the elements that are categorized this way.

Then when you preview mobile, it’ll look like this:

It’s looking better now, but we still need to reduce the font size a bit. This way it doesn’t have that “blown up” look. In order to adjust the mobile fonts, click on the element, and choose the “mobile font size” option. This way it’ll remain the original font size for desktop, but revert to the smaller size on devices.

So that’s one way to optimize something like a two-column list for mobile. The second way is by DUPLICATION of the entire section.

Duplicate the design and make a mobile only version

To do this, you’ll want to work with the GREEN sections. So I would take the ENTIRE purple area with the two column sections and I would set that green section to display DESKTOP only.

When you set green sections to Desktop Only, you won’t even see the section at all on mobile. Once that’s finished, create an ENTIRE new green section and set it to mobile only, and design it for mobile. In this case, the image list element works best. Now it looks designed for that space.

Just remember that when your power editor is set to desktop only, you won’t see any mobile elements, and vice versa. It takes a bit to get used to, but then it’s a cinch.

Understand how backgrounds work on Mobile vs. Desktop

This is really important. When you create a background in a green section and you set it to 100% fill width, that will NOT work on mobile all the time. Oftentimes you design text overlaid on a background image and it looks great on desktop, but when all that text gets vertically stacked, the background image won’t be tall enough and the text will run off the image and go onto white space.

The best way to deal with is to either set the background image to Full Center (Parallax) or if you can’t, set the entire green section with the background image to Desktop Only and recreate a mobile only section. On this sales page, you can see how this looks great on Desktop…..

…but the image and background had to be modified to make it work on mobile. We had to switch the angle of her face and add a white overlay on the text so it remained readable. This is an example of making two completely different versions of the green section because simple hide/show elements wouldn’t work!

If you buy any funnels from the marketplace, don’t forget that the designer may have some MOBILE ONLY designs that you won’t see until you click on the mobile button at the top of the page.

A few last tips:

  1. Design for ONE style first, and then go back and optimize for mobile when you’re done. Your brain will thank you.
  2. Save all images at the size they need to be on the page, rather than adjusting the width and height in the Power Editor. It’ll make the mobile experience better.
  3. Don’t make crazy designs on desktop unless you’re willing to recreate virtually every part for mobile.
  4. Don’t build an entire page inside a green section. The more green sections you use, the more flexibility you have when it comes time to optimizing for mobile.
  5. If you keep the page design simple, all you’ll need to do at the end is adjust all the fonts for mobile – no re-creating sections.
  6. If you keep all the background designs somewhat patterned (meaning resizing the image doesn’t cut off important parts of the image) and set them to full center parallax, you’ll have a lot less work to do!

Happy designing!




Written by Julie Stoian

Julie Stoian is a bold and brutally honest Digital Marketing Consultant and Funnelhacker, making her mark on the Internet through powerful and profitable funnels, copy, and marketing advice. She's inspired and equipped thousands of up and coming business owners with the skills and strategies they need to create, build, and grow profitable online businesses. Julie started her journey to entrepreneurship as a blogger and writer, garnering the attention of media outlets like The New York Times and Washington Post with her no-holds-barred approach to social media. After a rocky divorce and unexpected pregnancy in 2014, she transformed her passion and love for internet marketing into a sustainable business that will hit 7-figures by the end of 2018. She's also "famous" for placing 4th in Russell's Expert Secrets Affiliate Race, and was the first female marketer to win the Dream Car from Clickfunnels. She's been featured on media outlets like Anderson LIVE, BBC World Have Your Say, and Rachel Ray, as well as numerous business and marketing podcasts and blogs such as Content Academy, Boss Moms, GoDaddy Garage Blog, and Funnelhacker Radio.

  • Faaz Ali

    Thank you. That’s really informative. One thing I would like to add is the margin/padding of the first section. that often looks weird on mobile. I use different sections on mobile and desktop to fix this.

Continue Reading...

Funnel Hacker Radio w/ Dave Woodward