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.
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.
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.
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.
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.
As I did with the non-responsive newsletter, we need to test. in doing so, the same tests apply.