SlideShare uma empresa Scribd logo
1 de 2
Baixar para ler offline
1
Lyris Connections Blog
Excerpts From Our Most Popular Posts
HTML for Emails – What you Need to Know
By Lyris Marketing Team
Designing HTML emails for a newsletter isn’t as difficult as it used to be in the
past. With the emergence of visual HTML editors like Dreamweaver, Coffee Cup,
TextMate, and others, you can now build and view your templates side-by-side.
However, you will still need to have a good understanding of HTML in order to
use these tools.
If you are fortunate enough to have an in-house designer or
design team, then you won’t need to worry too much about
coding email templates yourself. This is a great benefit,
as you can simply upload or copy and paste the HTML
template into your Email Service Provider (ESP) platform
and start creating your message. If you are even luckier
and your ESP uses a WYSIWYG editor, small changes are
easily incorporated since you don’t need to know HTML; the
changes you make on the visual editor will automatically
change the HTML code.
However, if it was only that simple we would all be doing it. Designing a regular template is not the same when it
comes to designing an email template. Many HTML and CSS properties used in modern Web design are not supported
in email and email programs like Outlook, which can cause rendering and display problems with your email message.
Therefore, it’s advisable to adhere to some basic best practices for HTML email design to avoid any complications with
the way your emails display.
Here is a list of key points to bear in mind that will help you achieve the best results:
HTML Coding
1.	 Use tables for layout and design of your message and make sure all your <table> tags are opened and closed
properly to avoid any issues. A maximum table with a width of 600 pixels is also suggested.
2.	 Use inline CSS for styling, as browser-based services like Gmail or Hotmail will strip out your DOCTYPE, BODY, and
HEAD tags.
3.	 Avoid using shorthand, e.g. <p style=”font: italic 14px Verdana; color: #000”></p> Instead, use <p style=”font-
style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p>
•	 Avoid complex colspans and rowspans as these will make revisions a nightmare if you try to reuse
the templates.
•	 Avoid Java script, DIV, Flash, or any dynamic scripts – most email clients will not allow these to
function properly.
lyris.comCopyright © 2014 Lyris, Inc. All rights reserved.
About Lyris Inc:
Lyris (@Lyris ) is a leading global provider of digital marketing solutions that help companies engage with customers
in more meaningful ways. Lyris products and services empower marketers to design, automate, and optimize data-
driven interactive marketing campaigns that facilitate superior engagement, increase conversions, and deliver
measurable business value. Lyris’ high-performance, secure, and flexible digital marketing platforms improve
marketing efficiency by providing automated digital message delivery, robust segmentation, and real-time digital
channel analytics. The Lyris solutions portfolio is comprised of both in-the-cloud and on-premises offerings – Lyris HQ
and Lyris LM – combined with customer-focused services and support. More than 5,000 companies worldwide partner
with Lyris to manage and execute sophisticated digital marketing campaigns across email, social, Web, and mobile
channels. Learn more at www.lyris.com.
Keep up with the latest industry trends, developments and best practices for
continuously optimizing your digital marketing campaigns.
Visit Lyris Connections Blog
Images
1.	 Use image file types GIF or JPG for best results.
2.	 Use alt text, as images are usually turned off by default. This ensures that the reader is aware of what should
be there.
3.	 Avoid background images; email programs like Outlook will strip them out. Use a background instead.
4.	 Use absolute image paths instead of relative, e.g do not use <img src=”/images/myimage.jpg”> Use instead
<img src=”http://www.yoursite.com/images/myimage.jpg”>
•	 Define image height and width attributes so that when images are not loaded, your layout is still intact.
Links
1.	 Make sure you abide by CAN-SPAM RULES and provide an unsubscribe link in all your communications.
2.	 Avoid setting or changing a link color, as some email clients will change this by default.
3.	 Try to shorten URLs whenever possible; this can help improve the look and feel of the text version.
4.	 Include a link to update subscriber preferences where applicable.
In addition to the recommendations above, it has become common practice that email templates be created using
a responsive design for mobile devices. Today 70% of all readers tend to open an email on their mobile devices
first. This is important to keep in mind because not having a mobile-optimized template can affect your open rates.
Further, it’s important to test each template before sending out your email to ensure everything is displayed the way
it should by having adapted it to the various email clients and platforms. I suggest using our partner Litmus, as it
offers the most comprehensive selection to test the rendering of your templates.

