To create an email signature in Outlook, click the Office button, and then navigate to Outlook > Options. The Outlook Options dialogue box will open 3. From the Outlook Options window, select the email option located in the left side menu and on right side signature options will be available. Outlook always alters imported HTML code, unless you use an OFT template file, a macro trick or Bells & Whistles for Outlook. Save your HTML file as an Outlook OFT email template, then pre-load your email with the OFT template (see this tutorial on how to create an Outlook OFT template from. Having a HTML signature in your emails is a great way to look professional, unique and to promote yourself but creating one isn’t so straightforward. You have to design your signature layout, write up the HTML codes and know how to install it into your preferred email program. In this tutorial, I’ll go over some HTML tips for writing up the HTML codes and give instructions on how to install the email signature into Microsoft Outlook 2011 on a Mac. There are 2 sections in this tutorial: Section 1: HTML Tips For Coding Your Email Signature Section 2: Installing your HTML signature into Outlook 2011 on your Mac If you have basic HTML skills and know how to work with a web server, you will learn how to write up your HTML codes correctly by following Section 1. If you don’t know anything about HTML coding or just don’t have the time to deal with it, you may consider hiring us to do it for you. Please visit for more info. Go straight to Section 2 if you already have your HTML email signature file created and just need installation help. SECTION 1: HTML SIGNATURE CREATION Step 1.1: Design Consideration Today, emails are viewed on desktop computers, laptops and on tablets and smart phones. It is best to keep the width of your HTML email signature as narrow as possible for the best result. Most modern mobile devices have a default width of 640 pixels so it is best to keep your design under that to ensure that the layout doesn’t break on smaller screens. From experience, designs that have a width of 320 pixels and under are the most consistent. NOTE: If your signature design for Outlook 2011 have a width larger than 320 pixels, you will have to manually adjust the width of your signature each time you compose a new email. View that I have created for others. Step 1.2: Signature Information Decide what and how much info you want to display on your signature. For this demonstration, I’ll be using my own with a picture link to my website, name, title, email and some other text links. Feel free to use my design as a template. To see the HTML codes, find “View Source” in your browser menu. Step 1.3: Writing the HTML Codes Here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are so many different e-mail clients out there (most if not all can’t handle CSS and HTML like our internet browsers can) so you have to keep your design and codes as simple and straight forward as possible. • Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical. • Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty. • Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference. • Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs. • Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments. See Step 4 for more info. • Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document. Step 1.4: Saving and Uploading your images to a web server Since we want the email signature to load quickly, make sure to optimize your image with Adobe Photoshop by doing a “Save for Web.” Upload your images to your web server and copy the public path. The public path (absolute URL) should look something like this: “Copy image link and insert it into the appropriate img tags of your HTML file. Step 1.5: Save File and Preview Once you have your email signature coded, save the HTML file to your Desktop and call it “signature.html” Locate file and open it with Safari or Firefox (not tested with other browsers). SECTION 2: HTML SIGNATURE INSTALLATION Step 2.1: Copy Signature Design With your “signature.html” file opened on Safari or Firefox, press Command+A on your keyboard to “Select All.” Then press Command+C to copy design. Step 2.2: Create Placeholder Signature Open Outlook > Preferences > Signatures. Click the plus button on the lower left to create a new signature.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2019
Categories |