Can I Set Up A Grid Template In Gmail Email

A well-designed electronic mail shows that you care about your make and the communications y'all send to your customers. Information technology helps foster trust amidst your recipients, making them more likely to engage with your content and continue to open your emails. Nosotros all want beautifully designed emails, right? The only thing standing in our fashion is how we code them…

HTML email design is considered particularly tricky. This is mainly because Email Service Providers (ESPs) have non kept pace with spider web browsers making more mod HTML incompatible with some ESPs.

The difference in compatibility between ESPs makes it challenging to design an email that looks great across all providers.

While there is a lot of trial and error involved in email development, information technology's helpful to know where to start, forth with a few tips and tricks to aid you along the way.

Know your customers. The differences in code compatibility of the ESPs make it very important that you have a strong agreement of how your recipients are viewing your email. Utilise studies like SendGrid's 2018 Global Electronic mail Benchmark Repor t to run across which email providers dominate in your industry before y'all outset developing your emails. Or, if you're using SendGrid, our analytics provide detailed information on email clients, devices, and inbox providers. This information will assist you lot know where to focus your attention in your email blueprint.

two. Employ a unmarried column layout. We recommend sticking to a one-column layout because it's easier to maintain and more likely to function across platforms. Take a wait at the examples beneath. While the double column format on the right works well when highlighting multiple offerings, the single column format is easier to skim. Neither is improve than the other, but you'll be more easily able to master the formatting of the unmarried-column layout.

3. Utilize HTML tables for the layout. Instead of using div tags, you'll want to apply table tags. Unfortunately, not all electronic mail clients support div tags, so using table tags is the best mode to ensure that your email will return correctly across the diversity of e-mail clients.

four. Set your width to 600px. With a width of 600 px, your email volition fit the size of the screen across all ESPs. Because some email providers (like Outlook) display your email in a side screen to the right of the inbox, there is less space for the actual electronic mail. This space is approximately 600 px, making it the safest size to employ across email platforms.

v. Double the size of your logo. Y'all want your logo to look crystal clear for users with retina or 4k screens, so save the file at double the size. If you accept any other images in your email that are valuable to the send, you can consider doubling the size. Even so, nosotros don't recommend increasing the size of all images. If your email is too large, it could have extra time to load, making your recipient quickly lose interest.

6. Inline your CSS. Information technology isn't recommended to have an external stylesheet considering some email providers (including Gmail and Yahoo) view the external canvas as a potential security threat and will block it. Instead, y'all should inline all styles. In the example below, background color is added to the body by using the style attribute in the same line every bit the body tag.

seven. Mode the ALT text. Information technology's a good idea to utilise captions for images with ALT text. This way, if your images don't load, recipients will know the meaning behind the epitome. You tin too go a stride further by styling your ALT text so that it'southward centered with a specific font size and colour. With this additional styling, your recipients can more hands read and empathise your message.

8. Use a standard font. While some ESPs (Gmail and Yahoo) accept quite a range of fonts, others like Outlook or AOL do non. There is a gear up of common fonts installed beyond all computers and operating systems (such as Arial). Y'all want to choose a common font that is not only similar in fashion, but also similar in width and line-height. If your brand's font is narrower than your default font, information technology could throw off the alignment of the email if an ESP opts for the default font.

9. Add media queries. Media queries allow you to specify dissimilar stylistic choices depending on the type of screen your email is existence viewed on, helping you create a responsive email for mobile devices. In the case beneath, the media query is prepare to a width of 480px (the recommended pixel width for mobile), so that when you open up the email on your phone, it is stylized for the mobile experience.

10. Test how your email renders across platforms. It'southward important to know how your email will look before information technology reaches the inbox, and at that place are a couple of great tools out there to testify you how your email renders across platforms. Email on Acid offers unlimited testing across 70+ electronic mail providers and devices. Litmus is another smashing tool for testing how your email renders across a variety of ESPs. Avoid sending a broken email with these tools at your disposal.

Takeaway: Keep it simple

When it comes to email design and development, it's important to proceed it as simple and straightforward as possible. Don't get crazy with fluid shapes or patterns. Instead, pattern the email in simple, scannable chunks with the optimal feel in mind.

Ready to get started?

Whether you prefer visual elevate-and-drop editing with the ability to tweak code when you need information technology or would rather code your emails from scratch, yous can attempt edifice your own email using SendGrid's Marketing Campaigns tool. Use our free library of over 15 beautiful and customizable email marketing templates every bit your jumping off point to coding your own emails. If your focus tends to exist more on transactional messages, we've got you covered too with a repository of Open Source Transactional Email Templates.