How to Create Mobile-Responsive Templates
Why This Matters
More than 60% of emails are opened on mobile devices, and that number continues to grow. If your templates don't look good on smartphones and tablets, you're missing opportunities to connect with your audience. Mobile-responsive design ensures your content automatically adapts to any screen size, delivering a great experience whether someone views your message on a desktop computer or a phone.
The template editor is built for mobile responsiveness from the ground up. Every template you create automatically adjusts to different devices, and you have powerful tools to customize exactly how that happens.
Understanding Mobile Responsiveness
Mobile-responsive means your design adapts intelligently to smaller screens. The editor handles this by:
- Stacking columns vertically on mobile instead of displaying them side-by-side
- Adjusting image sizes to fit mobile screens
- Making text readable without zooming
- Ensuring buttons are large enough to tap easily
You don't need to create separate templates for desktop and mobile. One template automatically works everywhere.
Step-by-Step Instructions
1. Switch to Mobile View
Look for two icons in the upper left corner of the editor canvas: a desktop monitor icon and a mobile phone icon.
Click the mobile phone icon to switch to mobile view. The canvas narrows to 320 pixels wide (typical smartphone width) with a grey background for visibility.
This lets you see exactly how your template will look on mobile devices as you build it.
2. Design for Mobile First (Optional)
Many designers find it easier to start in mobile view and then expand to desktop, rather than the other way around.
If your primary audience checks email on phones, beginning in mobile view ensures your most important content works perfectly on small screens.
You can switch between views at any time without losing your work.
3. Understand Column Stacking
By default, when someone views your template on mobile, multiple columns automatically stack vertically.
For example, a two-column layout with an image on the left and text on the right becomes two rows on mobile: the image on top, then the text below.
This automatic stacking keeps your content readable on narrow screens without requiring any action from you.
4. Preview Column Stacking Behavior
Click the Preview button in the top toolbar, then toggle between Desktop and Mobile views in the preview window.
Watch how your multi-column sections rearrange. This helps you decide if the default stacking works well or if you need to make adjustments.
Pay special attention to sections with images and text to ensure they appear in a logical order.
5. Prevent Columns from Stacking (When Needed)
Sometimes you want columns to stay side-by-side even on mobile. Navigation menus with multiple links or icon rows often work better without stacking.
Select the row by clicking in the grey area outside your content. In the Row Properties section of the right sidebar, scroll down to Mobile Optimization Options.
Toggle on "Do Not Stack on Mobile." The columns will now remain side-by-side on mobile devices, scaling to fit the smaller screen.
6. Reverse Stacking Order
The default stacking goes left-to-right (the leftmost column appears on top). Sometimes you want the opposite order.
Select the row, then in Mobile Optimization Options, toggle on "Reverse Stack on Mobile."
This is perfect for designs where the image is on the right on desktop but should appear above the text on mobile for better visual flow.
7. Hide Content on Specific Devices
Some elements work well on desktop but clutter mobile screens. You can hide specific content blocks or entire rows on either device type.
For individual content blocks: Click the element, scroll down in Content Properties to "Block Options," and toggle "Hide on Mobile" or "Hide on Desktop."
For entire rows: Select the row, scroll to the bottom of Row Properties, and use the same hide options.
Hidden content appears translucent in the editor so you can still see and edit it, but it won't appear on the specified device.
8. Customize Mobile-Specific Styling
Switch to mobile view to access mobile-only styling options. Look for the mobile indicator icon (a small phone symbol) next to certain properties in the sidebar.
You can set different values for mobile on these properties:
- Text alignment: Center text on mobile even if it's left-aligned on desktop
- Text size: Make headlines smaller on mobile for better readability
- Padding: Reduce spacing on mobile to fit more content on screen
These changes only affect the mobile version while your desktop design stays the same.
9. Test Your Responsive Design
Use the Preview function and switch between Desktop and Mobile views multiple times.
Check that:
- All text is readable without zooming
- Images scale appropriately and don't appear too large
- Buttons are easy to tap (at least 44 pixels tall)
- Important content isn't hidden accidentally
- Column stacking creates a logical reading order
If possible, send yourself a test email and view it on an actual phone to verify everything looks right.
10. Make Final Adjustments
Based on your preview testing, return to the editor and refine:
- Adjust padding to give content breathing room on mobile
- Reduce text size if headlines feel too large
- Fine-tune stacking order for better content flow
- Hide decorative elements that don't serve a purpose on small screens
Remember that changes in desktop view apply to both desktop and mobile unless you specifically set mobile-only values.
Questions and Answers
Q: Do I need to create separate templates for desktop and mobile?
A: No. Every template you create is automatically responsive and works on both desktop and mobile. You're customizing one template that adapts intelligently to different screen sizes.
Q: What does "stacking" mean?
A: Stacking is when columns that appear side-by-side on desktop are rearranged vertically on mobile. If you have two columns (left and right) on desktop, they become two rows (top and bottom) on mobile so content fits on the narrow screen.
Q: When should I use "Do Not Stack on Mobile"?
A: Use this for navigation menus, icon rows, or any content that works better remaining side-by-side even on small screens. Be careful not to overuse it, as stacking usually creates better mobile experiences.
Q: How do I know which view I'm working in?
A: Look at which icon is highlighted in the upper left corner. The desktop monitor icon means desktop view, and the mobile phone icon means mobile view. You can switch between them anytime.
Q: Why can't I change the content area width in mobile view?
A: Mobile view is locked to 320 pixels to represent typical smartphone screens. Content area width can only be adjusted in desktop view and automatically adapts for mobile.
Q: Will hiding content on mobile make my emails load faster?
A: Hidden content is still included in the email code, so it doesn't significantly affect load time. The "hide" feature is purely for display purposes, making certain elements invisible on specific devices.
Q: What's the difference between hiding a content block and hiding a row?
A: Hiding a content block hides just that one element (like a single image or text block). Hiding an entire row hides everything in that row across all columns. Use row hiding when you want to remove a whole section on mobile.
Q: Can I make text larger on mobile than desktop?
A: Yes. Switch to mobile view, select your text block, and look for the mobile indicator icon next to text size in the sidebar. You can set a different size that only applies to mobile.
Q: How do I test my template on different mobile devices?
A: Use the Preview function to see mobile view within the editor. For the most accurate testing, send yourself a test email and open it on your actual phone. Different email apps may render content slightly differently.
Q: My columns aren't stacking on mobile. What's wrong?
A: Check the Row Properties for that row. If "Do Not Stack on Mobile" is toggled on, columns will stay side-by-side. Toggle it off to enable automatic stacking.
Q: Should I design for desktop first or mobile first?
A: It depends on your audience. If most people view your emails on phones, design for mobile first. If desktop is more common, start there. The beauty of responsive design is you can approach it either way and the template will work everywhere.
Q: What happens to padding on mobile?
A: By default, desktop padding values also apply to mobile. However, you can switch to mobile view and set different padding values specifically for mobile devices, which is useful for reducing spacing on smaller screens.
Guide Type: How-To Guide
Estimated Time: 8 minutes