7 min read

How to Create a Responsive Email Design

Written by Andriy Boychuk
7 min read
Table of Contents

    As you plan your email campaigns, make sure to have a responsive email design.

    It is a good email design practice that will help ensure that your emails display clearly on all devices, delivering a great customer experience.

    Understanding What a Responsive Email Design Is

    Put simply, responsive email design is a type of email design that adapts automatically to devices and their :

    • Screen size
    • Orientation
    • The platform that the recipient is using. 

    Text, images, and other content automatically adjust to work with the screen size of the device.

    To create a responsive design, you will likely use specialized grids along with CSS media queries and grids. Or you can just opt for a template that already includes those.

    Why a Responsive Email Design Is Important in a World of Different Devices

    Responsive email design has been growing in importance for years with the emergence of so many different devices.

    It is the best method of ensuring that your email will load properly with the format you want on all kinds of devices. Otherwise, you would have to create a separate email version for each device type.

    To illustrate how important responsive email design is, imagine what would happen if you loaded a web-optimized email on a smartphone in portrait mode.

    You would likely only see the left half of the email, with the right being off the screen. In the best-case scenario, the viewer would have to constantly scroll left and right in addition to up and down. In the worst-case scenario, the right half would simply be cut off.

    Essentially, if you don’t use a responsive email design, you will likely irritate a large segment of your audience.

    Remember that if your email doesn’t load properly, most people will just close it. That has an obvious negative effect on your conversion rate.

    Overall, when you switch to responsive emails, you will notice an improved user experience and a higher conversion rate. This can even increase referrals and the number of subscribers who forward your email.

    3 Types of Email Optimization: Scalable, Fluid, and Responsive Designs

    There are three main methods of optimizing emails across devices:

    • Fluid
    • Scalable
    • Responsive.

    A scalable design is also called mobile-first or mobile-friendly. This type of design works well on both mobile and desktop without requiring any adjustments, including the size of the images or tables. These tend to be the easiest to implement, but you usually have to keep them simple.

    A fluid design is a middle-ground between responsive and scalable. It sizes tables and images based on percentages. This lets them adjust to the screen. It can be nice and simple, but it is sometimes hard to control how elements interact.

    The responsive email design has become the industry standard since 2020. It builds on the fluid design by giving you more control with CSS queries.

    With responsive design, you can control:

    • Layouts
    • Sizes of buttons
    • Font size
    • And more. 

    You get more control than with fluid design and better results across all devices than with a scalable design.

    The responsive design is the most popular due to its versatility and various customization options.

    How to Design a Responsive Email

    Now that you know responsive email design is the best way to go, how do you create the design? Keep the following in mind:

    General Layout Advice

    You should stick to a layout with one column, and that is a maximum of 640 pixels across. This will reduce the risk of issues on mobile devices.

    A good responsive email design should have the right layout and font size.


    As you plan the text, remember that iPhones will not display text any smaller than 13 pixels. That means that if you make text smaller than this, your layout may not appear properly on Apple devices.

    Ideally, you want to go with 14 to 16 pixels for the main text and 22 to 24 for headlines.

    Links and Buttons

    When creating links and buttons, make sure they are at least 44 square pixels.  


    Keep in mind that Apple devices rely on retina images. As such, you should try to increase your image sizes to about 1,100 pixels to maximize quality.

    What Does a Responsive Email Look Like?

    The key thing about a responsive email is that it will have the same elements across devices, but they may appear in slightly different sizes. If you look at the code behind the email, you will notice a lot of CSS elements.

    How to Be Sure that Your Responsive Email Works

    If you want to confirm that your responsive email works from a technical perspective, you need to test it. Test it across:

    • Devices
    • Operating systems
    • Programs.

    If you want to confirm that it works from a marketing perspective, you will look at the same metrics you would with any other email marketing campaign. These include open rates and click-through rates.

    Choose Responsive Templates

    To make creating responsive email design easy, opt for responsive templates. These are easy to use as other types of email templates and prevent the need to learn complex coding. They tend to be the simplest method of creating responsive emails, no matter the resources your company has.

    Further Reads

    How to Design the Perfect Email Footer 

    eCommerce Email Design Inspiration to Give You Ideas

    Email Design Inspiration: Find the Best Ideas

    Talk email strategy with an expert