Like it or not, Responsive HTML Email is popular and it’s here to stay – over 50% of e-mails are read from mobile devices.
But HTML email design is very out-dated – for some web developers, HTML email design can be a living hell. While most email design experts start off by building tables and layouts styled in HTML attributes, some designers are implementing newer, modern techniques to create responsive HTML email. Here are a few tips:
HTML email is valuable
HTML email is vital for every company and or business. In the marketing department e-mail outperforms social media channels such as Twitter and Facebook. The best thing about e-mail is that it allows marketers to interact with massive audiences in a very personal way. While most users tend to use plain text e-mails, responsive HTML email has plenty of advantages including:
Tracking – it allows you to track engagements in order to optimize marketing efforts
Hierarchy – You can build hierarchy in HTML and make your text or links easily noticeable
Design – the email allows you to reinforce your brand
Hyperlinks – You can link to your website or landing pages from the email
HTML email can be a hassle
HTML email development can be a hassle simply because there are no standards between different email clients. For example, Gmail and Outlook render CSS and HTML differently which leads to lots of problems. With HTML email there is no JavaScript either – all you can use is inline styles.
How HTML email works
HTML email is like designing a web page – HTML attributes, inline CSS, tables, the works. The only thing you need to keep in mind is that email clients rendering engines differ so you need to limit yourself to a tiny subset of CSS and HTML.
HTML email tables
Designers often use tags such as nav, footerfor, article, section, header or div when building web pages – HTML email devs have to use HTML tables in order to create email campaigns.
Styling of these tables will use attributes such as border, cellspacing, cellpadding, align, bgcolor, height and width. Inline styles can include max-width, width and padding. This is the only way to create robust email layouts.
Images
Using images in your HTML emails is quite similar to using them on web page, apart from one little problem – most email clients disable images by default and your subscribers will often get confused. There’s really no way of automatically enabling images but with the clever use of alt-text we can provide subscribers with some context.
Call to action
With HTML emails we can include clickable hyperlinks – instead of placing links within the text, you can use big and noticeable buttons to create call to actions. While many marketers use linked images instead of buttons, these are not effective for the reason stated above – buttons can be built and used in e-mails even when images are disabled.
Responsive HTML email
Responsive sites and responsive email have three things in common: media queries, flexible layouts and flexible images. The only difference between the two is how these components are implemented.
Flexible pictures
This part is not too hard but keep in mind that if you set your width to 100% some email clients may have problems rendering the images at their optimal size, unless you define height and width using HTML attributes.
The first thing you have to do is make sure that your images are properly coded. If you want to make your images fluid simply add a media query in the head of the email:
img {
width:100% !important;
height: auto !important;
}
Keep in mind that social icons and logos usually stay the same size on almost all device – this is why it’s a good idea to target flexible images using a class.
Flexible Layouts for responsive HTML email
Although web designers rely on semantic elements to build responsive design some limitations do still exist when building HTML email. For example, all tables should use percentage as their widths. You can create a container table with specific dimensions in order to constrain the width of your e-mail design – some clients such as Microsoft Outlook can’t handle percentages very well and it may lead to a weird looking email.
Media queries in responsive HTML email
Media queries in emails work the same way like in web design. When you include a media query in the head of the email, you’ll be able to target specific device attributes and adjust styles when needed. For example, if you want to target viewports of 525 pixels or under it, you can use the following example:
@media screen and (max-width:525px) {
table[class=“my_table”] {
width:100% !important;
}
}
This overrides all inline styles and HTML attributes, effectively forcing the table to take the full width of the mobile screen.
If you want to improve mobile user experience, you can also make your test and buttons bigger. Nested tables can be targeted with the code above as well.
Although media queries are great for creating enticing user experience on mobile devices, they are not supported everywhere – the Gmail app, Windows Phone 8 and older generation Blackberries tend to ignore media queries.
