Mobile View in Editor

Mobile Preview (1).png

With the majority of ecommerce traffic now coming from mobile devices, it’s essential to optimize your campaigns for mobile users. OptiMonk's Mobile Campaign Editor ensures your visitors have a seamless and engaging experience, mirroring the quality they get on desktops.

In this article, we’ll cover all important aspects of making your campaigns look great on mobile:

  1. Preview campaigns across devices
  2. Adjusting elements on mobile only
  3. Hide/display elements only on desktop/mobile

Preview campaigns across devices

Effortlessly preview your campaigns on a variety of mobile devices with our Mobile Campaign Editor. This feature allows you to see how your campaign displays on the most commonly used devices, ensuring your design looks great everywhere.

mobile_preview_1.png

Adjusting elements on mobile only

OptiMonk's Editor enables you to fine-tune the mobile settings of each campaign element, allowing for customization that meets the unique requirements of mobile displays. This means elements can be adjusted in size, spacing, or positioning specifically for mobile, without affecting the desktop layout.

You can independently modify the following settings for mobile:

  • Margin, Padding, and Mobile Width: Adjust the space around elements and their width to better fit mobile screens.
  • Text Alignment and Text Size Ratio: Fine-tune how your text appears, ensuring it is both readable and aesthetically pleasing on smaller devices.
  • Mobile-Specific Images: Choose different images that are optimized for mobile, enhancing load times and visual appeal.
  • Button Display: Customize size, width, and alignment to ensure buttons are easily clickable on mobile.
  • Input Fields: Adjust text alignment, font size, width, and height to improve usability on mobile devices.

Identifying mobile-specific settings:

When you click on any element in the mobile view within the editor, look for the mobile icon next to certain options on the right. This icon indicates that the setting can be configured separately for mobile and desktop views, providing a tailored experience for all users.

mobile_preview_2.png

Hide/display elements only on desktop/mobile

Managing if elements appear across different devices is straightforward with our Responsive settings. Located under the Advanced section, this feature allows you to selectively display elements based on the viewer's device.

Responsive Options Include:

  • Hide Element on Desktop: Choose to hide specific elements from viewers on desktop devices, optimizing the layout for larger screens.
  • Hide Element on Mobile: Opt to conceal elements from mobile viewers, ensuring a cleaner and more navigable interface on smaller screens.

mobile_preview_3.png

Tracking Hidden Elements: When you hide an element, it’s not gone forever! You can easily locate and manage hidden elements in the Layers panel. For instance, if an image is set to be invisible on desktop but visible on mobile, you can find this setting clearly indicated under Layers, ensuring full control over your campaign's visibility settings.

If you have any further questions or need any help, just let us know at support@optimonk.com and we would be happy to assist you :) 

Have more questions? Submit a request

Comments