The implementation of responsive layout in messages

In 2010, Ethan Marcotte proposed a responsive layout-a Web site compatible with multiple terminals. Responsive Mail, then, is a message that is compatible with multiple terminals.

According to a survey conducted by Extacttarget in 2012 for various age groups that want to receive marketing information, email is the main way customers are willing to accept marketing information.

e-mail content is a very important part of email marketing. Because people are accustomed to browse-style reading mode, a good design, brand recognition of the message than a pure text mail more attention to customers. As you can see from Returnpath's recent survey [i], people have become accustomed to reading messages on the mobile side. A mail that is inconvenient to browse at the mobile end will not only give a discount to careful design, but may also affect the ranking of the brand in the Mail reader's mind.

When a user reads a message on a mobile device, the difference with other clients is generally the following:

1 mail reading, users tend to scroll up and down to read, on the mobile client is very easy to need to scroll horizontally.

2 links and buttons: When users read on the mobile side, usually use their fingers to click. The area of the finger clicks is larger, so the area of the link and button should be enlarged to make it easier to click, and should be more dispersed to prevent late hitting.

3 Picture: Users in the mobile end of the use of data traffic, it is likely not to carry a large number of pictures loaded. Therefore, if the content of the message is simple to picture stitching, the mobile client will not be able to show good results.

In view of the above, messages that are suitable for reading on the mobile side and those that are not moving are designed to be different. E-mail is characterized by: After the message is sent, the contents of the message cannot be changed dynamically. The recipient may open the message on any client, so you need to design both the mobile and the non-mobile side messages and respond to the layout.

Combined with the process of making responsive mails in the project, this paper mainly analyzes two main difficulties in response Mail: Limited implementation and testing terminals.

Restricted implementation

In the response message implementation, the first consideration is the type of mail client that the target customer group might use. Depending on the type of target client, designers need to take into account the possibility of implementation when designing a message, and the technician should immediately feed back to the designer when they find a design that is impossible to implement.

The compatibility test results published by CampaignMonitor [II] show that there are many incompatibilities with desktop clients, while mobile clients mostly support CSS3. Therefore, in the project, should prioritize the desktop client to think.

1. Outlook

Outlook accounts for a large share of many mail clients. Microsoft Word is used as a message rendering engine in the Outlook 2007, 2010, and 2013 versions of the design in order to make the messages created by Microsoft Word more expressive. For Outlook compatibility issues with the web format, mail writers created the fixoutlook.org website to petition Microsoft after Outlook 2010 was released. The following Outlook (MAC) uses the WebKit engine [III], but Outlook 2013 still accompanies the word engine [IV]. The features of the OUTLOOK2007, 2010, 2013 series are described in detail in the MSDN documentation [v].

2. Gmail

Gmail is another difficulty for Web clients. Gmail is in the forefront of users, but for unknown reasons, Gmail will filter out the <style> tags in the mail (search fruitless, letter to the Gmail team did not respond, presumably for security reasons). Therefore, only styles that are inline within an element are retained. Too many inline styles in a message can lead to a sharp drop in code readability and a heavier burden of modification.

Using some CSS inline tools will alleviate these problems.

3. Responding to mobile devices

In mobile devices, iOS and Android devices now undoubtedly dominate the vast majority. Android Gmail is unable to implement responsive design because of restrictions <style> tags, so the main focus should be on the iOS mail client and the native mail client of the Android system. In iOS devices, the initial implementation of responsive mail is not difficult because of the uniform size of the device, where the screen scale is fragmented and pixel density is inconsistent.

For this, you can use viewport to make adjustments.

4. iOS Device targeted optimization

According to campaign Monitor's report [VI], IOS accounts for 35.6% of the market share in each mail client, much larger than other clients. Therefore, the optimization of iOS devices is very necessary. The features of an iOS email client that automatically identifies dates, URLs, etc., and the retina screen may make well-designed messages a mess.