email design guide
TRANSCRIPT
L/O/G/O
Email Design Guide
www.themegallery.com
Contents
Footer
Email Layout
Fonts
Images
Copy & Content
Call to action
Back
www.themegallery.com
Email Layout
600px or less design width, Length below 1024pxWhy
Use basic HTML tables, always use inline CSSMore
Use Background Images Sparingly, full body background colors,keep good Balance of Text-to-Image
Ratio
Consider a Mobile-First Design
Width
CSS & Tables
Backgrounds
Mobile
Back
www.themegallery.com
More code basic• 1 、页面宽度请设定在 600px 到 800px （像素）以内，长度 1024px 以内• 2 、 Html 编码请使用使用 utf-8 ，避免使用 colspans="" 属性• 3 、 HTML 代码在 15kb 以内（各个邮箱的收件标准不一样，如果超出 15kb 您的邮件很有可能会进入垃圾邮件箱）• 4 、请使用 table 表格来布局，同一个 td 里面只放一张图片，如 <td><img src=”picture.jpg”></td>, 所有的图片都要定义宽和高，同一段文字放在同一 td 里。• 5 、如果需要邮件居中显示，请在 table 里设定 align=”center”• 6 、不要使用外链的 css 样式定义文字和图片，不能使用 class 标签。（外链的 css 样式在邮件里将不被读取，所以发送出去的邮件因为没有链接到样式，会使您的邮件内容样式丢失），正确的写法：• <td style=”font-family:Arial; font-size:12px; color:#000000;”> 文字 ,</td>• <p style=”font-family:Arial; font-size:12px; color:#000000;”> 文字 ,</p>• <font style=”font-family:Arial; font-size:12px; color:#000000;”> 文字 ,</font>• 7 、不使用 Flash 、 Java 、 JavaScript 、 frames 、 i-frames 、 ActiveX 、以及 DHTML ，如果页面中的图片一定要是动态的，请将 Flash 文件转换成 Gif 动画使用，但在 Outlook 2007 里。 Gif 将不能正常显示，因为 Outlook 2007 限制 Gif 动画。• 8 、不要使用 <table></table> 以外的 body 、 meta 和 html 之类的标签，部分邮箱系统会把这些过滤掉。• 9 、背景图片代码写法为： <table background="background.gif" cellspacing="0"cellpadding="0"> ，但请注意， Outlook 对背景图片不识别。• 10 、不要出现 "onMouseOut" "onMouseOver" ，即使在 <td> 里设置了，发送到邮箱后也将被过滤，将不能显示设定鼠标经过所显示的内容。• 11 、使用 alt tags 来标注没有显示图片的标签， (<img src="http://site.com/img.gif" alt="Company
ABC">) • 12 、 font-family 属性不能为空。• 13 、使用在线图片时，需要包括图片来源的 Url, 如 (<img src="img.gif">) 得用 (<img
src="http://site.com/img.gif">) 替代提示和注释：
Last page
www.themegallery.com
More code basic• 1 、全局规则之一，不要写 <style> 标签、不要写 class ，所有 CSS 都用 style 属性，什么元素需要什么样式就用
style 写内联的 CSS 。• 2 、全局规则之二，少用图片，邮箱不会过滤你的 img 标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上 alt 。• 3 、不要在 style 里面写 float 、 position 这些 style ，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用 table 。• 4 、 style 内容里面 background 可以设置 color ，但是 img 会被过滤，就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性，也叫 background ，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：• <td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>• 5 、 div 模式的邮箱不支持 flash ， iframe 模式的有待验证。• 注释： alt 属性的值是一个最多可以包含 1024 个字符的字符串，其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不允许有任何样式标签。故不使用 $$$ 和 ### 在 alt 属性中。• 注释：当用户把鼠标移动到 img 元素上时， Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢，只要当图像无法显示时，才会显示出替代文本。• 提示：如果需要为图像创建工具提示，请使用 title 属性。• More
www.themegallery.com
Why 600px?
• Over a decade ago, Microsoft Outlook was the king of the email client hill and the average desktop monitor was 1024px. Marketers around the world had to conform their emails to deal with these constraints. It was from these constraints, that the email width rule of 600 pixels was born and since then, it has largely prospered.
• But, a lot has changed. Just consider these stats:
• 97% of screen resolutions are 1024×768 pixels or higher
• 1366×768 is the most popular resolution at the time of publishing this post
• 53% of email is actually opened on mobile devices – 26% on iPhone alone
As for moible, stay under 600 pixels for Android . We suggests 320 to 550 pixels better!
Last page
www.themegallery.com
Fonts
Fonts
Don't be spam
Avoid red font color, spam words
Keep it legible
14-16px range, with 14px text appropriate for
longer emails and 16px best for short ones (2 or
3 sentences)
Color friendly
1.Pick a simple palette, 2.In RGB
3.Separate header and footer from body content
Stick with System Fonts
Stick with web-safe fonts like Arial, Tahoma, Times
Roman, and Georgia
Reduce the length as you can
Be concise
Back
www.themegallery.com
Images
Brand assets
FormatHigh-
Density Screens
Color Mode or Profile
Make a statement with photography, such as Unsplash, Stocksy, Can Stock Photos...
At 20k or less, whole email don't exceed 50k
to 70k
PNG or JPG format more, GIF should take in bright and concise style (not fit inOutlook 2007 ), Do Not Embed Videos and/or Flash
Constrain image dimensions by 50% For
high-definition displays,be careful with
spliced images and using images to fit the
layout
Using website symbols like company's logo or mark at the top of the email
Use absolute image source URLs and alt tags
Use photos File Size
Images
Back
www.themegallery.com
Image specifications for email Image size: Header graphics: less then 600 pixels wide, with a proportional height (a general guideline is 100-200 pixels)
• Images within your mailing's content:recommend 480 x 480 pixels or smaller and not exceed 10kb
• Warning:the larger the image, the greater the chance an email filter or firewall will block the image
• For the best experience on a retina display, you should double the size of your image (if you have a 320px header graphic, you'd upload a 640px version)
• File type: Save your image as a .jpeg or .gif format before using it in your code.
• Color profile: Your images need to be in RGB color values, as opposed to CMYK color values. CMYK color values are for print and won't render in an online environment.
• DPI: Set your images to maximum quality with a resolution of 72dpi.
• Image hosting:Full use Url, as we mentioned before
• Animated GIFs:• Keep your image size under 480 pixels in width and height.• Keep the number of frames less than 10.• Put your most important frame first, to ensure Outlook 2007 and 2010 users don't miss the message.
Last page
www.themegallery.com
Copy & Content
Copy & ContentTheme
Start a topic then relevance
Direct and clear to
showcase benefits
Ask Nicely & Respect Readers
Short words & spelling check
Body copy font size
Include a Plain Text Version
Writing
14 pixels & Title Font Size: minimum 22 pixels
Why?Test tool
Back
www.themegallery.com
Footer
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Organization’s contact details are included.
Unsubscribe button is
upfront and easily clickable
Key services/produc
t categories links are placed
well.
Social sharing links and/or
‘Forward to a Friend’
options are added.
P1 P2
P4 P3
Back
www.themegallery.com
Call to action
ShortObvious
Stand out
Repeat &
Urgency
• Make It Short not much click buttom• Tell People What to Do, Obvious• Make the Call to Action Stand Out•Repeat the Call to Action•Urge People to Respond Now
Back
www.themegallery.com
More CTA Tips• What should I choose?• 1.Encourage a purchase: Shop now Shop our fall collection Act nowYes! I want one. Claim your coupon Don’t delay. Save now. Get 50% off now Get the style you want Get free shipping Free gift with purchase 2.For the holidays:Find holiday gifts: Find holiday gifts Order now. Get it before Christmas. Spread holiday cheer Tis the Season. Donate now. Claim your birthday coupon Yes! I want my birthday deal. Some template I can refer to?1.7 tips for powerful email call to action2.7 Inspiring Ecommerce Call to Action Examples and Why They Work3.Tell You Corret From Bad
Last page
www.themegallery.com
Some case we share together
• 1.Animated GIF Email with Creative Idea• a b c Less then 1024px length
• 2.Regular Emails• a b
• Some ideas that you should try!• Email campaign you should steal today!
• Thanksgiving Festival coming soon, maybe you need some guidance.
Last page
L/O/G/O
Thank you!