Come creare una firma e-mail HTML per iPhone o iPad

Se sei dipendente dalle email, soprattutto per lavoro, da questo tutorial imparerai passo dopo passo come creare una firma email HTML per iPhone o iPad.

Una firma e-mail aziendale in HTML dovrebbe includere: il tuo nome, la posizione all'interno dell'organizzazione, il nome dell'azienda, il logo dell'azienda, i tuoi dati di contatto e quelli dell'azienda (telefono, e-mail, indirizzo web).

Nella maggior parte delle applicazioni di posta elettronica come Outlook, Firme HTML vengono aggiunti inserendo il codice HTML nel campo della firma. Per iPhone o iPad è leggermente diverso, ma in entrambi i casi è necessaria la firma HTML.

Come creare una firma e-mail HTML per iPhone o iPad

Come ho detto sopra, prima devi creare la firma HTML (se ce l'hai già, puoi saltare questa parte del tutorial).

Crea la firma HTML

Nel mio esempio ho fatto a Firma e-mail HTML per iPhone qualcosa di più semplice, che comprende: immagine (o logo aziendale), icone di social network con link, nome e cognome, funzione, numero di telefono, indirizzo email e indirizzo web.

Firma e-mail HTML per iPhone
Firma HTML

Se vuoi partire da questo model della firma, il codice HTML è il seguente:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Email Signature</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat">
<style type="text/css">
	img { outline: none; text-decoration: none; border: none; }
	p { margin: 0px !important; }
	a { color: #000 !important; text-decoration:none !important; }

	@media only screen and (max-width: 480px) {
		.heading-one {
			font-size:16px !important;
			line-height:18px !important;
		}
		
		.heading-two {
			font-size:12px !important;
			line-height:14px !important;
		}
		
		.paragraph {
			font-size:10px !important;
			line-height:11px !important;
		}
	}

	href>a { color:#000; text-decoration: none !important; text-decoration: none; }
</style>
</head>

<body>
<!-- EDIT BELOW IF YOU AREN'T OUTLOOK USER -->
<!--[if !mso]><!-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td valign="top" style="display:inline-block; min-width:100px; max-width:100px; padding-right: 20px; padding-bottom: 10px;"><table width="80" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="display: block; height: 100px; text-align: center;"><img src="img/model.jpg" width="100" height="100" alt=""/></td>
					</tr>
					<tr>
						<td style="background: #305dbf; padding-top: 10px; padding-bottom: 10px; text-align: center;"><table border="0" align="center" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td style="padding-right: 15px;"><a href="http://www.facebook.com/" target="_blank"><img src="img/icon-facebook-0.png" width="12" height="12" alt=""/></a></td>
									<td style="padding-right: 15px;"><a href="http://www.twitter.com/" target="_blank"><img src="img/icon-twitter-0.png" width="12" height="12" alt=""/></a></td>
									<td><a href="http://www.linkedin.com/" target="_blank"><img src="img/icon-linkedin-0.png" width="12" height="12" alt=""/></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
			<td valign="top" style="display:inline-block; min-width:300px; max-width:400px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="padding-bottom: 10px;"><span class="heading-one" style="font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:18px; font-weight:600; color:#000; text-transform:uppercase;">John Doe</span><br><span class="heading-two" style="font-family:'Montserrat', Arial, sans-serif; font-size:14px; line-height:16px; font-weight:500; color:#000; text-transform:capitalize;">Creative Director</span></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-phone-10.png" width="16" height="16" alt=""/></td>
									<td><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">858-272-3400</span></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-email-10.png" width="16" height="16" alt=""/></td>
									<td><a href="mailto:youremail@domain.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">hi@website.com</span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-website-10.png" width="16" height="16" alt=""/></td>
									<td><a href="http://www.yourwebsite.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;">www.website.com</span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
		</tr>
	</tbody>
</table>
<!--<![endif]-->

<!-- EDIT BELOW IF YOU ARE OUTLOOK USER -->
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td width="100" valign="top" style="padding-right: 20px; padding-bottom: 10px;"><table width="80" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="display: block; height: 100px; text-align: center;"><img src="img/model.jpg" width="100" height="100" alt=""/></td>
					</tr>
					<tr>
						<td style="background: #305dbf; padding-top: 10px; padding-bottom: 10px; text-align: center;"><table border="0" align="center" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td style="padding-right: 15px;"><a href="http://www.facebook.com/" target="_blank"><img src="img/icon-facebook-0.png" width="12" height="12" alt=""/></a></td>
									<td style="padding-right: 15px;"><a href="http://www.twitter.com/" target="_blank"><img src="img/icon-twitter-0.png" width="12" height="12" alt=""/></a></td>
									<td><a href="http://www.linkedin.com/" target="_blank"><img src="img/icon-linkedin-0.png" width="12" height="12" alt=""/></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
			<td width="400" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td style="padding-bottom: 10px;"><span class="heading-one" style="font-family:'Montserrat', Arial, sans-serif; font-size:16px; line-height:18px; font-weight:600; color:#000; text-transform:uppercase;"><font face="'Montserrat', Arial, sans-serif !important;">John Doe</font></span><br><span class="heading-two" style="font-family:'Montserrat', Arial, sans-serif; font-size:14px; line-height:16px; font-weight:500; color:#000; text-transform:capitalize;"><font face="'Montserrat', Arial, sans-serif !important;">Creative Director</font></span></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-phone-10.png" width="16" height="16" alt=""/></td>
									<td><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">858-272-3400</font></span></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td style="padding-bottom: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-email-10.png" width="16" height="16" alt=""/></td>
									<td><a href="mailto:youremail@domain.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">hi@website.com</font></span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
					<tr>
						<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td width="16" style="padding-right: 5px;"><img src="img/icon-website-10.png" width="16" height="16" alt=""/></td>
									<td><a href="http://www.yourwebsite.com" target="_blank" style="color:#000; text-decoration: none !important; text-decoration: none;"><span class="paragraph" style="font-family:'Montserrat', Arial, sans-serif; font-size:12px; line-height:14px; font-weight:400; color:#000;"><font face="'Montserrat', Arial, sans-serif !important;">www.website.com</font></span></a></td>
								</tr>
							</tbody>
						</table></td>
					</tr>
				</tbody>
			</table></td>
		</tr>
	</tbody>
</table>
<![endif]-->
</body>
</html>

Il più semplice è creare una cartella per la firma. Copia questo codice in un editor di testo o HTML, quindi modificalo con i tuoi dati. Alla fine lo salvi con l'estensione .html.

Accanto al file HTML si crea la cartella img in cui includi gli elementi grafici. Immagine e icone. Identifichi questi elementi nel tuo codice HTML. Esempio: <img src="img/icon-email-10.png".../>.

Dopo aver personalizzato la tua firma, apri il file HTML nel tuo browser. Il risultato dovrebbe essere simile all'immagine all'inizio del tutorial.

Come aggiungere la firma HTML per iPhone o iPad

Affinché la firma sia aperta e leggibile dai destinatari, deve essere ospitata su un server o servizio web cloud che ti consente di caricare file HTML e grafica.

metto la mia firma Indirizzo Web.

Firma e-mail sul web
Firma e-mail sul web

Dopo che la firma HTML è stata creata ed è disponibile online, il passaggio successivo consiste nell'aggiungere la firma HTML ai tuoi account e-mail sui tuoi dispositivi iPhone o iPad.

Il tutorial è per gli account e-mail aggiunti all'app Mail presente su tutti i dispositivi iPhone, iPad, Mac.

1. Apri "Settings"poi scorri fino a"Mail".

2. Nelle opzioni "Mail"aprire"Signature".

Come creare una firma e-mail HTML per iPhone o iPad
Come creare una firma e-mail HTML per iPhone o iPad

2. Apri il collegamento web a cui hai la firma e copia tutto il contenuto. Puoi farlo da Safari dispositivi iPhone o iPad. Con la funzione Handoff (Universal Clipboard) abilitato, puoi copiare la firma HTML dal tuo computer Mac o MacLibro.

Copia firma HTML
Copia firma HTML

3. Torna a "Signature” e incolla (paste) il contenuto copiato.

iPhone Firma HTML
iPhone Firma HTML

Dopo questo passaggio, puoi dire di aver imparato come creare e aggiungere una firma e-mail HTML per iPhone o iPad.

Firma HTML in iPhone email
Firma HTML

Correlato: Come creare una firma HTML con un'immagine per Outlook

Non preoccuparti se noti che al punto 3 il testo non è leggibile. Il colore di sfondo verrà copiato dalla sorgente della firma HTML. Quindi, se il destinatario ha l'interfaccia email impostata su un tema "scuro", il tuo messaggio arriverà con uno sfondo bianco.

Appassionato di tecnologia, scrivo con piacere su StealthSettings.com dal 2006. Ho un'ampia esperienza nei sistemi operativi: macOS, Windows e Linux, nonché nei linguaggi di programmazione e nelle piattaforme di blogging (WordPress) e per i negozi online (WooCommerce, Magento, PrestaShop).

Come » iHowTo » iHowTo - iOS » Come creare una firma e-mail HTML per iPhone o iPad
Lascia un tuo commento