Code a Responsive HTML Email Template in 3 Simple Steps

2. Add your cell kinds first

Many individuals nonetheless use a max-width media question to code emails for desktop first after which apply cell kinds for smaller screens. We advocate flipping that course of on its head and beginning with code for cell.

Megan typically factors out that coding for desktop first requires extra code. Plus, whenever you use a min-width media question for responsive e mail design, in case your desktop kinds don’t work, the design will nonetheless look nice. You'll be able to’t say the identical for the way desktop kinds show on cell.

Right here’s code that makes cell kinds the default in a responsive HTML e mail template:

You'll want to use show:block; for the content material in your columns. This ensures e mail parts within the desk structure will stack on prime of one another for cell viewing.

3. Add your desktop kinds

Right here’s the place the media question comes into play. As soon as once more, we’re utilizing a min-width media question in order that, beneath the hero picture, our cell kinds increase into two columns for desktop.

Principally, what a min-width media question does is outline what to do when a tool’s width is larger than the breakpoint. We’ve set the breakpoint under to 600px, which is a perfect width for many cellphones in addition to tablets.

                            

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


    .content material {
        width: 50% !essential;
        font-size: 16px !essential;
        show: table-cell !essential;
    }
}
                            
                        

For desktop kinds, you’ll want to alter show:block; to show: table-cell; within the media question. This makes it so the content material expands to 2 columns. After all, setting the content material width to 50% ensures what’s within the two columns matches neatly side-by-side.

You may as well use media queries to make different enhancements for cell or desktop viewing. That features resizing pictures, adjusting textual content measurement, and modifying the email’s padding and margins for sure viewports.

If you happen to ever want to focus on a spread of display screen sizes or a particular gadget, like a smartwatch for instance, you should use each min-width and max-width media queries. Uncover another methods to use media queries in email.

The whole code for a responsive e mail template

Lastly, right here’s a take a look at all of the code you’d use to construct precisely what we confirmed you in the beginning. You’ll have to customise this code to fulfill your wants. That features including your personal font stack for email, changing the placeholder picture, in addition to updating the knowledge and hyperlinks within the email footer.