Lauren is a front-end web developer who specializes in Email. She currently serves as the Email Build Specialist at Gilt.com, an innovative online shopping destination offering its members special access to the most inspiring merchandise and experiences all at insider prices.
This final installment of “Rules for Best Practice in Email” deals with coding practices. Now that you know how to create a well-designed graphic email that accommodates differences in email clients and web browsers, it’s time to make your emails work in every inbox.
As mentioned in Part 1, a graphic email might look and feel like a webpage, but is it coded just like a webpage? Well sure – if that webpage was coded in the 1990s.
Writing markup for email takes HTML back to the old school. These tips will help those of you who don’t recall the days of flannels, pagers, and the Discman, or who think of tables only as something to eat off or store data in.
1) Use tables for layout
To ensure that your layout renders correctly across all inboxes, use tables–lots of tables–all nested together. This tip defies modern-day web development, in that tables are now primarily used for tabular data–not for webpage layout.
Since CSS became a suitable and more flexible way to layout webpages, using tables – the old-school way of coding webpages – has been rightfully railed against by web developers. However this isn’t the case when marking up HTML for a graphic email where tables are not only acceptable but still the preferable method.
As much as our instincts might tell us otherwise, the sobering facts are that tables seem to be the only surefire way to get multicolumn layouts working across all likely inboxes.
Using divs for very simple layouts can work well, but test the divs thoroughly to ensure they behave as intended. Outlook, Yahoo and Hotmail don’t offer great support for position and float, so it’s wise to make sure that your other CSS properties don’t fail in different clients.
Tables offer the most consistent support across all clients and have long-since been the standard for coding emails. However outdated or unfamiliar they might feel when being employed in laying out templates, it is likely you will achieve the best results in all inboxes using tables over divs or other methods.
2) Bring your styles inline
Gmail and other email clients, inevitably strips some (if not all) of the CSS out of the tag in HTML documents. For this reason–plus the fact that external stylesheets are not an option in email—place your CSS styles inline.
This makes for a lot of repetitive styles applied to each element and completely eliminates the luxury and convenience of classes, but it will offer the most consistency and preserve a well-designed template. Some email service providers like MailChimp and CampaignMonitor now offer conversion tools to bring your CSS inline and relieve the headache of having to repeat styles for each element.
The exception to this rule: Media queries aimed at layouts for mobile devices. Media queries are always written as topline CSS and contain classes, when supported they enable a different experience for mobile users to view email designs on smaller screens.
This installment of Rules for Best Practice in Email (Part 1) deals with the most important component of every email: the message content. Whether you’re announcing a new product, offering an incredible discount, sending your subscribers the latest news, or simply notifying a customer that their order is on its way, how you present your […]
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.