Email Template For All Devices

By Islam Alzatary @islamzatary

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

Target

Global Statistic

Emails Opens by Devices

Bayt.com Statistic – The Traffic

Bayt.com Statistic – Mobile OS

Bayt.com Statistic – The Screens

The Design ApproachesAdaptive 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/1D01C6AE9D028347

3. http://stylecampaign.com/blog/blogmails/fluid/fluidimg/graeme.htm

The BenefitsNo 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.

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.

Design Example:

Any Question?????

Islam AlZatary

Sr. Front End Engineer

At Bayt.com

www.islamzatary.com@islamzatary