Contents
If you’ve read email or sent email from your mobile phone, you know that it’s an experience that can range from amazing to awful. While the email newsletter can look interesting in your inbox, it can look monstrous on your phone. It can become cluttered with unresponsive images, narrow fonts, and broken layouts. These are the most common issues you’ll experience when making your first email template.
We’ll look into why designing responsive email templates is important for email designers, build a mobile email and cover the designing fundamentals so that your email is read and appreciated by your audience.
Design Techniques
Here are some techniques that you should follow when making your email template:
- Buttons and links should have a minimum target size of 44 x 44 pixels. Nothing is more useless than tiny links that are placed on your devices.
- Keep the important information in the upper portion of your email and stick to a clear and concise design. Scrolling is more difficult on your mobile phone than it is on a desktop computer. So make sure all of your information is easy and noticeable for your readers.
- If possible, use display: none. This will remove any extra elements that are in your mobile layout. While elements such as social sharing buttons are great for desktop computers, they can be hard to use on mobile devices.
- Keep your emails in about 500 x 600 pixels for mobile devices. They are easier to read on mobile devices, and if it falls apart, it will do it gracefully.
When creating an HTML email template, its best to create two wireframes or sketches on it. One for your mobile layout and one for the webmail/desktop layout. Keep in mind the location of your call to action (CTA). Is it visible when your reader opens up their email or do they have to scroll in order to view it?
Making Responsive Layouts
While you can go for the one-column HTML layout for your mobile devices, there is a better way to make 2-column layouts without making mile-long stylesheets in your media queries.
The golden rule for responsive email templates is “Try to use HTML more than CSS.” Where the CSS support is flaky across most email clients, their attributes are more rock solid. For instance, attributes like cellpadding = “12” is more reliable than the CSS equivalent padding: 10px, these are the attributes you need when making your 2-to-1 column layout.
Making Fluid Layouts with Media Queries
An alternative way to make a responsive layout is to adjust the viewport’s width. By making a simple news query that uses a percentage width to the elements (instead of a fixed width like 520px), your newsletter will have dimensions that stretch and fix the size of mobile phones. As a result, it will fit from large Samsung phones to the small screens on Nokia devices.
Conclusion
To conclude, you need to make your emails responsive if you want your audience to accept your message. Doing so will make readers from the large desktop screen to the pocket-sized mobile phone stay interested in what you have to say and increases the chances of them buying what you’re selling. So, take the time to get your email template on point so that it can reach the most readers possible.
Sources: