The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Email Signature - Beginner's Help Needed!, I have begun to script my own Email signature but I am struggling with
SamB-R
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 17 2017, 06:38 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SamB-R
post Jul 17 2017, 06:59 AM
Post #3





Group: Members
Posts: 2
Joined: 17-July 17
Member No.: 26,463



QUOTE(pandy @ Jul 17 2017, 06:38 AM) *

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 17 2017, 05:07 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,731
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 17 2017, 06:20 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd November 2017 - 12:21 AM