Customize the display on mobile devices
Like all modern websites, your Funnelish funnel has a responsive design. That means the display adjusts according to the user's screen size. The result is a good-looking funnel on any device.
Can it be better?
Yes, it can. That's why Funnelish provides responsive properties. These tools let you customize the layout of your funnel on desktop monitors, tablets, and mobile devices separately.
Because you know the quality of the user experience correlates with conversion rates. Why risk losing conversions because of unexpected layout glitches.
With a bit of extra work, you can tweak the funnel layout to look good on any device. And with our tools, there's no need to bother with confusing Hide / Show tags on elements. The result is a polished display on any device.
Here is a list of components and properties that you can configure separately for desktops, tablets, and phones:
- Image alignment
- Container orientation
- Button alignment
- Text font size
- Text alignment
To demonstrate the value of responsive properties, let's look at a use case.
The screenshot below shows a simple step layout designed for a desktop display. For this use case, we focus on five layout points:
- 1.Image: align right
- 2.Header text: centered, 36 px
- 3.Body text: 18 px, align left
- 4.Button: align to center
- 5.Customer review: Custom HTML component, left margin 11 px
Here is the same step displayed on a phone. The screenshot below shows three problems.
- 1.The image is not centered. There is more spacing on the left than on the right. This is because the default responsive display uses desktop alignment settings.
- 2.The header takes two lines. This is not an optimal layout for mobile scrolling.
- 3.The body text looks odd because it is left justified.
- 4.The button size / alignment is not optimal for the user experience on phones. It could be bigger
- 5.The customer review information (stars) was pushed down to the bottom of the vertical stack. Social proof like this should be closer to the product image.
We're going to use two types of responsive fixes for the phone display.
- For problems 1-4 described above, we can easily make corrections by customizing responsive properties.
- Problem #5 requires a different solution.
Follow these steps to adjust the responsive properties of an element. We use this solution to fix problems 1-4
- 1.Click the element one time.
- 2.Go to the top of the canvas and click the phone icon.
3. Go to the properties panel and make changes.
- In this example, we change the image alignment on the phone from right justified to centered.
4. Click Save changes.
The result is two different display settings for the image: on desktops, the image is right justified and on phones, the image is centered.
Follow the same steps to customize other responsive properties. In this example, we:
- Reduce the font size of the header. Now that text displays in one line.
- Change the paragraph text alignment from left justified to centered.
- Change the button alignment from centered to stretch.
All of the changes to the responsive properties described above now appear on a phone, as shown in the screenshot below.
- One layout problem remains: the location of the customer reviews. We fix that display problem below.
Many components do not have responsive properties (as described above). To create a phone-specific or desktop-specific layout, you need to use the Responsive icons in the properties panel.
The workflow is straightforward:
- Create one instance of a component for the desktop display.
- Create a second instance of the same component for the tablet display.
- Create a third instance of the same component for the phone display.
- In this example, we create two instances of the CUSTOM HTML component: one for a desktop display and one for a phone display. Follow the same steps for any component or to create a unique display for tablets.
With the step open on the canvas:
- 1.Click the component one time.
- 2.Go to the top of the page and click the desktop icon.
- 3.Go to the Responsive heading in the left panel, select the desktop icon, and disable the phone and tablet icons.
- 4.Click Save changes.
The component now has an icon to indicate its display status. In this example, the desktop icon indicates that it is visible only on desktop monitors.
The next step is to customize the display of the component on the phone layout. To accomplish this task, we cannot reuse the component that sits on the desktop display.
Instead, we need to place a new instance of the same component on the phone canvas.
- 1.Go to the top of the page and click the phone icon.
- 2.Go to the left panel.
- 3.Drag the component to the correct location on the canvas.
- 1.Click the component one time.
- 2.Go to the Responsive heading in the left panel, and select the phone icon.
- 3.Disable the desktop and tablet icons.
- 4.Customize the component as required. (optional)
- 5.Click Save changes.
All changes, including the phone-specific location of the CUSTOM HTML component, display correctly on a mobile device, as shown in the screenshot below.