Friday, March 24, 2023
HomeB2B MarketingDesigns, Templates, and Examples for 2023

Designs, Templates, and Examples for 2023

Have you ever ever opened an e mail in your cellphone and the picture was low-quality, the textual content was too small, and the call-to-action button was damaged? These are all flaws of static e mail design. Responsive emails are the reply.

→ Download Now: The Beginner's Guide to Email Marketing [Free Ebook]

Provided that greater than half of U.S. residents take a look at e mail advertising messages on their telephones, it’s worthwhile to optimize your emails for a number of screens, together with cellular and pill.

Responsive emails use fluid pictures and tables to stay versatile throughout totally different display screen sizes. In the end, they ship content material designed for every person’s optimum expertise.

Although responsive emails may be designed utilizing CSS media queries, you don’t want any coding expertise to make one. Making a responsive e mail isn’t only a job for coders.

Right here, we’ve lined up some greatest practices and ready-to-use templates, in addition to a fast tutorial in regards to the fundamentals of responsive emails.

Responsive emails are additionally extra accessible, as they permit subscribers to learn on their most well-liked machine.

As an example, right here is how a promotional e mail I obtained seemed on desktop.

Glossier responsive email desktop example

This e mail has superior imagery, shoppable icons, and is properly formatted. After I open the e-mail on cellular, that is what I am greeted with.

Glossier responsive email mobile example

I nonetheless have the identical info and the identical pictures and shoppable icons. The one noticeable distinction is the e-mail format. It’s totally different to raised match the cellular expertise.

Now, think about if that very same desktop structure was utilized to cellular. I’d need to zoom in on my cellphone to see any of the images or textual content. As a substitute of doing that, I’d unsubscribe.

With responsive e mail, person expertise may be enhanced, in addition to marketing campaign ROI.

Give it some thought: Subscribers glad with an optimized cellular e mail design will discover themselves opening extra advertising messages as a result of they realize it’ll be accessible and look good.

So, with all this discuss responsive emails, you should be itching to create your personal. Subsequent, we’ll take a look at some responsive e mail examples and templates.

Responsive E-mail Designs

There are a lot of methods that you would be able to design responsive emails.

When you’ve got coding data, you possibly can code totally different e mail templates for various display screen sizes. You may also use a pre-made template that works will all display screen sizes.

Irrespective of your method, you’ll want your e mail advertising software program. Right here, you possibly can design an e mail, after which preview that e mail on a number of gadgets. Most e mail software program will present you the way the design will look on a number of gadgets.

The video under will stroll you thru how one can design an e mail with a template. Within the video, the person is on Klaviyo, however the ideas maintain true it doesn’t matter what software program you utilize.

Coding a Responsive E-mail

When you’re trying to make components of your e mail responsive, you’ll have to work with media queries.

Media queries are a CSS approach. It means that you can set fashion guidelines that solely seem if sure situations are true. For instance, you possibly can specify what font sizes and picture sizes to make use of when a display screen is 600px huge or smaller.

When working with e mail, you need to use media queries to specify what your design ought to seem like on desktops, tablets, and cellular gadgets. To take action, you’ll have to specify the next:

  • Use the selector “@media” and specify “display screen.” This means that the code will have an effect on gadgets with a display screen.
  • Set your “max-width” in pixels. This specifies the display screen measurement the place the code will take impact.
  • Specify any CSS fashion guides you need that particular display screen to comply with.

Let’s check out the code under.

