I assume you mean the text is in a link that has been styled to appear like a button. In which case, there is absolutely nothing wrong with having both an underline and the bounding area serve as affordances. CSS also has many text-decoration-* properties for some progressive enhancement that has webkit support for the most popular email clients. And again, links (and buttons) are stateful, so different style properties can (and arguably should) be applied in different states.
Not sure what you are asking. The same image across any view is fine. The reality is that nearly all mobile devices have a 1.5x – 3x screen density, so a 600px wide image scaled down to 375px viewport is great because a 375px wide image would look poor in those higher density screens. Also, regardless of showing and hiding images based on viewport, if you use 2, both are downloaded – consuming time and data cost.
There are many ways. Tables, for example are responsive by default. Use no width or percentage based widths. You can also use Flexbox or Grid. However, the question I think you are asking is “how can I make it the same everywhere?” The answer there is you can’t, and shouldn’t. See this
Using progressive enhancement is the easiest method to ensure a solid experience everywhere – not the same experience everywhere.
I love this use case. Thank you for sharing. This is also one of many reasons to never embed text into images, as well as a reminder to add the lang attribute to the document.
An equally important question, is why is the client asking?
The first rule of ARIA is don’t use ARIA – use the semantic element and role.
What is the element that needs a label?
The first question should be why, not how. Please consider the value to the user over the value to the business. A countdown timer is designed to use the psychological principle and persuasion tactic of limited duration. This is very triggering for people with anxiety disorders and creates anxiety for people who don’t. It even triggers PTSD for those that deal with timers in emergency scenarios. Try a gentle reminder with positive language first.
Sure. Simply use the ! not condition.
<! -- [if !mso]><!-- -->
your non outlook image here
<![endif] -->
<! -- [if gte mso 9]>
your outlook alternate image here
<![endif] -->
There are tons of discussions on this here in the community, plus tons of articles like this:
https://medium.com/tealmedia/creating-bulletproof-html-emails-e0e4866c3f8
Absolutely.
<!--[if gte mso 9]>
your outlook alternate image here
<![endif]-->
Beware of the double download. Many email clients will download both images, even though you are hiding one and showing another.