Developers face quite a lot of headaches, while coding HTML emails. Therefore, we have to abreast with new clients and device sizes that pop up frequently. Moreover, CSS and media query support can vary from app to app.
What if you could build an email template that was responsive, even in environments with the poorest support for modern CSS?
What if, every time you heard about some new email app that everyone’s talking about - instead of shaking with fear, you could feel safe and secure with the knowledge that your emails probably look great?
The method that I explored is all about creating a good experience for email clients which needs no media query support, whatsoever.
It’s called the fluid hybrid method, where fluid refers to the fact that we use a lot of percentages. Hybrid is used because we use max-width to restrict some of our elements on larger screens.
1. Start with a blank file and save it as filename.html, then copy & paste this code:
If your email sending platform doesn't take care of inlining for you, then you’ll need to do it manually. First, remove the link tag <link rel="stylesheet" type="text/css" href="filename.css" /> in the <head> of your document and replace it with <style type="text/css"/> Copy the contents of filename.css and paste it underneath, and close the style tag with </style/>.
Now you have a complete email template that is responsive everywhere without a single media query. There are quite a few email clients that support media queries. Now, we can go about progressively enhancing our already fabulous template with a few changes to make everything look good in a client like iOS Mail.
Thereafter, we’ll add the following to make 2 and 3 column layouts appear as they would on desktop, but shrink it down to fit.
Talk to us about how we bring together 1:1 personalisation, deep Martech Expertise, CX & Demand Gen Strategy, Engagement Analytics & Cross-Channel Orchestration to drive award winning experiences that convert
Get in touch for a complimentary consultation or a demo today.
Free workshops, expert advice & demos- to help your realize value with Sitecore
RegisterParticipate in our event survey , meet us at our booth , get free giveaways & a chance to win an iPhone 11
Let’s go