Email Design Guidelines
What do we get asked about most at Rocketseed? Easy – Email Design
What’s the best email signature banner size? Which email banner images work best? Can Rocketseed give hands-on help with email design?
It’s our users’ most popular subject for one simple reason…when it comes to email signatures and banners, design makes all the difference.
Below you’ll find our recommended email banner specs and best-practice design tips so that, whether you design your own or use our design services, your email signatures and banners will get the biggest results with Rocketseed.
Email banner specifications
There is a maximum email banner width of 650 pixels and a recommended maximum height of between 90 and 150 pixels when designing a header or footer. This ensures that your email banner will be easily viewable (but not obstructive) in any preview pane or smartphone.
Banners should be created as .PNG files and should be designed to a web resolution of 72dpi to display correctly on 100% zoom view.
While Rocketseed supports .JPG and .GIF images, with Dark Mode view becoming more prevalent, images with transparent backgrounds (i.e. PNGs) will better preserve the integrity of your design.
The email banner image file should be no larger than 40kb to ensure the additional ‘weight’ of the email is kept minimal.
Download our latest Email Signature Design Guidelines:
Create designs that drive Click-through
These simple design tips can really make your email banners ‘click’, and get your audience engaged, whilst boosting your marketing campaign:
- Always include a compellingly clickable call to action
- Make your email banner images crystal clear (never pixelated!) and completely on message with your campaign
For more guidance on email banner design, take a look at our 33 great email signature banner examples.
Email Signature Design Tips
Your email signature should embody your brand and engage your audience. And because consistency is key, make sure your signatures are completely on brand with regard to colours, fonts and logos.
Make your signature ‘social’ by incorporating relevant social media icons to promote your social channels – but only those that you’re actively managing and regularly updating. A link to a neglected social channel will only tarnish your brand and increase bounce rates.
Promote your newsletter sign-up form or blog in your signature. Use branded icons for the best effect. You can also take advantage of list builder, which comes as part of the offering from Rocketseed – to capture and manage sign-ups.
The key tip for all email signatures and email banner images is obvious (but often overlooked) – Keep all your contact details and calls to action clear and simple.
Email Signature Dimensions
Signatures should be a maximum email signature width of 650 pixels and a maximum height of between 90 and 150 pixels.
Images within the signature design should be .PNG files with transparent backgrounds and should be designed to a web resolution of 72dpi to display correctly on 100% zoom view. While Rocketseed supports .JPG and .GIF images, with Dark Mode view becoming more prevalent, images with transparent backgrounds (i.e. PNGs) will better preserve the integrity of your design.
The email signature banner size file may not exceed 10kb (when optimized for web).
All email signatures will be converted to HTML, therefore you should use only ‘web safe’ system fonts in your design.
Things to note whether using Rocketseed or not
If you choose to use transparent backgrounds for images bear in mind that white, dark grey and black text may have rendering issues in either light or dark mode. Emails with images over the size of 15kb show the images as attachments in Google inboxes.
Newsletter Design Tips
Your email newsletter needs to capture attention at first glance. It’s crucial to ensure your design is visually appealing, if it looks good, recipients are more likely to engage and click.
Our resource section will provide you with in-depth guidelines, from recommended email newsletter dimensions to colours and fonts that help you deliver a well-executed email newsletter, and get the most out of your marketing campaign.
A HTML email is best designed in a linear table-based structure in order to keep the build tidy and on brand. Remember, email clients will all render text in a slightly different way, so a little room for the text to display slightly larger or smaller without impacting the design is always preferable in terms of top email marketing tips.
Avoid layering elements such as placing text over the top of background images. Text should always be designed onto a plain colour background.
Patterned backgrounds and borders are hard to match up exactly and may render differently in different email clients. So, which ever email marketing platform your using, try to stay away from key mistakes.
We suggest not using large images, especially in the newsletter header design, as this will be the first part of the newsletter recipients see in their preview pane. Images can be broken up into more manageable pieces that can be coded within a table structure. Images should have maximum quality resolution of 72 dpi and no wider than 600 pixels.
Colours on the web are in RGB or hex value format. Please create the original file using hex only. Use hexadecimal values when defining the colour of backgrounds, borders and fonts in your content. Include the hash sign (#) before the value to ensure it displays consistently across all email clients (for example: #333333).
HTML will be rendered differently in the various email and web environments, the consistency of its styling is key. Always use web safe fonts for text as these will render across all email clients. Size your font in pixels (px) as opposed to % to help keep text to the size you require.
There are recommended email newsletter dimensions, to optimise your newsletter for mobile and tablet devices. Newsletters should be designed to a maximum width of 600 pixels. Any design which is larger than this may require users to scroll horizontally or the mailer may not display as intended.
Currently there is no global standard for HTML and CSS in email, so email clients such as Outlook, Gmail, Yahoo, etc will vary in how they render your code, therefore testing is key. Rocketmailer allows the client to have a ‘Test Group’ of addresses to test the campaign before sending.
Or… Let us deal with your design
We design branded email signatures, banners and newsletters all day, every day. And they’ve achieved some great results for our clients. So, if you’d like us to take a look at your design brief, please get in touch.