Mobile Design Mode lets you preview, edit, and optimize your design for smaller screens directly inside Act-On’s Email Composer and Landing Page Composer. You can toggle between desktop and mobile views, adjust mobile-only settings, and make sure every element looks great on every device.
This feature helps you design responsively without leaving the Composer - you’ll see exactly how your content stacks, aligns, and behaves on mobile screens.
Quick Reference (Advanced Users) - Click to Expand
- Toggle between Desktop and Mobile views from the icons in the upper-left corner of the Composer.
- Mobile view reduces the canvas to 320 px width for realistic previewing.
- The grey backdrop indicates viewing mode - it isn’t part of your design.
- Mobile-specific settings are marked with a purple mobile icon in the sidebar.
- Use the visibility (eye) icon to preview hidden or device-specific content.
How It Works
In both Composers, the Desktop/Mobile toggle icons are located in the upper-left corner of the workspace. Clicking the mobile icon switches the design canvas to a 320 px-wide preview - a standard mobile width. The grey background helps you distinguish the active view but is not part of your published design.
You can continue editing in mobile mode just as you would in desktop mode. All drag-and-drop tools remain available, with one exception: the content area width option is disabled in mobile view.
Some settings are specific to mobile layouts. You’ll see a small mobile-device icon next to these fields in the sidebar:
Visibility Options
Next to the design-mode toggle, you’ll find a visibility icon that looks like an eye. This control is off by default. When enabled, it highlights any content that is hidden for your current device type - showing it as translucent within the canvas.
For instance, if a Row is set to be hidden on mobile, you’ll still see its faint outline when this option is active. This makes it easier to understand which elements are displayed or suppressed across devices.
Hidden Content
Content hidden by device type appears translucent in the current mode. For example, you might have two logos - one optimized for desktop, one for mobile. When in mobile view, the desktop logo will appear translucent, indicating it’s hidden for that device.
You can switch between design modes to fully edit hidden content, or adjust its visibility settings directly from the sidebar without leaving your current view.
Mobile-Specific Design Settings
Certain styling options can be defined exclusively for mobile. When a setting offers a mobile-only adjustment, it will display a mobile icon in the sidebar. These settings include:
- Alignment - Adjust horizontal placement of text or images.
- Button width - Set buttons to full-width for better touch targets.
- Padding - Reduce or expand space around elements for compact layouts.
- Spacer height - Modify vertical spacing to tighten mobile designs.
- Text size - Resize typography for readability on small screens.
When a mobile-specific setting has not been customized, its icon appears grey. After you make changes, the icon turns purple, indicating mobile-specific adjustments are active for that property.
Best Practices for Mobile Design
- Use Mobile Design Mode throughout your build - don’t wait until the end to test responsiveness.
- Keep buttons large and touch-friendly; use the 100 % width option for key CTAs.
- Reduce spacer heights to avoid unnecessary scrolling on mobile devices.
- Preview frequently - toggle between desktop and mobile to confirm consistency.
- Hide complex layouts or wide images on mobile if they reduce readability.