Responsive Email Templates

Email Marketing and responsive templates

• Change the hierarchies and organization of content according to the device from which it is viewed.
• Revolutionize the browsing experience.
• Expand fonts to adapt to screen needs.
• Change colors.
• Change the design.
• Readjust image sizes (scale).
• Complete and harmonize spaces (filled and blank).
• Change or hide content.
• Create a single newsletter independent of the device and its resolution, saving costs.
• Improve readability and usability on mobile devices by avoiding the need to zoom in to read the newsletter correctly or to easily click on the action button or link.

• When creating a responsive newsletter, consider the screen size of mobile devices, and that they are touchscreens.
• Make the font size larger so it is easily visible from a mobile. It is recommended that the font be at least 14px.
• Enlarge the size of buttons and action links so that the user has no trouble tapping them with a finger on a touchscreen device.
• Scale images to adapt to the screen resolution of the device.
• Change the structure to be single-column and linear to facilitate reading from mobiles.
• Remove non-essential content such as ads or less relevant related content.
• Create a simple design with a concise and clear message that is visible in the first screen to catch the reader’s attention and prompt them to click the action button.
• Declare the viewport meta tag in the , with the values width=device-width so the device uses its actual width and initial-scale=1 so the email loads without zoom by default.
• Responsive emails use CSS media queries, which are a series of conditional rules based on the screen resolution of the device to apply different style rules. By using media queries, we can adapt the design of our emails to any device.
• The minimum breakpoints usually considered are 480px, 768px, and 1024px. 480px is the breakpoint for vertical mobiles, 768px for vertical tablets and landscape mobiles, and 1024px for desktops and landscape tablets.
• To prevent stretching to the full width of the screen on monitors with large resolutions, we can limit the email width using the max-width attribute in our table or container element, setting the maximum number of pixels we want it to extend to.
• To make images scale and adapt to the width of their container, we need to set their width to 100%.

• In emails, screens define the media query (CSS) used, based on their size.

• There can be many or few styles, depending on the style set for the screen size.
• Each media query (CSS) specifies the type of element it should contain (the entire table or just one of the cells). All of this must be predefined in the HTML.
• Don’t forget to test your email’s display on various devices and email clients to verify that the messages are displayed as planned.
• With the help of these templates, it is possible to simplify your message and make it more reader-friendly and interactive even from small screens.
• Responsive design allows you to increase the usability of your email, increase your open rates, and even improve CTR.

• iOS mail app.
• Android 4.X Email/OEM app.
• Windows phone 7.5.
• Blackberry 057 + Z10.

• iPhone Gmail app.
• iPhone Mailbox app.
• iPhone Yahoo! Mail app.
• Android Gmail app.
• Android Yahoo! Mail app.
• Blackberry OS 5.
• Windows Mobile 6.1.
• Windows Phone 7.
• Windows Phone 8.