Click me

Responsive Email Newsletters Infographic

FRESHMAIL COUNT ON RESPONSIVENESS IN EMAIL MARKETING WHY IS RESPONSIVENESS IMPORTANT? You should remember that... 66% 78% 53% of mobile phone of smartphone of all emails are users have a owners use it to opened on smartphones smartphone check their email BUY 28% 40% 81% of those with an email of ecommerce transactions of ecommerce purchases made through account use the iPhone are completed on mobile Mail application devices smarphones are done spontaneously WHAT TO FOCUS ON WHEN DESIGNING A RESPONSIVE EMAIL: 1) Break point Responsive emails usually change the layout of the content to 480px. Two and three column blocks of text and graphics are reorganized into one column. A C 2) Safe fonts Use safe fonts since many custom fonts will not display in certain email service providers. Also, use font sizes of at least 14px and 22px in headers. Arial Verdana | 14px-22px Tahoma Time New Roman 3 Big buttons Enhance "call to action" buttons to a size of at least 44px by 44px so they can easily be clicked with a fingertip. minimum 44px ! Buy now 44px 4 Prominent clickable elements You can't see any change in a clickable element when you hover over it on a smartphone. That's why you should use buttons that really stand out and visually convey that it can be clicked on. Use underlining, borders and contrasting colors so that it is clear that the buttons are clickable elements. Click here Click here Click here Click here Important things at the top Don't place "call to action" buttons at the bottom of the email. They should be visible immediately after opening the email, even if the message is scaled down to fit the dimensions of the screen. Click! Click! 6) Single column design Use a single column format to ensure proper display in all devices. 7) Logical layout of content Responsive design has an effect on the layout of the design. If you use a two or three column layout, make sure the content is arranged in such a way that it will appear in a logical order when rearranged into a single column on mobile devices. A C В C 8) Proper width Some applications, like Gmail, block responsiveness and instead match the width of the mail to the width of the screen it is being displayed on. Therefore you should use a width of at least 320px and no more than 550px. 320 - 550px 9) Avoiding graphics with small details Remember that graphics are also scaled down so avoid pictures with too many small details. 10 Preheader Carefully consider your preheader, the first sentence of your email, which is visible in the recipient's inbox before the mail is opened. Newsletter #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu malesuada nulla. New exclusive t-shirt! No preheader If you have trouble viewing the newsletter, just click on this link in message Perfume - 20% discount! Prepared preheader Only for you, all the perfumes 20% off until tomorrow! We send you a discount code! Newsletter #4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu malesuada nulla. How do you create a responsive mail? or When designing your mail, media query that overrides the properties written in the inline styles. Design in FreshMail! Every template created in our editor is responsive! remember use Create a free account at FRESHMAIL FreshMall Is an emall marketing software for creating, sending and tracking online campalgns that work. B

Responsive Email Newsletters Infographic

shared by freshmail on Jul 13
You need to know how to create a responsive email design. Why? Email opens are increasing on mobile devices, with some brands seeing more than 70% of their emails opened on mobile. These brands create...





Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy


Click the code to copy
Customize size