May 20, 2014No Comments

Tips to designing a responsive 2-column email

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.

Responsive 2-column email structure diagram

Quick Tips

  • 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:

  1. Go to Preferences > Units & Rulers and change your ruler and type setting to "Pixels".
  2. Open a new project.
  3. 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

    Email_setup_box

  4. 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.
  5. 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.

Quick Tips

  • 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:

  1. 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).
  2. 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.
  3. 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.

Email design guide

Quick Tips

  • 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:

  1. Don’t use background images.
  2. For images to display well on retina devices, create images at least 2x the size of the image in the layout.
  3. Images cannot have transparent backgrounds.
  4. 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.

Wrong_email_image_placement

Quick Tips

  • 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:

  1. 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.
  2. Make sure your font increments are set as pixels and use whole numbers. Do not use a font size smaller than 10px for legibility.
  3. Do not use kerning or leading in emails. Keep these settings at "auto."
  4. Use white as a font color as a last resort.
  5. Set your text box to the width of your content area for a more accurate view of how your text will flow when programmed.
  6. Text cannot be justified. It can only be aligned left, right or centered.
  7. Do not use hard returns. Allow your text to flow naturally so that there are no awkward breaks when the email goes responsive.

Quick Tips

  • 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

November 8, 2013No Comments

Typography takes on interactive design

Remember the days when web designers only had a handful of web safe fonts to play with? When websites relied heavily on an images and typography was a secondary concern? Well those days are behind us as typography moves to the forefront of interactive design.

Typography focused websites have trended for the last few years, but 2013 has seen the demand for them intensify. Part of this is due to the introduction of flat UI design. The shift in focus on more content, as well as the increased use of infographics have also contributed. If you're not paying attention to typography in your interactive/web layouts now is the time to start.

Good typography is essential to any layout. It organizes our content in a meaningful, user-friendly way. It also adds extra design flourishes. When working with typography in your digital designs consider this:

Fonts speak out
Remember those limited web safe fonts I was referring to earlier? Thanks to a little thing called Google Fonts, designers now have access to hundreds of free web safe fonts to add spice to their layout. Sick of Arial and Verdana? Try out PT Sans or Ubuntu. Want to be bold with a serif that's not Times? Try Josefin Slab or Abril Fatface. Yes the names may sound silly, but their typefaces speak volumes. The typeface you choose speaks as much to your product/service as your imagery and content.

Maximize the minimal
Stand alone typographic design treatments used to be something relegated to print. More and more though, digital designers are incorporating typographic design approaches as the key visual. This allows designers to use text as both content and visual interest. Websites that focus on typographic solutions over visuals are also smaller in file size, requiring less band with and download time for the user. While the design may appear minimal, the resources are maximized.

Avoid the clutter
If you've ever worked in any kind of newspaper/publication layout, then you're familiar with a grid layout. Web design works the same way, especially responsive design. Break out all of your typographic tools to present your content in an appealing, user-friendly way. That 1-column block of content is now 4-columns. Change the subheads to a different font-family. Allow a quote to break through 2-columns. With responsive design, CSS3 and HTML5 the options are limited only by your imagination (or CMS system lol).

Use your words
While a picture may speak a thousand words, sometimes they need real words to give context to their meeting. Good typography enhances the images around it. When viewed, it should feel like it has a symbiotic relationship with the creative around it. You never want your text to look like an after thought that's been slapped on a photo.

With my roots in print, I'm excited to see typography take the lead in today's interactive environment. Check out the below links for great examples of websites that are harnessing their typographic tools.
20 typographic websites | Webdesigner Depot
Best Examples of Typography in Web Design | Inspiration - Awwwards
A Journey Through Beautiful Typography In Web Design

Let's connect.

© Justin Herren 2022 | Creative strategist + design lead