登录查看更多内容

How can you use HTML and CSS to improve your email marketing design?

由人工智能和领英社区提供技术支持

Email marketing is a powerful way to communicate with your audience, but it can also be challenging to create engaging and responsive designs that work across different devices and email clients. HTML and CSS are the languages that define the structure and style of your email content, and they can help you improve your email marketing design in various ways. In this article, you will learn how to use HTML and CSS to optimize your email layout, typography, images, colors, and interactivity.

此文章中的业界达人

由社区从 7 条内容中精选。了解更多

1 Optimize your email layout

The layout of your email determines how your content is organized and displayed on different screen sizes and resolutions. A good email layout should be clear, consistent, and adaptable to various viewing environments. To optimize your email layout, you can use HTML tables to create a grid system that divides your content into rows and columns. Tables are widely supported by email clients and can help you align and position your elements. You can also use CSS media queries to adjust your layout based on the device width, orientation, or other features. Media queries can help you create responsive designs that adapt to mobile, tablet, or desktop devices.

添加您的观点

Jean Mareynel Landicho

Award-Winning Email Marketer for E-Commerce Businesses | Generated 7 figure sales using pure emails | Increasing sales by up to 40% | Book Lover & Health Enthusiast | Email Marketing Strategist intro.co/JenelleLandicho
举报内容
HTML and CSS can allow you to play around with your design which can be limited by usual graphic design of emails, generally. It can enhance your email visually with so much flexibility when it comes formatting and layout. It can also optimized images that's best for mobile viewing. Interactive elements like GIFs and hover effects can be done also. When it comes to email content, HTML and CSS can help you create personalized content based on your recipients information like location. Dynamic content are highly utilized also like product recommendations for subscribers that increase relevance of content to keep engagement high.

已翻译

赞
Sandhya Reddy

CRM & Email Marketing Automation Manager @ upGrad | Proficient in Marketing Tools
举报内容
Use HTML and CSS in email marketing design to create visually appealing layouts, responsive designs for various devices, and optimize for faster load times. Ensure clean and well-structured code, leverage inline styles, and test across email clients to enhance consistency and user experience.

已翻译

赞
Sandhya Reddy

CRM & Email Marketing Automation Manager @ upGrad | Proficient in Marketing Tools
举报内容
Ensure mobile responsiveness. Apply inline styles for better compatibility. Optimize images and use alt text. Test and preview across various email clients. Limit the use of JavaScript for broader support. Include a plain text version for accessibility. Use tables for layout consistency.

已翻译

赞

2 Optimize your email typography

The typography of your email affects how your text is read and perceived by your audience. A good email typography should be legible, attractive, and compatible with different email clients and devices. To optimize your email typography, you can use HTML tags to define the hierarchy, format, and semantics of your text. For example, you can use <h1> to <h6> tags to create headings, <p> tags to create paragraphs, and <strong> or <em> tags to emphasize words. You can also use CSS properties to style your text, such as font-family, font-size, font-weight, color, line-height, and text-align. However, you should be aware that not all fonts and properties are supported by all email clients, so you should use web-safe fonts and provide fallbacks for unsupported features.

添加您的观点

Juliana Padron ??

Email marketing designer & developer
(已编辑)
举报内容
The email environment has various limitations, leading professionals to prefer creating an email entirely composed of images rather than relying on HTML and CSS formatting elements. One of these limitations is typography. Only the native Apple email app and Thunderbird support web fonts, including those from Google Fonts. On the other hand, the Gmail app, both on Android and iOS, displays all email text in the Roboto font. Desktop versions of Outlook do not support external fonts or different fonts within the Windows system. If you aim for consistency in displaying your email across different apps, the best recommendation regarding typography is to stick to common fonts such as Arial, Georgia, Times, Verdana, and Tahoma.

已翻译

赞

3 Optimize your email images

