How to make a banner image mobile responsive (html email in Dreamweaver)

Report · Jun 13, 2017

Hi there

I am editing a html email in Dreamweaver using a template that we got online. Most of the images are mobile responsive however the banner image across the top is not. I would like some help on making this responsive in mobile view, if possible?

I have included a couple of screenshots to show the 'normal' desktop view and the mobile view (second photo) where you can see that the background image with the white box does not resize.

I believe that this is the bit of code that is relevant to this section:

<tr>

<tr>

<tr>

</td>

</tr>

<tr>

<tr>

Any help would be much appreciated!

Kate

Report · Jun 13, 2017

That NOT going to work as that 'transparent' box is static, part of the background image, so it has zero chance of growing in depth as the text does when the screen gets narrower.

You are going to have to some how use a nested table to house the text and use a transparent .png image to create that effect as I dont think css rgba transparency is supported in email clients.

Report · Jun 13, 2017

Hi Osgood

Thanks for your reply. The white faded out box is part of my main image (pebbles/ water image) so I agree it would not grow in depth as the text does. I am not sure how to use a nested table as you suggested so I wanted to make the whole image (water/ pebble image) which includes the faded out white box (edited in Photoshop) mobile responsive so that the water/ pebble image resizes. Is this possible?

Thanks again.

Report · Jun 13, 2017

Basically, what you need to do is put a table in there with your background color and the text over it so it's not part of the image. Also, transparent images are tough because the rgba or opacity CSS functions are not supported in most email clients, so you are limited to transparent images using PNG or GIF file types which support transparency to use as a background.

I also see one other flaw in your code where you are linking to a local file, noted by file://// . That file will not be seen in your email because it is on your local machine. You will need a remote URL to host the image at.

Lastly, here is a resource you can use to determine which CSS can be used in which email clients. Personally, at the end of the day, it's all about testing. You can also use tools like Litmus to help you see how the email will look in multiple clients.

Email Client CSS Support | Email Design Reference

Report · Jun 13, 2017

katem939525 wrote
Hi Osgood
Thanks for your reply. The white faded out box is part of my main image (pebbles/ water image) so I agree it would not grow in depth as the text does. I am not sure how to use a nested table as you suggested so I wanted to make the whole image (water/ pebble image) which includes the faded out white box (edited in Photoshop) mobile responsive so that the water/ pebble image resizes. Is this possible?
Thanks again.

You are going to have to set it up more along the lines of the code below and replace the solid white background where the text appears with a repeating transparent png background to get the effect you need for the overlay.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Responsive Email</title>

</head>

<body>

<tr>

<tr>

<td style="font-family: helvetica, sans-serif; font-size: 14px; text-align: center; padding: 30px 0;">Shop Now | Eco Material | Email Us</td>

</tr>

<tr>

<td style="padding: 0 0 20px 0;"><h1 style="font-family: helvetica, sans-serif; font-size: 30px; margin: 0; padding: 0; text-align: center; color: #5E4B3D;" >WE GO ABOVE & BEYOND!</h1></td>

</tr>

</table>

<tr>

<p>You can rest easy knowing you're in good hands with us! Alongside our quality eco packaging, we pride ourseleves on excellent customer service. We hope you agree.</p>

<p>Read our customer reviews below and feel free to provide us with your own!</p></td>

</tr>

</table>

<tr>

</tr>

</table

</td>

</tr>

</table>

</body>

</html>

Report · Jun 13, 2017

Adding to what others already said about the perils of CSS in emails, etc... your assets need to be absolute URLS to images hosted on a public web server. You cannot use local images in emails because nobody can see those files except you. For example, where you have this:

file://///NAS/Volume_1/Green Gate/Marketing/Mail Chimp/Templates/Envato/Templates/HTML/images/header-bg.jpg

That will need to be changed to http://YOURDOMAIN.com/folder/filename.jpg where YOURDOMAIN.com is your web server and folder is a directory on the remote server.

Also keep in mind that many email clients strip out images and background images for security reasons. Plain text is all they will see. For more info, see HTML E-Mail & Newsletter Blasts - http://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 28, 2017

Thanks Nancy and apologies for the delay.

I believe that file://///NAS/Volume_1/Green Gate/Marketing/Mail Chimp/Templates/Envato/Templates/HTML/images/header-bg.jpg

is in there as an error and is hidden by the main image so hopefully isn't causing an issue. Perhaps I will be able to just delete this from the email.

I will try to create a transparent nested table if possible however, is there a way of just making the following url image mobile responsive?

<tr>

<td class="header" style="background-position: center top; background-repeat: no-repeat; background-color: #eaeaea; background-image: url(https://gallery.mailchimp.com/fcd24a1e8339283277d26e1ee/images/133576eb-6365-4b7f-92ad-4f1 b613b50f8..." align="center"

Do I have to edit the CSS file in order to make it so?

Thanks!

Report · Jul 28, 2017

CSS file??? There should be no CSS file for EMAIL.

Maybe the Template you acquired is not made for EMAIL use?

Ideally you should be working with an industry tested HTML EMAIL template that works in all major email clients & browsers.

Example:

Free Newsletter Template (PSD & HTML) - GraphicsFuel

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 02, 2017

Hi Nancy

Perhaps. I think when we got the template it was specifically for email however I have been editing it in Dreamweaver which may have caused confusion?! (i thought CSS files were involved however I am learning as I go so not clued up at all).

I am not sure as I am quite a beginner so I would really appreciate if you could give your advice on the following:

- should I be using Dreamweaver to edit html emails (using the template I have)?

- what programme/ software would you recommend for creating and editing html emails?

- do you have any suggestions of free online resources (or paid tutor based courses) where I can learn to create html emails?

Thank you for your time.

Kate

How to make a banner image mobile responsive (html email in Dreamweaver)

1 Correct answer