NB: this article relates to the previous email campaign editor, which has been superseded by the Enudge Drag and Drop Editor. Please refer to this collection of articles for editing emails using the drag and drop editor.

Mobile responsive emails do not require the reader to pinch, zoom and pan around their screen in order to be able to read the email contents.
​
When editing the contents of your email campaign, based on one of the mobile responsive Enudge style templates,  make sure that you do not delete the outer two tables of the campaign design. These are an important for the responsive behaviour to work correctly.

If editing the template via the source code view, also make sure that you do not delete the code above the first table. This code is required to help the email function responsively. At the top of the email content editor, you will see a line of code that looks like this:

This section of code is quote long, and will end with a line that looks like this:

Adding & Removing Rows of Content

To add extra rows to the main content section of the email template, place your cursor within the existing row, and then click on Table, Row, and then Insert Row After option from the email message editor toolbar.  You can add as many rows as needed, by repeating the above steps.

Alternatively, you can add a row above the existing content by choosing the Insert Row Before option instead.

If you need to remove a row of content, place your cursor anywhere within the row to be removed, and click on the Delete Row option.

Adding & Removing Columns of Content

To add extra columns to your main content section, place your cursor in the section, and click Table, Column, Insert Column Before or Insert Column After from the email message editor toolbar.

It is not advisable to add any more than one extra column of content (making 2 columns of content, in total). Adding an extra column of content, may cause the text to look quite squished on a mobile phone view. Responsive emails work best with one single column of text.

To remove any unwanted columns, place your cursor in the column you wish to remove, then click Table, Column, Delete Column.

Adding a large, responsive image (full width)

When adding a larger image to your responsive email you would most likely want it to span the full width of your email campaign, including when shown on a mobile phone – that way the reader will still be able to see what the image is of despite their small screen.

Insert an image, as you would normally, by clicking on the Insert, Insert/Edit Image option from the email content editor toolbar. This will bring up a window, where you can either browse for an image, or upload a new one to your collection.

1. Change the dimensions of your image to 100% x 100%.

2. Click on the Advanced tab, and in the Style field paste the following code:
   ​height: auto !important; width: 100% !important;

3. Then click “Insert” and your large responsive image is now ready to go.

These settings are the magic that will cause your image to shrink with the device screen automatically.
​

Align Image Left or Right

When adding an image that you wish to align to either the left or right of text content:

1. Place your cursor in the section of text beside which you intend to position your image, and insert your image as usual.

2. Choose Insert, Insert/Edit Image and then select the Advanced tab.

3. In the Style field, enter either of the following to cause your image to float to the right or left of the text it is sitting beside.
   ​align: left or align: right

4. Also enter the following to cause the image to display well on the mobile:
   ​height: auto !important; width: 40% !important;

5. When aligning images left or right, it’s often nice to have a bit of space around the image. To add this extra space, in the Style field add padding of between 3 – 10 pixels using the following code:
   ​padding: 5px;

Unfortunately Outlook tends to display these images a little imperfectly. For example, when there is more than one specially aligned responsive image per row/column, the images end up overlapping each other in Outlook. One way around this, is to only use one aligned responsive image per row/column. Add an extra row for each new image that you wish to include.

To ensure that having text floating right or left of your images works in both the Browser view and in older versions of Outlook Email, you need to ensure that you have both old style HTML code and new in side your images.  This requires a bit of editing of the HTML code behind your emails.  Below is an example of the code to correctly cause your image to sit to the left of your text (both the bold sections are required):

<img style=”float: left; margin: 20px;” src=”yourimagename.jpg” width=”100″ height=”107″ align=”left” />