Case study: responsive newsletter

What does responsive newsletter mean? How do you achieve one? When you have a working newsletter on desktop and you want to be working also on phones and tablets you need to use some tools such as media queries.

The challenge

How do we achieve a responsive newsletter?

A responsive newsletter means adapted, not only flexible, to go with smartphones, tablets and desktops. Not only the text is flexible, but also the images size adapts to the screen and some elements can be removed or hide or putted bigger or smaller depending on the device specifics.

The approach

Where is your audience? What is the best way to reach people?

To know the answers to those questions you will need to listen to your audience carefully. Their answers to your auto responder message after signing up to your newsletter are gold.

Brainstorming and exploring

Let’s code it.

I’ve taken the example of this newsletter Simples I’ve coded thanks to a PSD called the same way. Coding starts the same way as if it was a non-responsive newsletter. The differences are at the end.

When you have a working newsletter on desktop and you want to be working also on phones and tablets. To do that, you use media queries.

Finding the solution

Media Queries are tools that can be considered as doors that can be open or close. You set them. You need to.

First, in newsletters, you can write only write in the same page of code, so as media queries are considered to be style, you need to put them between “style” and “/style” in the “head” of the coded page.

I’ve made some choices about the images sizes, the font-size and some other elements so it would be adapted to the devices. Again, know that those are my choices and you can make your own depending on many more aspects.

I’ve kept it simple here to the sake of understanding how it goes.

Tying it all together

As I did with the non-responsive newsletter, we need to test. in doing so, the same tests apply.

Specifities after all applied:
  • w3cvalidator 0 error. 0 warning
  • weight: 213ko
  • Proper doctype
  • Proper charset
  • Proper open and end tags
  • Spamtester ok
  • Good ratio of images and text
  • Images natural ratio respected therefore non-flattened
  • Transparent gif 1 by 1 px
  • Images only in jpg or gif
  • Text on unite color background or flatten in an image so they can be read everyvhere -better readibility reduces possibility of spam and errors
  • The newsletter can be well read on smartphones, tablets and desktops