Emmet is a plugin you can use with a variety of HTML editors. In this episode, Shannon Crabill of United Healthcare (UHC) shows us how to works with Adobe Dreamweaver.

Watch her walk us through it in the video below. You can also check out the show notes on our blog for more information. And don’t forget to subscribe on YouTube for more Notes from the Dev!

Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition. Hi. Welcome to today’s episode of Notes from the Dev. I’m Megan. And with me today is Shannon Crabill, senior email developer from United Health Care. Today, Shannon is going to blow our minds. It’s going to be so awesome. And she’s going to talk to us about how she saves precious, precious email developing time by using Emmet and Dreamweaver shortcuts. I’m so excited for this. Shortcuts are awesome. So, Shannon, why don’t we cue up the screen and why don’t you show us some awesome, awesome Emmet things?

Shannon Crabill [00:00:53] Sure. So if you don’t have the snippets panel in your Dreamweaver window already, you can get there by navigating to Window. And then at the very bottom are these snippets in there. A little panel should pop up or there’s a shortcut for it, which I believe is Shift F9 to get that panel open or closed.

Shannon Crabill [00:01:13] For those who don’t know, Emmet is essentially like shorthand for writing code. Similar to how you might write shorthand for CSS, but you can use it for other types of code. I use it mainly for HTML since that’s what emails are built off of, and what I love is that and I didn’t realize until recently, it’s pretty much baked into Dreamweaver. So, I’ll just start with some examples of how Emmet works is a lot of it is typing and then hitting Tab and then it’ll expand to create a whole  HTML tag. So a quick example is a <p> tag. I just hit p and then tab and then I have the whole tag ready to go. It’s pretty cool. It even does things like you can get a whole HTML document, Exclamation. Tab. Look at all that. All that code already started just for you. Pretty neat. And it can get more complex, which I think this is where the fun part is. And I use this quite often is you can do a asterisk or a star for multiplying a tag instead of one <p> tag. I could do three. So it’s p little multiplication sign, and three, and then tab. And I have three paragraph tags. That’s pretty neat. I use that a lot for if I’m doing like a lot of disclosures or disclaimers, I just need a bunch of paragraph packs. Start them aoff like that and just fill them in.

Shannon Crabill [00:02:28] They could also use Emmet to fill in, create the HTML element, and then fill it in with the content. And you would do that with the curly braces. So, as quick example, let’s do an H2 tag with a title and then Tab. And there we go.

Megan [00:02:43] That’s so cool!

Shannon Crabill [00:02:44] It is really cool, and it gets even better. So you can do the same thing with attributes. So, let’s do an image tag know, square brackets. Let’s go with alt text. Hi, Mom. Tab out. There we go. And you can just chain that for multiple attributes. That’s pretty neat. And to keep going, blow your mind a little bit more is you can do child elements all in one go as opposed to doing them individually. So with this example here, I would want this is creating an unordered list and then three list items within that list. So the ol, the greater than symbol, li and we’ll do three of them just because, and then Tab. And then similar things… So elements that are next to each other but not nested within each other. Little plus sign in there. This one’s a little bit complex. So let’s do H2 and then a p, and I want an unordered list and then a list item, and then three of those. I think that matches what I previewed. Boom. Got like most of an email already done right here.

Shannon Crabill [00:03:53] And to keep going a little bit more is you could also add your classes, and your IDs by just appending your HTML element tag, a dot for your classes, a pound sign for your IDs, and I guess you could do multiples too. And then there you go. So, to show you all. Boop. Cool Very cool. And then since this is emails, just now you can do a table really quickly. Table starts it off as well. Actually, that’s wrong. That doesn’t work. Table is one of the tags where it’s table plus and that gives you the whole table itself. To add to that a little bit, we usually add a lot of attributes to our table tag that that representation. So padding spacing for zero out couple rows and a couple cells and this will create a very nice. Pretty much starter email right there. And of course I can fill stuff in as needed, but you’re sort of seeing where like you could shave like little bits of time off of creating like simple elements, then adding to it as needed.

Shannon Crabill [00:05:01] So, I use this for I use Emmet a lot just for creating like those basic elements with the paragraph tags with items, that sort of thing. But where sort of to expand on that, I also learned that Dreamweaver has snippets.And this sounds obvious, but it’s been , I’ve been using Dreamweaver for forever and did not realize it had snippets. Snippets are just chunks of code or HTML or even text that you can save and then reference whenever you need it. So I use it for things like brand colors, or like link filing, or like whole buttons. And then I can add add to that as a go. If you don’t have snippet panel handy, it’s just Windows. And then snippets down here at the bottom. There are a lot of pre-filled ones you may not necessarily need, but they might be handy. You can also reate your own. I’ll do that in a second.

