| Since the whole world has gone mobile, it is quite essential to provide Responsive Email Design(ERD) template to the entire gamut of email marketing companies.
Responsive Email Design is a technology of crafting websites in a way that they can be used for optimal viewing on various platforms. Responsive Email Designs are created by using Media Query also known as @media, which is again a special set of CSS styles which acts as dynamic CSS rules or conditional ‘if-then’ statement.
 |
 |
| Without MediaQuery |
With Media Query |
1. Use simple Design Layout
Keep layouts simple and clean so that it can be easily accessible to all the devices. It is advisable to consider text+image layout so that it will be easy to download. In mobile device with help of Media Query images can be hidden as and when required to avoid scrolling. Complex layout will create more confusion as the size of mobile device is small compared to desktop.
2. Single Column Layout
Single Column Layout is suggested because it is easy to optimize this process in mobile device compared to multi column layout. If multi column layout is used then table width should be in % only, with align=”left” so that when it comes on mobile device it automatically syncs without considering much coding effort. This way we can give some out-put on Gmail Apps though it does not support Media Query.
3. Links and Call to Action Button
Links and call to to action buttons should have a minimum target area of 44 x 44 pixels. Suggestion is for keeping the font size between 17-21 pixels; the best font size is usually 19 pixels. So that user can easily click on it with finger without considering habit of mouse click. “Call to Action” link or button should also come on screen without scrolling.
4. Design Flexibility
Design layout should be in such a way that it can easily fit in all client’s browser no matter whether it is Outlook, Anroid 4.0.3 or Gmail. If your table layout is in percentage then it is easily manageable in all mail clients.
5. Mailer Content
Content in the email should be concise as well as precise in a responsive design. The most important information in the email should be selected to avoid scrolling on mobile messages.
6. Left Aligned Text
Keeping in view the majority of users it is suggested to keep the text left aligned. Because majority of users will find it easier to interact with elements in the bottom left/middle of their hand-held screen.
7. Font Size and line height
Font size and increase in line height in mobile device is very important. This makes the text easily readable in mobile device as compared to desktop.
@media screen and (min-width: 320px) and (max-width: 680px) {
td[class=emailbodytext],a[class=emailbodytext]{font-size:1.2em !important; line- height:26px !important;}
}
8. Optimize Mailer Images
Image inside a mailer is very important part. Use good quality optimize image so that it’s downloads faster on mobile device. Avoid using high resolution images because you can’t use separate images for mobile device only. Media Query can help scaling down the image in mobile device. e.g.
table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}
9. Meta View Port
Insert meta tag at head section of your HTML to control the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
10. Testing
Before sending out your emailer it should be tested out properly on various mail clients to avoid any design issue. Email on Acid and Litmus tools also help in this testing purpose.
About the Author:
Ranjib Gogoi working as a Web Design Lead with Niche Software Solutions Pvt. Ltd. for last 10 years and extensively associated with Juvlon Email Marketing since its inception. Connect with Ranjib on https://www.linkedin.com/in/ranjibgogoi
|
