CSS3 • HTMLPaula Borowska • June 11, 2019 •

In this tutorial, I’m going to show you ways simple and straightforward it may be to code a absolutely responsive and fluid e-mail template. This isn’t difficult or intimidating at all.

All it takes is knowing the designs for the totally different breakpoints and a strong order of operations. Comply with alongside to find out how to code your personal mobile-first e mail.

Observe: Take a look at our new e mail template builder – Postcards. Attempt it for free!

The design

Take a look at the under screenshots to see each of the designs we’ll be coding right now. The design of this e-mail is perfect for freshmen to comply with along with.

The setup

Before we get started with something, we should have the essential HTML set up ready to go. In the under HTML, I’ve just added the basics similar to a title, meta tags for responsive performance, the CSS part and a sample container div in the body.

For creating the email, you’re free to maintain the CSS in a separate file and hyperlink to it. I’m going to hold it within the HTML document for simplicity’s sake and ease of use.

Creating the HTML sections

We also have to outline the totally different sections for the email’s contents. Don’t fear about aligning any of the content material just yet. For now, we’d like to create the construction around the content itself. If you open the email within the browser, it ought to all be in a single column for now. Let’s break down what’s occurring within the container div.

First, I divided the e-mail into three sections, emblem, body-content and footer. In the emblem div, I’ve only added the brand picture and made it into a hyperlink. The hyperlink should take you to the homepage of your website.

The subsequent section, the content-body, is the whole blue section of the design – together with the purple moon image. There are two methods we will go about together with the full-width moon picture. For now, I’ve positioned it by way of a picture tag. We’ll talk about the second choice later.

The history of the moon

In the solar system’s early days, a first Earth is assumed to have been pulverised by a planet that scientists call Theia. We don’t know what it was product of or where it came from, solely that it might have been the dimensions of Mars. The powerful collision destroyed each planets so utterly that scientists can only guess what they have been like.

What scientists are more sure of is that the two planets turned a mass of molten materials that progressively cooled to type the Earth and moon.

Tell me more

Lastly, we now have the footer. It’s probably the most complicated part of this entire e-mail. I’ve chosen to divide it into four sections. Giving the header its own part will make coding for the design change simpler afterward.

Comfortable to have you ever on the listing

The Moon Updates

999 Important Road

New York, NY

Manage preferences
Unsubscribe

Should you preview the e-mail within the browser you need to see something comparable to the under pictures.

Styling the cellular design

Since that is the mobile-first strategy, we are going to use CSS to type the default of the e-mail to match the cellular design, properly, first. Let’s deal with the general shape and design first and then get into the small print.

The general design setup

I’ve added a background shade to the physique of the email (it’s an off-white yellow), and a few font styling to the whole doc. I’m using native fonts. Nevertheless, should you’d like to use a customized font, that is the place you must add it to the template. Google Fonts has a respectable number of free fonts and clear instructions on using them as properly.

body
background-color: #FBFAF4;
line-height: 20px;
font-size: 12px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
font-family: “Proxima Nova”, Helvetica, Arial, san-serif;
padding: 0;

I also outlined the container part. Take note, we’re creating the cellular version first. This is most necessary for the totally different widths and paddings afterward.

.container
max-width: 280px;
margin: zero auto;
padding: zero;

Now we will go into the small print!

The brand section

The brand says centered in each of the designs. As quickly as we middle it, we’re achieved with it. To ensure that the brand div to be centered by means of margins, you need to define the width of the container. I set mine to 40px because that’s the dimensions the design has the brand. The brand might change in measurement for cellular vs desktop designs; right here it merely stays the identical width.

.emblem
width: 40px;
peak: 40px;
padding: 0;
margin: 20px auto;

The primary content material area

For the content-body padding, we will do certainly one of two things. First, is to set the padding on the text parts or the container-body itself. Both approach, those could have to change depending on the gadget. I’m going to set the padding on the container as an alternative.  This manner, the width of the textual content shall be fluid when set to 100% width regardless of the dimensions of the gadget.

.content-body
background-color: #1E4EAA;
padding: 40px 20px zero 20px;