Shannon Crabill [00:05:52] Actually, let’s let’s do that right now. So, as an example… So we know that. I do p. That’s how it works with Emmett. I wanted to create my own version., I could do p, and let’s add some style. Color red and then actually description. Closing and ending tags. And there we go. So if I wanted to have some text. And highlight it. I can select it for my panel here. P tag. And I’ve got my styling done. That’s also pretty neat for paragraph tags. I might have to go to the filing that I want to reference and I have to take over and over again and snippets are good for that.

Shannon Crabill [00:06:42] And then to go a level further, you can assign trigger keys to your snippet. It’s sort of like those snippetss we had for Emmet. So, using this one as an example again. I can assign a triggers key. So, it would be whatever that key is. Or it can be more than one character, and then Tab, and it will expand to whatever code I’ve done. And for some reason it’s like to overwrite my stuff, but. I want a before and after. And I’ll just do para, just so I can note the paragraph tag.  And with my custom styling, para, Tab. There we go. So that’s a really tiny example. But I’ve used different things like filing for superscript tags, filing for links, that sort of thing, or anything special that you just want to have to type over and over again. And I can’t think of what else to share.

Shannon Crabill [00:07:36] Oh, I pulled this example from one of the recent Notes from the Dev emails where you had code snippets and then some style code for it. So, knowing what we know about Emmet, if I did just pre, it would expand to this. I could also type all of this out in the hit Tab, and it would create the styling that I want. But it’s really a good idea to see something like this and put it in a snippet so that I can reuse it. And a note I want to have about snippets is that for the trigger keys, they have to be unique and they can actually overwrite anything like the Emmet tag. So, like I talked about previously doing pre and then Tab with it would do this. But if I created a snippet that did that, So it’s pre, pre, wrap selection. If you do. Okay. And now my pre tag should expand to do something like this, which I just created. That’s pretty handy.

Shannon Crabill [00:08:39] And I think that’s the bulk of it. I have some bonuses that you all my I’m pretty cool along the same line. I did learn that you can just do Shift forward slash and it will start a comment tag. So that’s for if you’re just writing comments in your code. You can also do lorem ipsum right in here There’s a paragraph or so. You can also do lorem ipsum with a set number of words. So, lorem and 13 will give me 13 random words, which I think is pretty helpful for filling in all those cool tags you just created using your Emmet extension and your snippet. I think that’s all I have for today.

Megan [00:09:13] This is so awesome. Thank you. My mind is, like, blown by the curly brackets. And, like, the straight brackets. That’s a part of Emmet I never knew. And now I’m going to play around with it and make development just that much quicker, which is really awesome. And another thing I noticed is that Emmet is essentially a plugin. So it’s available in a lot of different HTML editors. So if you’re not using it, definitely still try it out in your editor.  And those shortcuts that you showed us are also available generally in other editors. So this just, you know, works outside of Dreamweaver too, which I think is really awesome that we can take this and then like bring it into our own editors that we may use.

Shannon Crabill [00:09:57] Exactly.

Megan [00:09:58] So, yeah. So this was really, really amazing. I loved learning about Emmett. It’s just so cool to me. I have nothing else besides that, except it’s cool. So, audience, that’s what we have for you today. Thank you so much for watching this episode and I hope you come back for more. Shannon, where can we find you online?

Shannon Crabill [00:10:22] You probably just find me on Twitter. @Shannon_Crabill on Twitter.com.

Megan [00:10:27] Awesome. Well, thank you again for coming on. And we will see everyone next time.

Shannon Crabill [00:10:34] Thanks for having me

Megan [00:10:37] Bye!

The post Notes from the Dev | Episode 3 | Using Emmet for Email Coding with Shannon Crabill appeared first on Email on Acid.

But Megan knows a lot of email geeks with specific questions about how to do more complex development tasks that don’t have a clear method in MJML. So, in the second half of this discussion, we’re finding out some advanced MJML techniques Nicole uses for things like dark mode emails, image swapping, and overlapping content in email layout.

Watch the episode and read the complete transcription below. For code snippets, check out the Email on Acid blog post.

Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition.

