Email Signature - Beginner's Help Needed!, I have begun to script my own Email signature but I am struggling with |
Email Signature - Beginner's Help Needed!, I have begun to script my own Email signature but I am struggling with |
SamB-R |
Jul 17 2017, 05:35 AM
Post
#1
|
Group: Members Posts: 2 Joined: 17-July 17 Member No.: 26,463 |
Dear All,
I appreciate this may be a bit of an easy question but I am about two weeks into self-teaching very basic HTML with no tech background at all. I thought I would start with something easy - like an email signature - but I've since got a little stuck. I want to use the following fonts in my code, Fonts TradeGothic#2 SimpleIcons FontAwesome Colours Grey - #8d8e8c Black - #000000 I designed the look of the signature in Adobe AI before I began the coding: Signature Plan My questions are:- 1. How do I get the fonts into this code? 2. How do I keep the right-hand side icons inline and in-place? 3. Is there a better way for me to insert the photo than the one I have used? 4. Where have I gone wrong and is it a real mess? CODE <!DOCTYPE html> <head> <link rel="stylesheet" href="E-Mail Signatures/path/to/font-awesome/css/font-awesome.min.css"> <link href="E-Mail Signatures/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600,700,800,900" /> <style type="text/css"> /* Client-Specific styles */ #outlook a { padding:0; } /* Force Outlook to provide a "view in browser" menu link. */ body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; border:0; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ .ExternalClass { width:100%; } /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } /* Force Hotmail to display normal line spacing.*/ img { outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } a img { border:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic; } p { margin:0px 0px !important; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } table td { border-collapse:collapse; } /* iPad Styles */ @media only screen and (max-width: 640px) { a[href^="tel"], a[href^="sms"] { text-decoration:none; color:#000000; pointer-events:none; cursor:default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration:default; color:#000000 !important; pointer-events:auto; cursor:default; } } /* iPhone Styles */ @media only screen and (max-width: 480px) { a[href^="tel"], a[href^="sms"] { text-decoration:none; color:#000000; pointer-events:none; cursor:default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration:default; color:#000000 !important; pointer-events:auto; cursor:default; } } /* Responsive styles */ @media only screen and (max-width: 480px) { td[class=wrapper] { padding-top:0 !important; padding-left:0 !important; padding-right:0 !important; } table[class=mobile-view], td[class=mobile-view], img[class=mobile-view] { width:320px !important; height:auto !important; } td[class=clump] { display:block !important; padding-left:0 !important; padding-right:0 !important; width:100% !important; } td[class=aligncenter] { width:300px !important; height:auto !important; text-align:center !important; } } </style> </head> <body> <table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td style="background:#000000;"> <table width="540" border="0" cellspacing="0" cellpadding="0" class="mobile-view" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td valign="top" align="left" class="clump"> <img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/19059707_10158860439835261_115505870362470785_n.jpg?oh=aa800bddabf19722d6cf10e2f208fd5a&oe=59D2FB0E" alt="Avatar" border="0" width="130" style="display:block; outline:none; border:0;" /> </td> <td valign="top" align="left" class="clump" style="padding:0 0 0 0;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td style="padding:15px 0 0 20px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tr> <td style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:22px; line-height:30px; font-weight:800; color:#8d8e8c;">Sam Ballard-Robinson</td> </tr> <tr> <td style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:14px; line-height:18px; font-weight:500; color:#8d8e8c;">Lead Consultant</td> </tr> </table> </td> </tr> <tr> <td style="padding:10px 0 0 15px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="40%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="25" height="30" valign="top"><img src="images/icon_darkblue_address.png" alt="Address" border="0" width="22" style="display:block; border:0; outline:none;" /></td> <!-- Edit your Address --> <td width="" height="30" valign="top" align="left" style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:12px; line-height:24px; font-weight:600; color:#8d8e8c;"> 84 Exeter Road, Selly Oak, Birmingham, West Midlands, B29 6EX</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="padding:0 0 0 15px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="40%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="25" height="30" valign="top"><img src="images/icon_darkblue_phone.png" alt="Phone" border="0" width="22" style="display:block; border:0; outline:none;" /></td> <td width="" height="30" valign="top" align="left" style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:12px; line-height:24px; font-weight:600; color:#8d8e8c;"> +44 (0) 7837 843 147</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="padding:0 0 0 15px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="60%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="28" height="30" valign="top"><img src="images/icon_black_email.png" alt="Email" border="0" width="22" style="display:block; border:0; outline:none;" /></td> <td width="" height="30" valign="top" align="left" style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:12px; line-height:24px; font-weight:600; color:#8d8e8c;"><a href="mailto:sam.b.r@me.com" style="text-decoration:none; color:#8d8e8c;">sam.b.r@me.com</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="padding:0 0 9px 15px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="40%" class="clump"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> <tbody> <tr> <td width="28" height="30" valign="top"><img src="images/icon_darkblue_website.png" alt="Web" border="0" width="22" style="display:block; border:0; outline:none;" /></td> <td width="" height="30" valign="top" align="left" style="font-family:'TradeGothicLTStd-Bd2', sans-serif, Trade Gothic LT Std; font-size:12px; line-height:24px; font-weight:600; color:#8d8e8c;"><a href="http://www.ballardrobinson.wordpress.com" style="text-decoration:none; color:#8d8e8c;">ballardrobinson.com</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td valign="top" align="right" style="background:#000000; padding:15px 15px 0 50px;"> <a href="https://www.facebook.com/ballardrobinson"><img src="images/social_icon_default_facebook.png" alt="Facebook" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a> <a href="https://www.twitter.com/ballardrobinson"><img src="images/social_icon_default_twitter.png" alt="Twitter" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a> <a href="https://www.linkedin.com/in/ballardrobinson"><img src="images/social_icon_default_linkedin.png" alt="LinkedIN" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a> <a href="https://www.instagram.com/ballardrobinson"><img src="images/social_icon_default_instagram.png" alt="Instagram" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a> <a href="whatsapp://call?number=+4407837843147"><img src="images/social_icon_default_whatsapp.png" alt="Whatsapp" width="35" border="0" style="padding:0 0 3px 0; display:block; border:0; outline:none;" /></a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> Any help would be much appreciated! I am lost now! |
pandy |
Jul 17 2017, 06:38 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Well, HTML email isn't the easiest place the start. Email clients aren't browsers and you need to keep things as simple as possible to make it work in all possible clients, including web mail. Still, some clients won't accept HTML and some users may turn it off even in the clients that do.
To start somewhere, to use custom fonts you need to use webfonts, embedded fonts. I.e. you basically need to to upload the font file somewhere and it should be in an acceptable format. Then you need to link to it in your CSS and do some other CSS tricks. I wouldn't even try it for mail. Use common fonts instead that most people have. I think it's still suggested that you use inline CSS only but don't trust me on that. Your CSS has traces from Office. Office HTML and CSS doesn't fare well on the web, and I guess it does even worse in email. |
SamB-R |
Jul 17 2017, 06:59 AM
Post
#3
|
Group: Members Posts: 2 Joined: 17-July 17 Member No.: 26,463 |
Well, HTML email isn't the easiest place the start. Email clients aren't browsers and you need to keep things as simple as possible to make it work in all possible clients, including web mail. Still, some clients won't accept HTML and some users may turn it off even in the clients that do. To start somewhere, to use custom fonts you need to use webfonts, embedded fonts. I.e. you basically need to to upload the font file somewhere and it should be in an acceptable format. Then you need to link to it in your CSS and do some other CSS tricks. I wouldn't even try it for mail. Use common fonts instead that most people have. I think it's still suggested that you use inline CSS only but don't trust me on that. Your CSS has traces from Office. Office HTML and CSS doesn't fare well on the web, and I guess it does even worse in email. Hi Pandy, Thank you for your help. I see exactly where you're coming from on this one - I'd not considered email clients vs. browsers. Would you recommend using .png's/images of the 'FontAwesome' and 'SimpleIcon' characters as a replacement for the actual font? How would/could I code for these and keep them in line? |
Christian J |
Jul 17 2017, 05:07 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Email signatures can be inserted automatically by your email program as well, even in plain text messages (no HTML needed).
|
pandy |
Jul 17 2017, 06:20 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
They won't look like that.
If you go for images, I'd rather make the whole signature an image than fiddle with individual font image. But what I really would do is use a more common font. |
Lo-Fi Version | Time is now: 28th March 2024 - 11:44 AM |