Best Practices for Creating Responsive Templates That Look Great on Any Device
CSS Inliner Tool
Warnings when creating an HTML template
You can now use <style> tags in your email templates. However, please be aware that some email providers may strip or alter the styles defined in <style> blocks. For better compatibility, we recommend using inline CSS whenever possible.
Email rendering still varies across platforms—what looks correct in Gmail may appear differently in Outlook or on mobile. That’s why we encourage testing your template across multiple email clients to ensure consistency for all recipients.
Also, please remember that <script> tags are not supported. Most email clients block or remove scripts, and using them can break your layout or negatively affect deliverability. Avoid adding any JavaScript or script-based functionality to your templates.
When creating HTML templates for warm-up, here are some key considerations to keep in mind:
-
Responsive Design: Ensure your template is responsive, meaning it adapts to different screen sizes. This is crucial since emails can be viewed on various devices, including smartphones, tablets, and desktops.
-
Inline CSS: Use inline CSS for styling your templates. Some email clients do not support external stylesheets, which can lead to inconsistencies in how your email is rendered.
-
Testing: Always test your templates on multiple devices and providers to see how they appear.
-
Simple Layouts: Keep your layout simple. Complex designs can break in certain email clients. Use tables for layout purposes to ensure better compatibility across various platforms.
-
Optimize for Deliverability: Ensure your HTML is clean and free from unnecessary code, which can impact email deliverability. Avoid using too many images or heavy media files that could trigger spam filters.
-
Use Consistent Branding: Maintain consistent branding throughout your templates. Use your brand colors, logos, and fonts to reinforce brand recognition.
-
Clear Call-to-Action (CTA): Make sure your CTA buttons are prominent and easy to click. Use contrasting colors and ensure they are appropriately sized for mobile users.
-
Load Time Considerations: Keep the overall size of your email template in mind. Large files can slow down loading times, especially on mobile networks, and may deter users from engaging with your content.
A little bit more...
You can get great results with careful use of CSS in emails—and you want to make sure you’ve got a good reason before you commit the development resources you’ll need for it. Here are some tips to help you ace your next CSS challenge:
- If a stakeholder is keen on something that’s high risk and/or high-time investment, run the numbers. What percent of your audience do you stand to lose if deliverability is impacted or your email gets mangled?
- Don’t put style before structure! Make sure you’ve got a solid HTML foundation in place for email format before you add styles with CSS—and let your structure be your guide.
- Test and learn. You should always test emails thoroughly before sending—and that goes triple when you’re incorporating CSS. Review your test results to develop best practices to guide your decisions going forward.
- Compare soft and hard costs. If the CSS is worth doing, it’s worth doing right. The hard cost of using a vendor might outweigh the soft cost of your team’s time.