Megan [00:00:18] Welcome to part two of our MJML walkthrough with Nicole Hickman. Now we’ll look through some advanced techniques she has used while creating email campaigns. Enjoy.

Megan [00:00:26] So, like, what other things have you done using MJML now? Like, have you done image swapping and how do you handle dark mode and, you know, that sort of thing. Especially with dark mode, I don’t see anything here that like automatically puts that sort of thing in.

Nicole Hickman [00:00:44] With dark mode. And I have this example right here. Unfortunately, I have to do all that typing. So here I have a file. This is kind of set up. All right, so this is a file that’s set up for dark mode. So here’s what it looks like in light mode, and here’s what it looks like in dark mode. So going to the code. Again, a lot of this stuff is going to be taking place up in the <head>. So the scroll scrolls role. So here we’ve got the meta tags for content. So this tag is also kind of a little bit of a workhorse as well, this MJ raw and it means exactly what it seems to imply, which is when you wrap anything within here, it’s going to just sort of bust out of the box of the MJML framework and let you just put your stuff in just like you would in a normal HTML file.

Nicole Hickman [00:01:50] And so it’ll still parse the contents of this. It just won’t parse it with the restrictions of, say, like needing a section or a column, for example. So here’s, you know, just my regular styling from my boilerplate. Classes that I use a lot for this particular layout, just going bopping back over there to show you again. And then from there is where I start the dark mode styles. And again, this all works just like a regular style would. So here’s my code for switching. Oh, I should scroll down to the bottom. So, for example, if you want to switch, if you’re working with an email client that allows you to switch your logo from a dark image to a light image, you would simply. You can see how it switches the logo from a dark mode version to light mode version. So that’s basically literally the code that I think I pulled this from Alice Lee’s initial presentation about dark and light mode, image swapping, and then all this stuff here is just what triggers the actual dark mode classes.

Nicole Hickman [00:03:08] So the thing with MJML that is important to know is that the way MJML passes out the HTML, you need to know how to specify CSS selectors. So for example, I’ve got this right-angle bracket going to <table> because that is what happens when I go to my first section. So here I’ve got this section tab right where my background color for light mode is white. But I want it to switch to a dark mode background that I’ve defined in the styles above. So if I look at the way this parses out, so this is how. Oh my gosh, the dog has decided to get excited.

Megan [00:04:01] I love it.

Nicole Hickman [00:04:02] You know, it’s great. She’s such a funny girl. So you can see that actually the dark mode colors, the class goes into a div, but where the colors actually get applied is in the first <td>. So that’s why I have that, why I have in the MJML that target <td> so that it’ll apply it the actual class there instead of to the <div>. Because it wouldn’t override the backgrounds on the table. Sorry. Yeah.

Megan [00:04:44] That’s really cool. I might have to rethink how I target things on dark mode. I know this is about MJML, but now I’m rethinking about how I target on dark mode. Oh, that’s awesome.

Nicole Hickman [00:04:57] Yeah. I mean, I end up because I’m using MJML and because I, you know, after a little bit of trial error and also a lot of learning about how to establish specificity, that’s something that was kind of new to me up until about a year ago. Anyway, lots of YouTube tutorials later. And also there’s also a really great MJML Slack channel. So I, you know, just a lot of experimentation to get it to work. And this is the method. So that’s how we get our dark mode swapping. So yeah. So really when I see people saying things like, well, how do you in my Gmail, how can you, you know, target things like dark mode or even Ganga or swapping images from desktop to mobile? I say, “Why, let me show you.”

Megan [00:05:55] And here we are.

Nicole Hickman [00:05:56] I have an example for that.

Megan [00:05:59] I love it. So show us how image swapping would work, because I think we’ve seen questions about that before.

Nicole Hickman [00:06:05] Yeah, for sure. Let me come out of this guy and.

Megan [00:06:09] Ha, this is so cool

Nicole Hickman [00:06:15] I’m glad you’re liking it. Here’s the image swap example.

