When it comes to mobile design, cell groups may render differently than how they were built in the drag-and-drop editor. If you choose to use Cell Groups in your design there are two general display settings: responsive and non-responsive.
- Responsive: Will stack your content in left-to-right order when displayed on a mobile device.
- Non-responsive: Will shrink your content to fit the screen when displaying on a mobile device.
Beyond these general display settings for cell groups, let's dive in a bit deeper with a specific example of designing for mobile in mind when using columns, rows, or cell groups.
The scenario: I need to create a layout seen in the image below where each column contains 3 rows that includes an image, the headline, and then the story text. I initially build this by adding the "full" layout row and placing a 3x3 cell group into it.
Using this type of cell-group with the responsive setting selected (mentioned above) will stack for mobile like this:
So, how do I build the structure in the campaign or email template so that it stacks image, headline, then story as intended? Instead of using the "full" layout row with a 3x3 cell group, use the "thirds" layout row. Assign each of the 3 cells as a 1X3 cell group.
See these other help articles about cell groups:
How do I create custom columns in a cell group?
How do I make my cell group stack on mobile?
How do I customize my cell group?
Mobile devices render emails based on multiple levels of rules including device, email client or browser, personal viewing settings, and more. Because of this, 100% rendering perfection is not attainable. We recommend you design for mobile in a way that is friendly to most environments, test as much as possible, and utilize our email rendering integration.
Article is closed for comments.