![]() For this reason, it’s important to declare fallback fonts - also known as font stacks. If you use Google Fonts or other custom web fonts, you may find that many email clients don’t support them. It’s a coding language that’s worth exploring if you’re the kind of email developer who wants to expand your horizons. Mailjet Markup Language ( MJML) is a simple and efficient way to develop responsive emails for mobile devices. We especially recommend this approach for simpler emails like password resets, transactional emails, and account updates, but it also works well for marketing emails. By putting mobile users first throughout the development process, and then making sure it also looks good on desktop, you can increase engagement and click-throughs. With this in mind, it’s no wonder that many email developers have embraced mobile-first design. So if your email doesn’t look good on mobile, there’s a good chance the recipient won’t bother reading it. In 2019, mobile devices became the primary way to check email for about 85% of users and accounted for 42% of all email opens. You can scale it down to fit better on mobile screens using media queries or fluid design (see below). This width should give you plenty of space for content and will fit nicely on most web and desktop clients. ![]() We recommend that you keep your email’s maximum width close to 600px. ![]() A single-column design is sufficient for most emails, it’s easier for people to read, and you won’t run into as many unwanted rendering surprises. Emails with two or more columns require more testing to ensure that they’re responsive in different viewport widths and are prone to more display issues across email clients. Keeping your email design simple doesn’t just make your life easier, it also helps it look better on mobile devices. Designers need to understand HTML email development practices so that they avoid requesting things or wireframing ideas that simply aren’t possible. It’s a good idea for email designers and developers to get on the same page from the start. Because even if you’re confident in your code, it’s still important to test your emails before you hit ‘send.’ With Email on Acid, you can see what your design will look like on dozens of clients and devices. The best practices that we outline below cover the core aspects of email development: design, accessibility, coding practices, and (most importantly) testing. (Find out more in our list of the biggest differences between web and email development.)įortunately, you can save yourself hours of hair-pulling and make your coding experience more enjoyable by following some HTML email development best practices. If you’re coming from a web development background, coding for email may seem restrictive since there are techniques used for websites that aren’t consistently supported for email, like importing fonts and CSS styles. ![]() A fix for one client might break your email in three others, or a simple float may only function in half of the email clients. If you’re new to HTML email development, coding emails so they display consistently and perform well across different devices and clients might feel like a lot of trial and error. ![]()
0 Comments
Leave a Reply. |