/* Safari 3-4, iOS 1-Three.2, Android 1.6- */
-webkit-border-radius: 5px;
/* Firefox 1-Three.6 */
-moz-border-radius: 5px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox Four, iOS 4, Android 2.1+ */
border-radius: 5px;

The text styling right here is pretty simple as soon as once more. I’m utilizing my local fonts for the headers as properly. Here you’d be referring to your linked font typefaces too.

Styling the typography

There are additionally a lot of issues occurring in the under snippet. Let’s walk by means of it.First, I’ve outlined all of the attributes for the H1. I’ve set a new font household here as a result of I would like the design to have a totally different font from the body. And, I’ve added a defined spacing between the paragraphs.

h1
font-weight: 400;
font-size: 30px;
line-height: 40px;
margin-bottom: 40px;
margin-top: 0;
text-align: middle;
font-family: “Futura”, Helvetica, Arial, sans-serif;

p
margin-bottom: 20px;

Styling the button

To ensure that the button to be centered mechanically, it needs to have a set width. That width is decided by the width of the link’s text. I set a small width of 10px and as an alternative it by ten until it all match on the identical line.

.button
margin: 40px auto 20px;
width: 140px;

a.button-link
/* Safari 3-Four, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 5px;
/* Firefox 1-Three.6 */
-moz-border-radius: 5px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox Four, iOS 4, Android 2.1+ */
border-radius: 5px;

margin: zero auto;
padding: 1em 2em;

shade: #ffffff;
border: 2px strong #FFFFFF;

text-align: middle;
line-height: 20px;
font-size: 12px;
text-transform: uppercase;
font-family: “Futura”, Helvetica, Arial, sans-serif;

Lastly, I styled the button link itself. Don’t overlook to add the hover states! For this design, a shade inverse works completely.

a.button-link:hover
background-color: #FFFFFF;
shade: #1E4EAA;

The picture

I’ve previously talked about that we have now to choices for including the purple moon image within the physique. For now, I’ve just added an img tag into the HTML’s content. We will use CSS to resize it. Nevertheless, I’m going to change this and set the picture as a background e mail image as an alternative. That is the second remedy choice for photographs.

First, we’d like to move the content-body-image div out of content-body. That’s because content-body has padding left and proper with doesn’t permit us to have a full-width picture.

Subsequent, we’ll add a background image to the content-body-image and elegance it to match the design as follows:

.content-body-image
show: block;
min-height: 180px;
width: 100%;
background-image: url(photographs/moon-image-600px.jpg);
background-size: cowl;

/* Safari 3-Four, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 0 0 5px 5px;
/* Firefox 1-Three.6 */
-moz-border-radius: zero zero 5px 5px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: zero 0 5px 5px;

Lastly, we must return to the CSS of content-body class and change the border-radius from 5px for all corners to just 5px on the highest ones solely.

.content-body
…

-webkit-border-radius: 5px 5px zero zero;
-moz-border-radius: 5px 5px 0 zero;
border-radius: 5px 5px 0 zero;

Take a look at the under image, that is what the email ought to seem like now.

The footer

Finally, we’re getting to the fun part – the footer. It’s probably the most complicated section of this entire design. We should have in mind both of the designs – the cellular and the desktop right here whereas styling.

I’ve gone forward and added 40px margins to the top and backside of the footer to give it some area.

.footer
margin-top: 40px;
margin-bottom: 40px;

Then, I copied the styling from the H1 and altered a few of the variables to match the H2 design resembling font measurement and margins.

.footer-header h2
font-weight: 400;
font-size: 20px;
line-height: 40px;
margin-bottom: 20px;
text-align: middle;
font-family: “Futura”, Helvetica, Arial, sans-serif;

Because I’ve made each line of the handle its personal p tag, I have to go in and take away the spacing, since that’s what the design dictates. I can change the HTML and add line breaks or take away the margins around the paragraphs with CSS. I’ve determined to remove the margins since I had to go into the CSS and middle aligned the text regardless.

.footer-address p
margin-bottom: zero;
margin-top: 0;
text-align: middle;

Next, I middle aligned the icons. Yes, you possibly can middle align all the gadgets within the footer inside the .footer class. Nevertheless, because the particular person texts are going to be aligned in another way in the cellular version, it’s greatest to do them individually here for once we add the cellular question.

