With an ever expanding range of mobile and tablet screens to cater for, choosing the right type of responsive coding for your emails is an important decision for any marketer.
Two of the most popular approaches are adaptive coding and fluid coding. But which will deliver the best results depends on the design and content of each individual email or template. Here’s a general guide to which type of code you should use, and when.
For simple structures use fluid code:
Fluid coding is best used on simple designs with, for example, one image, one text area and one call to action. This could include promotional e-shots, single-proposition newsflashes and trigger emails with a single call-to-action. Fluid emails adjust to different devices based on percentages. You define the widths of all elements in the email as a percentage and then everything expands, contracts and re-shapes proportionally to the size of the screen. This means that there is no need for media queries, so they’re fairly simple to code.
Working in percentages also means that you’re guaranteed that the elements of your email will always fit exactly as expected into whatever space they’re given. With a variety of screen sizes to contend with, this makes the case for fluid coding look very strong when it comes to keeping an email marketer’s life as simple as possible. But there are also real restrictions with this type of email. Because it is just based on percentages, there is no minimum size for any element in the email. So while a call to action at 30% on a desktop design might be ideal, on mobiles it could become far too small. This is why only simple, bold designs really reap the rewards of fluid coding.
Alchemy Worx’s Touchstone emails are a simple structure and so take advantage of fluid coding (click here and resize your browser window to see the responsive version in action). There are no separate pods, blocks or sections sitting next to each other that would then look too small as the screen width reduces, and the desktop design isn’t compromised at all.
For more complex designs, use adaptive code:
Adaptive coding is more suitable if your email uses complex structure like multiple images, various pods and several areas of text – for example newsletters, product-led promotional emails and messages with a two-column design. Adaptive emails adjust for mobile when being viewed on a screen of a certain size or smaller. There is essentially one body of code behind the email, with two different sets of instructions that apply to it – one for desktop and one for mobile. A media query is used to dictate which set of instructions is applied and when, and therefore which version of the email customers will see.
This means that, regardless of screen size, you are guaranteed pixel-by-pixel dimensions of everything within your email. And although your email may not fit exactly to every screen as with fluid coding, any remaining pixels are simply rendered as background space. As you only have to account for two sizes – desktop and mobile – there are far fewer design restrictions with an adaptive email. This type of coding also allows for ‘show and hide’ – areas that can be switched on or off between the desktop and mobile versions to give you more flexibility in design.
The Tesco newsletter includes a range of different sections and so uses adaptive coding (click here and resize your browser window to see the responsive version in action). Reducing the size of all the sections proportionally using fluid coding would quickly risk much of this text becoming cramped and hard to read, but adaptive coding tackles this by re-arranging the horizontal pod structure to stack them vertically when the screen size reduces below a certain width.
For best results use hybrid code:
For complex email designs, you can enjoy the benefits of both types of coding by combining them. We are seeing increasing numbers of emails that contain fluid code, but within a framework of adaptive code – known as hybrid code. These emails start out as a desktop version, but the coding contains sections that re-size or stack beneath each other below a certain screen size – adaptive coding. But then, once re-positioned, these sections convert into fluid coding. So if you were to keep reducing the screen size, the sections would react fluidly – shrinking to fit.
This option is of course more time and resource heavy, but delivers the best result for your customers regardless of the device they are viewing your email on.
Our own Alchemy Worx emails have used hybrid code(click here and resize your browser window to see the responsive version in action). With columns used to place images side by side and text fitting into relatively small areas, it’s clear that a purely fluid transformation would not be suited to this message. So adaptive coding is used instead to stack the right-hand-side image underneath the left below a certain screen size, creating a one column design. This one column then uses fluid design to shrink down proportionally to make maximum use of the screen size for an entire range of different devices
The type of coding you choose is far from a one-size-fits-all solution. We recommend treating each email or template individually to see which type of responsive coding will make the best use of your resources, and deliver the best results for your subscribers. ALCHEM
Last updated: Mar 27, 2015
