Email Design Guidelines 2017

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.

Recommended email banner specs

We recommend a maximum email banner width of 650 pixels and a 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.

Headers and footers should be created as JPG or animated GIF files and should be designed to a web resolution of 72dpi to display correctly on 100% zoom view.

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:

Name*
Email*

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
Email Signature Banner - recommended dimensions

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

We recommend a maximum email signature width of 650 pixels and a maximum height of between 90 and 150 pixels for any Rocketseed email signature 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.

Newsletter Design Tips 2017

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.

Email Design Guidelines - Newsletter Example

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.

Images

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

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).

Styling

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.

Mobile

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.

Testing

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.

Solve marketing challenges with our signature solutions