Details
Columns are a great way to mix up the design of your email - guiding the eye and providing some variety for longer messages.
As with anything, there are usually several ways of achieving the same result - but as you'll see, some methods may be better than others. In this article, we'll take you through a series of scenarios and will provide our tips & tricks to achieve the best results possible when working with columns in your email design.
As a general rule, we recommend a maximum of two columns in your email design (sometimes three, if you have a wider email). This is especially true for email widths that may not be equally divisible by your number of columns.
For example, if your email design is 650px wide, then a twin column layout will result in two columns of 325px width each. However, a triple column layout could cause issues - as 650px is not equally divisible by three.
Furthermore, some older email clients (such as older versions of Outlook) don't display columns correctly on mobile, which can cause display issues.
Columns resizing randomly? Try adjusting your monitor scaling.
Scenario 1: Placing Text Beside an Image
In this example, we can see an image component placed to the right of a text component in a two-column layout:
While this achieves a result, a better method would be to use a single text component and to use the image option / image toggle that is attached to the component, as shown:
By turning off the Wrap text option and setting the Padding to zero (as shown), the end result visually looks the same - but with added benefits.
It is now much easier to adjust the size of the layout without affecting other parts of the design (simply alter one of the image dimensions to increase or decrease the size) - and it's easier to move the entire block around to another part of your email if you ever need to, as it is now made up of one single block, as opposed to two components next to another like before.
You'll also be able to flip this around easily (i.e. image on the left, text on the right) by adjusting the image alignment in the same settings area.
Scenario 2: Placing Several Images Next to One Another
In this example, we can see multiple image components (four, to be exact) placed next to each other in order to create four columns for various social media icons. While this looks alright initially, on mobile you'll get one image per line, as shown (this is because columns stack on mobiles).
For this type of scenario, it may be better to insert a single text component and place the images inside it, using the image option on the text formatting toolbar. Here we've inserted the four images one by one, using the Insert image function, as shown:
The spacing between them can be achieved by pressing spacebar a few times, or by setting a margin of a few pixels when you go to insert each image, as shown:
This purple section is now treated as a single component (because it is) and as many images as can fit across the screen will be displayed on a single line, as shown:
Again - just like in the previous scenario, it is now much easier to move the entire block around to another part of your email if you ever need to, as it is now made up of one single block, as opposed to four separate components next to another like before.
By the way - given the size of our images and the spacing used, if a fifth image would have been added, that fifth image would appear on its own line underneath the other four.
Scenario 3: Multiple Rows of Columns
As mentioned in our article, Using the Spacer Component in Your Email Design, we recommend using a spacer element between multiple rows of columns.
This tells the system to treat each row as its own - and any components above a spacer won't affect the components below a spacer. This is especially important if your column heights differ greatly. You can review the article linked above for further details and a how to guide.
Unable To Move a Component After A Multi-Column Section
If you've got a multi-column section right at the end of your email and you'd like to place a single column (or 'full width') component after these, you might notice that it's virtually impossible to do.
This is because a full-width component can only be moved there if one already exists. If you try and move it under a multi-column section, you'll notice it will try and snap into one of the columns instead.
To get around this, temporarily add a 'Footer' component to your email. This type of component can only be placed at the bottom of your email, thus solving the issue of being able to get something underneath your columns.
Now you'll be able to drag your component underneath your columns. Once done, you can remove the footer component if you don't need it.
Column Widths Changing Randomly? Check Your Monitor Scaling
It's also important to take note of your screen resolution and scaling settings, as this can affect the way our system behaves when it comes to columns. For example, if your operating system is set to scale your screen to 150%, then pixel calculations will be affected be a factor of 1.5, resulting in calculations with decimals.
Furthermore, zooming your browser window in or out (i.e. not 100%) can also cause issues for the same reason. We recommend setting your browser scaling and your general screen scaling to 100%.
How to set monitor scaling to 100% on Windows
- Right-click on your Desktop, and select Display Settings.
- If you have multiple monitors, select the monitor you'd like to adjust the scaling for.
- Scroll down to the Scale & Layout section.
- Use the dropdown to adjust the scaling percentage to 100%. The setting will now be applied. Repeat the process for any additional monitors you have.
For further assistance, please consult your IT team or system administrator.
How to set monitor scaling to 100% on Mac
- Select the Apple icon at the top right, then choose System Settings.
- In the search bar, type Displays, then select this option.
- Set the scaling to 'Default'. The setting will now be applied. Repeat the process for any additional monitors you have.
For further assistance, please consult your IT team or system administrator.
Further Reading
- Add Columns to an Email
- Common Issues With Microsoft Outlook
- Email Design Best Practices
- Evening out Columns in an Email
- Using the Spacer Component in Your Email Design