So i bought an iPhone recently and got it updated to iOS 6. Yes I do realize the maps suck, get over it. Anyway, after a couple of days I wanted to see if HTML signatures could be used in the native mail app. As it turns out they can since iOS 6 (unless you had a jailbroken device). So, how does the HTML perform? Close enough. It’s not perfect but close enough to be usable. I hope Apple improves it a bit in the future. So, let’s take a look how you can make your own or import the one from your desktop.
Make it HTML
First things first, you’ll need to make or transfer your signature to HTML. The only thing to note is if you plan on using images put them somewhere on the web and call them by using the full URL (I use mine directly from the header: http://blog.miklavcic.si/wp-content/uploads/2012/01/miklavcic_logo_new.png) If you already have an HTML file skip to the next step. For those who don’t I’m not going to explain how to code HTML, there’s heaps of tutorials on the web. If it helps, here’s the code from mine:
[sourcecode language=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px; color:black; font-family:Cambria, Georgia, ‘Times New Roman’, Times, serif;" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uroš Miklavčič</title>
</head>
<body style="font-size:14px; color:black; font-family:Cambria, Georgia, ‘Times New Roman’, Times, serif;" >
<span style="font-size:14px; color:black; font-family:Cambria, Georgia, ‘Times New Roman’, Times, serif;">
Lep pozdrav,
</span>
<table style="margin-top:15px;">
<tr>
<td style="padding-right:10px; text-align:left;"><a href="http://miklavcic.si" style="line-height:30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#00aeef; text-decoration:none; font-weight:bold;"><img style="border:none;" src="http://blog.miklavcic.si/wp-content/uploads/2012/01/miklavcic_logo_new.png?p=123" />
</a></td>
</tr>
<tr>
<td>
<table style="margin-left:122px; border-collapse:collapse; line-height:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#808080;">
<tr>
<td>
<p style="margin-top:5px;">
<strong>freelance graphic designer</strong>
</p>
<p style="margin-top:15px;">
Medijske Toplice 19<br />
1411, Izlake<br />
Slovenia (EU)
</p>
<p style="margin-top:15px;">
<strong>tel.: </strong>+386 (0) 41 455 850
</p>
<p style="margin-top:15px;">
<strong>@: </strong><a style="text-decoration:none; color:#00aeef; border:none;" href="mailto:uros@miklavcic.si">uros@miklavcic.si</a> | <img src="http://blog.miklavcic.si/wp-content/uploads/2012/09/twitt.png" /><strong>: </strong><a style="text-decoration:none; color:#00aeef; border:none;" target="_blank" href="http://titter.com/uros_m">@uros_m</a> | <strong>w: </strong><a target="_blank" style="text-decoration:none; color:#00aeef; border:none;" href="http://miklavcic.si">miklavcic.si</a>
</p>
</td>
</tr>
<!–<tr>
<td height="25" style="padding: 0px 5px; text-align:left; border-right:1px solid #808285; padding: 0px 5px;">Uroš<strong style="color:#808285"> Miklavčič</strong></td>
<td style="padding: 0px 5px; " height="25">freelance<strong style="color:#808285"> graphic </strong>designer</td>
</tr>
<tr>
<td height="25" style="padding: 0px 5px; text-align:left; border-right:1px solid #808285">Medijske <strong style="color:#808285">Toplice </strong>19</td>
<td style="padding: 0px 5px;" height="25">1411<strong style="color:#808285">izlake</strong></td>
</tr>
<tr>
<td height="25" style="padding: 0px 5px; text-align:left; border-right:1px solid #808285">mob:<strong style="color:#808285"> +386 41 </strong>455 <strong style="color:#808285">850</strong></td>
<td style="padding: 0px 5px; " height="25"><a style="line-height:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#00aeef; text-decoration:none; font-weight:bold;" href="mailto:uros@miklavcic.si"><strong style="color:#808285">uros</strong>@<strong style="color:#808285">miklavcic</strong>.si</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:right;" colspan="2">
<a href="http://havoc.si" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin-right:10px; color:#00aeef; text-decoration:none; font-weight:bold;">http://<strong style="color:#00aeef">miklavcic</strong>.si</a>
</td>
</tr>–>
</table>
<p style="text-align: center; font-size:12px; color:#aaaaaa; font-family:Cambria, Georgia, ‘Times New Roman’, Times, serif; border-top:1px dotted #aaaaaa; padding-top:3px; margin-top:20px;">
To sporočilo, vključno z vsemi pripetimi dokumenti, je namenjeno izključno naslovniku sporočila, njegova vsebina pa je lahko zaupne narave in varovana kot poslovna skrivnost, osebni podatek ali kot avtorsko delo. Nepooblaščeno pošiljanje, spreminjanje ali razkritje vsebine tega sporočila je nezakonito. Če prejmete sporočilo po pomoti, ga takoj izbrišite iz sistema. Vsebina tega sporočila, vključno z vsemi pripetimi dokumenti, je last studia UM DESIGN – v kolikor v telesu sporočila to ni drugače določeno.
</p>
<p style="font-size:14px; color:black; font-family:Cambria, Georgia, ‘Times New Roman’, Times, serif;" > </p>
</body>
</html>
[/sourcecode]
Upload to DropBox or Web
Assuming you have your signature in an HTML file you’ll need to put it somewhere you’ll be able to open it on your iDevice. I decided to use DropBox but puttiong it somewhere on your hosting or similar will work just fine.
Open the HTML file on your iDevice
Go to the DropBox app, locate your file and open it. Or open the correct URL with mobile Safari if you put the file on your server. Once the file is open and you can view your HTML signature select the whole thing (see image below) and copy it.
Paste it in your signature settings
Now that you’ve copied the whole thing you’ll need to navigate to Settings > Mail, Contacts, Caledars > Signature. Delete the current signature and paste the new one in. You might notice that some text styling (color, size) is off. Those are some of the limitations I mentioned earlier.
Take it for a spin
Now open up your mail app and create an new message. You should see your signature at the bottom (sans some styling). Images should pop up in there too. Send yourself a blank e-mail and open it up in the desktop client or on the web. While Gmail rendered the signature with the image without issues (again, sans styling) and even displayed the image, Outlook needed some encouragement with the image (clicking the option to show the images in the mail). Here’s a comparison of the original (left) and the one from my iPhone (right).
Conclusion
Overall the feature is usable but it’s still in its early stages and Apple will need to smooth out some bumps. I’ll be using it but I think I’ll need to redesign my signature in order to look uniform across all the platforms. Not cool, Apple, not cool.
If you run into troubles don’t hesitate to drop me a line on Twitter.
Leave a Reply
You must be logged in to post a comment.