Everything You Need To Know About Responsive Email
The design of the responsive email must also be unique . With approximately an open rate of 20% on mobile devices (and going up), the responsive design of emails is no longer a topic “we have to look at”, and has become something totally priority : “for now ”
Our first recommendation when designing an email is to make 2 sketches: one for web and one for mobile . In this way, we will already be clear from the beginning how creativity will adapt to each device (computer, tablet , smartphone and we will be clear about how to layout it.
With this in mind, we give you some tips. Let’s go there!
- Keep it simple!
The first thing to consider, both in the design and in the HTML code is simplicity . One column better than two; if we can remove redundant information , we remove it; call to action very clear and visible .
- From cursor to finger
Let’s not forget that clicking with a cursor is not the same as clicking with a finger. Therefore, let’s try to make the buttons large enough to be touched by a finger. We recommend a height of about 45px .
- The important thing, top
By having the width limitation , it is very likely that the e-mail will be lengthened. To avoid that the user does not see the most important information, it is better to place it at the beginning .
- Media queries
The media queries are a powerful tool to tailor our content to different devices . They are also very easy to use, we just have to define them in the style sheet and from there play with the elements.
A flexible design combined with media queries will make our design adapt to any device .
- If you need it, hide non-essential content.
For smaller screen resolutions we can apply a special class so that less important elements are hidden.
- There are things that do not change
As always, we must continue to use tables , not use inline styles, not use java script . Come on, what we all already know.
- After all
Is there something wrong? Check that you have put the meta viewport in the <head> of your HTML .
Finally, to say that with all these measures we will achieve a responsive email but we will always be subject to the limitations of some web mails .
Even in some cases they could send it to us to SPAM. Knowing the pros and cons, it is time to assess if you prefer that the email is seen optimally on any device , or if you prefer to ensure 100% reception , although then the display on some devices is not ideal . They already say, “you can’t have everything in this life.
Also Read : All You Need To Know About Facebook Hashtags