The images of your email can enhance your message, attract attention, and evoke emotions. A good email image should be relevant, high-quality, and optimized for different devices and email clients. To optimize your email images, you can use HTML attributes to specify the source, size, and alt text of your images. For example, you can use the src attribute to link to your image URL, the width and height attributes to define the dimensions of your image, and the alt attribute to provide a descriptive text for screen readers or when images are blocked. You can also use CSS properties to style your images, such as border, margin, padding, and background. However, you should be careful not to use too many or too large images, as they can affect your email loading speed and deliverability.

添加您的观点

Juliana Padron ??

Email marketing designer & developer
举报内容
As imagens do email marketing s?o exibidas com melhor qualidade quando suas larguras e alturas têm valores múltiplos de 4 ou 8. Isso está relacionado ao conceito conhecido como pixel snapping ou alinhamento de pixel, que é a tentativa, dos navegadores, de posicionar elementos gráficos de maneira que eles se alinhem perfeitamente aos pixels da tela. Como muitas telas têm uma resolu??o múltipla de 4 ou 8 pixels (1280 x 720, 1920 x 1080 etc), o redimensionamento é melhor quando as dimens?es das imagens seguem estas propor??es. Ainda, para as imagens n?o ficarem emba?adas na visualiza??o mobile, cujos aparelhos têm alta defini??o, elas precisam estar salvas no servidor com 2x o tamanho em que s?o chamadas no HTML.

已翻译

赞

4 Optimize your email colors

The colors of your email can influence your brand identity, mood, and call to action. A good email color scheme should be consistent, appealing, and accessible to different audiences. To optimize your email colors, you can use HTML attributes or CSS properties to define the color values of your elements. For example, you can use the bgcolor attribute to set the background color of your table cells, or the color property to set the text color of your elements. You can also use the hex code, RGB, or HSL formats to specify the color values. However, you should be mindful of the contrast, harmony, and meaning of your colors, as they can affect the readability, aesthetics, and perception of your email.

添加您的观点

5 Optimize your email interactivity

The interactivity of your email can increase your engagement, retention, and conversion rates. A good email interactivity should be functional, intuitive, and delightful for your audience. To optimize your email interactivity, you can use HTML and CSS to create dynamic and interactive elements, such as buttons, links, forms, animations, and transitions. For example, you can use the <a> tag to create hyperlinks to your website or landing page, the <input> tag to create form fields to collect user data, and the <style> tag to create CSS animations and transitions to add motion and feedback to your elements. However, you should be aware that not all email clients and devices support the same level of interactivity, so you should test your email design and provide fallbacks for unsupported features.

添加您的观点

Martin Gawlak

CEO of USA | LinkedIn 5-Star Influenza | The 3 words I’d describe myself as are smart, competitive, friendly and nice.
举报内容
Speaking of “unsupported features,” if you are starting a new conversation with a new contact (non-COVID-cough COLD EMAIL non-COVID-cough-cough) considers leaving all styling, images, attachments, and links out. Not only will spam filters be way less likely to leave you in the Trash folder, but you shouldn’t be selling to people or giving them homework on the first kiss anyways. Most marketers are way into subject lines. I’m into skipping the line. Bonus points if you have a good, simple ask—a reply email usually gets you out of their spam/promotions folder on future emails (your fancy html one!). I think this is because it lets the spam email filters know there are real people trying to communicate—not an exit-only robot spamming them.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Alex Lytle

Director, Digital Engagement at Gardner Business Media, Inc.
举报内容
There are some great tools out there to make your email marketing life easier. Tools like Stripo are great to use where you can create your email using a drag and drop builder, but you can export the email as HTML and CSS without having to know any code!

已翻译

赞

Email Marketing

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you use HTML and CSS to improve your email marketing design?

1

2

3

4

5

6

1 Optimize your email layout

2 Optimize your email typography

3 Optimize your email images

4 Optimize your email colors

5 Optimize your email interactivity

6 Here’s what else to consider

Email Marketing

给文章评分

感谢您的反馈

更多Email Marketing相关文章

更多相关阅读内容