Huge thanks to our very own email ninja, Stig for making this tool. Say thanks @stigm
Design gorgeous buttons using progressively enhanced VML and CSS. You can also create rock-solid background images in emails too.
An ever growing archive of testing and advice on what does and doesn't work in the challenging world of HTML email design.
A full and up-to-date CSS guide on what will, and what won't work in your email designs.
We provide a complete guide on how to create successful campaigns, from establishing goals to building your list.
Email typography will spice up your content and make it a pleasure to read.
We explore a few things you need to know about how forms work (or don't work) in email.
Whether you're just starting out with email marketing or a pro looking for a refresher, our handy guides walk you through the entire process of developing an effective email campaign.
Learn how to design and code mobile-friendly email campaigns for a great small screen experience.
Produce a solid email template for your well-thought-out content using HTML and CSS.
Apply the same HTML and CSS skills you already possess to a different medium and new design context.
If you're still having trouble, feel free to email email@example.com your full template/campaign files, as well as a screenshot showing the issue clearly in the relevant email client(s).
Unfortunately, these buttons can not be placed on top of background images, because Outlook doesn't support nested VML elements. In many cases though, you may be able to code the design up successfully by changing the structure.
For instance, if only part of the image needs to be behind text content, you can sometimes slice the image, use a bulletproof background image for only that part of the design, and use bulletproof buttons or inline images (held together by a table structure) for other parts.
Because Outlook doesn't support @media queries, you only need to worry about the email clients that do. So only the HTML element needs to be responsive, not the VML. As a general recommendation, using mostly pixel based widths in the HTML is more reliable, and you can then override this with other pixel or percentage based widths for other viewports like with any responsive web design.
To get started, give your button link a class or ID that you can target. Then in any appropriate @media queries, give the link(s) different dimensions, background images, etc.
This technique can only create buttons with repeating background images. To stop it from repeating visibly in one or both directions, you’ll want to make sure the background image is at least the size of the button, with any extra spacing added around the background image file itself if necessary. Also make sure the button is more than wide enought to fit the label, so it doesn’t accidentally break across two lines if the font changes slightly.
Unlike most other email clients and browsers, Outlook 2007/2010/2013 uses the DPI of your background image to determine the scale. So to make sure it renders at the right size, set the image's resolution to 96 DPI.
Unfortunately, the button URL, text, and other attributes can not be made editable in our editor.
If you’d like to see this feature added to the editor, make your voice heard in our forums or by email.