Nicole Hickman [00:06:15] So as you can see here, I’ve got an image in regular desktop view. I’m going to go over to inspect, and show you that once I go into- – let’s go fullscreen works. So when I look at this in desktop view, I’m getting this 600 by 400 placeholder image. But when I go down to say a mobile, it automatically switches it to a different image. To look at how that’s done in the code. It’s a little bit tricky, but I did this again as I was telling you, I think before I do code for everything for mobile first. Something that I’ve kind of evolved over the few years that I’ve been doing this. So essentially what happens is I have my first grouping of styles that are going to essentially create any of the Stuff in line to the tag. And the reason I do that is for GANGA specifically. Because Ganga, of course, as we know, doesn’t support media queries or even style for that matter. So I do this seemingly counterintuitive, but it works, technique where we’re when I want an image to show on desktop, I put a class of show on it, but I don’t want it to show on mobile.

Nicole Hickman [00:07:55] So here the inline style gets applied, which is display call and none when I go down to where it’s actually. Well then I also apply these same two class names with display, colon, block as you would expect and display colon, none as you would expect. But by doing the important right after them, they override, you know, anything in the desktop view because I had this media query here established. So let’s go take a look at the images. So this is the code. So this is the desktop view. You can see I have the text classical show and then I have my MJ raw tags to hide the mobile content from Outlook for Windows. I just grabbed an <mj-raw> and then I have my mobile image with a CSSclass of hide.

Nicole Hickman [00:08:50] So if we look at the HTML. We can see that initially, it’s showing. Well, in this case, it’s moot because we want it to show. But if we actually I should have done this. Yeah. So you can see that in line the class says display none. But since in my classes for desktop, I’ve got display colon block with important that overrides this inline setting. So essentially what that means is that no matter what email client you’re viewing this in, it’s going to work properly regardless of media queries or lack of support. So there we have it.

Megan [00:09:48] Awsome that is really cool. Yeah, that’s awesome. I say awesome and then cool a lot. I’m sorry.

Nicole Hickman [00:09:55] You’re fine. I live in San Diego.

Megan [00:09:57] It is what it is.

Nicole Hickman [00:10:01]  So that’s the example for that. Again, a lot of this stuff I kind of didn’t invent on my own in terms of technique. There’s a really awesome MJML Slack channel, but for those who are interested in learning more about MJML I’d highly recommend that you visit. And you know, it’s kind of the same kind of awesome support that we get on Email Geeks Slack. So, the same level of friendliness, nobody judges anybody and you know, lots of really good people in there. So I highly recommend it if you’re interested in delving into MJML.

Megan [00:10:42] Awesome. I know one other thing that we’ve talked about before is overlapping content, which I feel like would maybe be really hard in MMJML with how it’s structured. But I know you’ve done it. So…

Nicole Hickman [00:10:54] I have and I have an example. So this technique came from again from Mark Robins and Stephen Sayo. So I’m going to turn off the inspect just because it’s hard to look at. So this is an example of overlapping an object onto another object. So this image here is the one that’s doing the overlapping this. And I have this background. So the idea is that I wanted this to I didn’t want this whole thing to be an image. I wanted to be able to independently click a CTA. I wanted the text to be live. If images were turned off, this was not the most important aspect of this from a meaning standpoint, although obviously this is Greek copy because I anonymized it.

Nicole Hickman [00:11:58] So I just basically used the technique that the two of them had come up with. Take a look at the code for this one. So a lot of, you know, heavy lifting on the MJ raw tag there, by the way. But essentially these styles came directly from the code that Mark and Stephen had posted. And it’s just going into a regular style. But I decided in this case I could have kept it within the MJ style tag, but I decided I wanted this code to be. So what happens in MJ style is that everything you put in there kind of gets nested. And I wanted this to be its own separate style string, so easy enough to accomplish. I just wrapped it in its own style tag and within the MJ raw. So that way it just kind of I just felt it was a little bit more organized for me since I was experimenting with the technique. So this is all the stuff that does it. I’d be foolish to say that I fully understand everything that’s going on here. But, you know, just with some trial and error and of course, the source code that Mark and Stephen provided, I was able to get this to a place where I could get this overlap happening.

Megan [00:13:24] Awesome. That’s awesome. I keep saying awesome. That’s awesome. It sounds like that when somebody is like, well, MJML can’t do blah, blah, blah, blah, your answer is to use this MJ raw tag – or element. So put your stuff in there.

Nicole Hickman [00:13:43] There are a lot of things that MJML can do just all by itself. But if you have the need to do something a little bit more, something that would be cumbersome to try and do within the MJML itself. You can certainly bust out and just wrap things in MJ raw. That’s what it was developed for. So, for example, I will sometimes, you know, it depends on the use case, obviously, but you know how Gmail, particularly mobile, if you have one thing wrong, everything gets kicked to the curb. So sometimes when I have code that I think Gmail will not like, I will do that style tag separately and then that way it’ll still work even if Gmail throws it out because. So, yeah, so it’s really a use case kind of thing. But MJ raw is your go-to if you need to do something outside of what the normal MJML framework accommodates. So that’s it in a nutshell.

