Getting It Right the First Time: 7 HTML Tips to Nail Email Layouts
What your email looks like in your recipient’s inbox is just as important as the content of your message. But because there is a wide variety of email clients in use today, you need to format your design so that it works with the desktop and mobile formats of Microsoft Outlook®, Gmail™ and Apple® iOS, among others — and don’t forget those old-school holdouts that haven’t yet surrendered their AOL accounts! Getting the layout right the first time helps keep you on schedule because you don’t need to troubleshoot before deployment.
HTML can be tricky (particularly in email). Header tags and semantic HTML markup used as a best practice in website coding can hinder email layouts. For best results, HTML is used very differently to format an email versus a webpage.
You may need to “unlearn” some webpage coding practices to make your email layouts respond well and look right.
Check out these seven tips to help you nail your email layouts the first time, so you can focus on other priorities.
Typography
1. Text formatting
Stylize basic text instead of using header CSS, so your type doesn’t inherit inconsistent default styling across a variety of devices.
2. Standard fonts
To ensure consistent typography across devices, use web-safe fonts, including Arial, Courier, Georgia, Helvetica, Lucida Sans, Tahoma, Times New Roman, Trebuchet MS and Verdana. Public web fonts that work on some devices are also available.
Layout
3. Bulleted lists
Get more control over the spacing and margins of bulleted lists by using styled tables and the bullet character instead of using HTML lists.
4. Controlled content
Get more control over the contents of your email by placing sections of content in individual tables instead of one big table.
5. Spacing control
Use nested tables with defined padding for spacing that works across all email clients. In general, desktop email layouts should be 600–800 pixels maximum in width. Use element attributes (valign, width) to set table dimensions.
Performance
6. Functional images
Make sure that you add appropriate alt tags for images, so if recipients have weak connections or disabled automatic image loading, they can still get a sense of what’s in the layout.
7. Mobile users
Use media queries to apply layout changes for recipients who are viewing your emails on mobile devices.
MMS has your back
Simplify the process of creating ready-to-go email layouts by leveraging the HTML builder/editor in the NOWW Platform from MMS. Build your own template, or choose from one of seven NOWW templates and get right to work.
Are you interested in learning more about the NOWW Platform packages to decide which one works best for your team? Contact us today to set up a demo, or visit mmslists.com/noww-platform-matrix for more information.