The Layout Pane
RED brings the power of grid based web design to email creation. Content is organized and aligned using Rows and Columns. These rows and columns can be seen as grid elements, designed to maintain a stable and orderly position of the actual content elements. Each row can include up to 12 columns. The different row and column types allow for specific design effects.
The example below shows a 2-row layout for wide screens. The top row is divided into 2 equal columns each column 6 Spans wide.
The second row is divided into 4 equal columns each 3 Spans wide.
When the same layout is viewed on smaller screens (lower than the red breakpoint at the top), the 2-columns in the first row stack and then change to 12 spans wide.
While the 4-columns in the second row stack 2X2, each with a span of 6 wide. Increasing the span width for lower screens allows the content in the columns to have more room to display, keeping them from shrinking down too small.
Rows are used to vertically organize the content blocks. Within the rows, it’s the columns that contain the actual content and create the horizontal separation. This structure creates a big part of the display consistency across email clients.
Contents in this chapter
Row & Column Types
There are several different types of options you can use when it comes to rows and columns.
A Constrained Row is ‘constrained’ to be the same width as defined for the overall design. In the default template and example below, the ‘grid width’ is 620px. Changing the grid width, changes the width of all constrained rows.
In the image below, you'll notice that the content does not expand larger than the grid width. A Body background color (a dark gray) is applied for devices wider than the grid dimensions.
As indicated by the name, Full-Width rows have a width of 100%, stretching the full display width. The columns inside the row are still constrained by the grid width defined for the overall design (620px in the default template). These rows are often used to apply a different background for a section of the email, like for example the footer.
In the next example, the content is divided into four rows. The first three rows are Full-Width. They extend from end-to-end. While the fourth row (with the horses) is a Constrained-Row.
Whereas a Wide Column stretches the entire width of a full-width row, minus the gutter. The gutter is the space between adjacent columns. You can divide these columns up to 12 separate columns.
In one of our recent newsletters, we used all three types. The background (body) of the email itself is off-white (hex #f2f2f2 for those interested). However, the header section of the email shows three different shades of black across the full-width of the email. This is done by specifying a different background color for these full-width rows, covering the background of the email body.
In the first two rows, the one with the logo and ‘Connect to...’ header, the content is constrained to the specified width (700px for this example). Without padding and margin, the logo pushes against the left of the constrained area. The header in the second row is centered.
Looking closely at the third row will show that radiating lines coming from the places logo go outside of the constrained area. They (almost) touch the sides of the email, creating a strong visual effect. This is done by placing a wide image, wider than the specified email width, in a full-width column. RED is the only app that offers this powerful design possibility (yes, we're super proud of RED!).
Following the full-width column, constrained rows with a single column and no background are being used
Additional Resources
Merge and Divide Columns
The merge and divide buttons are used to adjust the layout while designing or creating the email. These changes will apply to all breakpoints (display widths). The width of each column can be adjusted with the span drop down. These changes can be different for each breakpoint and allows you for example to have a two or three column layout for wide screens, and a single column layout for small, mobile, devices.
Please note that the total span-width of the columns on the desktop design can not exceed 12.
Row can be divided (or merged) in up to 12 columns across. Just like a spreadsheet!
Row Management
Rows and Columns are moved using the Move tool in the Management section. Columns can be moved left and right whereas Rows go up and down.
Use the selector drop down positioned on the top left of each element to choose which item you want to move (or style).
Alternatively, you can also select the element you want to move using the Inspector pane. Hover over the item and it will highlight on screen. You can rearrange items in the element tree, or double click to launch their style properties.
Content elements, such as Headings, Paragraphs, and Images can be moved to other sections of the layout with drag and drop. Select an element by clicking and holding the mouse button down. Move the mouse to the desired section of the design and release the mouse to let the element drop.
When an element is moved to a different location, a horizontal bar will appear, indicating the exact place where it will be dropped. In addition, a line is visible around the parent element, and the parent type is shown.
Grid Configurations
The Grid section contains controls to change the width and gutter settings for the overall design of the email.
The width determines how wide the content area of the email will be. RED Personal uses fixed layouts, the email will be displayed at the defined size and a scrollbar will appear if the design is wider than the available display space. RED for Business can also use a fluid layout where the content ‘flows’ down and adapts to the available display width.
The Gutter is the space between Columns. This can also be set to zero and managed when working with individual columns. There is no right or wrong, the approach will simply vary with the design needs.