Responsive e-mail build
Defining the features of the e-mail is also part of the build, so let's define those:
- Create a Modular Scale for typography.
- Create two designs to help visualize the e-mail beforehand: one for large screens and one for small screens.
- The e-mail will have a maximum width of 600px and minimum width of 320px.
- 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...