Introduction to Responsive Design: Optimizing HTML Newsletters for All Devices

With the growth of smartphone technology, sending successful HTML newsletters has become an increasingly complex endeavor in recent years. In the past, it was usually enough for senders to test their newsletters on the most common webmail and desktop email clients. Now, however, with an increasing number of people using mobile phones as their device of choice to read email, it's more important than ever to optimize HTML email for smaller screens.

This is an introduction to the world of responsive design, which attempts to bridge the gap between designing for desktop and mobile screens, allowing senders to create a single message that is optimized for devices of all sizes. The approaches and coding techniques are many, and this piece isn't meant to cover them all. However, hopefully you will come away with some ideas for improving your own HTML message templates – with a better and deeper engagement with all of your subscribers as a result.

Responsive design is a term for a web design concept with the goal of providing an optimal viewing experience regardless of device. Responsive design uses HTML and CSS3 to create fluid layouts that adapt to any screen size, requiring as little scrolling as possible. One of the most important facets of responsive design is the use of relative widths (percentages) rather than absolute widths (pixels), allowing the message container, text and images to automatically adapt to the viewing environment. In addition, media queries can be used to instruct the email client to use different CSS styles depending on the display characteristics of a given device.

In the not-too-distant past, email designers were often recommended to keep their newsletter width in the 600px range to ensure that it fit inside the viewing area of most target email clients. However, considering that many smartphones, for example the iPhone, has a viewing area of only 320px (480px in landscape mode), a standard 640px wide newsletter is simply not going to fit and will require not just vertical but also horizontal scrolling by the reader. You could design the email with a width of 320px, but that would look downright silly on desktop screens, laptops and even tablets. So what is an email designer to do?

The answer is relative widths. By using a relative width of 100% rather than a fixed width of 640px, your HTML newsletter becomes device agnostic and fills the viewing area of the device, regardless of size. The newsletter container and all the text will automatically wrap and adjust based on the size of the display. But what about images? Did you know that relative widths can be applied to images just as easily as on the message container itself?

Let's take a look at a simple one-column newsletter that uses HTML and CSS to apply relative widths to all components of the message.

When designing with a mobile audience in mind, the first thing you need to remember is the viewport meta tag. You would place it inside the <head></head> and enter comma-separated values to give special instructions to the email client. You should base the viewport width on the capability of the device in question. For more control, you can set the initial scale and maximum scale parameters to ensure that your message will be opened at 1:1 scale without zooming.

After that, create a simple table as your newsletter container and give it a width of 100%. In order to prevent your newsletter from stretching outrageously wide on high-resolution screens, give it a maximum and a minimum width that it needs to stay within.

Then give your images a width of 100% and provide them with a maximum and a minimum width as well.

The end result is a newsletter where everything (container, images and text) adjust to the size of the screen. To view this example in action, click on the link below and simply resize your browser width to less than 640px and see how all the components of the newsletter automatically resize until you reach 320px.

Media queries are a fairly recent W3C-recommended standard and allow senders to instruct the email client to use different CSS styles depending on the display characteristics of a particular device. You would enter the media query and the CSS styles inside the <head></head> of the HTML document.

In many cases, media queries are used to check the maximum width of the device being used to display the HTML. In this case, if the maximum width is 480px or less (an iPhone screen in landscape mode), then the inline styles of the container table are overridden, and the table is given a width of 320px instead.

In order to give a concrete example of how this might be handy, let's look at a simple two-column HTML newsletter design. Two-column designs are often useful on desktop screens because the added horizontal space gives you more space for your content, requiring less vertical scrolling by the reader. However, two-column designs tend to be quite problematic on small mobile screens. But what if we could use a two-column design for our HTML newsletter when viewed on larger screens but a one-column design when viewed on a small mobile screen? The above media query allows us to do just that.

After we have included the media query, let's create a simple 640px wide container table with class="container".

We can then create two nested tables of 320px each and place them inside the container table to represent the two columns, the first table left-aligned and the second table right-aligned. We can give them 10 pixels of padding to keep the content in each column from running together.

The result is that when there is enough room for the two 320px side-by-side tables to fit inside the 640px container table, you end up with a two-column layout. But when the CSS in the media query is triggered (for a display with a maximum width of 480px or less), the container table is given a width of 320px, after which the two tables no longer fit side-by-side. This results in the two tables being stacked on top of each other, which then renders as a one-column layout. The 480px breakpoint is commonly used to target iPhones, but keep in mind that with a myriad of Android devices on the market, many of which have different device widths, extra care and testing is warranted when targeting Android phones. To see this example in action, follow the link below and again resize the browser until you pass the 480px breakpoint.

So far, we have examined relative widths and media queries in isolation, but now let's try to combine the two.

Media queries, while not universally supported by all email clients, are surprisingly flexible and allow us not only to change the width of container tables but also to modify virtually any CSS styles used in an HTML newsletter, including column widths, font sizes, colors and the amount of padding.

Let's loop back to our very first example and give the same mock newsletter a top banner containing a logo and some additional details about the newsletter, including the issue number.

<tr>
  <td width="1%" align="left" valign="middle" style="background-color: #eeeeee; padding: 10px" class="leftcol">
    <img src="http://www.lsoft.com/mail/lsoft.gif" class="logo" alt="L-Soft" />
  </td>
  <td width="99%" align="right" valign="middle" style="background-color: #eeeeee; padding: 10px" class="rightcol">
    <p style="font-family: arial, helvetica, sans-serif; font-size: 28px; color: #000000; font-style: italic; margin: 0px 0px 0px 0px" class="newsletter">LISTSERV at Work</p>
    <p style="font-family: arial, helvetica, sans-serif; font-size: 16px; color: #333333; margin: 0px 0px 0px 0px" class="issue">Issue 2, 2013</p>
  </td>
</tr>

The header row consists of two columns, the left column containing a logo and the right column containing the name of the newsletter and the issue. Notice that while the columns and the text contain inline CSS, they also have class names (leftcol, rightcol, newsletter and issue).

As you can see, we are using the same 480px breakpoint to trigger the override styles. In this example, when the device width falls below 480px, we are reducing the font size of the newsletter text from 28px to 18px, hiding the logo altogether to conserve space and realigning the two columns to make the text left-aligned. To view this example, click on the URL below and resize the browser width to less than 480px.

These are just a few very simple examples of how responsive design techniques can be used to create device-agnostic HTML newsletters that adapt to any device. Many more creative applications can be found on the Internet that show real HTML newsletters that have been designed to allow a single message to be optimally presented to subscribers regardless of device – desktop screen, tablet or mobile phone. Responsive design is here and it works, so start coding and take advantage of it.