Newsletter_Best_Practices.txt

Newsletter Design Best Practices - Summary:

Source: https://templates.mailchimp.com/
Email Client Market Share: http://emailclientmarketshare.com/

1) Design Best Practices Overview:

- Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.
- Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman. (More on this here: https://templates.mailchimp.com/design/typography/)
- Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?
- Avoid elements that require Flash or JavaScript. Use animated gifs to show motion in an e-mail.
- Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
- Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
- Use <img> alt text and width height + alt-text styling
- Important calls-to-action like buttons should span the full width of the email when its viewed on a mobile device. 
- Minimum font size 16px (Apple recommends 17-22px, Google recommends 18-22px)
- Call-to-action touch targets, such as buttons, should be at least 46px squared (Apple recommends 44px squared, Google recommends 48px squared—we’re splitting the difference).
- Avoid clustering several links together in your copy. It makes individual links very difficult to access.

2) Best Practices Development Overview:

- Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
- Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
- Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
- More CSS support info: https://templates.mailchimp.com/resources/email-client-css-support/
- Inline all CSS before sending. (Inline CSS tool: https://templates.mailchimp.com/resources/inline-css/)
- Use only absolute links for images, and host those images on a reliable server.
- Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
- Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
- Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.
- Good source for e-mail template blueprints: https://github.com/mailchimp/Email-Blueprints

3) Responsive Design:

Mobile-Friendly Email Attributes:
- Can be fixed-width but still mobile-optimized. An email with a fixed width of 320px (the width of a phone screen in portrait orientation) is one example.
- Font sizes don’t change dependent on screen size, but are large enough to be readable on small screens.
- Can retain a multi-column layout while allowing for readers to tap and zoom into each individual block of content, for easier reading.
- Use large, thumb-tappable buttons for calls to action.

Responsive Email Attributes:
- Use media queries to adjust email width dependent on the size of the display on which its viewed. That way, the email’s width adapts to any display size in any orientation.
- Font sizes change from desktop to mobile displays. Several different display sizes can be targeted using different media queries
- Layout can be changed from multi-column to single-column on the fly.
- Different elements (image-based buttons, for example) can be hidden and shown dependent on which platform the email is viewed on.

Newsletter_Embedding_Images.txt

Source: https://sendgrid.com/blog/embedding-images-emails-facts/

There are three main methods of embedding images in mails:

1) CID Embedded Images (Inline Images)
CID (content-id); old method => attach images to mail 
=> reference with html image tags -> gets embedded when user opens mail

=> Supported by Sendgrid (nodejs client library) but not by CRM tool workflow 
=> In general difficult to setup (MIME-types); technical knowledge required
=> Increased E-Mail size => slows down sending & receiving
=> Would significantly increase effort on a per-campaign basis
=> Supported in Desktop Clients, but breaks in general for browser-based clients

2) Inline Embedding (Base 64 String Encoding)
Image is encoded as a base64 string => add string to HTML img tag
e.g. <img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />

=> Not supported by CRM tool workflow (Picture preview) => all has to be done by hand
=> More effort on a per campaign basis because pictures need to be encoded and strings manually added in
=> Increases image size
=> Blocked by many e-mail services and blocked completely by Outlook

3)Linked Images (Loading from CDN)
Image is referenced in from CDN. No extra effort required.

=> Changes to Images after sending possible
=> Light weight e-mails
=> Same blocking issues as with linked images