2014年3月8日 星期六

Definitive guide of mobile friendly eDM template


In the previous blog, I believe you’ve already experienced the responsive design and the amazing power of mobile email marketing. So, how to make a responsive email template?

CSS3 media queries are the key of responsive email template. They enable your email to fit specifications of various types of mobile devices:
  • Width and height (of the browser window)
  • Device width and height
  • Orientation i.e. landscape / portrait
  • Resolution                                                                        (Rachel Andrew)
CSS3media_queries_responsive_eDM_template
By adopting media queries, the devices used by users can be detected and the email template will fit in different mobile devices. Yet, Gmail, which is a popular mailbox provider, does not support media queries. Thus, try to design your eDM template in a responsive way.

  •   1st Step: Optimal responsive email width: within 600 px  

In order to show your email in email clients' preview pane as well as mobile devices, design your eDM's width within 600 px. This also enhances emails' readability in desktop version. 600 px is a safe size for Outlook, Thunderbird and Apple mail. Also, for the screen resolutions 1024 x 768, 600-650 px is the maximum width to fit in the preview pane, say Yahoo or Aol Mail. No matter what email clients or mobile devices are, get your email ready for small screens.

** Tip: Average height of email clients' preview pane is 300 - 500 px. Try your best to keep all important and eye-catching stuff within this area. Do not wait for your readers to scroll down the email.


  •   2nd Step: Linearization: Stick to one column  

In desktop version of the email, multiple columns can be displayed in a horizontal line. However, users have to zoom in for details in mobile version. Linearizing the design in one column for mobile version can show the email content in a clear way. But, users may not be patient to scroll down to read all the columns. The best solution would be using one column only so that users do not need to scroll down so much to read the entire email.


  •   3rd Step: Use larger font size with bigger buttons  

For better readability, 50-75 characters per line is the optimal line length. Also, use a larger font size to enhance readability. This is not only good for mobile users, but also desktop users. I believe you would prefer reading email with larger text rather than smaller text no matter you are using mobile or desktop. Moreover, try to place a huge button at the top of email where users can see once they open the email (see the hints of making button here). Be considerate of fat thumb users, tiny CTA will frustrate them. CTA sized over 44 px is recommended. Also, don’t expect them to scroll down to click the button. 61% of users leave your email immediately if they cannot locate the information they want. Don’t forget they would not stay in your email to look for your CTA (call-to-action) as they would only spend 15-20 seconds (recall users’ reading behavior here) on one email.

Here are some email coding tips from EDMdesigner (Official Partner of UFOSend @ Responsive eDM template):
  • Always declare doctype! If you want to use mobile-friendly media-queries, then you need to apply HTML5 Doctype!
  • Declare inline style on all elements!
  • Use CSS media queries in the above mentioned <STYLE>
  • Always use TABLE to wrap an item, if you need padding, margin or border.  Read more >>
  • Never use margin. Use padding, and another wrapper table instead.
  • Always set HTML attributes (width and height) with exact pixels on <IMG> tags.
  • Use Classnames, and target stylings with htmlTag[class="classname"] to avoid overrides from webclients like Outlook.com or YahooMail. (there is an old legend, that android native email doesn’t support classnames, but in our tests from 2.3 to 4.2+ it works.)
  • Do not minify your HTML email into an one line HTML, because there are different limitations in each email clients, so sometimes it will break your code.
No solution is perfect for all email clients. Sometimes you may need to compromise between different email clients. Here is a suggestion: measure your list and tailor-make the eDM template for the major email client which serves most of your subscribers.

email_client_market_share

Comment if you have more ideas on responsive eDM template! 

 << Home

Source: 
Campaign Monitor
EDMdesigner @ UFOSend Official Partner
Email Client Market Share
Luke Wroblewski

Rachel Andrew
Reachmail

沒有留言:

張貼留言