If you're a designer who is new to designing responsive, multi-column emails, the task can seem a bit challenging. The following guide outlines some best practices to follow when designing and laying out a responsive 2-column email.
1. Understanding a responsive 2-column email structure
Developing the layout for an email is a lot like being an architect. The easiest way to understand it, is to think of a building block structure. Each block stacks together to create the email layout.
The email structure is made up of tables, rows and cells. The table is the main container. Within the main table are rows. Within the rows are cells. Within the cell is your content. This content includes, text, images and other tables. The image below illustrates each element blocked off into its own section so that it stacks together. The more elements you have inside a cell, the more complex your layout becomes. The example below illustrates how the structure would be set up for a responsive 2-column email.
- Tables are divided into rows.
- Rows are divided into cells.
- Cells contain data, content and tables.
2. Setting up an email layout
Photoshop is the preferred program for creating email layouts. When setting up your email in Photoshop select the following:
- Go to Preferences > Units & Rulers and change your ruler and type setting to "Pixels".
- Open a new project.
- In the pop-up dialogue box
- Set your width to 680px
- Set your height to 800px (you can change this as needed for design)
- Set your resolution to 72 pixels per inch
- Set your color mode to RGB
- Set a left guide at 20px and a right guide at 660px. This creates your container size for your email which is 640px. The 20px on each side allows you to show what the background color of the email will be.
- Set a vertical guide at 25px. This area is where your preheader will go.
This is the basic setup to begin your email layout.
NOTE: If you are creating a full width email, set your width to 640px and disregard step 4.
- Use pixels as your measurement increment.
- Keep your color settings at RGB. CMYK colors display incorrectly when shown on web devices such as phones, tablets and web browsers.
- Use guides to block off each area of content. This helps developers know the exact measurements when programming the email.
3. Structuring your responsive 2-column email
When structuring your email, think of it as building blocks, with containers stacking on top of one another. Start from the top and work your way down.
Think responsive first. Start by planning how your elements will stack when they go mobile. In a responsive two-column email layout, the content on the left will stack on top of the content on the right (see example below). For more complicated emails, you can have multiple left and right columns to arrange your hierarchy.
When designing a responsive two-column email:
- Set the guides for your two column widths.
In the below example they are set for 420px wide for left and 220px wide for right. It is a good idea to keep the column widths the same if you are incorporating multiple rows of columns, i.e. the header has two columns and would stack before your two body columns (see example).
- Set a vertical guide at 600px.
While it is becoming more common practice to have longer, more vertical emails, it is still a good idea to see where your "fold" hits for desktop users.
- Be sure to build spacing into your email layout.
For example, if you want 20px of spacing between the edge of the email and where the content begins, set your guides to include that 20px of space. This allows the programmer to know how much space will need to be built in when programming.
- Setting up guides using whole numbers to show where spacing will occur gives programmers accurate measurements for development.
- Keep as much pertinent information above the 600px vertical guide for desktop users.
- Spacing does not need to be built in between paragraphs unless it is indented content, i.e. list, quote, etc.
4. Adding images to an email
Your image is a block of content unto itself. When placing an image, think about how you want the content around it to flow.
When using imagery keep the following in mind:
- Don’t use background images.
- For images to display well on retina devices, create images at least 2x the size of the image in the layout.
- Images cannot have transparent backgrounds.
- When placing an image into the layout, make sure it doesn’t overlap into another content area. For example, if you have an image in the body of your email, make sure that it clears the area where you would have a border space. See below.
- Be sure to have retina sized copies of your images.
- Do not use background images.
5. Using fonts and text styling in an email
Text styling options are somewhat limited when it comes to email.
When using text keep the following in mind:
- Use only web safe fonts such as Verdana, Arial, etc. If the client has not specified a font for email, a safe option is to use Arial.
- Make sure your font increments are set as pixels and use whole numbers. Do not use a font size smaller than 10px for legibility.
- Do not use kerning or leading in emails. Keep these settings at "auto."
- Use white as a font color as a last resort.
- Set your text box to the width of your content area for a more accurate view of how your text will flow when programmed.
- Text cannot be justified. It can only be aligned left, right or centered.
- Do not use hard returns. Allow your text to flow naturally so that there are no awkward breaks when the email goes responsive.
- Keep kerning and leading at "auto."
- Use whole, even numbers set at pixel increments for font size.
- Don't forget to stylize your text links.
These are some of the basics for designing a responsive 2-column email. Now get your feet wet and dive in. Check out these resources for more information:
Campaign Monitor: Responsive email design techniques
Litmus: The How to Guide Responsive Email Design