How to design emails

Basic dimensions

Email designs should be a maximum of 600 to 700px wide. The average desktop email client and most tablets can display an email at those dimensions. Emails are also going to be read on much smaller screens so keep in mind the design should be able to change in order to accommodate a mobile layout. It is quite common for designers to make a desktop version of the email at 600-700px wide and then another version of the email, the mobile version at 300px. Remember there are millions of different phone screen sizes and many different email clients on desktop so keep the design fluid or elastic. It should be able to change from 700px all the way down to 280px.

Resolution
While newer retina displays can display higher resolution images most displays still only display at 72dpi. Email clients suuch as outlook can only display images at their native width so its impossible to use larger high quality images and then shrink them down, which is often done on the web. For these reasons its best to keep your email designs at 72dpi.

Icons, logos and shapes
Wherever possible keep as many of the elements in your design as vector shapes. This allows them to be exported at the highest quality and also allows the email coder to slightly adjust them should they need to without losing any quality.

Software
Email is a web only format so it is best to use software specifically designed for creating web assets. While it is entirely possible to create a web document in Indesign, or Illustrator the best option is always to design in an app made for creating web content. Photoshop or Sketch are the best apps for email design and our preferred way to receive assets. Email designs should arrive as editable, layered .psd files or .sketch files

Images
It is important to separately supply all the images used in a design. This allows the email coder to easily edit, update or amend the design. It is important to use the best quality images you can, so your email designs look great.

Fonts
Emails are displayed on many different types of phones, tablets and desktop computers so choosing fonts to use in email can be very restrictive. Ideally all the text in email will be displayed in a default font found on both Mac and PC computers. Most brands today will have 3 fonts, one for print, one for web and one for email. Sometimes a particular brand font can not be changed this usually is in a banner or title. If the brand can not compromise on this font that area can be made into an image so that particular area can keep the font. Fonts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.