<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=520757221678604&amp;ev=PageView&amp;noscript=1">
Jenny Lassi

By: Jenny Lassi on November 13th, 2013

Print/Save as PDF

Is Your Responsive Template Not Working?

Email Marketing

mailto:demo@example.com?Subject=HighRoad Solutions - interesting article

Responsive HTML code is not created equal. Coding HTML for a responsive web page is very different than coding for a responsive email template. Whether your internal team created a responsive template or you hired an outside agency to do this for you, the template you load into your HighRoad Campaign eMail tool to use may not render how you would like it to. As more of our valued clients begin to make their templates responsive and use these templates, we are addressing issues as they come into our support channel to help resolve any rendering issues they may be experiencing. When the HighRoad design team creates the responsive templates, we do so in a way we know from experience works with the greatest number of email clients and test before we load the templates into your account. Once tested responsive templates are in use in your Campaign eMail account, here is the ideal workflow to ensure the responsive back-end code does not inadvertently get deleted:

  • Create message and pull in your template or paste in template code
  • Put your cursor just before placeholder text and hit control V to paste your content from Notepad directly into the editor (do not use paste icons in the editor since the editor adds div tags instead of p tags)
  • Then highlight placeholder text and delete

If HighRoad wasn't involved in the creation of your templates, here are some common issues/solutions for responsive templates from our resident responsive guru Lydia Roberts:

Keeping Text/CSS Intact

When building a template in an outside HTML editor like Dreamweaver, the <meta> tags are normally added at the top of your HTML document. You will need to move any <meta> tags to after the closing </style> tag and before the closing </head> tag in order to maintain your CSS styles in the HighRoad editor.

Stacking Columns in Responsive HTML Email

Columns can be stacked in a few different ways, but one of those most reliable methods is to use separate tables for each column. This creates the appearance of two columns appearing side by side for desktop and allows us to stack the columns on top of one another for mobile. Example:

  1. Start by creating a table that will contain your columns.
  2. Create two (or more) tables inside the containing table. Each table needs a class name; we'll use the name "column". Align the tables left or right. Let's align the left column to the left and the right column to the right so that the columns align with the edges of their container. Add in widths for the tables. Note that the total width of both tables does not add up to 100%. We'll get to this next.An issue in Microsoft Outlook causes invisible borders to be added around tables which creates extra space. The result is that our columns will actually stack for desktop. To avoid this, we must make sure to not let the tables take up the full width of the container in addition to adding in a style tag that contains a partial fix for this issue.[html highlight="2"]<table width="48%" border="0" cellpadding="0" cellspacing="0" align="left" class="column">[/html]
  3. Add in the media query that tells the columns to stack for the mobile view.Voila! You've created a multi-column layout that will display the columns side-by-side for desktop and stack for mobile.

Completed HTML:

Completed CSS