Designing email newsletter templates and email promotions for mobile devices has never been more important.
Mobile email design is a hot topic as the usage of mobile devices increases. After researching the topic in depth, I’ve come to some elements of mobile email design that should be considered in the development stage. Whether you’re sending an email newsletter or promoting a product or event, your email design needs to be optimized for mobile if your audience is viewing your content on the go. With the number of mobile users increasing, it’s very likely that a significant portion of your audience is using mobile. Here are a few tips for mobile email design. 
Mobile Email Design Element #1: Font size – Font for mobile emails needs to be larger than that of standard emails. Apple will automatically increase small font to be the minimum of 13 pixels. On Android devices, 16-18 scale-independent pixels are considered medium and large text sizes. Many designers recommend a minimum of 14 pixel font for body text and minimum of 22 pixel font for headlines.
Mobile Email Design Element #2: Concise headlines – I’m taking a note from app design tips for this one. Try working with a 35-character limit on headlines, and put your most important words up front.
Mobile Email Design Element #3: Design – Single and double column design tend to work the best in mobile, with single being favored by developers looking for complete simplicity. A double column design could work for an email newsletter with a full-text featured article. A single column design would increase clarity for snippet-based email newsletters.
Mobile Email Design Element #4: Proper Separation – Do not put clickable images or links side-by-side or your audience may have trouble clicking the desired link.
[text_ad]
Mobile Email Design Element #5: Sending format – Multipart MIME is used by most professional email marketers and for mobile email design that approach shouldn’t change. This format sends the email content in both HTML and plain text. Using Multipart MIME will assure your email content is available, even if the mobile device only allows text.
Mobile Email Design Element #6: Images – Visual content can draw people in, but don’t overdo it. When including images, assign alt text to each in case images are blocked. Alt text associated with images will allow people to know what the image is, even when blocked. Apple’s iOS enables images to display by default, which is good news for email marketers using visuals.
When sizing images, be sure to keep image size small, and do not use GIFs or Flash elements. If your overall email size is over 70k, it may be too big to send easily. Keep this in mind while deciding on the amount of images to include.
Mobile Email Design Element #7: Dimensions – Stay under 600 pixels while designing for Android. The Litmus Blog suggests that the overall size should be between 320 and 550 pixels. This size requirement is specifically for non-iOS phones, because Apple devices will automatically resize the content.
Mobile Email Design Element #8: Contrast – A higher contrast between content makes images and text more legible.
Mobile Email Design Element #9: Creatives – Your creative calls-to-action need to be eye-catching and tappable, with a minimum size of 44 x 44 points.
Mobile Email Design Element #10: Ad Placement – Where you place ads in mobile email design is important. Placing at least one above the fold assures your audience will see it. Ads placed further down the page may not be seen if the user does not scroll through the entire article.
Mobile Email Design Element #11: Test – Testing is the only way to make sure your mobile design looks appropriate on different devices. Since mobile designs are typically slimmer in content than a regular email newsletter or promotional piece, it’s even more important to have all links working properly.
Do you have any additional suggestions for mobile email design? Share your insight with the community in the comments section.
It might be also important to remark many applications do not understand or follow CSS instructions. It is advisable to either send an e-mail with a very simple design or to still use table-designed e-mail templates… yes, still.
“do not use GIFs or Flash elements”
How come? Was it supposed to say GIF animations?
Some of these elements don’t render well on mobile devices. They can have troubling loading too, depending on the Internet connection being used. Have you experienced different results?
-Chris
Great post! We always include a “mobile version” link at the beginning of the email to a text version in a browser. Also, make sure links are tappable and not spaced too closely together!
Thank you. I am glad that you’ve found the post helpful.
Thanks for shared. Helpful for me.
Nice article, full of practical advice we can put to use right now. Thanks!