Case Study: Responsive Newsletters

1. The challenge

How do we achieve a responsive newsletter? What does responsive newsletter mean.

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.

2. The approach

Where are you user now? Where do they look and what is the best way to reach them according to where they are?

To know the answers to those questions you will, of course, need to listen to your users, generally and also to their reactions to the questions you will ask in the auto responder message you’ll have after they would sign up to your newsletter.

3. 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”.

4. 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.

This is what the “head” looks like in this case scenario.

5. Tying it all together

The same tests go.

As I did with the non-responsive newsletter, we need to test this responsive one as well.

Specifities here after all applied:
 — w3cvalidator O error. 0 warning. proper document
 — weight 213 ko
 — 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 1px
 — images only in jpg or gif
 — text on unite color background or flatten in an image so they can be read everywhere (better readability, reduce possibility of spam and errors)
 — all the users (including gmail and outlook ones) will receive the newsletter
 — the newsletter can be well read on smartphones, tablets and desktops

Subscribe to the blog newsletter to get new posts in your inbox every Sunday. You’ll also receive access to exclusive free guide about learning how to build social media foundation for your business to thrive.