The first thing we needed to do was find a way to constrain the width of the template on a desktop, but make it 100% wide on smaller screens. Without this, for example, iOS will render the template at a default 980px width. The Viewport TagĮven though we're not using media queries, we still need a viewport tag in the header to ensure that the template will be rendered at the width of the device it's appearing on. After things were looking good with the more limited clients, we added in some media queries, like a dusting of seasoning, to enhance the display for email clients that do support them. Wait, you might be saying, "That's crazy?" Well, not as crazy as you might think.Īnd we totally didn't completely toss out media queries like last night's leftovers. Instead of throwing our hands up in the air, we decided to tackle the problem and make the templates as responsive as possible without media queries. Many clients, such as Gmail, don't support media queries at all. This is because support for media queries is vastly different across email clients. As a result, we've put together a package of five responsive email templates that we're making them available on our playground page! How We Did Itįor this set of templates, we decided not to rely on media queries for responsiveness. Since then, we've been flooded with tons of requests from others to help them with their email campaigns. So much so that we recently jazzed up our own email campaigns, taking them to a responsive level. ![]() With so many readers viewing emails on mobile, we knew there had to be an easier way to ensure campaigns look swank on any device. Thanks to the popularity of the smartphone, the iOS mail client is now at the top of the heap. Today, more and more emails are being read on mobile devices more than on desktop computers. UPDATE : Our new responsive email framework, Foundation for Emails has been released!
0 Comments
Leave a Reply. |