How to Create a Responsive Newsletter Template with Media Queries

According to Campaign Monitor, mobile surpassed web and desktop client usage July 2012. As mobile email usage grows, web developers and designers must consider optimizing the look of their email newsletters on phones and tablets.

Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have different rules. That being said, some CSS might work while some might not.

So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.

Our Final Product

Our file structure will consist of an img folder and an HTML file since we will do internal CSS this time:

index.html – this will serve as our main file

img folder – for our image

The Markup: Building Design in HTML

Our HTML document starts with a DOCTYPE and then followed by HEAD, TITLE and BODY sections. Then, we’ll add the link to our Google fonts – “Pacifico.” We will also add the CSS later on in our HEAD section. So let’s go ahead and add this to our index.html file.

For our body tag, we will set margins off and then we’ll put the attribute selector yahoo=”fix”.

To explain this attribute, let me give you quick information about Yahoo. According to Campaign Monitor, Yahoo! Mail ignores media queries. To solve this, we need to use a tricky solution by using attribute selectors.

By adding a value of “fix” to the Yahoo attribute, it can give me access to the general selectors of media queries. To learn more about this, you can check this article.

Next, the header and the following table elements will be wrapped by a container with a 600px table layout. We’ll put a class of border-complete and put styles on the header on our CSS code later. The basic structures of the columns and inline CSS of elements such as the background color and width will also be added.

For our table and image elements, we will also add class device Width for the responsive look. Inside our header section, we will include two divider images and a logo.

Now that we have our header set let’s go ahead and add the banner image and the text markup.

For this part, we will be using the file img-banner.jpg on the resource that we provided above. The markup is just the same as the structure of the head except for the border. Instead of adding border-complete class, we will add border-lr class (this will add a border on the left and right only) along with the deviceWidth class.

For the products section, we need to align two columns. Go ahead and create two tables next to each other and give each column a 48% width. We will also add H2 and h2 tags along with their respective classes and then will, later on, add the styling on our CSS codes.

The Footer will also have the same styling like the header part so go ahead and copy the styling of the header. Inside our footer, we will create another table for our social icons and give it an id of social-icons followed by another row for our copyright text. At the end of our footer, we will put a closing tag to our wrapper table.

The CSS Tutorial Part

Now that we have our markup structured, we can now start adding different styles to the HEAD section to make it look good and responsive for desktop and mobile views.

Let’s first add stylings for our general elements, such as the body, image, buttons and tables. For our body elements, we will set this to 100% width for the responsive look.

For our table, we will set it to border collapse to set the tables whether the table borders are collapsed into a single border or detached as in standard HTML. This will be followed by the logo and buttons, which are fairly self-explanatory.

For our border, we have two classes. The first one is the border-complete class that will set all the borders (top, bottom, left, right) while the second class border-lr will only set the border for left and right.

By this time, you already have the same perfect look just like the PSD design.

Using Media Queries for a Responsive Look

To make our email template responsive, we will start adding some media queries for smaller devices. This is a technique to make HTML and CSS respond to the device width of the browser. So to do this, add the following code.

In this code, we use the Yahoo attribute that we put in the BODY tag to let us use media queries in Yahoo! Mail. On a 640px viewport, we will set the class deviceWidth to 440px and set the social media icons width to 40%. While on the 479px viewport, we’ll set the class deviceWidth to 479px and set the social icons to 60% width.

Final Thoughts

Congratulations! You now know how to optimize emails for mobile devices!.