Email Design Guidelines

If you prefer to design your own headers and footers, or create your own newsletters, our resource section will provide you with guidelines for design, plus some suggestions on how to get the most out of Rocketseed.

Email Design Guidelines

We recommend a maximum width of 650 pixels and a maximum height of between 90 and 150 pixels for any header or footer design. This is to ensure that banners will be viewable but not obstructive in any email preview pane or smartphone.

Headers and Footers should be designed to a web resolution of 72dpi and should display correctly on 100% zoom view.

The banner file size should be no larger than 40kb to ensure the additional weight of the email is kept minimal.

Headers and Footers should be created as JPG or animated GIF file.

Optimise your Designs and Increase your CTR

Here are some suggestions to help you optimise your designs and improve the effectiveness of your marketing:

  • Strong, specific call to action
  • Images should be clear, relevant to the campaign and should not appear pixelated
  • Use borders and white backgrounds to make the design appear as part of the email and not a “banner”
  • Use shadows and overlaps to create depth

Email Signature Design Tips

Your email signature should reflect your brand. Use signature font colours or logos to achieve brand consistency.

Incorporate relevant social media icons to promote your active social media portals. Don’t incorporate social media links if you are not actively updating or promoting these sites.

Promote your newsletter sign up form or blog in your signature. Use branded icons for the best effect.

Keep contact details clear and simple.

Email Signature Dimensions

We recommend a maximum width of 650 pixels and a maximum height of between 90 and 150 pixels for any RocketSeed email signature design.

The email signature’s file size may not exceed 10kb (when optimized for web).

All email signatures will be converted to HTML, therefore all the fonts used must be system fonts (web safe fonts).

Newsletter Design Tips

An HTML email is best designed in a linear, table-based structure in order to keep the build neat and tidy. 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 preferable.

Avoid layering elements such as placing text over the top of background images. Text should always be designed onto a plain colour background.

Avoid patterned backgrounds and borders as these are hard to match up exactly and may render differently in different email clients.

Images

Avoid large images. Design your mailer so that 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 websafe 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

In order to optimise your newsletter for mobile, mailers 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 will 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.