Great discussion, Thanks @jainamistry!
The issues you pointed out for outlook.com is what I would consider as broken and it's obvious you're aware of that. It's something you would have to "fix" to make right. I don't think I would put your outlook issue into the broken category though. Yes it looked off but it's not broken. "Fixing" outlook isn't the correct wording here, making the email look better in outlook is. Ultimately it all comes down to are you fixing something or making it better.
Experiments are ALWAYS worth it. Being brave and innovative is really what pushes email past the limits that are placed around it. Let's have fun with the things we truly love and find out what it's capable of. Let's be the ones that spark crazy and interesting things that are going to be perfected and will eventual end up in our inboxes from people that were inspired from the experiments we ran with.
LOVE Unsplash. I've only used their stock photos in manipulations. I haven't used stock photography other than that.
<!--[if mso]>
static
<![endif]-->
<!--[if !mso]><!-->
gif
<!--<![endif]-->
You can use Templates for the code base and Free Form Content Areas for the areas that you want editable. You'll use <custom type="content" name="your choice"> in your template where the Free Form Content Areas will go.
Note: attribute selectors will be stripped out in gmail
you'll want to add class="example" to the td with the background image and !important on the end of the css that's swapping out the image
@media screen and (max-width:450px) {
.example {
background-image: url("http://email.equinoxfunds.com/images/bckgrnds/corp/survey-background-2.png") !important;
}
<td class="example" background-image="http://email.equinoxfunds.com/images/bckgrnds/corp/survey-background-1.png" bgcolor="#5fc8f2" valign="top" style="background-image: url('http://email.equinoxfunds.com/images/bckgrnds/corp/survey-background-1.png'); background-size: cover" align="center" alt="Equinox Funds Square Box Background">