“Mobile email will account for 15 to 70% of email opens, depending on your target audience, product and email type”, says the Ultimate Mobile Email Stats for the year 2015. That’s plenty!!!
With the ‘mobile everything’ mode on since quite a while now; ignoring development of emails to be viewed in a mobile environment would be blasphemy to the email gods. With the ever evolving mobile email layouts adding to the mobile viewing experience, the play safe rule of fixed width layout cannot suffice. The success of your email campaign would be judged a lot from the aftermath of your subscriber’s mobile email viewing experience. Developing emails with this inescapable detail is a need for email marketer today and we bring you 10 effective hacks towards designing emails for mobile devices divided across 4 major heads: Email Layout, Email Design, Email Copy and Images.
EMAIL LAYOUT
- A maximum fixed width between 600 and 650 pixels works best for the best cross-overs on email clients. Such a width may miss on a few smaller screens, but can shield issues with all major smartphone and tablet screen sizes. In order to serve narrow screens, email designers can choose to add 300 pixels of minimum width.
- The easy to design and maintain – linear layouts can come in handy as they are as simple as it can get! Marketers can avoid complex multi-columnar layouts as they cannot deliver impact across the different viewing environments. Focus on single column layout to avoid distractions in your email design also aiding to retain the reader’s attention towards CTAs.
- A hybrid of flexible and responsive layouts – also known as the flexbox solution, can help solve the non-compatibility issues surrounding media queries. Widely used email clients such as Gmail for Android and iPhone, Mailbox & Yahoo don’t support media queries. The flexbox approach is much regarded as the future of layouts has some wonderful features that can allow delivering beautiful emails in mobile viewing environment.
EMAIL DESIGN
- Amending white space at 15% provides the eye a room to relax around the text and images.Some email clients scratch out paragraph and margin spacing from the code; bunching all the text spaced neatly. Instead, code your emails using tables and utilize the power of padding in order to add the extra space. This would help your mobile readers to seep in the message well.
- Utilize highly contrasting colors to ensure that the message is readable under any viewing environment ranging across various screen resolutions and screen brightness preferences. Testing visual accessibility of various colors using different tools/software can be of tremendous help while choosing the colors in your email design. Remember, maximum visibility and readability is the goal!
EMAIL COPY
- Even though many mobile devices automatically resize tiny text; utilize fonts at a larger size. Create mobile-friendly emails by assigning percent or ems units for font sizes instead of assigning point sizing to them. This allows the font to scale as per the various mobile screen size requirements. Utilize bullet points and keep your email copy concise and focused so that the readers can quickly reach the CTA, thereby earning higher CTRs.
- CTA buttons must be at least 40 x 40pixels for mobile emails as they have to be easily clickable on a finger touch. Place the CTA at a prominent place within the email, say at the top: to be loud and clear. See to it that your CTA communicates well and helps the users to head where you want to lead them.
IMAGES IN COPY
- Use the best applicable type of image in your email based on your requirements. If small image size and crisp colors is your need JPGs can serve well where as a GIF image would suit best if your email is required to render animation. PNG images are opted for transparency in emails but otherwise JPGs can be the best file types as the images render sharp and load quickly under this email file type. Ensure shedding the image’s Meta informationsuch as color profiles, creator information, etc. before including it in your email.
- Utilize maximum and minimum width size for the images in your email. This will do the same thing for images as well – adjust them for the screen size. Adjust the percentage size as per the space around to ditch the image popping out beyond the email width. Using 100% min-width image will make-do with almost all email clients but includinga min-width: 100%; can avoid faulty image rendering in mobile emails, if any.
- Setting Alt Text for all images is imperative for reasons such as image settings across various email clients, poor bandwidth, etc. Under such circumstances, in order to ensure that the value of your message stays unaffected, Alt Text comes of help. Creative use of alt text in emails can help in conveying the reader what they are missing out on.
Design your mobile emails using the above email hacks and provide a superior inbox experience to your readers. Do let us know in the comments below if the above hacks help! 🙂