18 Effective Hacks for Mobile Friendly Email Marketing

Do you know the longest lasting means of online communication is as simple as email? Email is such a medium that it could be accessed almost any internet connected computing devices.

Now at the rise of Mobile devices, email has turned into one of the most useful elements. Research shows, approx 47-60% emails are read on mobile devices.

This essentially makes it really important for various brands to focus on mobile friendly emails.

Recommendations

Easily Craft Stunning WordPress Websites that Excel in Speed and Design!

Get this Deal!

Divi AI Empowers You to Effortlessly Create Content and Produce Images Right within The WordPress Builder.

Get this Deal!

Displaying emails on a vast number of devices could be a complicated process. It involves various level of devices to test. Which includes, desktop email clients, tablets and smartphones email apps.

It’s very important to understand the three different types of email code design: mobile first, flexible layout, and responsive design. Email coding is particularly unique in that all code must be inline and can’t call any external files like javascript and CSS, except images. Many developers refer it to the way websites that were built in the 90s. Basically, all inline styles and all tables.

Choosing the right type of email code design

1. Mobile first designs are for mainly mobile devices. It can be viewed on desktop clients, but the layout might be very linear and spaced out. Usually the links from these type of emails also goes to mobile friendly sites.
2. Flexible layouts are more approachable but it does comes with lot of spacer tables. Easier to code. They looks pretty much ok from the large screen to smaller screens alike. Even if it is easier to code, due to it’s simplicity; the design needs to be very simple.
3. Responsive designs are complex to begin with but the end result is eye catching. Requires advance level of HTML5 and CSS media queries. It does require more time to study and implement it. Responsive designs are adaptable to different type of screens.

The 18 key hacks infographic by SalesForce

(Infographic Link Credit)

Just to explain the infographic above:

1. Set a fixed width at 600 pixels. For the best crossovers on email clients, email width should be set at a maximum of 600 to 650 pixels. While this won’t cover the smallest of screens, but it will cater for all major smartphones and tablets. This size will look nice on almost all devices. To add a fine grain of control, add a minimum width of 300 pixels to accommodate narrow screen sizes.
2. Use a single column (or linear) layout. Linear layouts are easy to design and easy to maintain. Keep email layouts as simple as possible. A single column layout is most flexible across clients and devices. It is really hard to play with two columns and most of the time they do not work out as expected. Avoid complex magazine-style layouts with multiple columns since these rarely look any good on anything but a desktop computer. Multi column is a distraction for customers or lead them to ignore important CTAs.
3. Do not use paragraph spacing for old-fashioned tables. Both Outlook and Hotmail strip out paragraph and margin spacing from code. This means neatly-spaced text will bunch together. Instead, code emails in tables and use padding to add the extra space.
4. Amend white space at 15%. Optimized spacing allows the eye to quickly scan and better digest information. It brings out the maximum readablity on devices. Poorly rendered email on mobile can cause strain just to read the information, which translates to a negative emotion. By adding padding of 15 percent, the eye has room to move and relax around the text and images. This leaves more brain power to digest the email’s message.
5. Use larger font size. Similar to white space, increasing font size helps makes reading easier. Many mobile devices, such as the iPhone, automatically resize tiny text. Avoid using points for font size units. To take it a step further, set the font using em or percent coding to be even more mobile-friendly. Setting fonts as either of these will help them scale to different screen sizes.
6. Use the best type of image for email. JPGs are widely acceptable. For crisp colors and small image sizes, JPGs are the best image file type. They’ll make sure a images look sharp and load quickly. If an email requires animation, GIFs are best. For the need of transparency, PNGs are the way to go.
7. Remove image “junk” and optimize for load times. Most graphic programs allow for file size adjusting. Make sure to ditch meta information about images such as color profiles and creator information. Photoshop has an easy save for web button. To make image size even smaller, they can be put processed through programs like ImageOptim, TinyPNG, or JPEGmini.
8. Let the code adjust images to screen size. While adjusting images to appear clean and crisp at any size, it’s important images scale with screen sizes. A simple code hack is to add to any img tag. Adjust the percent as needed for the space.
9. Use 100% min-width image as necessary. If an image popping out beyond an email width, it would not create any good impression for any brand. Using the above width code will cover most all email clients, but adding min-width: 100%; will stop any errant images.
10. Set alt text for all images. While always best practice for accessibility and website SEO, adding alt text to images is imperative for email marketing. Many desktop clients load images automatically, but some don’t. In those image placeholders, a brand wants text describing what the customer should see. This can also help if a customer’s Internet bandwidth isn’t strong enough to load images.
11. Use preheaders to give the proper preview. Most email clients give a preview of the email content, but how many marketing emails just show text along the lines of: “Email not displaying correctly? See it here.” That’s just an awful first experience for customers and can negatively effect the brand’s email opening rates. Actually, it’s pretty easy to code these very important 75 characters.
12. Nobody has time. Keep your emails short and to the point. Shorter, focused emails see much higher click rates. Putting the CTA in the forefront by ditching big graphics and logos can bring in much more positive results. Due to the radical focus on readability, brand’s have seen upto 146% increase on conversion. Bullet points, instead of long paragrpahs help’s customers to read through it quickly and reach the CTA. There should not be too many CTA in one simple email.
13. Use visually accessibile contrast colors. Most of the smartphone users keeps their screen to dim to save power, but muddy colors can make emails completely unreadable. Not to mention, a brand wants to make sure everyone, including people with visual disabilities, can access their content. Use highly contrasting colors for maximum viewability and readabilty. Test visual accessibility on emails and websites using free software, such as aDesigner. This software allows anyone to see what a page looks like under a variety of conditions and for those with specific visual impairments, such as low light, color blindness, blurred vision, and age-related macular degeneration.
14. Use CSS media queries to change experience. Customer experience is what mobile optimization is all about. For example, almost every marketing email’s opening line reads something like “Having trouble viewing this email? View it in your browser.” On a smartphone, this takes up precious real estate. Through media queries, a brand can specify that longer messages show on desktops and shorter ones, such as “View in browser” appear on smaller screens. Makes sense, right?
15. Use a flexbox solution becaause sometimes media queries don’t work. Some major email clients like Gmail for iPhone and Android, Mailbox for iPhone, Windows Phone 7 and 8, and Yahoo! for iPhone and Android don’t support media queries. With Gmail ranked as the second leading email client, it’s even more important to realize media queries don’t solve everything. Instead, a brand can use a flexbox approach that is a hybrid of responsive and flexible layouts.
16. Want to get things done fast? Get a template. Coding emails can be tedious and requires various levels of testing. There are email coders out there who are happy to share their resources to get one started: CodePen, BazaarVoice, and Litmus’ favorite templates. Don’t be afraid to experiment and test. New trends and designs in mobile happen every day.
17. Land readers somewhere which is mobile friendly. It’s great to optimize emails, but customers are going to be sad if they end with a poor experience on a brand’s website. Make sure all links point to places that are also easily accessible on a variety of devices.
18. Test, study, refactor and test again. Email marketing software companies including Litmus, Email on Acid, and PutsMail allow a brand to view emails in just about every email client. These tools save time and energy to make mobile-friendly improvements. Not everyone has access to every device and email client, after all.

Creating more mobile-friendly email marketing is a solid business move. Email puts brands in touch with customers and community members directly.

Credit & Disclaimer: Some of this article text content and the infographic originally made at SalesForce Canada blog, I have summarized it with their kind permission.