Mais conteúdo relacionado

Último

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Último (20)

TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 

Destaque

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Destaque (20)

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 

HTML for Emails – What you need to know | Lyris Blog

  • 1. 1 Lyris Connections Blog Excerpts From Our Most Popular Posts HTML for Emails – What you Need to Know By Lyris Marketing Team Designing HTML emails for a newsletter isn’t as difficult as it used to be in the past. With the emergence of visual HTML editors like Dreamweaver, Coffee Cup, TextMate, and others, you can now build and view your templates side-by-side. However, you will still need to have a good understanding of HTML in order to use these tools. If you are fortunate enough to have an in-house designer or design team, then you won’t need to worry too much about coding email templates yourself. This is a great benefit, as you can simply upload or copy and paste the HTML template into your Email Service Provider (ESP) platform and start creating your message. If you are even luckier and your ESP uses a WYSIWYG editor, small changes are easily incorporated since you don’t need to know HTML; the changes you make on the visual editor will automatically change the HTML code. However, if it was only that simple we would all be doing it. Designing a regular template is not the same when it comes to designing an email template. Many HTML and CSS properties used in modern Web design are not supported in email and email programs like Outlook, which can cause rendering and display problems with your email message. Therefore, it’s advisable to adhere to some basic best practices for HTML email design to avoid any complications with the way your emails display. Here is a list of key points to bear in mind that will help you achieve the best results: HTML Coding 1. Use tables for layout and design of your message and make sure all your <table> tags are opened and closed properly to avoid any issues. A maximum table with a width of 600 pixels is also suggested. 2. Use inline CSS for styling, as browser-based services like Gmail or Hotmail will strip out your DOCTYPE, BODY, and HEAD tags. 3. Avoid using shorthand, e.g. <p style=”font: italic 14px Verdana; color: #000”></p> Instead, use <p style=”font- style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p> • Avoid complex colspans and rowspans as these will make revisions a nightmare if you try to reuse the templates. • Avoid Java script, DIV, Flash, or any dynamic scripts – most email clients will not allow these to function properly.
  • 2. lyris.comCopyright © 2014 Lyris, Inc. All rights reserved. About Lyris Inc: Lyris (@Lyris ) is a leading global provider of digital marketing solutions that help companies engage with customers in more meaningful ways. Lyris products and services empower marketers to design, automate, and optimize data- driven interactive marketing campaigns that facilitate superior engagement, increase conversions, and deliver measurable business value. Lyris’ high-performance, secure, and flexible digital marketing platforms improve marketing efficiency by providing automated digital message delivery, robust segmentation, and real-time digital channel analytics. The Lyris solutions portfolio is comprised of both in-the-cloud and on-premises offerings – Lyris HQ and Lyris LM – combined with customer-focused services and support. More than 5,000 companies worldwide partner with Lyris to manage and execute sophisticated digital marketing campaigns across email, social, Web, and mobile channels. Learn more at www.lyris.com. Keep up with the latest industry trends, developments and best practices for continuously optimizing your digital marketing campaigns. Visit Lyris Connections Blog Images 1. Use image file types GIF or JPG for best results. 2. Use alt text, as images are usually turned off by default. This ensures that the reader is aware of what should be there. 3. Avoid background images; email programs like Outlook will strip them out. Use a background instead. 4. Use absolute image paths instead of relative, e.g do not use <img src=”/images/myimage.jpg”> Use instead <img src=”http://www.yoursite.com/images/myimage.jpg”> • Define image height and width attributes so that when images are not loaded, your layout is still intact. Links 1. Make sure you abide by CAN-SPAM RULES and provide an unsubscribe link in all your communications. 2. Avoid setting or changing a link color, as some email clients will change this by default. 3. Try to shorten URLs whenever possible; this can help improve the look and feel of the text version. 4. Include a link to update subscriber preferences where applicable. In addition to the recommendations above, it has become common practice that email templates be created using a responsive design for mobile devices. Today 70% of all readers tend to open an email on their mobile devices first. This is important to keep in mind because not having a mobile-optimized template can affect your open rates. Further, it’s important to test each template before sending out your email to ensure everything is displayed the way it should by having adapted it to the various email clients and platforms. I suggest using our partner Litmus, as it offers the most comprehensive selection to test the rendering of your templates.