Megan [00:15:01] All right. So again, thank you for coming on, Nicole. This was amazing. I’m sure people are going to get so much out of it, you know, with just the dark mode stuff alone and that image switching and all that. I think it’s going to be really helpful. Why don’t you tell us where people can find you?

Nicole Hickman [00:15:23] Oh, okay. Well, I’m on LinkedIn. In addition to that, I’m on Twitter. That one’s maybe a little bit more friendly. So on Twitter I’m Missinfo_SD.

Megan [00:15:40] Awesome. I like that one. That’s a fun handle. My handle’s boring, yours is fun. Awesome. Awesome. Well, thank you again for coming on. And thank you people watching for watching. I hope you watch more. Stay tuned for more episodes and be sure to like, follow and subscribe to our channel for more later on. Thanks. Bye.

The post Notes from the Dev | Episode 2 Part 2 | Advanced MJML with Nicole Hickman appeared first on Email on Acid.

In our second episode of “Notes from the Dev: Video Edition”, I met up with Nicole Hickman. She’s a direct marketing developer for Fishawack Health. And when it comes to email frameworks, her go-to is MJML, which is a markup language that was created to make coding responsive emails easier.

Watch the episode and read the full transcript below. For more advice, show notes, and code snippets from this episode, visit our blog.

Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching “Notes from the Dev: Video Edition.”

Megan [00:00:18] Hello and welcome to today’s episode of “Notes from the Dev.” I’m Megan. And with me today is Nicole Hickman. And she’s the Direct Marketing Developer from Fishawack Health. Today, Nicole will be talking with us about MJML, which is a super awesome framework to help you build really responsive emails. It’s short for Mailjet Markup Language. So it’s been built by Mailjet, which you may not know, and you can do really, really awesome things with it without having to deal with, you know, the Outlook stuff and get these really beautiful responsive emails. Nicole uses it in her every day and has some really awesome examples to show us. So, Nicole, I am going to throw this over to you to show us some really cool MJML things.

Nicole Hickman [00:01:07] Great. Megan, good to see you. I’m going to pop over to what I use for my boilerplate real quick. So this is an example of how I start every project. Let me just navigate over it so I can get the code to update if I make any changes. I pretty much pull this into every new email that I create. So and this is some of this is work process stuff as opposed to code process stuff. But so for example, we always do include a title for our emails, which is usually the subject line of the email. It’s just a work process thing. But as you can see up here, we’ve got the MJML is kind of like equivalent to DOCTYPE if you did it in pure HTML. And here is where you would put your language, for example. So for accessibility, you would want to put your language within this tag. Obviously, in my case, it’s English, but any of the you know, the acceptable language tags would work here.

Nicole Hickman [00:02:18] Then moving down everything within this <mj-head> section here is essentially what you would expect to see in regular HTML it’s just within enclosed within your head tags. To take a look at some of the things that the way this comes out looking like in once it’s parsed to HTML. Sorry my cat. You know it puts all the standard stuff that you would normally see within any typical HTML email. So it does a really nice job with all that. Automatically puts in the zooming 120 DPI problem. And then you know, it puts you in any style tags that you specified as well as some default MJML style tags that are included just as part of the standard port to HTML. So just to take a look and see how it parses out to the HTML here.

Nicole Hickman [00:03:23] But going back to my MJML file, I also, based on something I learned somewhat recently from Mark Robbins and from Remi Parmentier, is that it’s also good to have not only your language in the DOCTYPE and <body> HTML tag, but also to try and include it as well within your first <div>. So this whole string here enables that to happen. So you can see when I put in this code here for the MJML, it’s called HTML attributes. You can specify that your path is going to be language, the name is going to be language, and then it’s going to automatically pop in this “EN” to make that work. You just need to go down to your <mj-body> tag and specify CSS class equals quote lang. And then you can see in the index HTML file that your very first <div> will have this language class, which means that it will put in lang=”EN” for the email clients like webmail clients when they strip out some of the DOCTYPE stuff. This prevents the language from being stripped out entirely. So this is like the initial wrapper tag for the email. Any questions so far?

