Designing Email Campaigns for Outlook

There's nothing more frustrating that spending a bunch of time designing a beautiful email only to have it look completely different when you send yourself a copy.

Designing emails for Microsoft Outlook is a well-known challenge across email design platforms. Many other email readers, such as Gmail, Apple Mail and newer versions of Outlook, open your email as HTML. They treat the message just like they would a webpage. This means that email designers can use the same HTML and CSS coding languages that they use for writing websites to write emails.

Older versions of Outlook are different - they actually use Microsoft Word to view the HTML. Word has its own rules for formatting, and often has problems handling more detailed layouts. You can read more about the kinds of challenges of designing email for Outlook here.

If many of your members are opening email campaigns in Outlook, there are a few things you can incorporate into your design process to ensure that what they see in their inbox matches what you send: 

Stack your Content

Try using images and paragraphs that always sit on their own rows. If you check out MailChimp's Inspiration page, you'll find that many of their best emails are laid out as a long stack of items, with images, headers, and text all on their own lines. This helps you avoid any problems with text wrapping, which is one of the biggest Outlook issues. A single-column layout also makes your email mobile-friendly. 

Keep it Simple

Use SilkStart's plain text templates, or any other template that doesn't break content into columns. This reduces a lot of the extra code that doesn't render properly in older versions of Outlook. Try and stick to basic fonts like Arial and Georgia. 

Format from within SilkStart

Directly copying and pasting content into your emails from outside sources (like a PDF or Microsoft Word) can import hidden code that you may not be able to see, but that can greatly affect how your email renders. 

• To add an image into your email, use the "Upload Image" icon in the editing toolbar (detailed instructions here)
• To add text into your email, either type it in directly, or use the "Paste as Plain Text" icon in the editing toolbar (icon of a clipboard with a small "T") if you need to copy and paste

Use Tables

If you do need to lay items out side-by-side, put them in a table. Most versions of Outlook can understand tables well, and will accurately put each item in the right alignment. However, do not nest tables within tables, otherwise the content may not render properly.

Test your Emails 

Take advantage of SilkStart's "Test" feature to view your email campaign in a real inbox before it's sent to your members. If something isn't looking quite right, feel free to contact us!