Posts

Using HTML to Make Your Email Look Fancy!

UPDATE: I simplified my email signature significantly

Carter D. Lovelace

Journeyman Web Designer | Strategy Lab Marketing

306.537.1357
carter@strategylab.ca


strategylab.ca

 


<p style="color: teal; font-size: 16px;"><strong>Carter D. Lovelace</strong></p>
Journeyman Web Designer | <strong>Strategy Lab Marketing</strong>

▸ <a style="color: #000; text-decoration: none;" href="tel:3065371357">306.537.1357</a>
▸ <a style="color: #000; text-decoration: none;" href="mailto:carter@strategylab.ca">carter@strategylab.ca</a>

<hr style="margin: 2px; border: 1px dashed #333;" width="350px" />

<strong><a style="color: teal; text-decoration: none;" href="https://strategylab.ca"><sup>strategylab.ca</sup></a></strong>

 


Original post below:


Here’s how it looks on a mobile device.

So I’ve just decided to up and write a proper fancy signature for my email, being the web designer that I am.
As you can see by the picture, it looks pretty snazzy!
Below is how it is supposed to look, and below that is the actual code I wrote for it. As you may be able to tell, not all of the styling I did carried over to Gmail but enough did for it to look alright.


May all your adventures be worthy of telling,
Carter D. Lovelace
Strategy Lab Journeyman
(306) 537-1357

[StrategyLab.ca]


<table width="100%">
<tbody>
<tr style="background-color: #111111; border: 0px;">
<td>
<table width="100%" align="center">
<tbody>
<tr>
<td style="background-color: #343434; border: 0px;" width="76%">
<blockquote><span style="color: #ffffff;">May all your adventures be worthy of telling,</span>
<strong><span style="color: #ffffff;">Carter D. Lovelace</span></strong>
<em><span style="color: #ffffff;">Strategy Lab Journeyman</span></em>
<a style="color: #ffffff;" href="tel:3065371357">(306) 537-1357</a></blockquote>
</td>
<td style="background-color: #2f2f2f;" width="4%"></td>
<td style="background-color: #262626;" width="4%"></td>
<td style="background-color: #222222;" width="4%"></td>
<td style="background-color: #1b1b1b;" width="4%"></td>
<td style="background-color: #161616;" width="4%"></td>
<td style="background-color: #111111;" width="4%"></td>
</tr>
<tr>
<td style="background-color: #4ecac2; border: 0px;" colspan="6">
<p style="text-align: center;"><strong><a style="text-decoration: none; color: #ffffff; font-size: 16px;" href="https://strategylab.ca/" target="_blank" rel="noopener noreferrer">[StrategyLab.ca]</a></strong></p>
</td>
<td style="background-color: #4ecac2; border: 0px;">
<p style="text-align: center;"><strong><a style="text-decoration: none; color: #000000; font-size: 20px;" href="https://www.cybersandbox.ca/" target="_blank" rel="noopener noreferrer">♦</a></strong></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>