How To Layout An Email

Mystery Flash Sale Email Newsletter Template

How to Design an Email Based on a Layout | Effective Email Marketing

This newsletter design does something exceptionally well. It deliberately uses vagueness and mystery to push you to click on their call to action. Or if youre a millennial, it uses the fear of missing out pretty well.

Using FOMO is a powerful way to drive people to take a very specific action that they already know will benefit them in an email campaign. For example, signing up for a giveaway, accepting a gift card or getting a discount, like in this newsletter.

When it comes to calls to action , take a cue from business infographics by keeping it simple and direct.

Earn Trust With Your Sender Name

The primary goal of the sender name email field is to inform the recipient of who the message came from. But thats not all. The sender name also has the power to reinforce your subject line and preheader, therefore, increasing your email open rates.

For this to happen your sender name needs to be recognizable and trustworthy, and it absolutely cannot be deceptive. Provided that your subscribers have positive experiences with your brand, theyll be more prone to open messages with your sender name next to it.

What to put in your sender name

There are several ways to construct your sender name. Here are some of the popular patterns you could follow :

  • GetResponse
  • from Michal from GetResponse
  • GetResponse Newsletter
  • at Content at GetResponse
  • Team/Community/Crew GetResponse Team
  • John Smith

Want to build beautiful emails? Check out the new GetResponse Email Creator and see how easy it can be. And if you dont want to start from scratch, you can just use one of our free email templates and customize them to fit your brand seamlessly! If youd rather see the email creator in action first, just follow our quick video tutorial at the bottom of this post.

How Do I Email A Pdf Newsletter

Your PDF or PNG image should be 550 to 600 pixels wide before you download it.

Once its downloaded, upload the image in a new email or use a email newsletter service to access a lot more features. G2 has a great roundup of the best email marketing software with real customer reviews.

In Venngage, you can adjust the page size within our online editor. Just click on Settings and then add a new custom page size.

In the example below, the width is set to 816 pixels. Just tick the box scale content on resize and change the width to 600 pixels and youre done.

Don’t Miss: How To Create An Email Name

Customize Email Templates Using A Theme

Override email templates by creating templates in a new directory in your custom theme, using this pattern: < theme_dir> /< ModuleVendorName> _< ModuleName> /email. For example, to override the New Order email template, create a template named order_new.html in the < theme_dir> /Magento_Sales/email directory.

Template fallback is supported for email templates, so parent themes of your current theme are searched for templates.

Use Responsive Email Design

Email layout

With more than half of your recipients opening your emails on mobile devices, you cant build your email templates just thinking about big desktop screens.

The best way to ensure that all your recipients have the most optimal experience is to build mobile-responsive emails.

An email thats mobile-responsive will look good, both on smaller and larger devices. And since youre building and sending just one email it wont be a problem if your subscriber chooses to open your message using different tools.

Were not going to go into detail how youd code a mobile-responsive email. Email builders, like the GetResponse Email Creator, let you create email templates that look good on all types of devices without having to write a single line of code.

Don’t Miss: How To Send A Large Mp4 File Via Email

User Invitation Email Template

An invitation template is a valuable go-to for your online lead generation efforts. Think about the promotional content on your website. Are you inviting subscribers to participate in an online webinar, offering them a free report or e-book to download? You can use an email template builder like BEE to create a responsive email design for your next invitation.

Email Layout to Choose:

A single-column or hybrid layout where the first module includes the most important details about the offering, along with a CTA button.

Analyze The Results And Iterate

You used your website analytics to get your newsletter started. Now let your newsletter return the favor.

Analyze click-through and open rates on your email newsletter not only to inform what your next one should contain, but also what kinds of content to place on site, and even in your social campaigns.

Don’t Miss: Lost Emails On Iphone

Branded Stylish Interior Design Newsletter Layout

I was first drawn to this email newsletter template from Homepolish because of the clean lines and minimalistic theme. Only after I visited their website did I see the true greatness of this example.

The email newsletter and homepage feel so similar that people will never mistake who the email came from. Overall, it was one of the better uses of consistent branding that I saw in all of the examples.

Getting Started With Your Email Template

How to design an offer email starting from a ready to use template

It is time for action it is time to create email templates. Email templates are like clothes, each outfit is tailored for a certain occasion and has a certain purpose. While welcome email template has a short email copy and visually rich layout as they are your first interaction with the subscriber, lead nurture emails tend to be descriptive with individual CTA buttons. Again, transactional emails have the receipt of purchase along with some cross-selling. So, while creating your first email template, you need to start with

Also Check: Where Is My Icloud Email

Colorful Professional Email Format Example

An understanding of color theory can really help spice up your newsletter designs. Check out this guide to picking colors to get started.

In this example from Trunk Club, they use complementary colors in their email design very well. The orange CTA button contrasts with the blue background. This type of color usage can be added to buttons, links or important pieces of info to bring attention to them.

Why Write A Formal Email

“People tend to believe that they can communicate over email more effectively than they actually can,” researchers at the American Psychological Association found. In a 2005 study, they performed a series of experiments and concluded that it’s hard to convey emotion and tone over email.

The reason? Because of our own “egocentrism,” we’re unable to detach ourselves from our perspective and see someone else’s.

Put simply, it’s easy for misunderstandings to occur if we’re too friendly or informal in our emails. The tone of voice may not be suitable for communicating vital information, too.

Formal emails remove the potential for misunderstanding and misrepresentation. It’s all about observing the correct business email etiquette.

A formal email has a clear purpose and treats the reader with respect. It’s written in a standard way that travels across borders and cultures.

Writing formal emails can benefit anyone in business, including leaders, says the influential Forbes columnist Benjamin Laker. Emails should be respectful of emotions and delivered with empathy. Most importantly, your email says a lot about your “personal brand”. How do you want to be perceived?

A well-written formal email is polite and professional, two powerful brand attributes that will improve your brand and increase business success.

Don’t Miss: Find My Icloud Email

The Purpose Of An Email Newsletter

The purpose of an email newsletter depends on your business. You can use it to drive sales through featured products and coupons. You can connect with customers through helpful tips and information. You can even boost your social following or traffic to your site.

Just remember, good email campaigns are tailored to your needs as well as to the needs of your users.

Use Interactive Content In Your Email Design


Interactive email design is a powerful way to boost engagement by enabling subscribers to interact with content without ever leaving your email.

Interactive elements create a sort of gaming experience within the email that not only reduces barriers to engagement, but also provides a better user experience as subscribers can interact with content without the need to follow links or click through to your site. This is key to generating high intent clicks within your email.

Take a look at this example of an embedded survey in an email from Bellroy:

Here are some exciting interactive email elements to consider in 2022:

  • Animated buttons and call-to-actions
  • Accordion features to make your emails more compact
  • Add-to-cart functionality
  • Polls, surveys, and user-generated interactive content

Of course, youre going to need skills in HTML and CSS to be able embed such interactive content into your emails using an email editor.

NOTEWhen you design interactive elements, keep in mind that not all email clients may display them correctly. You may need to create segments for email clients to ensure optimal user experience.

You May Like: When Writing An Email What Does Cc Mean

Personalized Holiday Offer Email Newsletter Design

Whats more simple than replying to an email? Not much, and thats probably why they used it as a call to action in this email. To start working on a gift package with Greetabl, the customer simply has to the email. No clicking a link or filling out a form. Just an easy reply, like they are talking to a real person down the hall.

Also, I like how they use white space and large font to put that CTA at the forefront of the newsletter example. That section is the first thing you are going to be drawn to and it has some of the most important info of the whole newsletter.

Vector Markup Language And Dpi Scaling

After picking a doctype, you need to add the support for Vector Markup Language . It is useful for ensuring that unsupported features, like background images and rounded borders, display correctly on email clients like Outlook 2007-16 and Outlook express. The code looks like this:

< htmlxmlns:v=”urn:schemas-microsoft-com:vml”xmlns:o=”urn:schemas-microsoft-com:office:office”>

Dots per inch or DPI, is a measure for screen resolutions. DP scaling can also be a pain with Outlook email clients, so we suggest adding the following code inside the < head> tag:

< !–>

< !–>

Also Check: How To Send A Large Mp4 File

Make Your Emails Accessible

Were all a diverse audience and your email marketing campaigns need to be designed in a way that lets everyone access and understand them.

