Good layout in newsletters has a significant impact on brand perception, open rate, click rate and, ultimately, the effectiveness of your email marketing campaign.<\/p>\n
Some of the key aspects of effective layout include a simple, clean design, mobile adaptability, optimized loading time and the correct presentation of images and visual elements.<\/p>\n
Things to Keep in Mind When Designing an Email<\/h2>\n
Let’s get straight to the point and dive right in.<\/p>\n
I’m going to tell you right now a few things you need to keep in mind that will be vital so that the emails you send from now on help you convert more:<\/span><\/p>\n Images are heavy. Don’t doubt that for a second. Optimizing images for email marketing is crucial so that your sends don’t slow down.<\/p>\n If they slow down, it can hurt the email’s visibility (or it may simply not display at all), and that can be a serious problem, especially for conversions.<\/p>\n There are many email marketing tools<\/strong><\/a> that can help you with this task. Use them and optimize your images right away.<\/p>\n They say a picture is worth a thousand words. And although I don’t entirely agree, it’s true that images help a lot.<\/p>\n If you use images that match the text of the email, such as:<\/p>\n You’ll most likely grab more attention and your conversions will be higher.<\/p>\n Following on from the previous point, if you insert images that match the content of your email, the text should be eye-catching too.<\/p>\n It’s the best way for both the images and the text to grab the subscriber’s attention. As a result, you can get better outcomes, because persuasion<\/a> comes into play here.<\/p>\n And when I say text, I mean all of the content itself: from the headline to the last full stop you write.<\/p>\n That said, to get the subscriber in the right mood, it’s best for the headline to be highly visible and contain a clear, concise message that highlights the strongest points of your promotion.<\/p>\n In the last two sections I’ve highlighted how important images are. That’s really true. However, simple designs, that is, without images, also work<\/span>.<\/p>\n Why? Because, depending on your intentions, it’s better to do one thing or the other.<\/p>\n For example, in promotional sends it’s ideal for the email to be very visual, because the goal is to persuade the subscriber to then make a purchase, sign up or make a booking.<\/p>\n However, if what you’re looking for is closeness, talking directly to the reader or expressing an idea of your own, simplicity is key.<\/p>\n You don’t need to persuade with images; you already do that with words.<\/p>\n In this case, a simple design can be ideal for bloggers<\/strong> although, naturally, everyone can have their own point of view.<\/p>\n All the previous tips are worth their weight in gold because they can make the difference in the newsletter you create.<\/p>\n However, its structure is decisive<\/strong>. It’s what will help the subscriber understand, from the very first moment, the message you want to get across.<\/p>\n To do this, you can follow some established guidelines that will help you create the ideal newsletter:<\/p>\n That said, there’s no point in creating a great newsletter if you then don’t have your subscribers properly segmented<\/strong>.<\/p>\n \n Newsletters should have a simple design that displays correctly in all email clients, as well as on different platforms.<\/p>\n When laying out your newsletter, we recommend using standard fonts and flat background colors, and reducing the use of images in favor of text.<\/p>\n Remember that the lighter your newsletters are, the faster they will download. It’s best not to let your HTML weigh more than 1 MB.<\/p>\n Simplicity in a newsletter’s design is crucial to hold the reader’s attention and ensure easy, comfortable reading.<\/p>\n A simple, clean design makes it easier to identify the key elements of the content and avoids the visual overload that can lead recipients to stop reading or even unsubscribe.<\/p>\n In addition, a simple design is usually easier to adapt to different devices and email clients.<\/p>\n More and more people access their email on mobile devices, so it’s essential to make sure newsletters look good on phones and tablets.<\/p>\n A responsive design automatically adapts to different screen sizes, ensuring an optimal reading experience for all users.<\/p>\n To achieve this, it’s important to use a fluid layout, use legible font sizes and avoid elements that can cause problems on mobile devices<\/strong>, such as large images or complex interactive elements.<\/p>\n Loading time is a critical factor in the user experience and can affect open rates and engagement with the newsletter.<\/p>\n A simple, lightweight design, with optimized images and no unnecessary elements, helps reduce loading time.<\/p>\n This is especially important on mobile devices, where the internet connection can be slower and users tend to be less tolerant of waiting for content to load.<\/p>\n To reduce loading time, it’s important to minimize the use of large images, avoid multimedia files and compress the HTML code whenever possible.<\/strong><\/p>\n \n The HTML you use should be as simple as possible, avoiding scripts, styles, effects, forms, etc.<\/p>\n Your newsletters should include both HTML and plain-text versions in the message.<\/p>\n By default, the Mailrelay<\/strong> system generates the plain-text message from the HTML message, which is more effective, since a difference between the two texts can lead to a higher spam score.<\/p>\n Using pure HTML in newsletters offers several advantages that contribute to greater compatibility and deliverability across different email clients and devices. Some of these advantages include:<\/strong><\/p>\n Although using CSS and JavaScript can offer advantages in terms of design and functionality, it can also cause problems in newsletters for the following reasons:<\/p>\n In short, it’s advisable to avoid external CSS and JavaScript in newsletters and opt for pure HTML whenever possible to ensure greater compatibility, deliverability and a better user experience.<\/p>\n \n Despite the progress that HTML5 and CSS3 brought, email clients still haven’t fully adopted these technologies and continue to use tables<\/strong> in HTML coding.<\/p>\n That’s why we recommend that you always lay out your newsletter using tables, to avoid unexpected results.<\/p>\n Although in modern web design divs and cascading style sheets (CSS) are preferable for their flexibility and ease of maintenance, in the case of newsletters, tables remain the most reliable option.<\/p>\n The main reason is compatibility and consistency across different email clients and devices.<\/p>\n Some of the benefits of using tables instead of divs in newsletters include:<\/strong><\/p>\n To get the most out of tables when laying out newsletters, keep the following tips in mind:<\/p>\n \n Many email clients don’t display your email full screen, but through a preview pane that is approximately 600 px wide.<\/p>\n You should also keep in mind that wider images are more likely to be considered spam<\/a>.<\/p>\n It’s important that you respect that measurement, so that your newsletters can be displayed correctly.<\/p>\n The main reason for not exceeding 600px in width is adaptability.<\/p>\n Most email clients and mobile devices, such as phones and tablets, have limitations on the maximum width they can display.<\/p>\n By keeping your newsletter within 600px in width, you make sure it’s compatible with most platforms and displays correctly on all devices, avoiding horizontal scrolling problems and ensuring an optimal user experience.<\/p>\n Another reason to keep your newsletter’s width below 600px is readability and user experience.<\/p>\n A narrower design makes content easier to read on both mobile and desktop devices, since users won’t have to scroll horizontally to read all of the content.<\/p>\n In addition, by limiting the width, you can better control the design and arrangement of the elements in your newsletter, which makes it easier to create a clean, organized design that’s easy for your subscribers to follow.<\/p>\n Ultimately, keeping your newsletter’s width within 600px improves readability<\/strong> and ensures a pleasant user experience for your subscribers.<\/p>\n \n Some email clients don’t support the style tag in the email header.<\/p>\n To avoid this problem, it would be best to use inline styles.<\/p>\n Inline styles offer several benefits compared to using external or internal cascading style sheets (CSS):<\/p>\n To apply inline styles in HTML, you simply need to add the \u201cstyle\u201d attribute to HTML tags and define the corresponding CSS properties.<\/p>\n Here’s an example of how to apply inline styles to an element:<\/p>\n \n When you use sliced images, or one image next to another, with a table structure, each image must have the style \u201cdisplay:block\u201d.<\/p>\n That’s because email clients such as Gmail automatically generate an unwanted white space between the images, breaking the design of our newsletters, just as you can see below:<\/p>\n \n Anti-spam filters look unfavorably on them, especially if they’re doc, exe, zip, etc., which can contain viruses.<\/p>\n It’s advisable to upload attachments to an FTP server and insert a link in the body of the message so that recipients can download them.<\/p>\n Also, this way you’ll get feedback in your statistics on who has opened the file.<\/p>\n \n To reduce the weight of your images without losing quality, you need to compress them in an editing program, or you can use a tool such as Kraken.io, a web app that works wonders.<\/p>\n \n For your website to be legal, it must contain:<\/p>\n \n You need to test your newsletters in different email clients before sending a mailing<\/a>.<\/p>\n This way, you make sure your recipients see them correctly in every case. With Mailrelay<\/strong> you can send test emails and make sure your newsletters arrive without any problems.<\/p>\n Testing on different devices (computers, tablets and smartphones) and email clients (Gmail, Outlook, Yahoo Mail, etc.) will let you detect potential design, formatting or compatibility issues. Some key aspects to keep in mind when testing include:<\/p>\n There are various tools and services that can help you test and optimize your newsletters before sending them to your subscribers. Some examples include:<\/strong><\/p>\n By testing thoroughly and using suitable tools and services, you can make sure your newsletters reach your subscribers with the best possible appearance and functionality.<\/p>\n \n Newsletter layout is a key element in ensuring the success of your email marketing campaigns. <\/p>\n A well-structured, adaptable and attractive design not only makes it easier for your subscribers to read and understand the content, but also improves the deliverability and open rate of your emails.<\/p>\n By applying the basic tips and best layout practices presented in this article, you’ll be able to create newsletters<\/a> that stand out in your subscribers’ inbox, offer a pleasant user experience and, ultimately, encourage interaction and engagement with your brand.<\/p>\n Don’t forget to always keep a proactive attitude toward optimizing and refining your newsletters. <\/p>\n As technologies and trends change, it’s important to stay up to date with the latest in design and layout to ensure your email marketing campaigns remain effective and relevant to your subscribers. <\/p>\n Also, don’t underestimate the importance of monitoring and analyzing your campaign metrics to identify opportunities for improvement and adapt your strategies accordingly.<\/p>\n If you want to go a step further in design, take a look at our glossary on modular email design<\/a> and the keys to a good email template<\/a>.<\/p>\n In today’s article we share the 10 essential tips for laying out your newsletter.<\/p>\n","protected":false},"author":1,"featured_media":37949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[562,851],"tags":[],"class_list":["post-97032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-marketing-2","category-newsletter-templates-and-design"],"yoast_head":"\n\ud83d\udccc Watch the weight of your images<\/h3>\n
\ud83d\udccc Insert images that match the content of the email<\/h3>\n
\n
\ud83d\udccc Write eye-catching text<\/h3>\n
\ud83d\udccc Simple design works too<\/h3>\n
\ud83d\udccc Structure of the ideal newsletter<\/h3>\n
\n
![\"Choose](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2017\/05\/como-hacer-una-newsletter.jpg\")
<\/figure>\n10 Tips for Laying Out Your Newsletters<\/strong>: Dimensions, Sizes\u2026<\/h2>\n
1- Choose simple, responsive, lightweight designs<\/strong><\/h3>\n
\u25ba The importance of simplicity in design<\/strong><\/h4>\n
\u25ba Ensuring compatibility on mobile devices<\/strong><\/h4>\n
\u25ba Reducing loading time<\/strong><\/h4>\n
![\"Use](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-1.jpg\" "\\"Use")
<\/figure>\n<\/div>\n2- Use pure HTML<\/strong><\/h3>\n
\u25ba Advantages of using pure HTML in newsletters<\/strong><\/h4>\n
\n
\u25ba Avoiding external CSS and JavaScript<\/strong><\/h4>\n
\n
![\"Take](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-2.jpg\" "\\"Take")
<\/figure>\n<\/div>\n3- Lay out your newsletter using tables<\/strong><\/h3>\n
\u25ba Why use tables instead of divs<\/strong><\/h4>\n
\n
\u25ba Tips for using tables efficiently in layout<\/strong><\/h4>\n
\n
![\"Use](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-3.jpg\" "\\"Use")
<\/figure>\n<\/div>\n4- Dimensions and size: Don’t exceed 600px in width<\/strong><\/h3>\n
\u25ba Adaptability to different devices and email clients<\/strong><\/h4>\n
\u25ba Readability and user experience<\/strong><\/h4>\n
![\"Don't](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-4.jpg\" "\\"Don't")
<\/figure>\n<\/div>\n5- Use inline styles<\/strong><\/h3>\n
\u25ba Benefits of inline styles in newsletters<\/strong><\/h4>\n
\n
\u25ba How to apply inline styles in HTML<\/strong><\/h4>\n
![\"Code](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-5.jpg\" "\\"Code")
<\/figure>\n<\/div>\n6- Avoid unexpected results in your images<\/strong><\/h3>\n
\u25ba How to optimize images for different email clients<\/strong><\/h4>\n
\n
\u25ba Using high-quality, well-formatted images<\/strong><\/h4>\n
\n
![\"Example](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-6.jpg\" "\\"Example")
<\/figure>\n<\/div>\n7- Avoid attaching files<\/strong><\/h3>\n
\u25ba Security and deliverability issues related to attachments<\/strong><\/h4>\n
\n
\u25ba Alternatives for sharing files in newsletters<\/strong><\/h4>\n
\n
![\"Avoid](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-7.jpg\" "\\"Avoid")
<\/figure>\n<\/div>\n8- Optimize your images<\/strong><\/h3>\n
\u25ba Reducing size and choosing the right format<\/strong><\/h4>\n
\n
\u25ba Optimization techniques to improve loading speed<\/strong><\/h4>\n
\n
![\"Optimize](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-8.jpg\" "\\"Optimize")
<\/figure>\n<\/div>\n9- Always include legal text<\/strong><\/h3>\n
\n
\u25ba Complying with applicable regulations and laws<\/strong><\/h4>\n
\n
![\"Always](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-9.jpg\" "\\"Always")
<\/figure>\n<\/div>\n10- Make sure to test<\/strong><\/h3>\n
\u25ba Testing on different devices and email clients<\/strong><\/h4>\n
\n
\u25ba Tools and services for testing newsletters<\/strong><\/h4>\n
\n
![\"Make](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-10.jpg\" "\\"Make")
<\/figure>\n<\/div>\nConclusion: Creating Effective Newsletters Through Good Layout<\/strong>, Dimensions and Size<\/h2>\n
![\"Photo](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2022\/07\/jose-argudo-1.jpg\")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"