When 58% of the total emails in the world are being opened on Mobile devices, you can’t leave responsive email design aside. So, let’s quickly start today’s topic and inform you about responsive email designs.
An Email template is said to be responsive when the email adjusts itself as per the device it is being opened on. That being said and viewing the rise in mobile email opening stats, the responsive email templates are the need of the hour.
Designing a Responsive Email Template
Just as every second thing you promote online needs a design first whether it be a website, image, banner, pamphlet, etc. Emails too require a design first. You will find various free responsive email templates to choose from, but what suits best as per your receivers and industry niche that matters.
After writing a Killing Subject Line For Email And Enticing People to read and respond to your email. Now, Elements to consider while designing a reader-friendly and responsive email template.
1. Text Content
a) Follow the inverted pyramid method i.e. the most important line at the top and go down in the decreasing manner of importance. Imagine your reader scrolling your email because of the most important line written at the top and at the bottom he sees a call-to-action button – a door to connect. Excellent!
b) Delete, omit the unnecessary text or promotional stuff unless you are entitled to put it there.
2. Visual Content
a) Images: If, what you want to say, is better with an image, you must upload it
b) Modify: optimize the image, reduce the size, sharpen, don’t use GIFs, use static ones.
c) In case, you don’t need an image and what you want to say is conveyed in one or two sentences, don’t keep the space white, tell a developer to design an image to fill the space. Follow the eye-pleasing or industry related color combination.
3. Styling
a) Font: Email’s main medium is text. So, use font that is readable on mobile screen while styling a responsive email design. Iphone has the minimum font size i.e. 13 pixels. Use minimum 13 pixels, if you want to cover that device too. Carefully implement Bold, Italics and underline feature. Bolder text is harder to read in small font size. You can play with this where you want to control the flow of information.
b) Contrast Levels: So, your target email recipients use mobile at the night time and what if they opened your high contrasted email in low light? You get the point! You should know about decreasing the blues to prepare the eye-pleasing screen for the reader in low light conditions.
4. Layout
a) Simplify navigation: Remove unwanted social sharing icons, category icons, remove extra header and footer for some space. Don’t deliver your whole website layout in your email. That’s an email, that too a responsive email template, so stick to the plan! Read the first point in the content “put the most important thing at the top”.
b) Vertical Stacking: If two or more images are really important, then stack them the vertical way. Keep only vertical navigation, exclude horizontal stacking.
5. Call to Actions
a) Bigger the Better: Here, bigger is as per the email size.
b) Space: Here, the white space works for you. A call to action button in the middle of the white is clearly visible. And, you can even increase the size as per your needs.
c) Hyperlink: What about a mobile non-friendly web page on a mobile friendly email’s call-to-action button? You missed that, right? Link a mobile friendly page to the call-to-action.
Care for sharing some thoughts on responsive or mobile email design?
Drop us a line at [email protected]
