How to make a stylish Gmail Signature

How to make a stylish Gmail Signature

Gmail has some great functionality but one thing I never liked was the plain email signature .. so I finally did something about it and I’m sharing it with you. Here’s how to make a stylish signature for your free Gmail account. Firstly you need to make a stylish signature using HTML. Secondly, you need to add that to Gmail and this was my sticking point until I found this article: Gmail Setup For Advanced Custom Signatures by Jaime Contreras.

This is how my old signature used to look:

Photographer & Designer in York, UK

Still, as email signatures go, it was better to have one consistent signature than no signature at all! So let’s help you make your Gmail signature better too.

First Phase – Signature Design

First .. you do need to know a little bit about HTML if you wish to make something look good within your signature beyond making text bold or larger. Not to fear I’ve got three designs for you to copy and edit your content into. All you need to do is copy the code into your notepad and edit the content to your details. If you have a business logo, place that into the img src code.

Clean & Simple

Grab the code for this design on CodePen: Clean & Simple

Professional Block

Grab the code for this design on CodePen: Professional Block

Split Colour

Grab the code for this design on CodePen: Split Colour Design

This colourful split design is my new email signature. I am so much happier with it as it clearly shows my two businesses, eventually I’m going to add social media logo and links in time but for now, this is so much better than the old style I shared at the beginning.

How to put your own logo in the signature.

Within the code is a part that looks like this:

<img src="" alt="Cathie Heart" width="120" height="120">

This is the code that finds and put the logo into the signature. The src is the URL where the image is stored. Upload your image to your website or image sharing space like Flickr and grab the URL of where the image is and paste it into this code src between the two ” “. Change the width and height to match the size of your image, I would suggest no bigger than 200 pixels for a signature.

Second & Final Phase – Putting it into Gmail Signature.

This part I learned from this article here: Gmail Setup For Advanced Custom Signatures by Jaime Contreras, its a great article with snapshots. Go visit to follow the instructions with images, I’ve done a simple text prompt below. It’s seven simple steps and soon you’ll have a gorgeous new email signature.

Step 1 – Go to Gmail Settings via the Cog.
Step 2 – Scroll down to the signature block.
Step 3 – Right-click in the signature block, then click Inspect.
Step 4 – This should take you directly to the aria-label=”Signature” div, right-click and then click ‘Edit as HTML’.
Step 5 – Paste in your HTML code, click out of the HTML window.
Step 6 – Within the signature block in Gmail there is a blank paragraph right at the top, click on that space and add a new paragraph / line by hitting enter and then remove it by clicking delete.
Step 7 – Save and you’re done.

The reason for adding and then deleting a line in Step 6 is so that Gmail recognises the new HTML code you’ve added. Click save and you have a brand new boss signature to show off you in your business.

A great email signature is a subtle nod to being professional, something we subconsciously see and respect as a good quality in a business.

The shining knight of passwords

The shining knight of passwords

Passwords, the bane of existence and who can ever remember so many?! Well it’s very easy if you know how, you just need to have a little bit of thinking and come up with a way to combine a unique element per site, some numbers and letters that make up a unique phrase for you.

Graphic with a passwords login with a cloud showing all your information being stored online.

Passwords are the defense between you and another who wants to hack your access and use your personal information. Your password is your shining knight defending you online. Cheesy, yes but true. So let’s make sure you’re safe with the best passwords you can think of.

Think of a unique phrase

For this example, I’m going to write one I will never use ‘Life Sucks’, as an aside I will say life can be hard, we can have lots of obstacles big and small to overcome but I hope never to say ‘life sucks’, spew negativity and check out on life.

So we have a unique phrase.

Now for you, I would recommend trying a little bit of the ‘laws of attraction’ do you have a phrase that summarises exactly what you wish to achieve? Remembering you’re going to be typing this in several times a day it hopefully will be a good one .. but if it’s too hard right this second to think of one, then pick something simple.

Replace some letters with numbers.

