Responsive Design Overview

Responsive Design refers to a collection of techniques, such as media queries, fluid grids, and fluid images, that aim to provide an optimal viewing experience across various desktop and mobile platforms. This means that your mailings appear appropriately differently on mobile devices than they do on desktop devices. For example, responsive design allows your mobile readers to view your content in one column while allowing your desktop viewers to view it in two! In fact, subscribers love it when the content fits their viewing area. If you want to create a better reader experience, look no further than responsive design as part of your strategy.

What is Possible with Responsive Design?

While the possibilities are limited only by your imagination, here are some common applications:

  • Adding or deleting Padding
  • Changing colors
  • Changing hierarchy
  • Changing layout
  • Changing navigation
  • Changing or hiding content
  • Enlarging fonts
  • Scaling images

Tips and Best Practices

Below are some common best practices to know about before you dive deep into the world of responsive design.

  • Mobile versions generally consolidate to one column layouts (unlike the two or more column designs that work well on desktop platforms).
  • Always test your responsive designs on a variety of email clients and mobile devices to be 100% sure that they display the way you planned. Differences in devices, manufacturers, applications, and screen sizes can all impact how your mailing renders!
  • Always define your media queries in the head tags of your design. For media queries to work on mobile, the CSS rule !important; needs to be applied to each style. If a particular style isn’t working, check to see if this rule is in the HTML head parameters.
  • Media queries can be separated by device screen sizes (phone versus tablet, for example), but there’s usually only one format for mobile phones (maximum width of 480 pixels).
  • All responsive templates in Informz need a DOCTYPE to function. If something isn’t working, you may not have set a DOCTYPE in the HTML parameters.
  • Your mailing client or application determines responsive support (it’s a common myth that media queries and responsive designs are based on the device or operating system in use). It’s possible to view the same mailing on the same device and see varying results in different apps.
  • If your images do not stack properly, you may need to add a class to your table or image tags.

Reality Check

Responsive design is powerful, but there are no “silver bullets” that make it possible. Implementing it in a template is something that requires the finesse of an experienced HTML designer. Whether this is a staff member, a consultant you've hired, or an Informz template designer, make sure you're working with someone that has experience doing this.