email => Bottoni a prova di proiettile

introduzione

I pulsanti possono essere una delle parti più frustranti dello sviluppo della posta elettronica, ma possono essere creati con il codice anziché con le immagini e vengono comunque visualizzati correttamente in tutti i principali client di posta elettronica. Quando è costruito in HTML / CSS, un pulsante verrà visualizzato in tutti i client di posta elettronica anche con le immagini disattivate. Sia il contenuto che lo stile di ciascun pulsante possono essere modificati rapidamente nel modello HTML / CSS.

Osservazioni

Miglioramento progressivo con le media query

Per i client che supportano le query multimediali, uno degli esempi sopra può migliorare progressivamente il pulsante.

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

Aggiungi più padding orizzontale in Outlook

L'aggiunta regolare di spazio su entrambi i lati di un collegamento pulsante può aumentare il riempimento orizzontale per Outlook. Particolarmente utile per i pulsanti basati sui bordi.

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

Pulsante Buttons.cm

Campaign Monitor ha creato uno strumento elegante che genera codice per i pulsanti nell'email HTML. Utilizza una finestra di dialogo CSS e VML (per Microsoft Outlook) per visualizzare immagini di sfondo o modelli nella maggior parte dei principali client di posta elettronica.

<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>

Mostrerà qualcosa di simile a questo:

nota : poiché il collegamento ipertestuale selezionabile in Outlook si trova all'interno di un tag VML , alcuni provider di servizi di posta elettronica hanno difficoltà a tracciare i clic su questo link.

<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">

Pulsanti basati su padding

Questa tecnica si basa sul riempimento a livello di cella della tabella per strutturare il pulsante e su entrambi gli attributi HTML e CSS per lo stile del pulsante. Nessun VML significa codice più semplice, ma nessuna immagine di sfondo in 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>

Lo svantaggio dei pulsanti basati su padding è che l'intera area del pulsante non è selezionabile, solo il collegamento all'interno della cella della tabella lo è.

Pulsanti basati sul bordo

Questa tecnica si basa sull'aggiunta di bordi spessi al collegamento stesso per creare il CTA del pulsante. L'uso dei bordi è universalmente compreso dai client di posta elettronica, ma limita i colori uniformi dei pulsanti.

<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>

Il tag link è impostato come un elemento block-level e i bordi vengono utilizzati per fornire il padding, quindi l'intero pulsante è hoverable + cliccabile, anche nei client desktop meno recenti.

Lo svantaggio dei pulsanti basati sul bordo è che Outlook ridurrà la dimensione dei bordi di una piccola quantità e, come accennato in precedenza, le immagini di sfondo non sono supportate.

Padding + pulsanti basati sul bordo

Questa tecnica utilizza una combinazione di pulsanti basati su margini e padding, che designano il collegamento sia con il padding che con almeno un bordo 1px solido. In questo caso, il colore di sfondo deve essere applicato al posto di quello perché Outlook riconosce il riempimento orizzontale sul tag (poiché non è un tag a livello di blocco).

<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>

Lo svantaggio di padding + border-based-buttons è che separa lo stile tra un <td> e <a> , quindi può essere difficile da mantenere. Ma viene utilizzato un solo pulsante, non sono richieste dimensioni specifiche e possono essere supportate le immagini di sfondo.

Pulsante antiproiettile con distanziali

Questo pulsante deriva da questo esempio via Email su Acido. È interamente basato su codice, quindi verrà visualizzato senza immagini scaricate e l'intero pulsante è hoverable + cliccabile.

Inoltre, questo esempio include anche i distanziatori per aiutare a controllare la quantità di spazio verticale visualizzato prima e dopo il pulsante.

<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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

email
Bottoni a prova di proiettile

Ricerca…