Digital Overload’s technical blog

Recently we were asked to create an Outlook email footer for one of our clients. Like anything its easy when you know how…

As some people may not be aware of what is required, we have detailed the steps needed to create and configure an email footer for Outlook.

Step 1:
Open your Outlook email client and from the top menu click on “Tools” > “Options…” which should bring up a options configuration pop-up.

Step 2:
Click on the tab at the top of the pop-up that reads “Signatures” this is the configuration panel that will allow you to edit all of your signature settings.

Step 3:
Click on the “New” button to the right of the panel, this will create a new footer template for you to edit. (you can rename this footer by clicking on the “Rename” button)

Step 4:
Click on the radio button that reads “Add signature to all outgoing messages”

Text Footer

Step 5:
If you don’t have a HTML footer file simply type in the information you require in your email footers, we suggest the following:

- - - - - - - - - - - - - - -
Name Here
Position in Company

T: 01603 630631
F: 01603 630632
W: www.digitaloverload.co.uk

HTML Footer

Step 5:
If you do have a HTML footer file then click on the radio button that reads “File”, This will activate the “browse” button on the right hand side. Select your HTML file from the pop-up provided.

Finish

Once you have included your chosen footer click the “Apply” button at the bottom right of the configuration panel.

One last thing

When using a HTML footer your sending preference MUST be HTML or the email footer will not appear. To make sure your email preference is correct click on the “Send” tab at the top of the “Options” configuration panel (you should currently still be in the “Signatures” section)

Once you have clicked on the “Send” tab you will see a different configuration panel. Under the “Mail Sending Format” section ensure that “HTML” is selected.

Now click “Apply” and then “Ok”

All Done!

You should now be able to send emails with your footer attached. If you get stuck please look at the Outlook Footer Video Tutorial

Recently we were asked to advise on the best way to create email footer for one of our clients, this is fine until you find out that your client is using a Mac with Entourage as their default email client!

Normally we would create an email footer.html file and supply this to the client explaining how they would include this within their email client. Unfortunately that would be to simple for Entourage and it would appear that there’s no easy and reliable way to export/import email footers.

After lots of searching on the web along with a good helping of trial and error we were able to document the process required to create an email signature for Entourage. In addition to creating the email signature we also detail how to change your email sending preference to HTML and how to get your chosen signature to display by default.

Please download the PDF Tutorial for Entourage Email Footers

Does anyone else get that un-easy feeling when marking up a logo like so?

<p><a href=”/index.html”><img src=”mylogo.gif” alt=”My company”/></a></p>

It most commonly sits in the trusty “header” div. Maybe you didn’t even bother with the paragraph element at all and why the hell should you, it’s not a paragraph after all…. perhaps we’re just easing our conscience by wrapping it in something that gives it some vague semantic meaning.

What’s perhaps more frustrating with the above mark-up is that it’ll more than likely sit above almost all other content - we may as well make it an H1. That’s a whole other debate and personally I’m not a fan of the logo playing a semantic part in the site’s layout - if you are, you can stop reading here.

The background image option

Since we have our “header” div spanning the entire top section of the site, we could just code the logo in as a background image. Hey presto we lose the almost meaningless markup above and neatly hide away the logo to presentation layer, it’s only branding after all, right? Problem. The logo’s no longer clickable, and everyone loves a clickable logo, it goes straight back to the home page, a standard convention known and accepted by developers and users globally. Are we willing to sacrifice this? No way. It’s such a fundamental part of what constitutes standard practice on the web that losing this functionality is going to do nothing but annoy the user.

The menu option

So in that “header” section, I bet you’ve got a menu, am I right? Something similar to this:

<div id=”header”>
    <p id=”logo”><a href=”/index.html”><img src=”mylogo.gif” alt=”My company”/></a></p>
    <ul>
        <li><a href=”products.html”>Products</a></li>
        <li><a href=”services.html”>Services</a></li>
        <li><a href=”aboutus.html”>About Us</a></li>
        <li><a href=”contact.html”>Contact</a></li>
    </ul>
</div>

Hands up, that’s how most of my headers used to look. Our goal is to place the logo somewhere more useful, more meaningful. Well, we haven’t got a “home” link in our menu so why not place it in there?

<div id=”header”>
    <ul>
        <li id=”logo”><a href=”index.html”><img src=”mylogo.gif” alt=”Home”/></a></li>
        <li><a href=”products.html”>Products</a></li>
        <li><a href=”services.html”>Services</a></li>
        <li><a href=”aboutus.html”>About Us</a></li>
        <li><a href=”contact.html”>Contact</a></li>
    </ul>
</div>

The id of “logo” has been passed to the LI element containing the logo image. This would then be positioned absolutely in the “header” to sit wherever it’s required. Of course it the logo’s simply text then you’ll need to set some clever relative unit based padding on your header but it’s nonetheless accomplishable.

There’s a good chance your menu also has a “home” link and you require that both that and the logo should be links - this is where things can get a little bit funky. Try the following mark-up:

<div id=”header”>
    <ul>
        <li><a href=”index.html”><img id=”logo” src=”mylogo.gif” alt=”My company ”/>Home</a></li>
        <li><a href=”products.html”>Products</a></li>
        <li><a href=”services.html”>Services</a></li>
        <li><a href=”aboutus.html”>About Us</a></li>
        <li><a href=”contact.html”>Contact</a></li>
    </ul>
</div>

The “logo” id has now been moved on the logo image element, this is positioned absolutely as before. From a content perspective the first link in the list is “My company home”, note that space after “My company” in the logo image alt text, it’s important that it goes in the alt text as opposed to directly after the image element as to not effect the rendering of the first link.

If you now apply a hover state to the A elements you’ll notice a pleasant side-effect. Whatever styling you apply to the hover state of the A element will of course be triggered when you hover over the logo giving the user a clear visual connection between the logo and the “home” link - maybe your “home” link will get a different background colour, maybe your background sprite will move, whatever the hover effect it’ll be kicked off on hovering over the logo.

Check the source of our services page for an example!

James.