We try and make Templates that render well in both mobile & desktop but this has been very tricky for our graphic designers to do, forcing them to create separate elements for Mobile & Desktop which takes up lots of space. Are there any improvements to mobile optimisation in the roadmap or any suggestions?
Solved
Mobile Optimisation Issues
+5Best answer by Temi O.
Thank you for posting! I agree, the duplicate element approach is definitely a pain when you're trying to keep templates maintainable.
Just a couple questions here:
- Are you using CSS media queries in your templates? That's usually the first place to look. Instead of creating separate HTML elements for mobile and desktop, you can use `@media` queries to hide/show elements or adjust layout based on screen size. This keeps your template code cleaner and means you're editing one element, not two. If your designers are comfortable with a bit of CSS, this cuts down the template bloat significantly.
- Also, how are you structuring your tables? If you're relying on nested tables with fixed widths, that's where a lot of mobile rendering issues come from. Single-column table structures with percentage-based widths tend to reflow much more naturally on mobile without needing workarounds.
That said, there are legitimate scenarios where the design intent really does require different content or layout on mobile versus desktop, and in those cases, the duplicate element approach makes sense. We're always thinking about ways to improve the template editor experience, and while I cannot concretely speak to a roadmap for cleaner mobile optimization, I can certainly provide that feedback internally!
Temi@Klaviyo
+5
Thank you for posting! I agree, the duplicate element approach is definitely a pain when you're trying to keep templates maintainable.
Just a couple questions here:
- Are you using CSS media queries in your templates? That's usually the first place to look. Instead of creating separate HTML elements for mobile and desktop, you can use `@media` queries to hide/show elements or adjust layout based on screen size. This keeps your template code cleaner and means you're editing one element, not two. If your designers are comfortable with a bit of CSS, this cuts down the template bloat significantly.
- Also, how are you structuring your tables? If you're relying on nested tables with fixed widths, that's where a lot of mobile rendering issues come from. Single-column table structures with percentage-based widths tend to reflow much more naturally on mobile without needing workarounds.
That said, there are legitimate scenarios where the design intent really does require different content or layout on mobile versus desktop, and in those cases, the duplicate element approach makes sense. We're always thinking about ways to improve the template editor experience, and while I cannot concretely speak to a roadmap for cleaner mobile optimization, I can certainly provide that feedback internally!
Temi@Klaviyo
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.