It’s 2019 and over 50% of website traffic is now generated through mobile phones… and this is why funnel mobile optimization is key!

You should be making sure you are optimizing for mobile across all of your funnels because, if you don’t, you could be missing out on huge opportunities (i.e. losing that mobile traffic)!

When building content on any normal webpage, you’ll always need to lay out the page structure using rows and columns.

Using these same basic principles of webpage design, the ClickFunnels page builder makes it really easy to design your pages for both desktop and mobile! You can simply change the device view by hitting the buttons, as shown in the screenshots below…

However, there are a couple of common problems to avoid, so that your pages work correctly on all devices!

Making sure your pages flow correctly

When a page design uses numerous vertical columns, the information in these columns is usually congruent to what is above and also below it. So, you need to make sure that it looks correct on all devices.

For example:

• Row 1 is split into 3 equal-sized columns and each column contains a headline and some text

• Row 2 also has 3 equal-sized columns with each column containing a pricing table, which is relevant to the headline directly above it

If you were to build the example above within ClickFunnels and not optimize for mobile, you will confuse your page visitor and more than likely lose them…

On the desktop, the layout will work fine as there is ample browser width to keep all of the columns in row 1 in a horizontal row. Likewise, all the columns on row 2 are also in a horizontal row.

As shown in the example above, you can clearly see each of the headlines, text and pricing tables in nice vertical stacks… in the correct order!

However, when viewing this layout on a mobile device, ClickFunnels will automatically adjust it so that it only shows a maximum of one column at a time from each row, stacking them vertically!

In the examples above, you can see this means you will initially see all three headlines and accompanying text stacked on top of each other, which is then followed by the three pricing tables, also stacked one on top of the next!

To resolve this, you need to make sure that you design separate ClickFunnels ‘sections’ layouts for each device.

ClickFunnels make this really easy as, ultimately, all you have to do is duplicate the section that is not working and tailor each of these sections to only be shown to one of the devices.

The important bit is making sure that, within the mobile section, you vertically stack all the elements (headlines, texts, pricing tables) in the right order as your page visitor would expect to read them.

Using forms on your funnel pages

Form elements within ClickFunnels are used to capture information such as email addresses, names, billing details, etc.

However, you need to be mindful when using a form on a page that needs optimizing for both desktop and mobile devices (i.e. creating one form within the desktop view and a separate form within the mobile view). The reason for this is that it can cause problems when you click on the button to submit the form!

Even though your page visitor will only see a single form, there are in fact two forms present within the HTML source code. Whilst the second form is not visible to the user, it’s still there within the background code but is being hidden from view by using some clever styling scripts (this is automatically created within ClickFunnels).

If you were to view this page on a desktop computer, fill out the form and click the submit button, the funnel will not continue onwards.

Essentially it will not work and appear to do nothing.

This is because there are empty form fields in the hidden form that need to be completed before it can submit. Of course, with the second form being hidden out of view, your page visitor would be none the wiser and would just think that something is broken!

If they think it’s broken, chances are they will simply leave the page!

To resolve this, you simply need to ensure that only one form exists on the page.

You need to make sure that the section or row that has the form in is visible to both desktop and mobile devices, which means you will need to play about with properties on the individual form elements so that it looks good on all devices.

Thankfully, this is made easier by the fact that you can select different font sizes for desktop and mobile (see below), and all other form elements will automatically resize.

But by having just a single form on your funnel page, when the submit button is clicked, the funnel will work as expected!

Whilst these may seem like simple hacks, they could be the difference between converting a visitor into a client/customer… or losing them all together!

So, make sure you are optimizing all of your funnels for both desktop and mobile devices!