Pages Menu Stijit.com
Twitter
Categories Menu
Стили для писем в outlook — html и css для кнопок в email

Стили для писем в outlook — html и css для кнопок в email

    Почтовый клиент Outlook это одно из главных проклятий верстки email писем

  1. Outlook очень своеобразно обрабатывает свойство padding, поэтому лучше отступы делать с помощью пустых строк с фиксированным свойством width (для горизонтальных отступов) или height (для вертикальных отступов):
  2. <tr>
      <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
    </tr>
    
  3. Outlook ужасно воспринимает кнопки сделанные из ссылок с помощью padding и не закрашивает их до конца, поэтому при создании кнопки padding лучше не использовать, а задавать цвет окружения с помошью border:
    Вместо

    <a href="..." style="background:#4da211;padding:8px;">Button</a>
    

    Стоит задать окружение кнопки так:

    <a href="..." style="background:#4da211;border:8px solid #4da211;">Button</a>
    

    Серьезная кнопка может выглядеть даже так:

  4. <a href="..." style="width:150px;white-space:normal;word-break:break-all;background:#4da211;text-shadow: 0 -1px 0 #0054a6;border-color:#499910;margin-bottom:5px;margin-right:5px;font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#ffffff;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;border: 8px solid #4da211;text-decoration:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-weight:bold;text-align:center;">Button</a>
    

А вот верстка целого письма:

<table width="100%" align="center" cellpadding="0" cellspacing="0" style="background-color: #f1f5f8; border-spacing: 0px;padding: 0; max-width: 800px; min-width: 450px; width: 100%; border: 1px solid #cccccc; padding: 25px 0 25px 0;">
      <tbody><tr>
        <td>
          <table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; width: 90%; display: table; border-spacing: 0px;" border="0" align="center">
            <tbody><tr>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
            </tr>
            <tr>
              <td width="25" style="width:25px;background-color: #ffffff!important;"></td>
              <td style="background-color: #ffffff!important;max-height:70px;">
                <a style="border:none;display:block;max-height:70px;text-decoration:none;" href="site.net" target="_blank">
                  <img alt="logo" border="0" src="http://site.net/logo1.png" style="display: block;">
                </a>
              </td>
              <td align="right" valign="top" style="background-color: #ffffff!important;">
                <a style="border:none;display:block;text-decoration:none;" href="site.net" target="_blank">
                  <img alt="logo" border="0" src="http://site.net/logo2.png" style="display: block;">
                </a>
              </td>
              <td width="25" bgcolor="#ffffff" style="width:25px;background-color:#ffffff!important;"></td>
            </tr>
            <tr>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
              <td height="25" bgcolor="#ffffff" style="height:25px;background-color:#ffffff!important;"></td>
            </tr>
            <tr><td width="25" bgcolor="#ffffff" style="width:25px; background-color: #ffffff!important;"></td>
              <td colspan="2"><table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; width: 100%; display: table; border-spacing: 0px;" border="0" align="center">
                <tbody><tr>
                  <td width="100%" bgcolor="#ffffff" style="width:100%;background-color:#ffffff!important;">
                    <h2 style="width:100%;color:#000000!important;background:none!important;font-size:22px;font-weight:bold;font-family:Arial,Helvetica,sans-serif;font-stretch:condensed;margin:0;padding-top:20px;padding-bottom:0px;outline:none;">
                      
  Title of the email

                    </h2>
                    <br></td>
                  </tr>
                  
  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;">To confirm ... please click on the following link: </span></td></tr>
  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;">
    <a href="http://site.net">site.net</a>
</span></td></tr>  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;"></span></td></tr>
  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td></tr>

                  <tr>
                    <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
                  </tr>
                  
                  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;"></span></td></tr>
                  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;"></span></td></tr>
                  <tr><td align="left" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;">Best regards,</span></td></tr>
                  <tr><td align="left" style="padding-bottom:10px" valign="top"><span style="font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:20px;color:#000000;">The <a rel="nofollow" style="color:#000000;text-decoration:none;">our-site.net</a> Team</span></td></tr>
                </tbody></table>
              </td>
              <td width="25" bgcolor="#ffffff" style="width:25px;background-color:#ffffff!important;"></td>
            </tr>
            <tr>
              <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
              <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
              <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
              <td height="10" bgcolor="#ffffff" style="height:10px;background-color:#ffffff!important;"></td>
            </tr>
          </tbody></table>
        </td>
      </tr>
      <tr>
        <td>
          <table cellpadding="0" cellspacing="0" bgcolor="#f1f5f8" style="background-color:#f1f5f8;width:90%;display:table;border-spacing:0px;border-collapse:collapse;" border="0" align="center">
            <tbody>
              <tr>
                <td height="10" bgcolor="#f1f5f8" style="height:10px;background-color:#f1f5f8!important;"></td>
              </tr>
              <tr><td align="left" valign="top" style="vertical-align:top;"><span style="font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:18px;color:#aaaaaa;">
                <a rel="nofollow" style="color:#aaaaaa;text-decoration:none;">link.net</a>, some text like legal address should be here
              </span></td></tr>
              <tr>
                <td height="10" bgcolor="#f1f5f8" style="height:10px;background-color:#f1f5f8!important;"></td>
              </tr>
            </tbody></table>
          </td>
        </tr>
      </tbody></table>

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *