Responsive Design: Stacking Images

Posted by: Aaron Pearson, Sr. Graphic Design

In a recent webinar, I discussed Listrak’s approach to responsive design and mobile engagement with best practices for navigation, text size, stacking and resizing content, retina graphics, and the use of media queries for mobile styling. There were many great questions asked by our viewers following the webinar, but the two topics that were most popular seemed to be retina images and stacking content. I think it would be good to review these and hope to provide a clearer understanding of how they work.

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:

image

Mobile:

image

The two columns we would like to stack are the location and date. Each of these columns will be coded as a separate table, one aligned left, the other aligned right, and a wrapping table.

image

image

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:

image

Adding additional columns can be tricky. 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.

image

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.

image

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.

Any questions? Let us know in the comments section.

Read our post explaining Retina Images


Notes

  1. listrak posted this