Coding Takeaways from “The Email Design Conference”
Monks recently attended the email design conference hosted by Litmus in Boston. Our team attended some really inspiring sessions from some of the coolest email marketing folks and here we have listed design and coding takeaways from the email design conference.
In this post, we showcase the coding takeaways. If you want to learn about design and marketing, have a look at our previous post here.
1. Structure your designs – Add structure to your designs. Use align attribute for positioning content + inline padding on table cells for white space. Keep height in proportion and content that allows you code the HTML lesser than 102kb. Label your classes clearly.
2. Use media queries – Use media queries for progressive enhancement. However, Progressive enhancement is only one part, though. Combined with modern CSS and an advanced toolset, things get interesting. Also, while using media queries use media query conditions to target specific email clients and devices. iPhone resizes fonts less than 13px to 13px—this can break navigation bars.
3. Use Grunt Email Design & other workflows – Use workflows like Grunt Email Design that helps to compile your SCSS to CSS, build your HTML email templates, Inline your CSS, Compress and uploads images to a CDN (optional) and send a test email to your inbox or Litmus.
4. Text to image ratios – Keep images/text ratio in mind while designing and slicing the design. Also, always set images with links to have a border of 0 to prevent blue boxes. If you are using alt text, you can center align one line alt texts in larger spaces by setting line height = image height.
5. Use assets, partials and variables that are updatable – Use updatable global assets (logo, social icons, images in email), partials (Code shared in email, single reusable template, automated code creation (Copypaste, styleguide, snippet emmet) and variables (colors, font stacks, sizes, tracking urls, meta).
6. Standardize the components for quick update – While coding, try standardizing components as it leads to fewer errors, developer sanity, testability, easy updates, no more guessing, etc. A few things you could standardize include buttons, preheaders, headline, hero graphics, two column, three column layout etc.
7. Go interactive with 3 interactions – If you aim to build interactive emails, Hover, Active and Focus are the basic interactions of an interactive emails.
8. Go hybrid, but consider exploring challenges – Manipulating alignment on tables and the direction of ordering allows you to choreograph content in emails. Hybrid coding is a great way to get things working even in Gmail. You can still progressively enhance with media queries. Outlook mso, vml code, nested tables, pagebreak, nesting tables, lots of stuffs to be explored in hybrid approach. Fixed-width columns and fluid containers allow those columns to easily snap into place on narrow screens with hybrid coding.
9. Safe bets for fallsbacks – Keep an eye on x-height and the set width of your web font and fallback. Some safe bets for fallbacks.
10. Handle CSS with care – Just like with HTML tables, CSS nesting can get you into trouble. However, even though email clients typically have dismal support for CSS (especially new stuff), things seem to be improving.
11. Finalize code in pixel art emails – Finalizing code is vital in pixel art emails, since you’re bloating already bloated code. To finalize a code, use fewer colors and bigger pieces, be careful with third party code cleaners, do not minify the code, aim for HTML lesser than 102kb as it helps prevent clipping.
12. For buttons – Go bulletproof. You can take three approaches to bulletproof buttons: VML-based, padding-based, or border-based.
13. Miscellaneous Best Practices – As a best practice while coding emails, review the slices, start a new html doc, break into clear sections for fault findings, separate tables make updates easier later, do not use colspan or rowspan.