Email Developer - (Make money) Working from home during COVID pandemic. Adobe, HTML Email + CSS 2021

hey hey hope you're having a good day i got some good news the course is now available click the link below to get full access and if you're new consider subscribing subscribing hey guys congratulations you have made it yet again so uh congratulations to everybody that went through the first part of the course where i literally broke everything down um well at least i tried to break everything down um old techniques that i've picked up over the years over the seven years i've been an email developer um yeah some of the tips and tricks i try to throw in in that first bit of the course so if you paid for the course uh basically you don't have to pay for any of those new uh segments and chapters that i'm adding on to um the course so basically you can just go and check them out for free uh that goes for any future training that i'll be doing so if you paid for it once you don't have to pay again all right so but yeah if you're wondering how to get access to the course either click the link in description or if you really like eyeballing what's on the screen you can just literally type out into the browser and then that should come up and you'll have full access to the course so um i did promise i was going to attempt to do this design as part of one of you know the many designs i'm going to try to cover within the training series itself um yeah so in this kind of like part of the you know tutorial uh i know some of you are coming from youtube so yeah in this part of the tutorial um what i'm trying to um break down is before we go into code what tends to happen is as a as an email developer you have to look at the the design that you've been given is the design uh worthy for you to actually consider to build is probably some of the things that you have to ask yourselves the question worthy in terms of is it going to be challenging when it comes to rendering different email clients such as gmail or an iphone or an outlook is this some sort of design technicality that needs to be addressed before we even start coding you know um so pretty much i like this version i was having trouble if i do this i was having trouble with uh let's see which one this is yeah i was having trouble with this one because you see this part is sort of glued you know i mean it's sort of glued to each other even if i was to slice it out and cut up this part from here it poses some kind of interesting challenges in different email clients so i would imagine some people would think i'm just going to bang in one image you know but maybe for future date we'll try to tackle it as it is and see what challenges we come up with um when it's rendering in different email clients so that one wasn't particularly my favorite uh but however this one seems to be an interesting challenge as well uh so let's just break it down quick and then i'm gonna take you into photoshop where i'm gonna slice out all the acids um and as i'm slicing all the assets what i'm trying to give to you is the process of how an email developer works so these are some of the things that you'll find on the job description to say can you actually cut out assets in that photoshop can you um build an email from scratch this is what they're talking about from scratch you've received a design from a from a designer uh or the art worker and then basically they've just given you the design so can you build it from scratch uh or can you build it from like a template where you're just uh using existing elements that that have already been designed for you to actually build your campaign so um yeah so to start off i'm just gonna break it down let me just put this maybe as notes i'm just in illustrator at the minute just playing around so nothing serious uh click ok let's see okay get rid of that then right okay so how i'm gonna do this is i'm just gonna go for it like just discuss the elements that on the page so we've just um received this design and we want to build it so what do we now think about so initially i'm going to think about this bit here okay i'm going to think about that bit there maybe if i'm going to do the stroke to something like so that you see where a point where i'm pointing this this part there is interesting because it holds um a little graphic i don't know if you can see it but there's a graphical element in this section so you would need to consider slicing out that little section okay let me just get rid of this box okay so yeah uh if i actually draw maybe as well make the brush size a bit small uh it's not what i wanted to do okay like that so basically what i'm referring to is this part here [Music] okay so that part there oops that part there is what i'm referring to as there's a little graphical art going on in there so you have to think about how am i going to slice that out okay all right so after you've worked that out the next section to worry about is uh this section as a whole this is not really good drawing because it's touching on the other one now okay let me go slow this one this one this on this one okay so this module there is its own thing and the one below as well let's see so this one this one is its own thing that one is its own thing and the footer is its own thing so we've got uh so we can say this one is section one okay and this one will be section two and this one would be section three and this one be section four okay uh and so this is how kind of looking at the email and breaking down what's what okay all right so let's move away from defining the sections i know it's a bit messy but we're gonna do another layer so now we're saying okay so this is a section what do we notice about the section um hang on a second let me get rid of this one what do we notice about the sections what we notice is the section has oh if i click on this one the section has this left side and it's got this right side okay so we have to think about what is the distance from here to here okay what is this distance and then we also have to factor in what is the difference from here to say about there okay normally this distance is recorded in pixels all right so let's touch on that one for now let's turn off this all right so what is the distance so for example there's a lot of numbers going in onto this design so if maybe i can just do something like this let's forget everything that's happening in the background uh yo i don't get the color okay just do white so that it just um gets rid off um trying to get white color here okay cool all right maybe also get rid of this border all right all right so let me just lock that up because i didn't like how it was looking so for example let's just focus in on this section right so if i move this to the center a little bit so we've got this distance and we've got this distance right and we know this is the left side and this is the right side okay of this module so now other factors to think about are this here okay and the color has gone to white so you won't be able to see properly let's go some kind of red so next up is this that i'm thinking about okay see this brown border thing yeah that's like you have to factor in like the distance like you have to factor in like how what is the distance between let me get the first two make it smaller what is the distance between here okay so is it going to be like 20 pixels could be or is it going if it's 30 pixels it could be okay so that's that distance you have to factor in right and then you've got this distance like i said the left and the right so let's start with the image is this distance say let's go into it is this distance going to be something like uh let's see bump it up a little bit is this going to be like um let's say 250 pixels okay is that distance going to be 250 pixels maybe all right so if we want to do half and half then that also means that um perhaps this side has to be ah see what happens when i zoom out it's more precise when i zoom in so this means that this side has to be something like 250 pixels all right let's just say that so this is 250 pixels this is 250 pixels we know already that this perhaps probably could be uh this could be from here to here this could be like we said 20 pixels okay so now if i zoom out we got all these numbers factoring in and like we haven't even factored in this gutter so let me zoom in what i mean so what is separating the image on the left and the right copy there's this divide in the middle so this gap is what i'm referring to like what is the number there this looks bigger than 20 so are we gonna say maybe this number is say 50 pixels uh 50 pixels all right something like that so perhaps it's uh in the middle we have 50 pixels 20 20 on the outside this image may be an image like the image here could be to make it bigger so it could be something like two huh maybe zoom in so i can write on here so this image could be something like 250 pixels by 250 pixels so this would be the width and this would be the height so it's a 250 by 250 okay something like that and so with all these all this information that we've just determined and then after all that determination comes the actual fact okay we can take these numbers and actually go and start coding all right so this is just what you as an email developer are doing you're actually looking at the design and saying to yourself hang on a minute like what are the numbers that i'm dealing with what is this and we've only just touched this top part okay so that's why i had to kind of hide the other bits um and again you don't need illustrator for this you can even just sketch it on a piece of paper just have your understanding of like okay because if you just dive in without knowing what you're actually looking at then that's a problem all right so let's say let's go deep with that analysis uh let me change this to something differential and visible maybe a bit higher more noticeable right so this this font business this is definitely an interesting google font or something like that what they use in here see the font so they're using like a interesting font wow that was quick writing fun okay so they're using an interesting font family fun family uh so yeah you'd have to know what fourth family they're using and also you have to notice that this font either is either bold or because maybe the font size is something like 30 so it just looks darker but i think it's bold so you know it'll be semi-bold or it could be like uh you know uh a variant of a bold uh which just makes it darker so yeah let's factor that in and you have to say maybe what's the fun size let's say fun size is 30 pixels front points bold what's the line height because you can see there's a big line height between the this top line and the bottom line what's this gap why is this what is this uh make it smaller what is this gap here okay this gap is what we call line height okay and if normally how you factor this line out height is if font size is 30 line height is most likely going to be 40. okay so oh it could be 45 who knows because it is definitely big number there um then we go to this this copy here uh this copy here uh this whole little chunk okay what i actually wanted to do was this thing that they do something like that so this copy here you could say the font family is probably ariel and you can say the font size is probably something like because this is smaller than 30 now so you can say the font size uh you can say 18 or 16 pixels um and then you can say the line height if it's 18 you can make the line height 24 pixels something like that um and then the same sort of styling on this piece of text i think it's the same that's happening here so it's the same consistency okay and also what you have to factor in is look at how the text is oh no whatever i want to do the text is the text is flash probably not a good way to do it it's it's actually flashing to the left okay nothing is centered so you have to take that into account okay everything is just flash left so it's text is left aligned okay and that would be like this text uh i think it takes a line in your code would be left okay semicolon so that's how you would uh deal with that but i'm gonna get rid of that okay so that's how you deal with that so you can see um what i just wanted to put across to you guys is how you can just tier a designer part as an email developer and what are you doing when you're tearing in a pot you're thinking in terms of like two steps ahead it's like chest you're thinking like okay i know what numbers i need to factor in before i even go into coding like here i need it to be 20 pixels then you come here and say okay i kind of expect the image i mean you could measure it like if you're in photoshop i think that mostly in photoshop you could use the lasso tool i think same thing happened in here uh yeah it says 233x2 pixels so yeah 250 wasn't so bad off um and so basically you you can um figure out okay my image is going to be this big and the text on the side i'm going to accommodate it within a cell or a td which is like 250 wide you have to factor in this part is this border here that this border here so what's that border doing okay it's 20 pixels okay fair and fine i'm gonna have to factor there in then you have to factor in the copies like oh the copy looks bold okay what's the font size fun size 30 pixels okay you know it could be more could be less but um you know but you you're taking all these things into account i oh the information is flash left so it's gotta be left aligned uh the spacings there's a lot of space in the designers have put in in here if i actually can show you i'm just gonna make it it's a bit messy at the minute but like if i go and do make the brush smaller but what i'm referring to is the gap between this and here which separates the title and the copy could be maybe 20 or 30 pixels all right so you got a spacer here of 20 or 30 pixels that is separate in the heading from the copy likewise you probably have an interest in similar or something along those lines for consistency between here and this one so here you also have some interesting numbers that is separating that title from the copy so these are all the numbers you are factoring in um other numbers you could be thinking about is this gap as well there's a lot of numbers so when it comes to you know you have to just like think about these things and get the brush so from here to here okay what is this distance oh okay let's say 20 for consistence 20 pixels so if i come out of it you got 20 this one oh this one looks bigger so maybe 30 so you got you got you got this number you got that number okay and then you got that number and then this probably for consistency like like what's happening here i expect it to be wait let me copy it okay copy all right let's see what he's gonna paste okay right i'm just yeah all i'm trying to say is equally for consistency the same uh if i do this the same 20 that's happening here is going to be the same that's going to happen here okay so yeah this little gap here is definitely similar to what's another copy the text seems like there's a lot of white space here but i i think this there would be some kind of like so if there was more text or if it wasn't broken into another line here the text could have carried on going that way basically and then yeah that would be that 20 white gap so what am i saying am i trying to make it messy or am i trying to be confusing no i'm saying there's a lot of detail that you have to pay attention to as an email developer okay there's loads of information when you see a design this is your journey to becoming pixel perfect because once you master how to break down all these numbers and knowing that okay i need 50 pixels here i need 20 here i need 20 there this is how you can actually be pixel perfect uh to match the design that you're supplied with by the designers so i hope i've i've broken this down um you know to to effects dent uh so that it's not like i'm trying to oh what am i trying to do i'm trying to hide this right so i hope i've broken it down enough so that to a point where you don't feel like i'm trying to make it make you you know bored or whatever but i'm giving you some kind of interesting insight into like breaking down the whole email all right so just before i go maybe let me spend another two minutes uh just breaking down something interesting um so let's say this part you'd have to take into account like oh you see this text is flash right so there's some right uh a line happening there you have to take that into account now this part there's no css that's gonna help you do some wavy stuff like this for your email right not gonna happen so how do you achieve that you'd need to slice out uh let me see it's two ways you can slice out this as an image like cut it out like this and when you cut it out you have to include this white space alright so that it just bleeds into this into not i don't want to write a three but i mean it just gels with what's above like the white background just gels with that uh the only thing i also have problem with cutting it up to here is that this sort of background has this kind of arc to it and this one is a kind of stylistic cut to it so how to tackle that is now instead of cutting just this i would have to now let me make it bigger for the distinction i'd have to cut it from here this whole thing will be the cut for the image all right mind my drawing but you get the idea so like yeah the top is still the same and then yeah so i'm cutting i'm going in photoshop doing my slices cutting this whole section including this background color okay as part of the image okay that way i have all these uh you know these grooves and stuff like that that's happening okay uh and as for something else that point wanted to point out is as for this bit it's the same sort of process um for this one is same but can be different you don't have to cut this whole thing as one block okay uh what you can do is just focus in on this part get a slice of this image including this color okay that's part image make the background color this color and then make this another row okay when you make this another row that means you can have two tables so one table holding the text underneath which is this bit and then the other uh part having holding all the social icons in here and then you you give this soft like this table a background color of this and then you align it center okay so you're aligning center and then this just becomes live background okay so that's uh something that i just wanted to tackle in those two minutes that i was i was saying but probably ran over but yeah um so this was me trying to break down this design um so yeah definitely head over to the link that you've seen on the screen it's definitely going to be uploaded there uh the full entire email build and how we break it down and cut out all the assets from photoshop i'll be taking you through photoshop and all the little nuggets all the little tips and tricks that i have learnt over the last seven years i just give them to you uh and uh i hope you enjoy this one there's many more emails that i'll be breaking down like i'll be going through so much like email related stuff on this channel as well uh in terms of um save example we break down how certain emails are being built emails that i see coming to my inbox and yeah we just break things down and make it as easy as possible and enjoy building a responsive email so yeah i hope you become an email developer today click the link below and i'll see you in the next video hey hey hope you're having a good day i got some good news the course is now available click the link below to get full access and if you're new consider subscribing subscribing [Music]

Channel: HTML Emails

Views: 772

Rating: 5 out of 5

Keywords: html, email, newsletter

Id: Z1fdLGAxe5o

Length: 30min 11sec (1811 seconds)

Published: Tue Apr 27 2021