Responsive Email Design; Multi-Column, Fluid Design without Media Queries

    For those of you who are close to creating mobilised email templates, you will be very familiar with the term “media query”. However, for those less aware, media queries are used within responsive design to scale and re-arrange elements of a template to fit effectively into the screen. The email will show all the key elements within your email within the viewable space it has available regardless of device. Research has shown that some devices do not support media queries. In particular, the Gmail app does not recognise these. Your email can look distorted, or crammed into a small viewing pane.

    Over the past few weeks, Nick Snelling, our Head of Email Operations, has been working on a responsive template which does not utilise any media queries but still achieves good results in all major email clients including the Gmail app. Creating a responsive email without these key elements has been a challenge. However, with a fair bit of research, mountains of testing and a few head scratches, we've managed to develop an email which adjusts to the screen size appropriately and there's not a media query in sight!

    A basic skeleton template, supplied by Litmus, was modified until it functioned successfully without any media queries in standard browsers; making use of fluid design techniques to achieve any responsive behaviour (such as percentage-based widths and the max-width css attribute to define the boundaries of the template). Once satisfied, we expanded the email to include a variety of multi-column layouts (using nested tables), which when viewed in a mobile would resize or drop down appropriately.

    Testing on major browsers and ISP’s presented various rendering issues where the email was not behaving as we would expect. Several additional ‘fixes’ were required to ensure that the email rendered correctly across the majority of main email clients. Once applied and thoroughly tested, the email rendered well in all devices, browsers and ISP’s (except older versions of Lotus notes), successfully arranging columns depending on the available space.

    Looking to the future, this style of responsive design could be expanded to utilise media queries to enhance layouts on email clients/devices that support them, whilst still rendering well on those that don’t. Incorporating media queries would allow for further improvements, such as enabling elements of the email to be hidden or re-sized where appropriate. With a little investigation and some experimentation, the possibilities are endless.

    Want to see what we are talking about?

    Download our template now