Megan [00:04:58] No, this is awesome. I can see in your index-dot HTML how we can see that MSO specific code that you don’t have to deal with in the MJML file. So that makes coding way cleaner for you and less (inaudible).

Nicole Hickman [00:05:12] A lot less. A lot less typing. And. Yeah, it’s just it’s a timesaver more than effort, you know, time and effort saver. So essentially what happens is when you start so within MJML you have sections, columns, and then depending it’ll be… <mj-text> tends to be the workforce of the group just because a lot of emails are just text-heavy, right? So I do a lot of stuff within MJ text, but in order for this to work, you have to have your section first within there, then you establish a column, and then from there, everything else is just individual content. So there, for example, there’s <mj-text> which would take care of any text formatting needs. But you can also do things in here like write your own tables, which I’ve done quite often when I need something a little bit more specific than <mj-table> will allow me to do.

Nicole Hickman [00:06:16] You can put it in any pretty much any HTML you can put within an MJ text wrapper. And then as you can see, the section, text and column all get closed off, the tags get closed off. And you can have multiple sections within an email. So for example, you might have a section where you want to have a background color that’s different than the rest of the email. So you would pop that up in here with just the standard background. Let’s just call it red. And if I save that, it took this section and made the background red. So if I remove that just to show the default is white, which you can actually change as well. Save that. Go back over to my local host. Give it a second. And it is automatically, you know, switches that.

Nicole Hickman [00:07:06] So every section of your email is going to have a section or column or two columns or three columns that will stack in mobile. But you must have at least one section / column before you start doing things like <mj-tect> or <mj-image>. And then you close off your text or image or it could be a divider, could be a spacer, or whatever. You close all that stuff off and then you close your column, you close your section, and then you’re ready to either be done with your email or you can add another section if you have that you want to add.

Megan [00:07:42] Hey, this is awesome. Yeah, this is a great overview of MJML. I didn’t really know a lot about MJML when I first started developing emails. I looked at it very briefly, thinking, I’m going to be like just coding divs and whatnot. I didn’t know. I didn’t know anything about developing emails at the time. And I kind of looked at I was like, Peace out. I’m going to go look at like full code. And like I started learning from there. And now that I know more about email development, it feels like getting up and running with something like MJML is actually quite easy. Once you look at it and dive into it and it seems like a really elegant solution to get up and running on those emails like really, really fast. So I thank you for coming on today and showing it to us. I hope other people have found it really helpful. So with that.

Nicole Hickman [00:08:40] Yeah, and there’s just an additional link. So I would just say two things.

Megan [00:08:45] Yeah.

Nicole Hickman [00:08:46] Just highly recommend the Slack channel for MJML and also their documentation which I pulled up here, as you can see is really, really thorough. I probably visit this site probably every single day because, you know, I forget the syntax or something. Or wait does it have that property? Or you know, stuff like that. So they keep it really, really up to date.

Nicole Hickman [00:09:16] So two awesome pairs of tools to use if you do want to explore with MJML. And also last emphasis point is that you can pretty much do anything in MJML that you would do in a pure HTML file.

Megan [00:09:32] Hey there. Thanks for watching. Today’s episode of Notes from the Dev. Nicole has brought us so much amazing information. We’re splitting this up into two episodes. Come back to see how Nicole uses advanced MJML techniques in her emails. Be sure to like, follow, and subscribe to our channel to know when part two drops.

The post Notes from the Dev | Episode 2 Part 1 | MJML Basics with Nicole Hickman appeared first on Email on Acid.

Notes from the Dev: Video Edition is Email on Acid’s original web series for email geeks. Every episode, someone from the email community joins Megan Boshuyzen to share their ideas and advice on coding HTML emails.

In the very first episode, Megan welcomed Nout Boctor-Smith of LaunchDarkly. Nout shows us how a couple of pieces of code can turn a static hero image into something much more fun!

Watch the episode and read the full transcript below. For more advice, show notes, and code snippets from this episode, visit our blog.

