Nothing is more frustrating than landing on a website or opening an email that is not optimized for the device you are using. Having to zoom in or scroll to see the full screen can be a big deterrent for users, and will likely lead to losing potential customers out of frustration. 

That’s where responsive design comes into the picture. Today, if your email format is not designed with mobile devices such as smartphones and tablets, in mind you’re likely under-converting and underwhelming your subscribers.

The good news is that most companies have identified the need for responsive design and are working to create user-friendly email experiences for both mobile and desktop experiences. But in the last few years, mobile usage has grown exponentially and now over 50% of web traffic can be attributed to mobile devices -- making it a huge area of focus for companies.

Keeping a responsive design in mind from the start when planning out your email marketing strategy is very important. Knowing what new trends and mobile-friendly design capabilities are available will keep your marketing up to date and providing a seemly experience from desktop to mobile. Let’s take a look at how stacking images can help improve your mobile optimization efforts. 

Mobile Optimization: Stacking Tables

Stacking content in an email requires more than just an understanding of good ol’ fashioned table structure. Planning out our design ahead of time in a grid with appropriate dimensions is an essential part of the process and a bit of thinking outside the box. We are really pushing tables and nested tables upon nested tables to the limit.

Let’s start out simple, with a 2 column layout that will stack to 1 column on a mobile device. Here is our design:

Desktop:

Mobile:

On the other hand, when a subscriber opens this email on a mobile device it will look a little different. This time, the images are stacked to make it a simple scrolling experience and show everything the user needs on one simple screen. No zooming in to read the content or scrolling to the right or left to see something that is out of range. The two columns we would like to stack are the location and date. This helps streamline the information without having to lose any important details. It allows users to simply scroll down rather than to the right or left to see the additional details and potentially miss something as important as the date of the event. To accomplish this, each of these columns will be coded as a separate table, one aligned left, the other aligned right, and a wrapping table.

There must always be space between tables, in this case between the blue and green tables. Outlook is quirky and adds padding to tables that are aligned left or right. Adding the border-collapse styles to the table does help, however the amount of space does not seem to be consistent. When there is not enough space between the tables, Outlook will force one table below the other. Always be sure to test.

We have added a class to each table that will style them as 100% when viewed on a mobile device. When the tables become full width, they will no longer float next to each other, but will stack, giving us the appearance of 1 column.

Here is the CSS for the mobile styles:

Adding Columns

Adding additional columns can be tricky, but it can be done.There are two ways multiple columns can be achieved.

1. The first method is the simplest, but for someone who is pixel perfect, not exactly ideal. Any number of tables can be aligned left to form multiple columns. The key here is to fix the width of each table to fit within your layout. Remember to leave room to allow Outlook to add space to the aligned tables.

2. The second method will give you much better results, but requires more planning and math; but it is basic math, no reason to be afraid. Similar to the Listrak example that was explained, each table should contain two tables, one aligned left and the other aligned right. To add a third column, the first two tables need to be wrapped in a table that itself is aligned left, and the additional table will be aligned right. This can be repeated for any number of columns, each nested table containing just two tables.

Test These Responsive Email Tactics For Yourself

Try each of these methods and let us know which you prefer. Something else to try; with CSS you can make your widths become 100% to create a 1 column layout on mobile, but you can experiment with 50% widths to give yourself a 2 column layout on mobile. This works great for product layouts.

No matter how you do it, get your emails into a responsive format. The number of mobile users will only continue to grow in the coming years, stay ahead of the trends now. 

Any questions? Let us know in the comments section.

‍