Email signatures - so simple and yet so complicated. I’ve been asked to create a simple email signature, created a design in Illustrator but I’m having a difficult time replicating it in the gmail settings. I’ve tried using the slice tool to break up the design accordingly, but I continue to run into setbacks.
Because I’d like to assign links to the email address and website, I can’t just upload the entire thing as an image. The blue vertical rule tends to interfere with what I’m trying to create. I’m looking for advice or suggestions on how to make this work in the signature settings of gmail.
I can’t come through with easy solutions to the problems you face on this, but seeing as overly developed email signatures like that which you’ve been asked to construct are a pet peeve of mine, let’s discuss a few points to be considered:
The template you show includes a company web site, so presumably they’ve got a domain. Why then, are their employees using Gmail accounts?
If I have received an email from this employee, why do I need their email signature to include their email address, let alone, then, as a link? This serves no valid purpose whatsoever, unless you count how when I see it, my confidence in the individual and/or the organization is undermined by the shallow thinking it demonstrates.
Yes, you won’t be able to have that and live text. Email clients don’t support the levels of CSS it would require to set what is effectively a 2-column HTML layout.
Perhaps someday the notion that email signatures have to be treated as a marketing opportunity will fade, but untill then, designers like you will continue to pinball between unrealistic expecations and inescapable limitations.
I agree with HotButton, fancy signatures appeal to people, but they don’t realize how problematic they are. There are dozens of different email clients and nearly all have their own settings options, which guarantees that no matter what you do, some people won’t see what you want them to see. Images will be missing and the text will be styled differently.
Anyway, if you’re doing this for someone who’s dead set on it in Gmail, one trick is to build the signature in HTML/CSS, display it in a browser, then cut and paste directly from the browser into Gmail. There might be ways around it (not sure), but I’ve never been able to write HTML directly into Gmail and have always resorted to the copy-from-a-browser method.
For example, the following code displayed in a browser and pasted into the online Gmail composition window looks like the screen capture I’ve pasted in. Adding the logo beneath is the easy part, so I didn’t bother. Like I mentioned, though, whether the recipient sees it or not, is another matter. For additional backwards compatibility with older email clients, you could do the same thing using HTML tables instead of CSS.
Thank you for offering this explanation - I definitely think this solution is worth exploring. However, I’m just not well-versed in coding. How would I go about displaying this in a browser in order to copy it?
Do you have a plain ASCII text editor, like the built-in TextEdit for Macintosh? If so, copy the following, place it in the text editor, save it as something.html. Open it via a browser, which will display the signature. Click on the browser window and select everything in that window. Copy and paste it into the online Gmail window (might work in other email clients too, like a Gmail app or Outlook, but I didn’t test it.
You can play around with the different settings (everything between the first div tag and the closing /div tag).
Thank you for breaking that down, I appreciate it. I followed those steps - used TextEdit, saved as an .html file, opened with FireFox and this is what’s displaying on my end:
The “cheat” way I used to do it was to compile the entire signature in Microsoft Word and then sent the client the Word doc. They could copy/paste the signature into Outlook (with the code embedded, but unseen). This was a compromise because I couldn’t get clients to copy the code itself.
I gave you some bad advice about TextEdit. I don’t use it myself, but thought it was a generic text editor, like the old Macintosh TeachText editor app was (I built my very first website in TeachText back in the mid '90s). I should have known better than to just assume. TextEdit, it turns out, fills up the code with a bunch of hidden rich text stuff. I should have checked first. Sorry.
I use BBEdit to write code on my Mac. It doesn’t add extra stuff into the file since it’s designed to write code. There are lots of other code editors (free and otherwise) that will save the files as raw ascii text. A Google search will find some for the Mac OS. Here’s a link to BBEdit if you’re interested. It’s easy to use — just open it, type stuff then save. If I remember right, it’'ll work for 30 days before a license is needed:
