Adding Images: Exercise & Solution

[00:00:00]
>> Jason Rodriguez: Add in some images hopefully you already had some, if not add a little logo similar to mine, and then a hero image, use something like Laurinpixel.com or something like that if you don't have images ready and make them responsive most importantly for your email make them responsive by default so that they scale appropriately across the screen sizes.

[00:00:20]
>> Speaker 2: Question for you.
>> Jason Rodriguez: Yeah.
>> Speaker 2: Did you say you're using an extension for EMET or just the built in one for.
>> Jason Rodriguez: So I usually use EMET when I'm coding something from scratch. Like for any of the snippets that I have been expanding. Just speed things up as TextExpander.

[00:00:37]
>> Jason Rodriguez: So I have those and a couple just saved for basic things like a boilerplate for like an image.
>> Speaker 2: You created those, that's not an extension.
>> Jason Rodriguez: Yeah. There's a good tool, you can go Litmus. We actually have like an online community that has a bunch of resources.

[00:00:51]
You can go to litmus.com/community/snippets. And there's a bunch of like crowdsource snippets for things like that you can pull and put in whatever system you need to.
>> Jason Rodriguez: Hopefully you all had a chance to add some images to your email. We can look at that code again real quick.

[00:01:12]
So we have our same email campaign. We have the image that we added up here. Again, we're not doing anything responsive because it's that logo image. It's small enough, we don't need to really account for it on mobile devices, it's not gonna resize or do any weird stretching.

[00:01:28]
But the main one is this hero image we added descriptive alternative text. We added this width of 600. So that in outlook it constraints properly and it's not blowing out the layout. And then most importantly, for responsive stuff, we added the max width to 100%, min width to 100 pixels, and then width 100% to make sure that it scales cross those different device sizes.