When designing responsive email campaigns, optimizing and minimizing your CSS is key to ensuring your emails load quickly and display correctly on both desktop and mobile devices.
For example, many email clients, including Gmail, have strict restrictions on the size of embedded CSS. Gmail has a 16 KB CSS limit. If your email exceeds this limit, Gmail may strip styles or display the desktop version instead of the mobile-optimized layout, causing issues like broken styles or improper rendering on mobile devices.
The Minimize CSS feature helps solve this by reducing your CSS size without sacrificing functionality, improving email performance across devices.
How Does It Work?
To address CSS size limitations, Stripo developed the Minimize CSS feature, which automatically reduces CSS size without affecting functionality.
✔ Minimizing Class Names – Class names starting with .es- are shortened to reduce overall CSS size.
✔ Removing Unused Selectors – Unused .es- selectors that aren’t linked to any HTML elements are automatically removed.
✔ Optimized CSS for Better Performance – This results in lighter emails that load faster and display correctly.
Visual Comparison:
Check out the screenshots below to see the changes before and after the CSS minimization process.
Before Minimization: Long class names with
.es-(e.g.,.es-header-body). !
After Minimization: Shortened class names (e.g.,
.cp,.co). !
How to find the Minimize CSS Feature?
You can easily enable/disable the "Minimize CSS" option in the "Projects" or "Groups"→ "Integrations"→ "Minimize CSS":
Important note, Project settings provide the flexibility to define unique requirements for individual projects, whereas Group settings offer the ability to apply consistent configurations to all projects within the group.
This feature automatically reduces the size of your CSS without affecting its functionality, ensuring faster load times and proper rendering on all devices.
By default, the Minimize CSS feature is enabled.
Benefits of Minimize CSS feature:
Reduces Email Size:
Keeps CSS under the limits imposed by email clients, ensuring faster load times and correct rendering.
Ensures Proper Mobile Display:
Prevents Gmail and other email clients from cutting off styles, ensuring that the mobile-optimized version displays correctly.
Keeps Code Clean and Maintainable:
Optimized and reduced CSS helps keep emails lightweight, cleaner, and easier to maintain.
Conclusion:
The Minimize CSS feature ensures that your email templates stay lightweight, load quickly, and render properly across all devices and email clients. By using this optimization, you can avoid rendering issues, improve user experience, and maintain high email deliverability.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.