Why Mobile First?

  1. Mobile is exploding, today’s smart phones are driving huge use of networked applications and Web content.
  2. Mobile forces you to focus, you have to prioritize because there simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements.
  3. Mobile extends your capabilities.

Building mobile first allows teams to utilize this full palette of capabilities to create rich context-aware applications instead of limiting themselves to an increasingly dated set of capabilities.

I will focus on the email how will be view on mobile and what the best solution/approach you must start with.

in the web design, there is 4 main design approaches:

  1. Fixed Design.(Which mean fixed width layout)
  2. Adaptive Design.(which mean template target for each device)
  3. Fluid Design.(which mean fluid/relative layout or percentage layout, so all width block as percentage)
  4. Responsive design.(css3 media query).

I will not go deeply to describe each one and you can check my previous post and here is a link to understand the difference for each approach:

As i talk i will focus on Html Template for mobile so we need to build html across a wide range of devices (from desktop computer monitors to mobile phones), to provide an optimal viewing experience, Easy reading and navigation with a minimum of re-sizing,  panning, and scrolling.

so what is the best approach h to build the html, i will remove the first and second because the fixed design will not Meets my needs  and about the adaptive design we can’t specify template for each device in the email.

So we have the third and the fourth approaches, actually i love to work with responsive and there is Email boilerplate project can help us to finish this task,

And i go with this template, but in my company Bayt.com there is a huge mailer and the responsive need more time to go with each email testing and with all email clients, and as you know in the email html best practice to use table not div so i am not recommend to use it, so i go with third approach (Fluid design), because:

  1. Easy to use.
  2. Easy to test.
  3. Working good with table tag.
  4. No need to extra style.
  5. Keep html simple.

so i think its very helpful to go with fluid and the software engineer will not care about the media query and client style.

And about the images, how can we handle it to appear fluid in the mobile, there is an easy trick:

if you have an image for example 550px*200px, so what you need to appear it fluid.

by max-width trick, here is the code:

<img src="src_image" style="width:90%;max-width:550px;height:200px;height:90%" />

check this example.

and here is the HTML  template will work for all devices:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Email Template - For All Devices</title>
</head>
<body style="background:#E5E5E5;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e5e5e5" style="background:#e5e5e5;" dir="ltr">
 <tr>
 <td style="padding:8px;" align="center">
 <div style="width:100%;max-width:630px !important;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:630px !important;" align="center">
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td bgcolor="#FFFFFF" style="background:#FFFFFF;border:1px solid #D6D6D6;">
 <table id="email_header" border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td align="center" style="padding:20px;" bgcolor="#F5F5F5">
 <a href="#"><img alt="Bayt.com" src="http://img.b8cdn.com/images/brand_mailers/bayt_logo.png" width="80" height="17" border="0" style="display:block;margin:0;" /></a>
 </td>
 </tr>
 </table>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="email_body">
 <tr>
 <td style="padding:5%;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td valign="top">
 <div style="NORMAL_STYLE HEADER_25_STYLE">
 We Just Wanted to Check on How Your Job Hunt is Going
 </div>
 </td>
 </tr>
 <tr height="20">
 <td height="20">&nbsp;</td>
 </tr>
 <tr>
 <td>
 <div style="NORMAL_STYLE">
 $body_content
 </div>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="email_footer">
 <tr>
 <td style="background:#F7F7F7;" bgcolor="#F7F7F7">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr><td height="1" style="height:1px;background:#DADADA;" bgcolor="#DADADA"></td></tr>
 <tr>
 <td style="padding:5%;">
 <div style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#999999;font-size:12px"></div>
 <table>
 <tr>
 <td><div style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#000000;font-size:14px;font-weight:bold;">Quick Links</div>
 </td>
 </tr>
 <tr>
 <td>
 <a href="http://bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0;">How Bayt.com Works for You</a>
 <a href="http://bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">Contact Us</a>
 <a href="http://bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">My Workspace</a>
 <a href="http://bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">Careers Guides</a>
 <a href="http://bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;">Bayt.com Blog</a>
 </td>
 </tr>
 <tr><td height="15" style="height:15px;"></td></tr>
 <tr>
 <td><div style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#000000;font-size:14px;font-weight:bold;">Find us on</div>
 </td>
 </tr>
 <tr>
 <td valign="top">
 <img src="http://img.b8cdn.com/images/brand_mailers/ico_facebook.png" alt="FB" style="vertical-align:middle" />
 <a href="http://www.bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">Facebook</a>
 <img src="http://img.b8cdn.com/images/brand_mailers/ico_linkedin.png" alt="FB" style="vertical-align:middle" />
 <a href="http://www.bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0;">LinkedIn</a>
 <img src="http://img.b8cdn.com/images/brand_mailers/ico_twitter.png" alt="FB" style="vertical-align:middle" />
 <a href="http://www.bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">Twitter</a>
 <img src="http://img.b8cdn.com/images/brand_mailers/ico_youtube.png" alt="FB" style="vertical-align:middle" />
 <a href="http://www.bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">YouTube</a>
 </td>
 </tr>
 <tr><td height="15" style="height:15px;"></td></tr>
 <tr>
 <td><div style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#000000;font-size:14px;font-weight:bold;">Spread the word:</div>
 </td>
 </tr>
 <tr>
 <td valign="top">
 <a href="http://www.bayt.com" title="Bayt.com" style="font-family:Helvetica Neue,arial,helvetica,freesans,sans-serif;color:#706F6F;font-size:12px;margin:0 15px 0 0">Tell your friends about us</a>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="font-family:Arial, Helvetica, sans-serif; font-size:12px;color:#333;" align="center">Developed By <a href="https://twitter.com/islamzatary" title="Islam AlZatary" style="color:#0033FF;">@islamzatary</a></td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
 </table>
</body>
</html>

And here is the presentation from my series of session in my company Bayt.com:

9 thoughts on “Email Template For All Devices

  1. I loved your post.Really thank you! Cool.

  2. Really enjoyed this post.Much thanks again. Really Cool.

  3. I cannot thank you enough for the article post.Much thanks again. Keep writing.

  4. Really informative blog article. Much obliged.

  5. Gucci fanny pack handbags this page can be the opt…

    this is really cool, I like here!…

  6. health and beauty tips…

    Thanks ! Supper Post !!…

  7. Good point Patrick!I’ll have to try some of these for my subject lines as well ….Cheers,

  8. The Birch of the Shadow…

    I feel there may possibly be considered a number of duplicates, but an exceedingly handy checklist! I have tweeted this. A lot of thanks for sharing!…

  9. There is certainly a lot to find out about this
    subject. I really like all of the points you have made.

Leave a Comment