email => Skottbeständiga knappar

Introduktion

Knappar kan vara en av de mest frustrerande delarna av e-postutveckling, men de kan byggas med kod istället för bilder och visas fortfarande bra i alla större e-postklienter. När den är inbyggd i HTML / CSS, visas en knapp i alla e-postklienter även med avstängda bilder. Både innehållet och stilen för varje knapp kan snabbt redigeras i HTML / CSS-mall.

Anmärkningar

Progressiv förbättring med mediafrågor

För klienter som stöder mediefrågor kan något av exemplen ovan gradvis förbättra knappen.

T.ex. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }

Lägg till mer horisontell polstring i Outlook

Att villkorligt lägga till icke-brytande utrymme på varje sida av en knapplänk kan öka den horisontella stoppningen för Outlook. Speciellt användbart för kantbaserade knappar.

`<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->Link Text<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->`

Knappar. Cm Knapp

Campaign Monitor byggde ett snyggt verktyg som genererar kod för knappar i HTML-e-post. Den använder en cominbation os CSS och VML (för Microsoft Outlook) för att visa bakgrundsbilder eller mönster i de flesta större e-postklienter.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
    <v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
  </v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>

Visar något liknande:

Obs : Eftersom den klickbara hyperlänken i Outlook finns i en VML tagg, har vissa e-postleverantörer problem med att spåra klick på den här länken.

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">

Polstringsbaserade knappar

Den här tekniken bygger på stoppning på tabellcellnivån för att strukturera knappen och både HTML-attribut och CSS för att utforma knappen. Ingen VML betyder enklare kod, men inga bakgrundsbilder i Outlook.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Nackdelen med vadderingsbaserade knappar är att hela knappområdet inte är klickbart, bara länken i tabellcellen är.

Gränsbaserade knappar

Denna teknik bygger på att lägga till tjocka gränser till själva länken för att bygga knappens CTA. Att använda gränser förstås allmänt av e-postklienter, men begränsar knappens utseende heldragna färger.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Länktaggen är inställd på att vara ett blocknivåelement och att gränser används för att tillhandahålla polstring, så att hela knappen är förflyttbar + klickbar, även i äldre skrivbordsklienter.

Nackdelen med kantbaserade knappar är att Outlook kommer att minska storleken på gränserna med en liten mängd och, som nämnts ovan, stöds inte bakgrundsbilder.

Polstring + kantbaserade knappar

Denna teknik använder en kombination av kantbaserade och vadderingsbaserade knappar, styling av länken med både stoppning och åtminstone en solid 1px kant. Bakgrundsfärgen måste appliceras på istället för i detta fall eftersom Outlook känner igen horisontell polstring på taggen (eftersom det inte är en blocknivå-tagg).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Nackdelen med polstring + kantbaserade knappar är att det skiljer stylingen mellan en <td> och <a> tagg, så det kan vara svårt att underhålla. Men bara en knapp används, specifika dimensioner krävs inte, och bakgrundsbilder kan stöds.

Kulssäker knapp med distanser

Denna knapp härstammar från detta exempel via e-post på syra. Den är helt kodbaserad, så den kommer att visas utan nedladdade bilder, och hela knappen är svängbar + klickbar.

Dessutom inkluderar detta exempel också distansavstånd för att kontrollera hur mycket vertikalt utrymme som före och efter knappen.

<table width="100%">
    <tr>
      <td>
        <!-- Top Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Top Spacer : END -->
        <!-- Button : BEGIN -->
        <table border="0" align="left" cellpadding="0" cellspacing="0">
          <tbody>
          <tr>
            <td align="left">
              <table border="0" cellpadding="0" cellspacing="0" width="150">
                <tr>
                  <td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                    <a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- Button : END -->
        <!-- Bottom Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Bottom Spacer : END -->
      </td>
    </tr>
  </table>

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

email
Skottbeständiga knappar

Sök…