1. Email Template For All Devices
By Islam Alzatary
@islamzatary

2. Lets talk about…
 Know Your Audience.
 The Design Approaches.
 The Benefits.
 Email Best Practice.
 Examples.

3. Target

4. Global Statistic

5. Emails Opens by Devices

6. Bayt.com Statistic – The Traffic

7. Bayt.com Statistic – Mobile OS

8. Bayt.com Statistic – The
Screens

9. The Design Approaches
 Adaptive Web Design (Cant Using it in
mobile).
 Responsive Web Design.
 Fluid Responsive Web Design.
Examples:
1. http://www.smashingmagazine.com/
2. http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6A
E9D028347
3. http://stylecampaign.com/blog/blogmails/fluid/fluidimg/graem
e.htm

10. The Benefits
 No Zoom.
 Improved readability & usability.
 Low risk of being caught in spam
filters.
 Better Information Organization.
 Respect Your Client(JS/EMP).
 More appropriate for businesses.
 Easy and Fast to use.

11. Best Practice (Designer &
Developers)
 Single Column Design.
 Large(r) fonts.
 Short, clear and direct Content.
 Subscriber Experience.
 Minimal Colors.
 Few small images.
 Always use table tag html.
 Try Use The reserved style before use custom style.
 Always use inline style, there no CSS file attached.
 Use percentages for widths.
 Keep HTML as Simple as Possible.
 No JavaScript.
 Testing Testing Testing.

12. Design Example:

13. Any Question?????
Islam AlZatary
Sr. Front End Engineer
At Bayt.com
www.islamzatary.com
@islamzatary