Designing Responsive Emails

All email designs built in the Ascent360 Email Designer are responsive designs. This means that they will automatically stack rows with multiple columns and adjust the layout to the device size and orientation that will be used to display the email.  However, it is still a good idea to make sure your designs render as you expect on both mobile and desktop.  

Some tips to consider when thinking Responsive Email Design: 

  • Columns always stack from left to right unless Reverse Stack Order on Mobile is enabled on the row.  Image above displays Row Properties with Reverse Stack Order on Mobile enabled (right column stacks on top of left column)
  • All content within a column in a row will stack so place all content (EG Image/Text/Button) in the same column/row to ensure proper stacking.  
  • Images for rows that have 3 or more columns will not by default display at full width on mobile. If you’d like for them to display full width on mobile, deselect the auto-width option in the content properties and select the display full width on mobile check box. 
  • Padding is critical. If you have too much padding for desktop then you will have a large gap in your mobile display. Make sure the padding for your images/text/buttons and in between rows works for both desktop and mobile. Note, you can adjust padding for both the row itself and for the content block itself. Also, you can adjust padding for each individual column in a row to align different sized content more effectively.

If you are unable to find a layout/format that works for both desktop and mobile devices, there is an option in the email designer to hide rows or specific content from displaying on a mobile or desktop device. 

  • This means you can design desktop and mobile specific content sections in your email so you get the best of both worlds. 
  • For example, if you’d like to have a menu at the top of your email you can have it formatted for desktop to be horizontal but that display won’t work on mobile. 
  • You can then create another menu that is vertical and hide that from desktop. This means you will have a menu that is optimized for whatever device will be used by the email recipient.

Reach out to the Ascent360 help desk or to your CSM for additional help.