Adaptive Emailers
Although the web development has gone ahead by leaps and bounds in the past few years, whenever we have to build a mailer we still have to rely on the old table system.
Most mailers are made in a two column structure (Sometimes more…) for the desktop where the second column falls down to fit within the mobile Screen. We call these mailers Responsive in nature as we have to write one piece of code for both mobile and desktop.
What are Adaptive EMailers?
When we have different designs for mobile and desktop we have to write different codes for certain section of the mailers. For example, if certain sections of the mailer have very different designs for desktop and mobile then we go ahead with this approach. This helps us in keeping all the important information of mailer in the first fold itself.
This is mainly used for cases where the emailer has higher importance like flight ETicket, Cab E-Voucher and Hotel Voucher where design integrity has to maintained at all costs.
Adaptive Section Example
Adaptive View Desktop
Adaptive View Mobile
How to make an adaptive Mailer
Before we could not use media queries for mailers but post-Gmails 2017 update Gmail now reads media queries on all its platforms(app and web) and It is currently the most used email client. This allows having a different structure for mobile and desktop.
The Outlook conundrum
Whosoever has ever tried to code a mailer for outlook knows how difficult it is to achieve even the most trivial of things on it. Most of the CSS properties do not work on it (or at least don’t work in the ways expected). For Outlook (Windows Desktop) we have to keep all the CSS properties inline. And the mobile adaptive Section has to be kept within the following comments
Adaptive Mobile Section
Forwarded Mailers
When Adaptive Mailers are forwarded the embedded styles are not retained by the mailer and therefore we get the desktop view in the forwarded case. In mobiles, we get a scaled down desktop view.
Gmail Property Matrix
Gmail Property Matrix(Most Used Email Client)
Yahoo Property Matrix
Yahoo Property Matrix
Things to Keep in Mind
- <!DOCTYPE> is used to inform the rendering engine which HTML tags to expect and which set of rules the HTML and CSS adhere to. Even though some email clients (webmail clients like Gmail, Google Apps, Yahoo! Mail and Outlook.com) strip away the code and apply their own, it is a good practice to include this in your email code.
- The width of the mailer should not be greater than 600–650px.
- Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Nothing is more unusable than clouds of tiny links on touchscreen devices.
- The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout.
- When possible, use display: none; to hide the redundant details in your mobile layout, this will reduce the size of the mailer on mobile decreasing the scrollable content.
Yahoo Hack
For Some weird reason Yahoo android app does not read the css if it is embedded in the <head> tag. We need to put it inside the <body> tag.
