These best practices can help when designing emails in Photoshop.
Main Specifications
File Format
When possible, use the latest version available--Adobe Photoshop 2021 is the current version. Files should be layered and labeled, and every element present in the creative should be a layer inside of a group for easy accessibility. You may wish to use a color-coding system for layers. Please abstain from using Artboards, use only layer groups, this allows for a more efficient and expedited process for turning Photoshop creative into an email. Keeping your layer groups for each version labeled with a number is another way to keep layers organized and easy to identify. For example, at Personica, we use a sequence of letters and numbers (V1, V2, V3 or Version 1, Version 2, Version 3, etc…) to label each group of layers, as shown here:
Grouped Layers
We recommend using groups of layers inside the same document to organize different versions of a file. Also, group and name your elements consistently. See an example of a group of layers below:
Dimensions
600px wide by 760px height is the recommended width for emails. Email designs should fit within monitors (800x600 resolution) with minimal or no scrolling. It is recommended that the main elements fit within the 760px of height due to the most common sizes in monitors and mobile devices. The design should capture the attention of the user in less than a second, therefore, keeping the focal point of your email for that first glance is imperative. Remember that:
- The email browser will take up a certain amount of that space depending upon the email client (e.g. Outlook versus Yahoo versus Hotmail)
- Email-related links and the unsubscribe disclaimer will take up space beneath the design.
File Size
The recommended file size for email is under 100KB, but having a smaller file size will allow for faster downloads. This includes the HTML file and graphics. At Personica we typically aim to keep file sizes around 35KB. Design for 56K Modems, the most commonly used modem. Be very conscious of the quantity and type of graphics being used; the more photographs the larger the file size. Review your image file sizes, including background images and see where you can reduce file size. Add more white space for faster loading times.
Colors
Always use web-safe colors. Computer monitors will reliably show 256 specific colors; colors outside of this range will be interpreted by the computer. Stay away from light color fonts on dark backgrounds as this is often hard to read and it can pose some problems in terms of printing without backgrounds. Also, even though you are using an RGB color mode for the files, it is best to avoid using RGB (255,0,0) values when developing HTML emails. Therefore, it is recommended to use Long hex (#F00F00), Short hex (#F00), and color codes (red) for your emails since those are supported in all the email clients currently tested. You can learn more here.
Typeface
For deciding when to use graphical versus live text use these guidelines:
- Using live text will save on file size plus put your emails in better standing in terms of spam filters.
- Using graphical text allows for more variety in the type of font face and can make a better design overall.
- Serif versus Sans-Serif: The preference is for sans-serif fonts for body copy for legibility.
Font Size
In web speak, we deal with font sizes 1-6 (unless using CSS, which we’re not). Here is a rough comparison of web size to point size: 1 = 10 pt | 2 = 13 pt | 3 = 17 pt | 4 = 18 pt | 5 = 22 pt | 6 = 26 pt.
It’s not a precise number to use because there is a variation in size between fonts on a Mac and on a PC; Mac fonts are smaller. However, we recommend using Arial 10 points (or the web equivalent 2) or Arial 12 pts (web equivalent) for body copy as a minimum, and 16 pts as a maximum. For headlines, fonts can be as big as needed.
Live Text
Use universal fonts for live text: When using live text for things like personalization (member’s name or other demographic info or personal preferences), expiration dates, store locations, or just body copy, stick to universal web fonts like Arial, Verdana, Helvetica, Times-Roman, and Georgia. While you can specify other fonts, i.e., Comic Sans, the viewer’s computer may not support that font and will instead use a default font, which will throw off your design intentions. You can see a list of web-safe and CSS fonts here.
Footer
Use universal fonts for any live text areas in your footer. Our Engage platform already has an email footer if you are using our drag & drop editor, but you can change the background color or text color according to each creative.
Store Locator
We recommend always including a store locator section at the bottom of your emails. Create a section that is the same width as the email (600 px) and an approximate height of 100-150 pixels. Use a plain color background with no patterns or textures. The live text area should be at least 400 x 475 pixels wide. The font used should be one of the previous List of Web Safe Fonts or one of these main ones: Arial, Times New Roman, Verdana, Georgia, or Courier New. The intro copy or heading of a section can be a graphic of text.
Mobile optimization
All the emails produced using our Engage drag & drop editor are responsive and all the creatives used must be designed to automatically fit the screen on which they're being viewed. This means that your email will look the way it should whether on a smartphone, tablet, or laptop. If you use a responsive template, you don't have to worry about your email rendering incorrectly.
File Export
Use the Save For Web command in Photoshop to preview your file and size (see example below). For decreasing the file size follow these 8 tips to Make your photoshop file smaller.
Check your file size in the export window
Package/Provide Files
When providing a Photoshop file to Personica to build a template or email, use the Package command in Photoshop to create a folder with all the links used in the document along with any fonts that the Personica team may need. Sometimes when the file is built within Photoshop, it will not be possible to select this option. In this case, please make sure you provide a separate linked folder to Personica, along with any fonts used in the design.
NOTE: Shape Layers Vs. Smart Objects
Working with pixel image layers inside Photoshop can be very destructive for the image quality. Working with Smart objects from a library does keep the quality from the source. However, when working with vector images in Photoshop even simple things like rotating or scaling these objects with the Free Transform tool can cause loss of quality. We recommend using Shape Layers for this purpose. Shape layers can be directly imported from the vector in Illustrator and allow you to scale, transform, or rotate without ever harming its image quality and preserving the sharp edges and overall look of a vector shape. Updating a Smart Object from your library into a Shape Layer may take a while but if it is an object that is used constantly it can be saved and used as needed. Refer to this semi-outdated yet still relevant guide as to how to convert your current Smart Objects into shape Layers.
Animation
Adding Animation
Animation in email marketing has become more and more popular and now about 34% of marketing emails have some sort of animation in them. It can be deployed for a wide variety of purposes in emails and, if properly used, it can entertain, inform and inspire guests in ways that static images and text cannot. We recommend the use of the Timeline panel to create animation frames. Each frame represents a configuration of layers. Adding frames is the first step in creating an animation. If you have an image open, the Timeline panel displays the image as the first frame in a new animation. Each frame you add starts as a duplicate of the preceding frame. You then make changes to the frame using the Layers panel.
Illustration of an animation. The unicycle image is on its own layer; the position of the layer changes in each frame of the animation.
Animation Techniques
Due to various levels of support across inbox providers, animation in email marketing requires thoughtful design to ensure deliverability. We recommend following one of these 7 techniques to ensure you are creating a GIF that adds value to your design instead of being an “adornment” or “flashy effect”.
- Highlighting Text: An easy way to draw attention to your headlines is to add simple frame animation highlighting each word.
- Rotating elements: If you have a variety of products or photos you want to highlight without the email feeling content-heavy, you can easily rotate photos using frame animation.
- Showing Motion: With custom photo assets, you can bring a photo to life by showing slightly different angles or a sequence of events with a simple frame animation.
- Adding Depth: You can create depth by having your animation float above other design elements and throughout the email.
- Video as a hero: If you want to bring your hero layout to the next level, consider using video as the background element instead of a static image.
- Looping Motion: A great way to grab attention is loop a texture to give it motion.
- Add Mystery: A great way to promote clicks, this mystery sale promo GIF leaves the view curious what is next by leveraging animation.
Keep your GIFs accessible
Animated GIFs can pose problems for accessibility for a variety of reasons.
Content flashing rates between 2 Hz and 55 Hz can harm users with photosensitive epilepsy. In addition, users who are visually impaired may have difficulty reading or reviewing the content on a GIF before the animation changes. So, ensure your animated GIFs either have smooth transitions or don’t animate from one frame to the next at a high rate. And because GIFs are image files, you should always include appropriate alternative text for users who rely on assistive technology like screen readers. Images are inherently inaccessible for a lot of people, so providing copy and context allows them to understand your message more clearly.
Optimizing your GIF
Regardless of how you create your animated GIF keeping your file size down is crucial for email. There are a few things worth considering to help you keep your animations as light as possible such as:
- Compression: Tools like Photoshop have limited compression options for GIFs; it’s often better to use external software instead for compression.
- Flat color: Including photography or gradients in your animation adds weight due to the number of colors and shades these contain.
Limit your Frames
The shorter the animation, the better. Each frame your animation contains adds weight to the GIF. Therefore, we recommend a total of 15 frames at a maximum, with no minimum number of frames. Since an animation should really be about complimenting your copy, it makes sense to limit how long your animation plays and encourage readers to move down the email. Also, the size of the file will be directly affected by the length of the animation.
Loading Time
Load time is where the file size becomes very important. On average, just over half of recipients spend less than two seconds on an email. So your animated GIFs need to load fast to make an impression. For illustration, a 4.4MB animated GIF can take over two times longer to load over a 4G LTE connection than over an Ethernet connection.
Frame delay
It is important that the delay between frames creates a seamless and smooth transition. Since animation in emails are usually short, try to create frames within only 0.01 seconds of each other. Small movements, opacity, or color changes can be done in only a few frames, and then go back to the beginning for a seamless loop transition. Ensure that the last frame has a longer delay in order to achieve its purpose. See an example of how to change or edit the frame delay below:
Looping
Be sure to loop the animation while exporting so it will continuously repeat. The looping tool of a frame animation is key when working on emails. You want your animation to stop for a couple of seconds before starting again, but you do want it to start again in order to achieve its goal of attracting the user's attention.
First and Last Frame
It is important that the first frame of the animation contains the entirety of the message. Not all inbox providers support GIFs (Outlook being the major one that does not support animated GIFs), so you want to ensure all the important information is in the first frame of the animation. We recommend avoiding animating key promotional text (i.e. 50% OFF or FREE SHIPPING), just in case the GIF doesn’t load properly. The last frame is equally as important since it gives the animation an opportunity to stop, smoothing the experience for the user by adding a short break before beginning the animation again. By adding 2 seconds at the end of the animation you ensure it doesn’t become too repetitive and obnoxious. See an example of the frame animation below:
Exporting your GIF
It is important that you keep your animations simple and to the point. Once ready to export, check Save For Web window in Photoshop for your file size. Make sure you press Play and preview your animation to ensure nothing is missing. If you are sending your Photoshop file to Personica for us to build, you do not need to export your files, however, this is important to preview and proof-check your creative before sending. See an example below:
SUMMARY
- Don’t go overboard with animation, as too much can distract the reader. Use on CTAs and headlines, not on images of food.
- Always use animated GIFS.
- Animate a small section of the email. The bigger the section the bigger the file size.
- Keep animation simple and to a few frames, maximum 15 frames.
- Do not create rotating photos. They get too large in size. Bigger files can decrease open rates.
- Make sure that the first frame of the animated gif contains useful information in case the subsequent frames are blocked. Avoid fade-ins.
- Animation cannot be viewed in Outlook so make sure your animation’s first frame carries all the important information from your animation.
- Make the animation cycle last at least a few times so readers can catch portions they may have missed the first time. And keep the animation at a good pace.