How to design & code HTML emails (Part 1 - Designing in Adobe XD)

what's up YouTube my name is Tom I'm Digital Designer and today we're gonna be learning how to design and code HTML email now it's it's not that hard a lot of people think it's quite hard but it's not we're going to break the video down into two parts so part one will be the design and part two will be the code so in today's video part one will be designing in Adobe XD if you don't know what it is go and read about it it's a great bit of kit now you can design this sort of stuff in I would suggest either XD figma or sketch um you just need something so you're able to measure the pixels around your spacing and things like that and easily setup styles so I'm gonna be doing an XD if you want to follow along please do so let's get started so first thing I always do in any sort of digital project project is a style guide so this is just to make sure you know that we keep our Styles consistent throughout projects and future projects so I know I'm gonna be designing more than one email in this style so if I set up a style guide now and say you know my headers are always this size my h2 is always this size my body copies like this my buttons are like this then that will just keep things consistent all the way through and if at any point I want to update my Styles if I just change on my style sheet that we're about to make it will update in all of the designs that we've done so and the email we're going to be designing it's going to be a welcomed solvent a welcome HTML email and which will be for my own subscriber list which is very small at the moment if you want to subscribe there'll be a link down below so you can click on that and subscribe and then you can receive these lovely emails as well so to start things off we're gonna draw out a new artboard so you just pressed a four artboard I'm just gonna drag out a square that's rather big let's make it 1000 by 1000 and then I can just hit my selection tool press ed on my keyboard to bring up the zoom tool and drag a box around and here we are gonna double click on here to rename I'm gonna call this style guide I'm gonna call it TP style guide so what I want to put on here is we need to decide a size for our head I'm gonna have to headers I'm gonna have an h1 and h2 some body copy and button I guess and then maybe we should probably put our colors in here as well so if I just grab my text tool and just click I'm gonna write this is our h1 now I know that I want this to be in later here and in terms of colors and stuff I'm gonna base this on the branding I already have for myself which is on my website so if I just select this is my sort of my planning for my website the next day so if I come in here I can grab all of my colors from here so what I'm gonna do is I'm gonna grab this home page I'm just gonna copy I'm just gonna bring it in here and let's paste it in there that's where I get my colors from and then I'm gonna grab my logo so just copy that artboard come in here and paste it in it will just come in there and then I'm also going to grab this black color so I can just grab anything with that on and bring it in the hair you can also copy stuff in from illustrator and things like that that's no problem and so I'm gonna get this black black text here and at the moment you'll see down here I'm selected on layers so we can see this is the artboard I'm on and these are the layers I'm gonna click on this button here this brings us to our Styles and I can add colors character styles and components so I'm just going to add a color so if I have a look here my fill was 277 to 7 so I'm just gonna press add here and there it is and what we could do is we could double click and rename this black or something like that but actually I'm gonna leave it like that so I have the hex code and it's very easy to just jump in and copy it when we come to coding so I can delete that now I thought what I needed I'm gonna make my h1 black and I'm gonna make it later and it's gonna be bold and I know that I want this to be 36 so I've got my point size is 36 now to get my line height for headers I always do for my H ones I always do my line I a hundred and twenty percent of the font size is so to do that in the line height part here I would be 36 and then an asterisk 4 times 1.2 until that gives us 43.2 I'm gonna round it down 43 so I know this is my h1 and what I can do here is character styles press pad and then I'm gonna come in here and I'm just the right each one now for my h2 all I'm gonna do is I'm just gonna half the size because I don't have a huge typography system in these emails I'm going to keep them quite simple we don't need to go to too much detail we will do it later videos all I'm going to do for my h2 is I'm gonna half its own it's gonna be 18 and then for my for my h2 line-height I think I'm gonna end up having like two or three lines of copy in this section so rather than having it at one point - I think that might be a bit too compressed I'm gonna times it by 1.5 took a bit a bit of breathing room so just do 18 times 1.5 gives us 27 and then I want this to be green so what I'm gonna do now is I'm gonna select this green color here add it to my swatches up here and there we go if I could select this now make that green and then I can type this is our H to add my character Styles here we name it h2 and then I'm just gonna drag it underneath of course you can use whatever system do you like now for my body copy I'm gonna do it at 16 so I'm gonna do is just gonna drag out the text box here and then if I come into chrome I've got my brief that I wrote myself so if I just take a bit copy here copy that paste it into this box here that didn't really paste in but don't worry about that press for you to get to my selection tool drag this out at the moment this is how about a commune that's not what once we know that it's late oh it's gonna be regular I'm gonna have it at 16 and I want my body copy to have a bit of breathing room so I'm going to 16 times 1.5 should give us 24 and then in terms of color I'm gonna make it this black color and then maybe I'll drop the opacity to 50% something like that that looks pretty good for now although perhaps it shouldn't be 50% I've got another color on my other screen sorry I'm just going to use this color instead so I'm going to bring that back up to a hundred percent I've got a paste in this color which is a nice gray and we don't really want to be working with opacity in email we would do that on websites it's not really a problem but as you'll see when we get into the coding side of things you have to be a bit careful with sort of not using too many fancy techniques and stuff so when you can and you know we can achieve a similar grade just by using a great colour rather than actually using an opacity of black so that being said let's add to that color grey there into our swatches up here and then we'll add this in here and we'll call this our paragraphs row spelt let that drag that under there easy peasy so we've got some of our type here and then we probably want a button so let's have a look at our brief so basically I'm saying thanks for subscribing to my newsletter here's a 25% discount if you want me to build your website and then I'm going to have a button that says Commission website so if I copy this you may as well start with this is our button and I'm just going to draw out a square for now or a rectangle for now I'm going to turn to have no border and I want it to fill to be this lovely green that we've got then I'm going to press T I'm gonna type out my text and then I want it to be white and weed out white and our colors yet so we can just quickly come over here type out white six EPS and then I can add white up here and I've know I want this to be 18 just a little bit bigger than my body copy because I want it to stand out there and I'm never gonna have multiple lines of text here so I'm going to do 18 that's 1.2 for the line hike it says 21.6 let's round it up let's make it bold so it stands out a bit let's Center it inside our button here now here's why we're using XD or sketch or thigma rather than using new InDesign or illustrator or Photoshop or something if I select this and I hold the option key or alt if I hover to the next sort of bounding area you can see how much padding say see there's 25 pixels at the top 24 at the bottom 36 at both sites so when it comes to coding all we're going to do is we're going to write out some text and give us some padding and say you know 25 at the top 36 the right etc but what we actually want to do is I wanted to have 20 at the left and right of 15 at the top and bottom so if I drag this over here it will snap I can hold shift and use my arrow key press it twice and I know that's moved it 20 there and same from the top I want it 15 from the top so let's get it to snap at the top I'm gonna press shift and down once and then let go of shift 2 3 4 5 if I hold option I can see up at 15 and 20 there so i've got 52 on air and 20 there so I need to lose 32 on the width so if I select this I can just come up here in my width I can go - 32 now I know that this is exactly the right size and same again at the top we've got to do some maths say 15 pounds I think I need to drop 19 off the height we'll soon find out that was right - 19 there we go 15 15 20 20 and I'm just gonna select around that whole command + G to group that and then in my components here we'll make our first component if I click there and we've got it here and I'm just gonna call this CTA cool - action and now wherever I am I can just drag out a CTA and if I were to change my original one it should update all of the other ones so you can imagine if you've got loads of emails and things like that loads of different pages on the website this comes in handy say I think we're good for typography and components for now that we'll get started so what we want is the rest of our colors now I'm not going to use them all today but I'm just going to get them set up in my style guide anyway so we know we've got the green one and what I like to do is I just draw out little square maybe that's made us 100 500 take off the border and I know my mates of Brad color is green if I hold option and then can drag and hold shift I can drag out a new box and you can see a blue tit 10 pixels to the sides at once and all I'm going to do is use this eyedropper tool to pick my purple and then I can add my purple up here and I'm gonna drag another one pick my eyedropper and get my blue add my blue up to my Styles and do another one and then get my red see that's snapping to 12 I can just nudge it over to 10 because I like things to be neat grab my red yellow and then there's all my colors and if we're if we're being picky we can also add these in just so we can see our full range of colors here and then I can just bring this out to me that nice and neat I can get rid of this because we only use that for reference and there we have our style guide so that was pretty easy now we're ready to design the email so HTML email is coded as a table so you just have a big table inside the table you would have rows and inside those rows you have cells so if you think of it like this there's your table inside the table you would have actually let's make this an artboard it's gonna be easier say there's your table inside the table you have rows so there's a row inside that row you have cells so you might have something like this and something like this obviously that's like the worst email ever so that's how it works so you have one one big table and then you can have a row and then in the row you can have cells and in those cells you can put your content now the way I design mine I always have the content of my email at 600 pixels wide and then I have I set a background color on the email so the wings or out to the side of the main body of content has a color so to design this I would make my artboard 800 pixels wide mm tall that's just always how I start and then I've got a nice background color on my other screen here though with me I just copy done and if I come to my art board here I can select a background color here in appearance I can click here paste in my color here and I can add it up to my swatches as well so I'm gonna call this TV email one so at the moment this is 800 pixels wide and I know we said we were going to design our 600 wide but I just I make it 800 just so we can see this of what the background of the emails going to look like so it all works together and and then I'm gonna drag in 600 pixels wide box so just dragged in any size box come to the width 600 I'm gonna make it mm tall and I'm just gonna Center it and make sure it's at the top make sure it's got no border there so there we go that's sort of the start of our email with another all bar content in the middle of that so what we can do we can come off our Styles here and back to our layers and if we wanted to we can be very meticulous with our labeling which is probably a good idea so I can click on this and let me call this sort female background and then if I hover over I get the option to lock to the layer so now we won't accidentally move it whilst we're designing and so in terms of design we're gonna want my logo at the top so this is how I would design I'm going to grab out of box I'm just gonna draw it out like this come to my colors make this green and then what have I brought my leg burn yes we brought my logo in so I can just grab my Lego here copy come over here paste obviously this is ginormous so we're actually gonna make it 50 pixels wide in this design so I can select this 50 pixels wide I'm just gonna bring it to the top so I can see it and then this has got a border as you can see so we take the border off we're gonna bring this to the right so it snaps at the top I'm gonna lock it in 50 from the top 50 for the bottoms I'll share one two three four five one two three four five and actually fifties probably a bit too much and for the top and the bottom let's do 20 top and bottom and 50 from the side that's where we want to be so if we zoom in you can do this sort of stuff by eye I would most often if I'm doing it for myself I sometimes do it by eye you know if I'm doing it for a company and we need to be all professional I would do it properly let's have a look so we've got 25.4 there so we can just knock off -5 that's Dave so there we go then we've got a little logo strip at the top so I can drag around those group that come to my layers and to call this logo bar and and then I have actually I actually designed a header earlier so I'm just gonna copy that in we don't need my logo anymore we can delete that and if I paste this into TP email header this is just something where I took the icons from my website and just sort of laid them out here I quite like that as an email header so I'm gonna copy that well I'm not gonna do that I'm going to what am I gonna do let's select this artboard double click here to come into the artboard then I can hold shift select all of these things actually let's not do that what I can do is I can export it so at the moment you can see this is 1200 pixels wide and it needs to fit in a 600 pixels wide space which seems a bit odd so if you don't know about Retina screen threaten the screens are like on Macs and fancy screens and stuff they're twice the amount of pixels so always sort of make sure your images are twice the size than they need to be and then they'll always appear nice and sharp so what we're gonna do is come to our finder here we don't need this so in here in my folder where I've got my XD file I'm just gonna make a folder for images so if we come back here I can file export selected and then we need to come to where are we where on TB TV emails images so TP email header and ant Explorer as a PNG that's fine and then we have it and then I can just come to my finder here and drag it in so here it is I can drag it up here and then I'll just make sure to set as 600 pixels wide make sure it's centered on my canvas and just drag it down okay so there we go there's our header and then what we're gonna do is we're gonna have a look at our brief again so I've got an h1 here so I'm just gonna copy in that I'm gonna draw out a text box and then paste in my text and it isn't that it's just currently white apparently so if I just select my back there it is what we want to do we know we've already set up our styles so we can just click on our style h1 there is it's an h1 so I can drag this up to keep it nice and neat and that's looking pretty good so in terms of spacing around this we want it we want to think about it and what we know that this email is 600 pixels wide what I want to do is have 50 pixels of padding all the way around this so I can bring it up to the top to start then I can knock it down 50 whoops new mouse not very good 1 2 3 4 5 so no that's right there and then what we could do is we could sort of move it over to the side and nudge it out that we have done before or we can make sure this whole box is a hundred pixels less than the width of the email so if I made that for 500 pixels and then I Center it I know because my email is 600 that I will have 50 pixels on the left this was on the right 50 at the top so we're good and then all I can do for my next part I can hold option drag this down set this to be an h2 get my text and I'm saying to say thank you for signing up blah blah blah blah come in here paste that in and there we go and what I'm going to do I'm gonna sort of treat this tops action as its own little block so I'm gonna have a look button in here and what I'm gonna do is I'm going to nudge that up three so it's 20 got there there's 26 there so I select this and get 1 2 3 4 5 6 now I know that there's 20 pixels between each of these and I can group these together it by one come to my layers here and I can call this here own content looking pretty good not bad so far all very easy over the you haven't lost you yet so just remember that you can get to your styles here and your layers here and it is a good idea to label things up that's the wrong one in here so I know got hero content I've got the header with the logo background so it's all nice and easy when I come to back to it in a year's time and think what the hell's happened here it's very easy because it's all labeled up so we want to get some paragraph text in so what I might do is I might ungroup this for now just drag down one of these come to my Styles and turn it to a paragraph the reason I copied one of those is because I know the height the width is already set to 500 so just saves me a step come back grab my grab my bit copy that I need copy it double click in here and paste and then I know I'm going to want this to be 50 pixels from here and we're looking pretty good so now I've got sort of a section which is gonna have four blocks so if if somebody's reading this email what we want we want to get our branding in at the top obviously and we want to get a call to action in and above the fold now there's fold it's what people call the first part of an email before you sort of can't see the visible the invisible downs and they said before you have to scroll you want to get your main message and your sort of call to action up in the top there and if you don't you know some of my open it and say well what's the point this email delete it or there's no branding I don't know who this is doing to when actually quite clearly see here you've probably just been on my website to subscribe to my newsletter that's the anyway you do it so you might recognize the Braille and then it says thank you for subscribing to my newsletter Tom well just insert the name there okay great he wants me to buy a website well yeah I want that so you click on the button I'm not sure let's have a scroll down and now I'm gonna list bullet points these are the reasons why you should have a website or this is how it works so you know to reinforce your message of bit so I'm going to have four sections down here and I know I'm gonna start with a head I'm gonna have a bit of paragraph and then I'm gonna have there the header and I know my head is gonna be black let's have a looks and we've got here's how a project usually runs so my first step is content strategy come in here paste that bring this box up like this and as we did before I'm probably gonna make this 20 pixels below that because these are connected and then what I might do is add in want to add in something to make it look a bit nicer a bit easier cuz I think is looking a bit word heavy so what I'm thinking we can have a little box here and we can say this is gonna be number one so we can just put in a big one in here maybe if I make this an h1 just make it white this might look pretty cool and we say one content strategy this is something like this looks pretty good I think so I can group that Thank You guru to that and then I can make this two below but then we need to grab our actual copy gtz and grab that there paste it in what we need to do is need to bring this and something like that does really matter and then I can group that and then I can bring this up so it snaps and then hold shift 1 2 3 4 5 instant easy and then I can just hold it option drag out another one hold come back so so at the moment this is a group and to get into this one I could either ungroup everything but that's a bit annoying I could double click to go into that group to go to that group double-click to learn access number and then I can double click again to be able to edit that number or if you hold command you just shoot straight through groups so I can just hold command double click in here Simmons for considered a Hold'em and I've selected a lair I can press teen okay that's embarrassing isn't it there we go right number two and we're good and then covered here Wyatt framing I can just type that out copy this whilst I'm here to save time so now this is gonna say wire framing zoom out a little bit based of my new tip there we go point number two and you can see where we're going with this and then drag this down and you see how that just snaps you see it shows me pink so it's showing me that this spacing matches so I don't need to hold shift and nudge it five times just why I love XD I love sketch they're all brilliant this is gonna be three design we're gonna design some stuff obviously this little yellow pointer thing is we're gonna getting on my nerves okay paste in the text there this is design and then number four drag it down and then snap don't Nick time Victor dictums Nick 4 and number four is probably development but every day that makes sense actually let's just take this is there no make sure we review our text and then cleanse it absolutely nice and neat so here's where we are so far so you see we haven't really been going that long we've pretty much got the whole design done this stuff doesn't take that and hold option and drag this one down here and I want to attach that so I'm just having a new paragraph by itself once we finished it this is a very very copy heavy email you can see I haven't worked with a copy writer if you're working with a copy writer your life will be amazing try and get one because if not you have to write all the text yourself or when somebody doesn't know what they do like me I'm not very good writer this emails probably not gonna do very well but it looks nice and it will it will be coded well so you know that's good and then we're gonna have a we've gonna repeat our call to action that's always good practice so what's happened is they've read all the way down you know if they have read all the way down which is unlikely so if you haven't gotten them they're taking a read oh okay this does sound like quite a good idea and then rather than having to scroll all the way back up just as like a usual experience benefit just repeat the button down here and they see we've run out of space in our artboard uh-oh zoom out bit select your artboard at the top just drag it down a bit and you can see on white we can't actually edit this because remember we locked it so we can come to our layers unlock it here see where I get all the way back down then we're good to go and as you may have seen these are all not labeled so that's just bad but make sure you label yours but I don't want to waste any more of your time and so we're just gonna have a little bit of a sign-off I think just have a look at my other screen and yeah we're gonna have sign-off and then we're just gonna pick some social buttons side holding option to duplicate this luck again aha I didn't lock this say that was games the way and it snaps and I've got a sign-off I hope to hear from you soon Tom and then didn't mean to reckon that paste that text in there and you know actually kiss on the end cuz that's nice and friendly if I was working in a marketing department at the moment they would tell me not to do that but I'm working for myself do whatever I want okay so that's all looking good we're just gonna have a little bar for some social icons as if people you know this is a welcome to my emails right so these people might have just stumbled across my website and they might not know that I have a Facebook page and Instagram page a YouTube channel a newsletter well they probably do know that newsletter because they're receiving it but you know what I mean I'm I'm gonna make this green and then I actually have my icons teleporter off actually have my icons from my website so just on my other screen I'm just gonna copy these teddy bear with me always good to work on two screens good quality of life improvement there I'm gonna paste these in here yeah soom in a little bit so I've got a dribble Instagram Facebook YouTube and LinkedIn yeah good good good things good times are happening here and so at the moment I forgot 20 pixels padding do I want 30 do I want 50/50 might be a bit much let's go with 30 so I can drag this up here and then I could just plus 30 there and they've got the same top to bottom no this is 50 here and I got 15 in between each one if you just copied these in and they're also all out of whack that's all good you can just select them all you can use your align tools up here and then you can use your distribute along here and then I'm going to group those hold shifts like that group that as well come here and then let's call that and and then we will probably need an unsubscribe link I mean I say probably you definitely need an unsubscribe to think those legal reasons it's up to you what you wanna do I probably would so what I'm gonna say is you know that's the body of my email and then sort of the legal bits if there is any terms and conditions and stuff like that it's always nice to sort of put them in this of floating abyss area at the bottom rather than in the content because the contents what's really important you want people to be hitting these buttons not hitting the unsubscribe so you know you need to make it visible but just have it as an afterthought rather than built into your actual design and say let's write something like if you would like to subscribe please yeah I know I might come to my stars and make this into the body style my paragraph style that's a bit big so I'm gonna drop this to 12 and then we'll do 12 times 1.5 something like that is okay and I'm going to a little bit 30 or perhaps we could Center the unsubscribe or maybe it looks better David there I'm not sure we can we can decide when we get to it and we can just make sure that this looks like a link underlined and I think that's okay so in terms of finishing this up I select the email at the top here just drag this up and I would just eyeball this it's not too important and there we go I'm looking pretty good I think that's it for our design so now we wanted to come back to our layers and we could come in and we could we could see which ones they're sisters development so I could just label this up if I wanted to and then I mean if you're working for yourself you know this is stage one done I'm pretty happy with this or if you're working a team what you can do is you can select your email at the top here file export selected then you can choose what you want to save it as you could save it as a PDF and then you could call it whatever you want so say if you call it proof and then you have a PDF here and then you can email that up the chain of command whoever needs to sign it off and they'll come back to you with millions of changes and whatnot as is as is the case of all the time and then you can sort of redesign it make sure everything's fully designed in here get the sign-off before we go to build it because you don't want to be making changes in your code it's going to be much easier for you to sort of design it in here get it looking all nice and good and then we can just code it and it's super super easy so that's the design done and the last part this video will be exporting the assets that we need and which shouldn't take too long at all so if you ever exported assets for websites before you will probably have done them as SVG which is like a vector file unfortunately that's it can work an email but as I said before we need to be safe we need to be careful in email because a lot of things don't work so go with PNG go with jpg it's just gonna make your life easier we there are so many different ways for people to open emails you know different devices and different email service providers and they all work differently they all render images differently it can be quite frustrating so from my experience I've found that it's better to just work with PNG and JPEG basically so we've already exported this so that's fine so we need our logo so what I would do is here you see this is groups I could either ungroup it I can double click to come in here this is called group 6 that's bad isn't it so I could highlight this and call it TV logo email now that's selected I can file export selected and as you might recall we've said Retina screens require images to be 2 times the size I want this to be a PNG because I wanted to have a transparent background and if I have this export for design selected you can see it's gonna export 1 times if I select web it gives me the option to select one of two times here if I leave it on one I'm saying it's been designed at one time societies to win it exports who will export it at one times the size and at two times the size so if I explore now and come back here you can see we've got logo email and bit d and lega email - a little less fuzzies as twice the size so you see it's 50 by 36 the original and this should be a hundred by 72 so I can just delete this one press ENTER delete that I'm also going to delete my PDF there so what we've got we've got our header we've got a logo so this will be written in code and we could if we were lazy and bad bad designers and bad coders we would export these number blocks as images but we're actually gonna code days there's no big deal it's easy I said what we want also now is we want these social icons so you can come in here come into the grids and you see these are already labeled I see icon file in sport I'm gonna put them in here I'm gonna do exactly the same thing and then I'm gonna come in and delete all of the not too x versions delete those and then we're gonna come in just delete two types of them you don't need to do this it's up to you you can you can label them whatever you want this is just how I seem to work ok so there's all of our images so one a final stage is we need to think about when people are out and about and they're loading emails on their phones and they don't have much reception you know they're not on Wi-Fi maybe they're on 3G because there's no four or five G available we want the email two images to load quickly especially we've got image at the top and especially with a brand logo we want that to load immediately we don't want them to be seeing they're waiting for things to load because they'll don't get bored people are really impatient these days and so we want to make these images as small as possible so we need to compress them okay so at the moment this is 55 kilobytes so these are already tiny tiny tiny we probably don't need to compress these but sometimes you might have one that's one megabyte that's way too big I would say maximum file size for email images should be around 500 kilobytes but just get them as small as possible but still looking crisper so it's good to work vector and export as PNG get small file sizes so down here I have imageoptim if you don't have it I'll put a link to the description below and all this does is compresses your images there are lots of different compresses I like this one and it's so easy all I do is open it up get all of my images here and just drag them in here we can see it's thinking about it here tick tick tick tick tick which is waiting for the header and the great thing about this it doesn't save new copies doesn't do anything like that it's just replaced these images here so you don't need to do anything else they're all done and you can see it's saved you know about 50% off all of them which it's not seventy-seven percent out this one so now the file sizes are absolutely tiny which means they can unload really quickly and and there we go there we have it we're ready we're ready to code so we've got email designed we have our style guides set up with all of our styles in here so going for is if we were to make another email if we were to do email too we can just duplicate this one you know and just come in and change our content and if we were to update anything in our Styles it will just update throughout our email so we go we're good to go and yeah I'll see you in the next video thank you very much for watching I hope you got something out this I'm sorry that it took quite a long time but I want you to see the process and sort of how it works and why we're measuring out pixels and stuff and you'll see in the next email how how important it is that we make sure we've got our spacing right here it's gonna make coding a breeze so yeah see you in the next video thanks a lot guys alright [Music]

Channel: Tom Piggott

Views: 65,583

Keywords: html email, html, email, email design, html email design, design email, adobe xd, xd, adobe, email designer, tom piggott, tom piggott design, graphic design, digital design, how to design html email, how to code html email

Id: y42zG-Xk1f8

Length: 39min 17sec (2357 seconds)

Published: Wed Oct 16 2019