back arrow
All Blogs
3 Column Layout email template

How to Adjust 3 Columns in Email for On-The-Go Users

Email designers and coders put their heart and soul to build and create a beautiful email design that looks wonderful in the inboxes and appeal to the...

Email designers and coders put their heart and soul to build and create a beautiful email design that looks wonderful in the inboxes and appeal to the subscribers too. However, in this process of wooing subscribers email designers and coders face several technical and non-technical issues. One of the technical issues faced by the email coders is adjusting 3 columns in mobile.

The Problem….

In this article, Uplers will show you a simple way of overcoming the hassle of arranging 3 column designs on mobile. We are aware that columns are created in the desktop design so the height of the email can be reduced. But the same has negative effect for the mobile users. On mobile, all the columns stack one after another, and the 3 columns become bunch of big blocks arranged one after another increasing the height of the email. An example of that can be seen below:

3 column templates

Whenever there are 3 columns in an email, and are as coded using tables, stacking them one below another is the option. Normally three columns (3×1) are stacked into one column (1×3). This increases the length of your email in mobile leading to more scroll for viewing all three images too.

If the numbers of products are more like 6 products or 9 products stacking one product per column, in mobile it is too lengthy and not recommendable. Alternative is that we create 2×3 block in mobile that would still keep all text and images readable. But then creating 2×3 blocks usually lead to coding the 3rd block twice, one for mobile and one for desktop.

Thereby dual coding has to be applied, considering tables coding in line would lead to create problems in some of the older email clients like Lotus, Outlook 2003 etc.

To remove this limitation we have come up with the solution of arranging the 3 columns layout for desktop to 2 columns layout for mobile with 100% compatibility. Though this will not save the length of the email, it will eliminate the reasons of hiding the content on mobile.

Solution:

To accomplish this, we must code all the columns within one single TD with left alignment.

table tags - 3 column email template

All the columns must be coded as TABLE with left align of each other, with the required width. Then, all the columns must be set to 50% width for smaller devices within the media-queries. This will allow the two tables with 50% width to automatically set after each other.

2 layout

Coding the columns side-by-side will however create an alignment issue with Outlook 2007, 10, 13 and Lotus. You are here required to have the hack for these two. Creating the layout structure of this way would save up many scrolls on smaller screens.

By applying this solution, three columns in email for mobile users can be achieved without any hassle. However, many email marketers struggle while applying this optimum solution. This is when Uplers can come to your rescue. Contact us to gain more insights about it.

Did you like this post? Do share it!
The following two tabs change content below.

Kevin George

Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.

Leave a Reply

YOU MAY ALSO LIKE

WE CAN ALSO HELP YOU WITH

Email Template
Productions

Transform your requirement into visually-appealing & high-converting email templates.

EMAIL OPERATION
SUPPORT

Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

DEDICATED
RESOURCE TEAM

Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

Digital
ASSETS

Get more from your paid marketing campaigns through conversion-driven landing pages and banners.