Creating a subgrid using containers in Responsive Email Designer
Being able to create custom layouts at various widths is one of the most important aspects of a responsive design. Due to rendering limitations of the email clients this a little bit more of a challenge for newsletters than it is for websites. However, RED is one powerful app...this short article (and video) has been created to address a layout question asked in the forums.
Creating the subgrid in the first column
Drop a Container element into the first column. Then drop a Heading element and triple click it to start the text editor. Change the placeholder text to A. Select the container and go to the Design pane. There change the width to 50% and align the container left. Also, set a border on all sides so it’s easy to see what is happening.
Now simply duplicate the container and the first row of the subgrid is in place. Change the A to a B for the Heading on the right and, with the heading selected, add some margin to space it out nicely.
Select the (B) container on the right and duplicate it. On the design pane, give the container an ID. (I am simply using the letters to assign the IDs here, so this container got the letter C.) Select ID from the Apply To dropdown and scroll down to the Dimensions section. There set the width for this specific (C) container to 100%. This already completes the setup of the ‘subgrid’.
Completing the row layout
Select the column and go to the Layout pane. There, change the width of this column to a span 6. After that simply add a column, and change the span width to 6 as well. Copy the container with the C header and paste it in the new column. Update the header and ID to D. This header needs more top and bottom margin to space it out, apply that a the ID. You can also update the borders on the various container IDs to prevent double borders where they touch.
To complete the desktop layout add an additional row with a single column on the layout pane. Copy the container D and paste it in the new column. Update the heading (and ID) to E. Here remove the top-border using the ID (again to prevent the double borders). Desktop email client layout, ready!
Changing the layout for (smaller) mobile email clients
Move the slider to the left of the breakpoint (the red dot) and select the column with the subgrid. On the Layout pane, change the width to 12 spans. Do the same for the second column (with the heading D). Mission accomplished!
The video below summarizes the steps described above. You can also download the project and look at the settings yourself.
