E-mails that are opened and read to the end are not magic, but the result of competent layout. If your newsletters blend into gray text or break on mobile, you’re losing up to 40% of potential customers before they even get to the “buy” button. In this guide, we’ll break down how to create HTML emails that work on any device, don’t end up in spam, and convert readers into buyers—without all the tambourine dancing and common mistakes that make 9 out of 10 templates look like a page from 2005.
What is meaningful email writing and why is it important
Email layout is the process of creating HTML code for e-mails, which ensures the correct display of content on any device or email client. Unlike regular web layout, there are stricter restrictions here: Outlook uses the Microsoft Word engine, Gmail trims CSS, and mobile devices require adaptability for small screens. High-quality email writing is not just “good design”, but a technically competent solution that guarantees that your message will reach the recipient exactly in the form in which you intended it.
In marketing and customer communications email remains one of the most effective channels: according to Litmus, every dollar invested in email marketing returns an average of $36. But if the letter “falls apart” on a mobile phone or does not load in Outlook, this number drops rapidly. Responsive design is not a fad, but a necessity: 46% of users open emails on smartphones, and if the text is unreadable without horizontal scrolling, 70% immediately delete the message. A good user experience here isn’t about “pretty buttons,” it’s about making sure the Buy button doesn’t overlap with text on iPhone SE or disappear in Gmail’s dark theme.
Bad layout is not only about lost sales, but also reputational risks. A letter that “breaks” at the client is perceived as negligence of the brand. Instead, quality email writing works like a silent salesperson: it does not draw attention to itself, but makes the user focus on the message, and not on how the mail displays it. This is a meaningful approach — when technical nuances serve business goals, rather than hindering them.
Main differences between email layout and web layout
Email layout is a completely different story than website layout. If CSS is supported almost completely in the browser, then in mail clients the situation resembles a wild west: Gmail, Outlook, Apple Mail and dozens of others lose HTML/CSS in different ways, and some cripple it altogether. For example, Outlook 2016-2019 uses the Word engine for rendering, which can cause flexboxes, grids, and even plain margin to break. And Gmail truncates styles in , so all CSS has to be written inline — manually or through tools like Premailer.
- Limitations of HTML: forget about with
float– in email the main tool is tables (), because they are displayed stably even in the oldest clients. JavaScript? He is simply ignored.
- CSS support: only a basic set of properties works everywhere:
font-size,color,background-color. Animations, transformations orposition: fixedis a lottery. Evenpaddingcan break in Outlook, so designers often use fixed-widthinstead of indentation. - Size and weight: many email services block images by default, so the email should be readable without them. The maximum width of the letter is 600-650 pixels, because wider versions will not fit on the screens of mobile devices. And the weight of the HTML code should not exceed 102 KB – otherwise Gmail will truncate the message and add a link “View the entire message”.
Testing is half the work. Tools like Litmus or Email on Acid will show how the email will look in 90+ clients, but even they don’t guarantee a perfect result. Therefore, designers often resort to hacks: for example, they add invisible symbols to table cells so that Outlook does not compress them, or use VML (Vector Markup Language) for gradients, because standard CSS does not support them. Email layout is about compromises, patience and constant testing on real devices.
Steps to create a quality email template
Creating a high-quality email template begins with clear planning. First, determine the purpose of the letter: to sell, to inform or to engage? For example, a header, a banner, a short text with a CTA, and a footer are enough for a promotional email. For transactional letters (order confirmation, password recovery), the structure will be different – brevity and a clear sequence of actions are important here. Draw a layout on paper or in Figma: divide the content into blocks, think over the hierarchy (heading > subheading > text > button) and distances between elements. Remember about mobile devices – 60% of users open emails on smartphones, so the width of the template should not exceed 600-640 pixels.
Next is layout from scratch. Use tables (yes, tables – they are best supported by email clients) instead of divs. Nest tables inside each other for complex layouts, and use cellpadding and cellspacing attributes for indents, not margin/padding — the latter can break in Outlook. Connect fonts via @font-face or use web-safe options (Arial, Verdana, Georgia), because not all clients support custom fonts. Insert the image with the alt attribute and always specify the width/height to avoid “falling apart” of the layout if the image does not load. For buttons, use tables with background-color and padding — this is more reliable than CSS-properties.
Optimizing the code is the final step that many people skip. Check the template at Email on Acid or Litmus: these services will show how the email appears in 70+ clients, from Gmail to the old Outlook. Removed redundant comments, minify CSS (embedded in HTML, not a separate file – external styles are ignored), make sure all links work and have UTM tags. Reduce the size of images to 100-150 KB (use WebP format for modern clients, JPEG for the rest) and add a fallback in case of blocking images. Finally, test sending to real addresses — sometimes even small mistakes (for example, an extra space in the thesis ) can cause the letter to end up in spam.
A selection of email layout tools
The choice of tools for email composition depends on tasks, budget and level of technical training. The most popular editors are Mailchimp Builder (handy drag-and-drop, but limited customization), Stripo (supports AMP emails, has a library of ready-made blocks, but the paid version costs from $15/month) and BeeFree (intuitive interface, but without deep integration with CRM). For developers, Foundation for Emails (a framework from ZURB with flexible components) or MJML (a syntax that simplifies layout, but requires knowledge of the basics of HTML) are suitable.
Template testing is a critical stage. Services like Litmus ($99/month) or Email on Acid ($74/month) check display in 90+ clients, but are expensive for startups. A free alternative is PutsMail (a simple test email sender) or BrowserStack (for testing on real devices). Premailer is suitable for automation (cleans CSS, but does not test rendering). The main rule: no tool can replace manual testing on key mail clients (Gmail, Outlook, Apple Mail — they occupy ~70% of the market).
- Advantages of paid services: fast testing, error reports, AMP support.
- Disadvantages: high cost, limit on the number of tests in cheap tariffs.
- For freelancers: combine free tools (MJML + PutsMail) with manual testing.
Features of adaptive email layout
Adaptive email layout is not just a trend, but a necessity: more than 60% of emails are opened on mobile devices, and if your template “sprawls” on the smartphone screen, the user will simply close it. The main tool here is media queries, which allow you to change styles depending on the screen size. For example, for screens with a width of up to 600px, it is worth increasing the font size from 14px to 16-18px (readability on mobile devices is critical), reduce the indents between blocks, and rebuild the multi-column layout into a single-column one. Here is a typical example of a media query for email:
@media only screen and (max-width: 600px) {.container { width: 100% !important; }— the container is stretched to the full width;.button { padding: 12px 24px !important; }– buttons become larger for convenient tap;.hide-mobile { display: none !important; }– hides elements that are not needed on mobile.}
However, media requests do not work everywhere: some email clients (for example, Gmail on Android) ignore them. Therefore, along with the CSS approach, use a “mobile-first” design: first design for small screens, and then adapt for the desktop. Key points: fixed container width (typically 600-650px), flexible images (
max-width: 100%), large buttons (minimum 44x44px according to Apple recommendations), and enough padding between interactive elements to avoid accidental clicks.Testing is half the success. Use tools like Email on Acid or Litmus, which show how an email appears in 90+ email clients. Pay attention to critical bugs: broken layouts in Outlook, background images not displaying in Gmail, font problems in iOS Mail. Don’t just rely on simulators – be sure to check real devices: iPhones (different models because iOS versions render HTML differently), Android smartphones (especially Samsung with their own mail client), and tablets. Remember: even one undisplayed element can spoil the impression of the letter.
Common mistakes in email composition and how to avoid them
The most common mistake is non-adaptive design. 58% of users open emails on mobile devices (Litmus, 2023), and a fixed width of 600px breaks the layout on screens smaller than 375px. Leave the mobile first approach: use fluid layout with max-width: 600px and min-width: 320px, and for columns – tables with the dir=”rtl” attribute for correct display in Outlook. Forget about
– Gmail and Yahoo don’t support them, replace witheven for simple blocks.
Images are the second sore point. 39% of email clients block images by default (HubSpot), so always add an alt attribute with a description and a colored background (eg style=”background: #f5f5f5;”). Optimize images: JPEG for photos (quality 70-80%), PNG-8 for graphics with transparency, weight no more than 100-150 KB per file. Use srcset for retina:
. And never insert text into an image – it won’t be read by screen readers, and Gmail will crop the image to 600px.- Problems with fonts: Outlook only supports system fonts (Arial, Times New Roman) and Gmail ignores @font-face. Exit the fallback stack: font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif. Test the font size – less than 14px is hard to read on mobile devices and more than 16px looks garish on desktop.
- Bugs in Outlook: It doesn’t support background-image, so use VML (Vector Markup Language) for background images or replace with colored blocks. Also, Outlook adds spaces between tables – treated by adding style=”display: block; font-size: 0; line-height: 0;” to
. - Problems with buttons: Don’t use
Finally, test. Use Litmus or Email on Acid to test on 90+ clients, but don’t forget about real devices — especially iPhones (iOS Mail has line-height bugs) and Gmail (truncates emails after 102KB). Always add a “View in browser” link – this will save you if the layout breaks. And remember: email layout is not about perfect code, but about maximum compatibility with minimum sacrifices.
Testing and optimization of email templates
Testing email templates is not a formality, but a necessity if you want your message to reach the recipient exactly as intended. Start with a display test: use tools like Litmus or Email on Acid to show how your template looks in different clients (Gmail, Outlook, Apple Mail) and devices (desktop, mobile, tablets). Pay attention to the little things: whether the blocks are not moved, whether the fonts are displayed correctly, whether the images are not cropped. For example, Outlook 2016 ignores
max-width, so without a fixed table width, the template can “sprawl” to the entire screen. Also check dark mode – many clients automatically invert colors and your white text on a black background may become unreadable.Optimizing the loading speed is about ensuring that the user does not close the email while he is “thinking”. Reduce the size of images: compress them to 72 dpi (which is enough for screens) and use WebP or AVIF formats instead of JPEG/PNG – they weigh 30-50% less with the same quality. Replace background images with CSS gradients where possible. Limit the number of external scripts: for example, social buttons often entail tens of kilobytes of code that block rendering. If you can’t do without them, download them asynchronously or after the main content. Check the speed with Google PageSpeed Insights (yes, it works for email as well) – the ideal loading time should not exceed 2-3 seconds.
Analytics will help you understand what works and what doesn’t. Embed UTM tags in links to track traffic from each email in Google Analytics. Monitor metrics: opens (is the subject appealing?), clicks (is the CTA effective?), bounces (doesn’t it end up in spam?). For example, if 25% of emails are opened and only 2% are clicked, the problem may be unclear text or a weak call to action. Run A/B tests: change one element at a time (theme, button color, send time) and compare the results. Tools like Mailchimp or HubSpot automate this process — they’ll show which version won, even if the difference in conversion is just 0.5%.
- Checklist for testing: spam check (SpamAssassin), correctness of links, alternative text for images, mobile adaptability.
- Life hack: send a test letter to real accounts (not only to virtual testers) – so you can see how the letter looks “in the wild”.
- Figure: emails with a personalized subject are opened 26% more often (Campaign Monitor study).
Conclusions: how to create the perfect email design
The ideal email design is not about beautiful pictures, but about the fact that the message is read to the end and the button is clicked. Let’s recall the main thing: mobile adaptation is not an option, but a must (60% of letters are opened on smartphones), and a one-column layout with a width of 600-640 pixels works best. Use contrasting colors for CTA (red or green increases conversion by 21%), but no more than two or three accent shades. Font — at least 14 pixels for text, 22+ for headings, and only web-safe (Arial, Helvetica, Georgia). Image — with the alt attribute so that if blocked, the user will understand what it is about. Test the rendering in different clients (Litmus or Email on Acid will show where the layout breaks), and don’t forget about the dark theme – 30% of users turn it on. The future of email marketing is based on interactivity: animated buttons, carousels, built-in feedback forms. But remember: even the coolest design will fail if it doesn’t have a clear message and one main call to action. Start with a mockup on paper, not in the editor – this way you will avoid unnecessary edits and save your nerves.
- Test the layout on real devices – simulators will not show all the nuances.
- Use tools like PutsMail for quick testing without sending.
- Leave 40-50% of the space for text – images are often blocked.
- For complex layouts, fallback to table layout – it is supported by everyone by customers.
- Analyze metrics: if CTR is below 2%, redo design or copy.
Andrey Krasovskiy is a programmer and data scientist experienced in building complex automated systems with Python, Google Colab and n8n. His expertise spans SEO ecosystems, API integrations (Ahrefs, Google Ads, Search Console) and content pipelines. Andrey combines technical precision with an entrepreneurial mindset to build solutions that deliver real results.
- CSS support: only a basic set of properties works everywhere: