Create e-mailer design optimized for both Mobile and Web.

Daily we see many emailers in our inbox. Its easy to read emailers on web, but it is difficult to read mailers on Mobile, if mailer is not optimized for Mobile. We enlarge the view to read the content.



So how to create one mailer which is readable and visible clearly on both web and mobile. And also without zoom or enlarge to read it.

Here we are creating a one mailer designed to view properly in both web and mobile.
So is it responsive mailer no its fluid mailer design.

Following are the solutions:

So while designing layout. Design two layouts one for web and one for mobile.

Step 1- Layout Design in Photoshop:

Layout size:

For web layout take 600px width and for mobile layout take size of 640px 960px (height may vary depending the content of the mailer).
While creating layout for web the size is x and on mobile it is 2x. Means what you design for web version, keep the same element (fonts, images) in double size on mobile layout.

Font size: Take font size in even number.

Font size for web    : 12, 18
Font size for mobile : 24, 36

Body content may look good in font size 18px and on mobile layout same font size will be double of it that is font size 36px.  

Step 2 - HTML Development:

HTML will be done in one web size only, which will be visible in 2x on mobile. Create HTML in table keep the table width 100%. So that it flexible to adjust automatically on Mobile.