Lauren is a front-end web developer who specializes in Email. She currently serves as the Email Build Specialist at Gilt.com, a flash sale fashion company in New York.
When designing an email — be it an e-newsletter, promotion, transactional email or announcement — there are a few standard rules to follow. Although a graphic email message may look and feel just like a standard web page, where and how it is viewed is anything but.
Aside from having to contend with the standard web browsers (Chrome, Safari, IE) and their idiosyncrasies, you also have to satisfy the requirements imposed by a slew of email clients and mobile apps, which don’t always render your messages the way your design intends them to.
Although constraints are never fun, when trying to design something compelling, sticking to these best practices will ensure that your emails render beautifully across all clients and on mobile devices.
Rule 1. Design on a Width of 600 pixels
Emails are viewed in a variety of clients, and many different factors — advertisements, menus, and toolbars, just to name a few—can impact upon and minimize the view pane of the message.
The standard width for most emails is around 550-600 pixels, although the trend toward wider emails is increasing—and scalability, even on mobile devices, has improved with time. In short, if your design has to be wider than the 600 pixels, keep designs under 700 pixels to be on the safe side.[caption id="attachment_83767" align="aligncenter" width="650"] Email in AOL View Pane[/caption]
Tips 2. Use Background Images Sparingly
Since version 2007, Outlook has provided zero background image support. When using layered images in your design, be sure they can degrade gracefully. Always use a solid background color as a fallback for Outlook and make sure no crucial information or imagery exists solely in a background image.