.footer-social-icons
text-align: middle;
margin: 20px 0 10px;

And, finally, I centered the hyperlinks. To ensure they have been on individual strains, I added show: block; to each of them. You possibly can additionally add a p tag around them or a line break in between them within the HTML for a similar effect.

.footer-sub-links
text-align: middle;

.footer-sub-links a
show: block;

Customizing for the desktop version

For now, the email has been optimized for cellular. No matter what system it’s open on, the cellular version will the default. It’s a huge a part of the progressive enhancement improvement course of and the whole premise behind the mobile-first design. It’s time to turn it into a responsive e mail with for bigger screens. Take a take a look at the desktop design once more; we’ll be utilizing media queries to flip it into such.

Adding default queries

The first thing we must select the default question. 480px is a nice normal breakpoint between phones and larger units like tablets. You will get really detailed with queries depending on the design needs. Nevertheless, we’re working with two designs here. We’ll use the 480px breakpoint for this tutorial and ensure the design for screens bigger then 480px has a fluid format as nicely.

@media solely display and (min-width:480px)
…

Add the above question to the underside of your CSS, it won’t work otherwise because the defaults will override these queries since it’s a cascading type sheet in any case. You would add a question under each class you’re updating however to maintain issues easier, I will probably be holding it in a single query on the bottom of my CSS.

Fluid container width

The under code simply says that for all screens larger then 480px, the max with of the .container class will probably be 600px. Resize your browser to check it.

@media solely display and (min-width:480px)
.container
max-width: 600px;

Add a max-width and middle the div with margins for the content-body-text class. This manner, we don’t have to mess around with totally different padding dimensions while the container is smaller than 600px.

Lastly, for aesthetic causes I’ve added 20px left and proper margins to the body. You may also go forward and create another container div across the HTML content material. These margins ensure the blue container doesn’t go all the best way to the sting of the window when it’s between 600px and 480px window measurement.

@media solely display and (min-width:480px)
physique
margin-left: 20px;
margin-right: 20px;

.container
max-width: 600px;

.content-body
padding-top: 60px;

.content-body-text
max-width: 400px;
margin: 0 auto;

Updating the physique content part

I’ve additionally gone ahead and altered the highest and backside margins around the button to match the desktop design. Solely change the properties that want to be. Every little thing else will default to the previously defined types.

@media only display and (min-width:480px)
…
.button
margin-top: 60px;
margin-bottom: 40px;

By now you could have observed that the pink moon picture is responsive and fluid when resizing the window. That’s as a result of we set it as it’s div’s background and the div to be 100% width, all the time. The only thing we’d like to change there’s the peak.

@media solely display and (min-width:480px)
…

.content-body-image
peak: 300px;

Updating the footer

Once again the footer is the enjoyable and exciting a part of this tutorial. We’ll have to regulate all each section, one by one, starting with H2 and left-aligning it for the desktop view.

@media solely display and (min-width:480px)
…

.footer-header h2
text-align: left;

To create the three column look, we’ll be using floats. First, we must add a reset to the floats this manner we’ll nonetheless have consistent spacing under the footer – within the case of this specific design, it might be simply the underside margins.

@media only display and (min-width:480px)
…

.footer
content: “”;
show: table;
clear: both;

Next, we’ll set the float to be left and width of all three columns to be 33.33% so that they are evenly spaced out.

@media solely display and (min-width:480px)
…
.footer-address, .footer-social-icons, .footer-sub-links
float: left;
width: 33.33%;

Lastly, we’ll have to regulate the text alignments for the handle and the link.

@media only display and (min-width:480px)
…
.footer-address p
text-align: left;

.footer-sub-links
text-align: right;

Good job! We’re completed!

Coding a mobile-first e mail template

As you possibly can see, coding your personal e mail template isn’t a massive problem. It’s just a matter of getting the order of operations right and decide your breakpoints to match the visual designs of the emails. All you might have to do is import the e-mail into your platform of selection and replace the texts and links with their appointed shortcodes.

Keep in mind: Attempt free e mail template builder – Postcards!

Coding anything, including emails with the mobile-first (aka progressive enhancement) strategy, does make creating responsive emails such a breeze. Don’t you assume?