What is responsive design?
Responsive is a way of designing emails that are mobile friendly. Most organisations choose to send commercial email messages in HTML format opposed to plain text because HTML allows for flexibility in custom design elements such as fonts, colours, images, and layout components. CSS language is frequently used to accommodate advanced styling in web design, but even the most experienced web designers will find that using responsive design in an email template can be difficult. While most major web browsers try to respect certain standards to ensure that web pages appear the way their designers intend, the email clients that will render an email template with far less consistency.
Here are some best practices and the ways to create responsive email templates. If you want to see the latest trends in email marketing for 2018 you can read it here.
Use Inline CSS
Avoid external style sheets or style declarations between the <head> tags. Instead, use inline CSS. Some email clients strip out <head> and <style> tags from emails, and external style sheets are largely ignored. Therefore, every HTML element must be styled using inline CSS by virtue of the “style=” declaration. Inline CSS is a method of using CSS within your HTML content instead of storing it in an external CSS file. For example, each paragraph of text will have an independent style declaration, such as:
<p style=”color:#ffffff;font-family:arial,’sans-serif’;”>This text is white and Arial.</p>
Declare Font Styles Near the Text
Declare all font styles within the element closest to the words you are styling. This will often be inside the <p> tags. If you want hyperlinks to display in a style other than the default blue underlined style, you must use CSS to declare the preferred style inside the <a> tag.
Use Nested Tables
Avoid layout-specific CSS in the <body> tag. Instead, create nested tables to control layout design. While tables are generally reserved for presenting tabular data in web layouts, HTML design for email requires the use of tables for just about everything when it comes to layout. Ignore what you learned about the evil HTML table and get ready to nest tables inside of tables inside of even more tables. HTML table attributes (instead of CSS) should be leveraged for table design and layout purposes: width, height, bgcolor, align, cellpadding, cellspacing, and border. Limit inline CSS table styles to padding, width, and max-width.
Use Tables to Position Images
Avoid using CSS inside the <img> tag to position images. Instead, position images using table cells. There are many rules for using images in HTML email templates, but making sure images appear where you intend them to appear will depend on properly nested tables. The only CSS you may need to declare inside the <img> tag is style=”display:block;”, which will eliminate unwanted gaps between stacked images in some email clients.
Use Absolute Paths for Images
Always use full paths for image links, never relative paths. Unlike traditional web pages that are often stored on a shared file server, HTML email content will be rendered in remote email clients, thereby losing any relationship to local file directories. For this reason, relative link paths like /graphics/image.png cannot be used. Instead, write out the entire absolute path to the image. Absolute paths will include the website URL before the specific directory location of the image file (e.g. https://www.domainname.com/graphics/image.png).
Note: Unfortunately, not even absolute paths will protect your images from email clients that block the display of images in incoming emails. That is why it is essential to also include a descriptive HTML “alt” attribute inside design-centric image tags. The text defined in this attribute will be displayed for the viewer even when images are blocked by their email client.
Do Not Use Background Images
Avoid background images. Instead, embed HTML images directly on the page. It is true that some email clients will respect the HTML “background” attributes in the body tag and others may allow the attribute in table cells. However, support for background images is so inconsistent that it is best practice to avoid using background images altogether. If your email design is background-image dependent, it is time to reconsider the design.
*Source: SugarCRM Support. This article pertains to Sugar® versions 6 and 7.
