Responsive design has been growing steadly in popularity in the last years. It’s time to apply this pattern also to the email marketing ecosystem. According to a new research 47% or email opens are on a mobile device a new record, nearly a 24% cheange since a year ago. and some brands see upwards of 70% of their email opened on mobile devices.

If last year’s trend is any indication, another 13% increase between August and December this year would put mobile opens at 53% by year trend!

The main technique under the hood of responsive newsletter is the use of media query.
Using media queries you can:

• Change hierarchy
• Change navigation
• Enlarge fonts
• Change fonts
• Scale images
• App padding/margin
• Hide/Show content

The first thing to do is setting the meta viewport in the head tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1">

Then create a table witha width of 100% and a amx-width of 600px to prevent a big stretch of the newsletter:

 <table cellspacing=”0" cellpadding=”0" border=”0" 
 style=”width: 100%; max-width: 640px; min-width: 320px; background-color: #ffffff;”>

Then also give width 100% and amx-width 600px to the images in the newsletter:

 <img src=”http://www.yoursite.com/image1.jpg” 
 style=”width: 100%; max-width: 600px; align=”middle” border=”0" />

The last part is adding your media query in which you can declare the layout rules for the particular width:

 <style type=”text/css”>
@media only screen and (max-width: 480px) {
 table[class=”container”] { 
 width:320px !important;
 }
 }
 </style>

In this case we set the container to 320px if the device has a width of 480px (iPhone screen on landscape mode).