According to the World Health Organization, over 2.2 billion people live with some form of visual impairment. And its not only about being able to read or see your emails. Millions others have hearing, cognitive, mental, or emotional impairment.

Odds are, some of your subscribers are affected by this. And if you want them to access your emails better, here are some things you should keep in mind:

Also, in your copy, avoid referencing colors or spatial placement of elements within the message .

To learn more about email accessibility, consider this video from Timothy Buck.

What Is A Formal Email

How To Design HTML Email Template || Send via Gmail || Newsletter || Invitation

A formal email is typically sent to someone you dont knowwell or to someone whos in authority. Examples of someone who you might send aformal email to include your professor, a public official, or even a companyyoure doing business with.

If your workplace has a formal environment, use formalemails with your boss and colleagues unless youre told to do otherwise. Manyworkplaces are moving towards a more casual environment and this often carriesover to email communications. If youre not sure whats right for yourworkplace, ask.

Also Check: Mass Delete Emails On Iphone

Creating An Outer Scaffold

Now lets replace the marker with the following code:

< table role="presentation" style="width:100% border:none border-spacing:0 "> < tr> < td align="center" style="padding:0 ">             < /td> < /tr> < /table> 

This scaffold is necessary so that our email will be centered across all email clients. We create a 100% wide table, and then set the border and border-spacing to zero. Then we create a row and table cell with no padding which has align=”center” set so that its contents will be centered.

Note: clients will add a bit of padding to your unpadded cells if you dont set them all to zero, as we have done here.

We have also set the table role to presentation. This is very important for accessibility, as it ensures that screen readers will only announce the content of the table, rather than the default of also announcing the structure, i.e. which row or column is currently being read out.

How Email Styles Are Organized

The styles for emails are split into several different files.



Contains new email-specific variables that can be overridden in a theme-specific_email-variables.less file.

When implementing a custom theme, you should be able to fully customize email templates by copying the < Magento_Blank_theme_dir> /web/css/source/_email-extend.less and < Magento_Blank_theme_dir> /web/css/source/_email-variables.less files to your custom theme and editing those files.

You May Like: Where Is My Icloud Email Account

Use Social Media Icons To Drive Traffic

Does your brand have a good handle on all things social media? Well, show that savviness off by including hyperlinked social media icons in your email signature. Including links to your social media pages not only drives traffic to your online content, but it also helps your email recipient find new avenues of contacting and following you.

If including links to your social media profiles has piqued your interest, consider using icons rather than hyperlinks or URLs. Why? Well, as Neomam Studios confirms, it only takes the human mind 150ms to process a symbol and 100ms to attach meaning to it. Thats fast! Plus, theres the added bonus of icons saving a lot of space and helping you to avoid clunky URLs.

Check out how Nakro have used custom social media symbols that complement the design of the signature to help link readers to their various profiles. To keep things looking cohesive, try to choose or create social media symbols that mimic elements of your design, similarly to how these icons mimic the circular frame and single outline stroke.

While the previous example uses the colors of each social media to complement the liveliness of the design, this next design by Email Signature Rescue uses simple flat black icons to complement the sharp shapes and minimalism of the design without detracting from the yellow palette.

Use Hierarchy To Direct The Eye

How do I change my Gmail message layout?

Having a strong hierarchy is a must for any design that uses type to communicate important information, and since your email signature is made up of important information, hierarchy is particularly important.

When it comes to designing your type, use scale, color, and font weights to visually signal to your email recipients which elements of your signature they should read first. Perhaps its the email authors name, or perhaps the brand/company name, either way, be sure to put this key piece of type in the top hierarchical position.

An example of a signature design with some strong hierarchy is this piece by Themesforce that scales the email authors name up so that it attracts the most attention. From there, pieces of type have been bolded and colored to signify importance and to help guide the eye through the design logically.

When deciding on which parts of your design to put in the forefront, dont try to highlight every other element in your signature, this will totally defeat the purpose. So, instead, choose your battles wisely. Decide which part of your signature you want noticed first and push that to the top of the hierarchical chain.

For more tips on mastering the art of hierarchy, be sure to take time to check out this guide!

Related article: Getting started with visual hierarchy

Recommended Reading: How To Print Emails

Popular Articles

Related Stories

Stay on top - Get the daily news in your inbox