This is pretty standard set up for multi language so strange it's not working. You should always declare a default language so that bit is correct.
Are you using an XHTML doctype? If so you will need xml:lang as well as lang. Although I'd recommend just switching to an HTML5 Doctype if you can.
As well as adding a default lang in the <html> element, it's also good to add an additional one on an element inside the body that wraps all of your content as the <html> element is removed by a number of email clients. Although I'd guess the screen reader test will be done in an environment that doesn't strip any code.
This is the basic set up I'd use
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div lang="en">
<p>Some content in english</p>
<p lang="es">Algún contenido en español</p> <!-- translated by Google translate -->
</div>
</body>
</html>
Yes is does.
Every character in the file = 1 byte and this include a space.
A new line is actually 2 bytes (something to do with it technically being 2 characters).
So this does add to the overall file size, but as you say, it is much easier to read and write code when it is spaced out nicely.
What a lot of people do is create the code spaced out cleanly like you have it (it's good to save a copy like this too) that then run it through a Minifier that will remove spaces, line breaks and even comments just before sending (also do this before testing as it could affect things). In my experience this can be anything from 10% to 90% saving on file size. https://emailcomb.com is a great tool you can use online for this.
If you find you need to undo the minify and have lost the original version, look for a Beautifier a lot of editing tool have this build in or if not can be added as an extension. This will add new lines and indentation back in and make the code readable again.
https://litmus.com/community/jobs is a good start.
There is a very active email geeks slack group that has a email-job-postings channel, sign up to the group here https://email.geeks.chat/
I'd also advice posting on twitter using #EmailGeeks & #EmailMarketing hashtags.
A couple of options you could try;
You could wrap both the image and the product title in the same <a>
<a href="https://www.google.com/" style="text-decoration:none;" >
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="272" border="0" alt="" />
<span>Product Title</span>
</a>
Here a screen reader should only read out the text in the link.
You could add the duplicate text as alt text but also add aria-hidden="true" to the <a> tag.
<a href="https://www.google.com/" style="text-decoration:none;" aria-hidden="true">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="272" border="0" alt="product title" />
</a>
This means where aria is supported you remove the duplication, where it's not it duplicates.
Hi Aman,
No worries happy to help.
Yeah it would be good if there were a way to remove a section if the break falls in the middle of it, but can't currently think of a way to target that in CSS.
There aren't conditional comments for Gmail or Yahoo but you can target them with CSS, it's probably not going to help much in this situation, but if you're interested there is a list of email client targeting tricks here https://howtotarget.email/
102kb is pretty large so I'm guessing you either have a large amount of content or a very complex design. If you can't reduce the content then maybe a simpler design could help.
I think the main issues come when the break falls part way through an opening element tag
<p class="foo" style="margin:1em 0">
if that's broken anywhere between the < and > it'll cause issues, if it's broken in the following text then the browser will automatically close the tag. So reducing the amount of inline styles and shortening class names can help.
A single column layout can be good, as this will use less code, also breaks in multi column layouts can look a lot worse.
But there will always be a chance that it will break in a tricky place if you go over the limit.
The app appears to work in the same way as teh webmail. So they replace your colours and inline the styles.
Previously we could override this by adding a class with !important to override their override. But since a recent update they are now applying !important inline so we can no longer override the changes they make.
I was digging around a little yesterday and I found when changing a color style in darkmode, Outlook will add data-ogsc to the element. And when changing a background-color style in darkmode, Outlook will add data-ogsb to the element.
So we can target this with something like [data-ogsc] .foo{}
We still have the issue of not being able to change colours but we can make other adjustments to try and fix some of the styling.
Here's some code to try out, for me this works in both webmail and iOS app.
<style>
[data-ogsc] .darkmode{
display:block !important;
}
[data-ogsc] .lightmode{
display:none;
}
</style>
<div style="color:#000">
<div class="darkmode" style="display:none;">this is dark</div>
<div class="lightmode">this is light</div>
</div>
You can either set the color on the <a> tag, or you could try the old link vlink attribute on body to reset the default colours that way.
<body link="#ff0000" vlink="#ff0000" >