Highlighted

images not full width in outlook

Explorer ,
Jan 25, 2019

Copy link to clipboard

Copied

I'm building a html email and for the most part it's going well but there are two images (the ones with the alt tag "doesn't reach" in the code) that I can't get to show as the same width as the rest of the white sections even though they show correctly in a regular browser. Any ideas ?

A screenshot and the code is below

Dropbox - test.html

We compose email newsletters all the time. Jut like a normal web page, you need to prioritize the coding for certain devices first - the equivalent of dong a web page mobile-first, for instance. Here's some tips based on what we've found over the years:

Never use tables.

Never use style tags.

All CSS should be inline, on the actual markup tags.

The result is that our emails are perfect in most online mail viewers, and always perfect in Thunderbird (Mozilla's desktop email client).

Here is an example of one of our mails:

News from PVII

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

images not full width in outlook

Explorer ,
Jan 25, 2019

Copy link to clipboard

Copied

I'm building a html email and for the most part it's going well but there are two images (the ones with the alt tag "doesn't reach" in the code) that I can't get to show as the same width as the rest of the white sections even though they show correctly in a regular browser. Any ideas ?

A screenshot and the code is below

Dropbox - test.html

We compose email newsletters all the time. Jut like a normal web page, you need to prioritize the coding for certain devices first - the equivalent of dong a web page mobile-first, for instance. Here's some tips based on what we've found over the years:

Never use tables.

Never use style tags.

All CSS should be inline, on the actual markup tags.

The result is that our emails are perfect in most online mail viewers, and always perfect in Thunderbird (Mozilla's desktop email client).

Here is an example of one of our mails:

News from PVII

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 25, 2019 0
Mentor ,
Jan 25, 2019

Copy link to clipboard

Copied

We compose email newsletters all the time. Jut like a normal web page, you need to prioritize the coding for certain devices first - the equivalent of dong a web page mobile-first, for instance. Here's some tips based on what we've found over the years:

Never use tables.

Never use style tags.

All CSS should be inline, on the actual markup tags.

The result is that our emails are perfect in most online mail viewers, and always perfect in Thunderbird (Mozilla's desktop email client).

Here is an example of one of our mails:

News from PVII

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2019 1
Explorer ,
Jan 26, 2019

Copy link to clipboard

Copied

Thing is that the rest of the code works absolutely fine on devices and in other desktop apps. Even have a background image showing fine in outlook. It just doesn't make sense that the image is not flush as it should be.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Mentor ,
Jan 26, 2019

Copy link to clipboard

Copied

Actually, it makes perfect sense. Outlook is not a browser. It is a desktop email client, and one that offers very little in the way of support for CSS standards. The good news is that unless you have a very unusual market, the vast majority of your audience will not be using Outlook.. For those who are, simply follow the recommendations I gave you.

That's just the way it is, and I'm afraid it is not really an arguable issue.

Now, tell me what happens in a desktop browser viewing your page when you make the window narrow?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Explorer ,
Jan 26, 2019

Copy link to clipboard

Copied

it stays flush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Mentor ,
Jan 26, 2019

Copy link to clipboard

Copied

Post a link to a real test page.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Explorer ,
Jan 26, 2019

Copy link to clipboard

Copied

code is in the dropbox link in the 1st post

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Mentor ,
Jan 26, 2019

Copy link to clipboard

Copied

I don't want your code. I want to see an actual page online 🙂 That's the only way to do an empirical test. If not, anyone helping you is going to need to copy your code, create a document, and only then be able to give it a thorough test. Curious... how are you testing your work in Outlook? Are you sending yourself emails?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
Explorer ,
Jan 26, 2019

Copy link to clipboard

Copied

test is pretty simple: open a new mail > insert file > select html file > insert as text , no need to actually send

test page is here - http://emailteststite.epizy.com/test.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 0
ALsp LATEST
Mentor ,
Jan 26, 2019

Copy link to clipboard

Copied

The code is a mess. HTML.com is not a good resource. If you are trying to do an HTML mailer, you need to simplify the code. Do you know how much of your market actually uses Outlook, or is this because you use it yourself? Have you conducted a good testing process, testing a basic structure, then adding to it? Have you checked not just in Outlook, but also with Thunderbird and online Google Mail?

Again, the best advice you are going to get can already be discovered in the link I provided and the original answer I gave you. Keep things simple, do not worry about multiple columns, use style attributes directly on the tags in your page instead of embedded in style blocks in the head of your document.

And lastly, ignore the articles that advise using tables, font tags, and other assorted archaic methods. Or completely ignore my advice, and do as you please. It's your choice. I do know that our emails work

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 1
Adobe Community Professional ,
Jan 26, 2019

Copy link to clipboard

Copied

I don't have Outlook so I'm flying in the dark.

<td style="padding: 0px; font-family: sans-serif; font-size: 20px; color: #555555; background-color:white; border:none"><img src="https://dummyimage.com/680x75" alt="doesn't reach" style="width: 100%; max-width: 680px; height: auto;"></td>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2019 1