For those of you new to the dark, disturbing world of email design, here is a rundown of the basics:
- Why designing emails which look the same for everyone is a next-to-impossible task
- The archaic methods to work around these issues
- Making emails look good on mobile devices
- A few tips for building decent email templates
Email design basics:
The many email clients available …and the inevitable compatibility issues
- Imagine all the possible ways your audience might read an email you send them. Yahoo in the Chrome browser on a Nexus 7 tablet, the iOS Mail app on an iPhone 3, Sparrow on a Mac, Microsoft Outlook 2003 on Windows. All of these clients will render content differently as there is no agreed standard way of doing emails.
- Many email clients can’t deal with complex CSS like floating elements, and unfortunately HTML tables are the lowest common denominator for structuring content.
- As there is no standard way of rendering email content (like in website design), hacks, fixes and fallbacks are required to get things looking good for everybody.
- A big style reset is required to deal with all these idiosyncrasies
- External resources are out of the question, so we’ll need to push our styles inline
- Restricted content width – Most email clients won’t use the full width of the desktop screen to display an email, so it’s recommended that an email should be between 550-600px wide.
- Not all email clients support media queries, which makes mobile design even trickier.
Tables for layout
- Every modern developer’s worst nightmare… but a necessary evil for consistently structuring emails. An email template is generally made up of tables within tables within tables, needless to say, it gets messy.
- SEO and semantic HTML are not a priority in emails, so you can go nuts with table layout, inline styles and deprecated HTML tags to experience what web design was like in 1997
- What about re-usability and maintenance? As you can probably guess, building everything with tables make email templates a nightmare to maintain. Several solutions have been dreamt up, including boilerplates, frameworks and fancy WYSIWYG builders.
- Your next question is probably, ‘How are we going to make something built with tables and inline-styles work on mobile devices?’. Don’t worry, we’ll get to that.
- A sure-fire way to override any weird styles the email client might try to sneak in.
- Some email clients (e.g. Gmail, native mobile apps) strip out <style> tags, so we really need to move all of our style rules inline.
- If that seems incredibly tedious, Zurb have built an Inliner to make things easier. You just have to insert your HTML (with styles inside a <style> tag) and the Inliner applies your styles to the associated HTML elements.
- Most email clients do weird stuff with images, from not displaying them by default to adding strange default styles. In a corporate environment, where email accounts might be tightly locked down, images may not get through at all…
- So – prepare for the fact that your readers may not be able to see the images you’ve included. Just like website design, your email design should never rely on images.
- Be sure to include alt text to describe your image as a simple fallback (note: even these get blocked by certain email clients).
- Keep images to a minimum. Spam filters may interpret emails with a high image-to-text ratio as spam.
What about mobile devices and high resolution screens?
- The number of users opening emails on mobile devices is steadily increasing, so we need to make our emails look good on mobile, tablet and high-res displays.
- But how do we do add media queries without using stylesheets and <style> tags? While not all email clients support style tags, we can still include them for the ones that do. For the clients that don’t, we discuss one possible way around this problem in the next article.
- Provide a plain text back-up email
- Host any images you want to include in your email on a CDN
- Testing, testing and more testing. It’s the only way…
- If you’re a designer or an email client developer, have a good look at the email standards project. These guys are striving to improve the use and support of web standards for email.
- Keep your most important content within the top 300-500px of the email. This is the approximate range of email client’s preview panes.
Emails raise a whole lot of questions and create a new set of headaches for designers and developers. Read the next article to explore a new solution available for building consistently snazzy email templates, and then figure out which option is best for your upcoming project.