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.
Making two responsive columns in html email trial#
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 kommentar(er)