Megan [00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition!

Megan [00:17] Hi. Welcome to today’s episode of Notes from the Dev. I’m Megan. And with me today is Nout Boctor-Smith, Senior Manager of Lifecycle Marketing at LaunchDarkly. Today, Nout will be talking with us about rollover effects and showing us how to get them done. How are you, Nout?

Nout [00:37] Hey, how’s it going, Megan? Doing well.

Megan [00:40] Going good. But why don’t you take it away and show us your awesome email and how you got it done?

Nout [00:47] So for this email, as you can probably tell by looking at it, it is an event, a virtual conference for the company that I used to work for. And what I was just trying to do was make it a little bit more exciting. It was during COVID and everything was kind of feeling very heavy and dark. And so we decided to like play around with the branding a little bit.

[01:15] And then also I wanted to just kind of pepper in some fun elements into this email. I was hoping that, you know, if I had fun with that, maybe my audience would as well. And so in this example, I just wanted to do something really, really simple. And I decided to go with just a hover rollover image that would swap out when you hovered over a section. And it’s really, really simple.

Nout [01:43] What I did was there are basically two images: the main image and an alternate image, and both images are wrapped in a link and that class is rollover. Then the main image class is main and the alternate is alternate. You can obviously name your classes whatever you want, but I kind of stuck with the templated code.

[02:11] It’s good to have both images be approximately the same size. You want to use two-x width when you can. So I have these images, the elements about 500 pixels wide. Ideally, your image size would be about a thousand pixels wide just to make sure it looks good on Retina displays.

Nout [02:35] So, you’re seeing the HTML here and the CSS I put in its own little style section here by itself because I am just super paranoid that Gmail is going to hate something that I did in the code and just strip out the entire style section and just mess up the whole email. So I just put it in its own little box.

[03:03] And you’ll see here, when you’re basically hovering over the main image, it is not viewable. And then when you hover, the alternate image is viewable. It’s really, really simple, really easy, and fun.

[03:22] The other element you might see as well is I use Nifty Images to pull in a first-name personalization. You can use any piece of data that you have in your database. We did lead first-name. And I just thought that would be cute. You know, “You belong here, Nout.” Of course, it’s not showing here because this is a test. But in doing that, you know, it’s a very quick and easy thing you can do.

Nout [03:52] And right here, Email on Acid shows how to create a responsive rollover images article. And this article is actually from 2016. But you know what? This still works. So I just used the code for the responsive method. I just repurposed this example. I love repurposing code that already exists. Someone’s played around with it, tested it, and is sharing it with the community. Always appreciate that. That way you’re not having to come up with, you know, code out of your own brain.

[04:30] And so with this older article, there are multiple different methods. There’s a fix for Outlook, which I did not employ. And there’s also this section about adding support for Gmail. This actually worked perfectly. This is very, very simple, just two images, a class around both images. Each image has a class and then you’re using the hover pseudo-class to kind of tell it, when you’re hovering, show the alternative image. When you’re not, it shows the main image as the default. And then when you’re hovering also minimize the main image. So that appreciate, you know this example here. The instructions worked perfectly.

Nout [05:19] So let me show you what it actually looks like. I’m going to have to go into Gmail. So right here, this is the email test in my inbox. It’s not showing the first name personalization because it’s a test email, so it’s not pulling my name from our marketing automation. But you can see when I mouse over this section…

Megan [05:46] Ah! So cool.

Nout [05:47] It swaps the image. So just kind of a little fun element, super simple. And the other thing I wanted to say was this does work on mobile, but because you don’t ever have a hover state on mobile, when you press the image, when you tap the image with your finger, you can kind of see for a second that the alternative image shows and then it takes you to the link.

[06:15] So I think, personally, that was a fine experience for what I was trying to achieve here because I knew that it was going to heavily skew towards desktop. In the example, I believe that I showed on the Email on Acid blog, there is some stuff you can do to like do a little bit of a delay on mobile so that the person maybe sees the hover state a little bit longer. But so I guess consider, you know, your audience and your email clients when you’re building something like this.

Megan [06:51] Very cool. This is awesome. I love it. I’m probably going to try this soon. Never done it before and it’s great to see how easy it is to do. And just that little piece of interactivity is just so, so delightful. I love this. Thank you for showing it to us.

Megan [07:08] I can’t wait to try it out in one of our emails. Don’t be surprised if you see it show up somewhere in the Email on Acid newsletter, which if you’re not subscribed to that – you should. Again, Nout, thank you. Why don’t you tell us real quick where we can find you on, like, the socials and whatnot?

Nout [07:25] Absolutely. And thank you, Megan. It’s such a simple thing. And I did borrow that code from the Email on Acid blog. So I appreciate that content. You can find me on Twitter at @kittehluvs.  Because I’m a cat lady. And you can find me – I’m always around Email Geeks Slack. So if you’re on there, hit me up. Yeah. That’s it, I guess.

Megan [07:55] Awesome. Thank you again for coming on and thank you for watching Notes from the Dev. Stay tuned for more episodes. Be sure to like follow and subscribe to our channel and we’ll bring you more next time.

The post Notes from the Dev | Episode 1 | Rollover Image Effects with Nout Boctor-Smith appeared first on Email on Acid.

But where do things stand now? Will AMP for Email live up to its promises?

The team at AWeber has been experimenting with and implementing AMP for Email features in their work. Check out what they’ve been up to! Let Dave Stys and Jeni McGuigan show you how it works and answer some questions in this eye-opening session from Splat Fest.

Get AMP for Email code examples from this session as well as more information from the AWeber Team.

More about AMP for Email:

• How to Use AMP for Email
• AMP Emails vs HTML: What Gets Higher Conversion Rates?
• Outlook is Turning Off AMP for Email

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post How AWeber Uses AMP for Email | Splat Fest appeared first on Email on Acid.

Email marketers are interested in getting brand logos to display next to messages in inboxes. BIMI implementation means boosting visibility and strengthening brand reputation. For subscribers and customers, it means trustworthiness, security, and the confidence that you’re not being spoofed by scammers.

But how hard is BIMI to set up? Two members of BIMI Group joined us at Splat Fest to take questions from email marketers. Find out what Matt Vernhout of Netcore Cloud and Marcel Becker of Verizon Media have to say about the process of implementing BIMI for your brand.

Download Slides

Working on BIMI implementation for your brand? Check out the BIMI Inspector tool mentioned in this video.

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post BIMI: Ask Me Anything | Splat Fest appeared first on Email on Acid.

Subscribers can’t engage with your emails if they can’t read or interact with them. Are you sure your email campaigns are accessible to everyone on your list?

In this insightful Splat Fest session, Email on Acid UX Designer Elise Georgeson and email developer Anne Tomlin of Emails Y’all show us the importance of empathy, accessibility, and inclusion. Learn how to put yourself in your subscribers’ shoes and improve email accessibility.

Download Slides

Email on Acid is passionate about helping marketers reach subscribers with an ideal experience. That includes making emails accessible to everyone. Find out how we incorporate email accessibility features into our pre-deployment testing platform.

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post Email Accessibility: Marketing with Empathy and Inclusion | Splat Fest appeared first on Email on Acid.

In this popular Splat Fest session, Eric Elliot and Kevin Linden provide examples of effective tactics that make email campaigns more personal, interactive, and effective.

From countdown timers and localized info to personalized data and geotargeted maps, you don’t have to be a developer to make it happen. See these features in action and get some ideas for how to use dynamic content to boost engagement and support your email strategy.

Download Slides

More helpful content on personalization and dynamic content:

• Beyond a Name in the Subject Line: What Is Email Personalization?
• 10 Best Ways to Use Dynamic Content in Email
• 15 Best Dynamic Content Tools for Email

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post Show and Tell: Dynamic Email Marketing | Splat Fest appeared first on Email on Acid.

Here’s one way to find out.  Watch as Kelleigh Stewart from Big Island Coffee Roasters in Hawaii provides us with a master class in coffee-making. Get tips to improve your morning and/or afternoon pick-me-up.

Email on Acid is proud to have cool companies like Big Island Coffee Roasters use our email pre-deployment testing platform to deliver perfection to subscribers.

Curious about how it works? Try out Email on Acid with a free 7-day trial.

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post How to Brew a Better Cup of Coffee | Splat Fest appeared first on Email on Acid.

Watch as Jenny Maglio of Laughlin Constable and Digital Marketing Director Eric Nebbia of The Master Lock Company provide the full story behind the power of email automation.

What you’ll discover in this Splat Fest session recording:

• How to build out a strategy that fits your company, skillset, and timeline.
• How to leverage data to create meaningful automated email campaigns.
• Understanding and avoiding the challenges that can lead to marketing automation failure.

Download Slides

For more email marketing automation advice, check out these articles:

• Make Marketing Automation Magic — Not Mayhem
• B2B Email Automations: 13 Campaign Ideas
• B2C Email Automations: 10 Campaign Ideas
• Email Automation: 35 of the Best Marketing Tools

See other Splat Fest sessions and watch recordings from our virtual event to expand your email marketing knowledge even more!

The post Marketing Automation Master Class | Splat Fest appeared first on Email on Acid.