Code a Responsive HTML Email Template in 3 Simple Steps

2. Add your mobile styles first

Many people still use a max-width media query to code emails for desktop first and then apply mobile styles for smaller screens. We recommend flipping that process on its head and starting with code for mobile.

Megan often points out that coding for desktop first requires more code. Plus, when you use a min-width media query for responsive email design, if your desktop styles don’t work, the design will still look fine. You can’t say the same for how desktop styles display on mobile.

Here’s code that makes mobile styles the default in a responsive HTML email template:

Be sure to use display:block; for the content in your columns. This ensures email elements in the table layout will stack on top of each other for mobile viewing.

3. Add your desktop styles

Here’s where the media query comes into play. Once again, we’re using a min-width media query so that, beneath the hero image, our mobile styles expand into two columns for desktop.

Basically, what a min-width media query does is define what to do when a device’s width is greater than the breakpoint. We’ve set the breakpoint below to 600px, which is an ideal width for most mobile phones as well as tablets.

                            

                                @media only screen and (min-width: 600px) {
    .container {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        display: block !important;
    }


    .content {
        width: 50% !important;
        font-size: 16px !important;
        display: table-cell !important;
    }
}
                            
                        

For desktop styles, you’ll need to change display:block; to display: table-cell; in the media query. This makes it so the content expands to two columns. Of course, setting the content width to 50% ensures what’s in the two columns fits neatly side-by-side.

You can also use media queries to make other enhancements for mobile or desktop viewing. That includes resizing images, adjusting text size, and modifying the email’s padding and margins for certain viewports.

If you ever need to target a range of screen sizes or a specific device, like a smartwatch for example, you can use both min-width and max-width media queries. Discover some other ways to use media queries in email.

The complete code for a responsive email template

Finally, here’s a look at all the code you’d use to build exactly what we showed you at the start. You’ll need to customize this code to meet your needs. That includes adding your own font stack for email, replacing the placeholder image, as well as updating the information and links in the email footer.