Responsive e-mail build

Defining the features of the e-mail is also part of the build, so let's define those:

1. Create a Modular Scale for typography.
2. Create two designs to help visualize the e-mail beforehand: one for large screens and one for small screens.
3. The e-mail will have a maximum width of 600px and minimum width of 320px.
4. Use progressive enhancement.

Modular Scale for typography

To build our Modular Scale, we're going to use the following values:

• Base one (16px): Which is our base font size.
• Base two (600px): Which is the maximum width of our e-mail.
• Ratio (1.618): The Golden ratio.

This Modular Scale can be found at http://www.modularscale.com/?16,600&px&1.618&web&table.

Design – large and small screen views

The following designs will help get a better picture of the e-mail on large and small screens. This is how it looks at 600px wide:

This is how the e-mail looks at its smallest size, 320px wide:

Let's get right down to business and build a responsive...