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.
While methods described here will work, it is important to consider why you would do this. Links have states: default/link; focus; hover; active; and visited. Each should have appropriate and accessible affordances (plural). Removing an underline from a link is like removing a door handle from a door. If you replace the underline with some other display properties, please ensure that you use more than one and that they are clearly differentiated from surrounding text. Then, test.