There are some numbers and symbols that look like letters. How about a 1 for an l, or 4 for an A, 3 for an E or 0 for an O .. you can see where I’m going.

Here’s a small list of safe symbols you can use in a password: ! ? \ / ‘ # % = ;

Add a slice of uniqueness

For every site it has a name, why not take the first two letter of the site and use that as the unique part of the password. Or maybe the first letter of each word, the last letter of each word? What ever it is that you decide, make sure it comes from the site name in some kind of way.

The great thing about this unique little key is that you can place it anywhere in the password mix.

Lets make a password mix

Now for the password structure. Let’s take your unique phrase that yours, a couple of switched letters and numbers, maybe an uppercase or two as well and combine with that unique splash from the site domain and you have .. a unique password for every single website! Ta-Dah!

So let’s get it going. You can either start, end or put in the middle that unique little site key you’ve decided upon. The choice is yours but once chosen, be consistent with it.

Phrase: Be A Millionaire
Number / Symbol Switch: 3 for an e, ! for an i,  4 for a
Site Identifier: Th

The Password Mix: BeTh4Milliona!r3

There you have it, that lovely unique password that will be different for every single website. Easy peasy right?! .. Right, guys, don’t tell me you’ve stopped reading .. I’m saving your digital world asses right now!

Good design is good business

Good design is good business

Good design is something I fundamentally believe in. Design isn’t just about how something looks but also its function and purpose. Good design, when it really achieved is effortless to the user. Its only when it doesn’t quite work that we notice problems, niggles and annoyances creeping in.

Good design is good business
– Thomas J. Watson

Great design is about problem solving and finding solutions until all the problems and issues melt away and you just use the device, product or service seamlessly into your life. You can find ‘design’ in the way you talk to clients, you may have unknowingly prioritised calling to connect with your clients or email / skype / text etc. You can see design when ever you walk into any specific store and what to buy that stores clothes, objects, food etc. Design inspires feelings, saves effort, instantly recognisable or purposefully blends into the background so that things get done almost like magic. It .. just .. works.

On this site we focus on information design, process design, system design and visual branding design. So lets break it down.

Information Design

Content is key when building a website, with no content .. there is nothing to share. All the design in the world of online websites can be fabulous but deliver no worth because there is no content. How we structure content and what takes priority over lesser content is Information Design, alternatively known as Information Architecture.

You can see it clearly here on this site as Photography, Branding, Design & ETC. These are the key points this business focuses on.

Process Design

This is about how you work as a person and how your team works together. What do you need to do? How do you want to do that thing? Lets take a look at it from customer lead generation.

  • How do you want customers to find you?
  • How will they get in touch with you?
  • How will you collect their information?
  • How will you contact them?
  • What information do you want to know about your customer?

All these kinds of questions will shape a process of how a customer finds you, contacts you and you in return contact them back via their preferred contact method (ie. phone / email). How do you do, the business that you do .. depending on that is then how the system should be designed around how you work. You can alter how the human process works to fit around technical systems but for large scale things its easier to fit the system around the people.

System Design

Right, now we have our content so we know what need to be said, shared and also done. We also know what the business needs to do to function, eg. find customers, sell products, receive emails etc. The previous two ‘Designs’ give us the system requirements for your website.

There’s a reason for having Content and Process discussed first. It sets the stage for the real needs of the website and not what we think is needed based on seeing other businesses. There will be some commonalities but you are uniquely yourself and so is your business in its niche.

Visual Design & Branding

This neatly flows onto the ultimate design that almost everyone knows TheHeartsDesign-BrandingIcebergabout, visual design. Its gotta look good! Instantly recognisable, must evoke feelings .. even if its just calm to continue onwards, that is a feeling. A lack of stress, bolstered by good system design as well as aesthetics.

Most people associate branding with a logo and you’d be right to an extent, a logo is one instantly recognisable aspect of a brand for a product or service. Yet, it isn’t the only thing. Good branding is about a great experience, it’s about what we feel, in addition to what we see.

You can read more about: branding and how its more than just what you see.


Pin It on Pinterest