@media display screen and (max-width: 600px) {

physique {

font-size: 30px;



When utilized to the CSS of an e mail, physique textual content will seem at a measurement of 30px for screens which might be 600px huge or smaller.

Whereas this method can assist you make sure components of your e mail response, we suggest utilizing a template if doable.

Except you’ve got complete internet design expertise, coding a number of media screens may be time-consuming and irritating.

When you aren’t technical or need a better technique, attempt utilizing an e mail advertising software with built-in responsive templates. HubSpot’s free e mail software program, as an example, gives drag-and-drop templates which might be responsive by default.

Responsive E-mail Design Examples

It’s time to discover examples. Begin with this video, which matches over a few of the greatest e mail advertising campaigns.

Then, you possibly can examine a few of our favourite responsive e mail designs.

1. TOMS Publication

In TOMS’ e-newsletter, the principle distinction between the desktop model and the cellular model is the stacking and measurement of the show advertisements.

With responsive design, the cellular model doesn’t have cluttered navigation, and the picture matches the display screen properly. The CTAs have additionally been moved for higher visibility.

Responsive email design example from TOMS

Picture Supply

2. The Metropolitan Museum of Artwork

As seen within the TOMS e-newsletter, responsive e mail design helps stack the content material in a means that’s visually interesting and straightforward to digest. This instance from the MET isn’t any totally different.

On cellular, the positioning of the menu adjustments. Hyperlinks to totally different reward store gadgets fall on the backside of the web page. This retains the photographs of obtainable souvenirs entrance and middle.

Responsive email design example from the MET

Picture Supply

3. Mulberry

Once more, with a responsive e mail design, the secret is stacking. It’s all about making the content material straightforward to learn and visually interesting, regardless of how small the machine is that somebody is viewing the content material on.

The alternating pictures and textual content make sense for desktop, whereas the constant stacking of pictures over associated textual content for cellular, together with the dividing traces, ensures the viewer gained’t be confused.

Responsive email design example from Mulberry

Picture Supply

Responsive E-mail Templates

A responsive template will mechanically adapt to any display screen measurement, so whether or not the e-mail is opened on a smartphone, pill, or laptop, it should look nice and have full performance.

For these with much less of a coding background or these trying to spend much less time with design, my recommendation is to make use of a template. They’re a surefire means to ensure your e mail will look skilled and be responsive.

Responsive e mail templates prevent time in designing an e mail that would’ve been picked out from a range. For instance, HubSpot’s e mail advertising software contains over 60 templates only for responsive emails.

Let’s check out some template choices now.

1. HubSpot

HubSpot affords a few free responsive e mail templates. When you’re a HubSpot buyer or a free person, you possibly can obtain and take a look at them out your self.

As an example, right here’s one of many responsive e mail templates — discover the sidebar, the place you possibly can preview the template on a number of gadgets.

Responsive email template from HubSpot preview

Picture Supply

Clicking by machine varieties and ensuring your e mail is formatted accordingly is without doubt one of the closing steps within the design course of and is the solely step within the responsive e mail course of if you’re utilizing software program like HubSpot.

By clicking on the smartphone machine for preview, as an example, you possibly can see in case your content material — together with font measurement and picture decision — is formatted in a means that’s pleasing for cellular.

2. CampaignMonitor

The templates supplied by CampaignMonitor are just like many others, through which responsive e mail outcomes are proven within the preview software. For instance, here’s a CampaignMonitor template:

Responsive email template from CampaignMonitor preview

Picture Supply

You may see the totally different gadgets side-by-side so you possibly can evaluate design components simply. Tiny edits may be made to create the perfect expertise for all subscribers.

CampaignMonitor templates are sometimes free, so it’s a good selection when you’ve got a minimal funds.

3. Stripo

Stripo affords over 300 free HTML e mail templates. You may select templates by business, season, sort, and have. As an example, right here’s a template from their enterprise business part.

Responsive email template from Stripo previewResponsive email template from Stripo preview

Picture Supply

signal of a stable responsive e mail template is the choice to see the preview in each desktop and smartphone variations, as proven in Stripo’s preview mode.

Discover how a single column structure was adopted within the cellular preview to suit the specs of telephones.

Stripo is a web site you possibly can go to shortly to discover a template that matches your objectives. You would possibly contemplate Stripo when you’re trying to check out responsive emails or need some design inspiration.

4. Fixed Contact

Fixed Contact affords over 200 skilled e mail templates which might be accessible after signing up. From wanting on the instance under, you possibly can see that the platform affords responsive e mail templates.

Responsive email template from Constant Contact preview

Picture Supply

Fixed Contact’s templates have drag-and-drop modifying, the choice so as to add surveys, ecommerce features, and a photograph library software. These options can all assist to create the e-mail subscribers need to see.

It’s useful to make use of a service like Fixed Contact as a result of the particular instruments mean you can preserve consistency, like within the instance above. You may inform that the responsive nature of the e-mail doesn’t compromise any of the design components.

Now that we’ve taken a take a look at some template choices, let’s take a look at one other solution to make responsive emails work, together with greatest practices.

Responsive E-mail Greatest Practices

The precise design of your responsive e mail will fluctuate based mostly on the objectives of your marketing campaign. Nevertheless, the following tips can assist you guarantee the perfect expertise to your readers.

  • Be certain that your responsive e mail is scalable and versatile. Preview the e-mail on totally different gadgets to make sure your message is responsive.
  • When you’re coding your personal e mail, bear in mind CSS media queries change fields which might be mounted to fields which might be fluid.
  • Use bigger fonts that will likely be straightforward to learn on smaller screens.
  • Single-column layouts are simpler to scale. If easy layouts are good to your internet pages, undoubtedly contemplate them for responsive emails.

Make sure to check your emails earlier than you hit “schedule.” Solely finalize the designs when you see how they give the impression of being throughout a number of display screen resolutions. So many individuals entry emails by cellular only for the benefit of it.

A easy solution to verify the effectiveness of your e mail is to ship it to your self or your group as a check — does it stack up in opposition to the opposite responsive advertising emails in your inbox? In that case, you’re able to ship.

Getting Began with Responsive Emails

Responsive emails create a greater, extra accessible expertise to your clients. When you’re simply making the transition, begin by exploring pre-made responsive e mail templates. These will prevent time whereas supplying you with design flexibility.

Then, get a second opinion. Ask a colleague to open an e mail on their desktop and cellphone. You will get their sincere suggestions on each experiences.

Lastly, don’t be afraid to experiment. You may A/B check totally different responsive designs till you discover a structure that resonates most.

Quickly, you’ll be sending out responsive emails and rising your open charges.

New Call-to-action


Most Popular

Recent Comments