Create responsive emails for the future without media queries.
Creating HTML code for email, you have to deal with a fair amount of sick questions. And it is unlikely for someone to be acceptable if we also have to keep track of new email-clients and the size of devices that appear every week. Media query support as well as CSS itself varies among applications. As a result, every time you hear that a new exciting email application has appeared, for which you also need to run tests, fear inevitably overwhelms you.
But what if you could create a template that would be responsive even in environments with the least support for modern CSS? What if every time you heard about some regular email application that everyone is experiencing, instead of indulging in fear, you could feel calm and confident, knowing that your email will surely look good?
The following method, of which I am a supporter, is wholly focused on creating a positive interaction experience when working with email clients who do not have media query support.
')
It is called the fluid-hybrid method , sometimes referred to as the spongy method for email development. The fluid part assumes that we use a fair amount of percentage calculations. Part of the hybrid means that we also use max-width to limit some of our elements on larger screens.
1. Gmail app for Android and iOS - a headache
It is more popular than the default mail application for Android, but Gmail does not support media queries, which we traditionally rely on when resizing and formatting on small screens. This tutorial will show you how to create responsive email messages even in the Gmail app.
2. Regular appearance of new mail applications
It's hard to keep track of all the new email applications that continue to appear. Some of them really “pay attention” to message rendering and have good support for CSS and media query, but some are more focused on the mail processing flow and do not support media queries at all. This tutorial will show how to create emails that are always responsive, regardless of the degree of CSS support.
3. The number of possible screen sizes of the device is almost unlimited.
Not only do we have huge desktops and tiny smartphones, we also have huge smartphones and tiny laptops. Just because someone is accessing his Gmail on a laptop does not mean that his screen is large enough to display a 700px-wide email address; and people using the iPhone 6+ can handle double-column layouts, however, they have problems with single-column layout. This tutorial will show you how to create markup that changes the format to fit the available space, even in webmail.
4. Creating responsive emails on mobile devices using the <td> column does not work everywhere
Certain email clients (for iOS and even some native email applications for previous versions of Android ) incorrectly position the column two table cells in the same row; they can place only two separate tables in a column. This tutorial uses a completely different method that is fully supported by all applications and devices. The standard solution to this problem is to use tables with the attributes align = "left" or align = "right" , but this leads to another problem:
5. Using the responsive design method aligned table leads to the fact that your tables run to the left or to the right in mobile applications that do not support media queries.
The method described in this tutorial uses a different approach that ensures that all your columns are located one above the other in the center on the mobile device, even in the Gmail app (you can also easily align them on the left or right side at your own discretion ).
Tables aligned left or right remain in place in mobile applications that do not support media queries. You cannot change this with mobile-specific CSS
In this tutorial, you will be shown how to center your columns one above the other, even in applications that do not support media queries.
6. When you use the responsive design method aligned table , you lose the ability to align the content vertically in columns next to
This tutorial will also show you how to align two columns in the same row, vertically on top or in the middle just as if they were cells of a table of the same row, and that use the valign attribute.
With this tutorial, you will learn the 'fluid hybrid' method, which will allow you to vertically align the columns to the top, middle, or bottom.
Start by creating a clean file, save it as index.html, then copy and paste the following code:
Let's quickly go over all the elements of the above code:
We will add <title> </ title> , although it is better to leave it empty. The title tag is required for valid XHTML, but some native Android email clients will display this title directly in front of the preheader in the inbox preview, which is not very good in most cases.
You will see that I use the external style sheet in this educational material, but you are free to choose the approach as you see fit. Continuing, create a document called styles.css and save it in the same directory as the HTML file. You end we will inlay our CSS.
Further, between <! - [if (gte mso 9) | (IE)]> and <! [Endif] -> we have conditional CSS for Outlook, which will force the collapse of borders for all tables and prevent the appearance of unnecessary empty places This conditional expression is oriented to all versions of Microsoft Outlook (mso) from version 9 onwards (these are, in fact, all versions, since the 9th and earliest versions are Outlook 2000), as well as on those versions that I use Interner Explorer for rendering (Outlook 2000-2003).
Immediately after the body , we have the <center> tag located in order to center the content and act as a carrier of several useful CSS properties (since the body tag is often cleared in webmail clients). We also have <div class = "webkit"> for earlier versions of email clients built on Webkit (mostly Apple Mail 6 and below, as well as Outlook 2011 in some cases). These early versions only support max-width for block elements and the easiest way to get our layout to display in the correct size is to wrap it in this div , which will allow us to do without setting the width in the media query, as in my previous tutorial (thank zerocents for this fix).
Next, create a clean CSS file called styles.css. Insert the following into the file you just created:
Here I nullify the margin and padding for the body , the table and tabular cells, and also null any borders that may appear around the images on the links. Our styles for the table and td tags are needed as a replacement for the HTML attributes of cellpadding and cellspacing . You are free to choose HTML attributes as an alternative if you wish; in the past, I always supported selecting HTML attributes instead of CSS properties where it was possible, however, as I worked on more and more scalable projects, I discovered that I can achieve greater manageability by placing it in CSS, especially if you As a rule, you work in a platform that automatically processes CSS inlining.
Also, I usually add min-width with a value of 100% to the <body> tag in order to avoid any situations when the content does not occupy the full width of the viewport on a mobile device, it is also always a good idea to set the background color, even if it is absolutely white, to avoid background color glitches in Outlook or Lotus Notes.
We also have our own styles with several properties for .wrapper that prevent strangely resizing text on Windows Phones and iOS, along with this table-layout: fixed will ensure that our centered content will also be centered in Yahoo mail. We set max-width to 600px for our .webkit div to limit content in Apple Mail 6 (and below) and Outlook 2011.
And finally, we have a fix for the viewport, which, together with our two meta tags in the title, will guarantee a seamless display on Windows Phones.
Let's start with one of the key building blocks in this method: a conditional table for Outlook, which is hidden for all other clients. We need this, because we are going to use the max-width property, which Outlook does not support. Therefore, we need to create special Outlook-only tables with an explicit pixel width that will hold everything.
Our conditional table for Outlook is used, because Outlook does not support the max-width property
So let's remove the [content goes here] placeholder from our HTML file and insert the following code. I try to align all the conditional code tags on the left and keep an equal level of indentation for readability, but you can align them at your own discretion.
Note: there are no styles for conditional table tags. I intend to use the inline tool from Campaign Monitor inliner.cm , it also inlines the styles for conditional tables. If you are going to use another inliner, it may not do this, so make sure that cellpadding = "0" cellspacing = "0" border = "0" is added to the Outlook conditional table.
Inside our conditional table, you will see that we have <table class = "outer"> - this is our key external building block for all clients except Outlook.
We want this external table to have a width of 100% on small cranes, and on larger screens - no more than 600px. Therefore, we intend to set its width to 100% and set it to max-width at 600px
For our table, the width is set to 100%, until it reaches 600px
Good advice: for quick and easy buffering on a mobile device without problems with paddings and media queries, change the width of your table from 100% to 95%
So let's put these styles in our styles.css:
We also have a Margin here: 0 auto; to center our table in Yahoo when viewed in Chrome. The margin , however, is used here only for the sake of Yahoo, I always write Margin with a capital letter so that Outlook.com doesn’t clean it - small elegant hack, thanks to Wiktor for commenting on this blog post .
Now we have an external structure, it's time to add some content.
First download the tutorial files and move the / images folder to the folder with index.html
Now let's add the full-width-image class to td inside our .outer table, then we replace our [content goes here] placeholder with the image tag, so our table will look like this:
You will notice that I did not bother about the width or height attributes for the image. I'm going to solve this with CSS, which we will add, and it will look like this:
This brings us to one very important nuance in this method, which concerns images.
This method is entirely focused on using percentages so that everything is agile and looks good. Consequently, we almost always need the width of our images to be set at 100% of their containers. If we want to do this, then we must put our images, in a size that corresponds to the physical pixels. For the reason that Outlook 2007, 2010 and 2013 will not scale (up or down) images with respect to their physical sizes, until you explicitly specify the pixel width of this. If you placed an image 1200px wide in a 600px cell and set it to 100% width, then Outlook would output it 1200px wide. Therefore, if you have a cell width of 600px (on the dextop), then you need to apply an image width of 600px.
To solve the problem with images that are smaller than the supported width of the screen, you can explicitly set them to pixel width (for example, 100px) and use high-resolution images, because in applications without a media-query, their width will always be 100px, which looks great in any mobile viewport. However, if you had a 350px wide column, you would not be able to set the image to 350px wide, because if you had to display this image in the Gmail app on a 320px wide viewport, it would be too wide.
It is often necessary to make sure that the width of all images is set to 100%, even if they are already the smallest mobile viewport, as this gives you more flexibility when adding a progressive enhancement in the form of a media query.
My rule of thumb is that every image should be displayed in the appropriate size for physical pixels, unless it is an icon less than 100px wide.
So, taking all this into account, we saved an image named header.jpg, exactly 600px wide, and placed it in our images directory. Borrow it or save your own and now you can preview the HTML file and see how the image flexibly resizes depending on the size of the viewport.
Add another row to the .outer table using the following markup:
And add the following styles in styles.css:
You will notice that I used the <p> tags and a set of classes to style them. I like to use paragraphs for styling text and you can easily manage them thanks to the hack from the large M in Margin , which I mentioned earlier. I also use <p class = "h1"> instead of <h1> , because Outlook.com has some styles for h1, h2 and h3 that always overlap your styles.
So, in the above CSS, we set 10px padding for our column, reset the margin for <p> , set some basic styles for the links and my .h1 and .h2 classes, and then provide left-justification in the styled paragraphs for our column.
We now turn to the exciting stage ... a lot of columns!
* which will be centered when folded vertically
We intend to create a two-column layout for the desktop, which will be placed vertically on mobile devices, forming a single centered column.
First, add a new row to the .outer table. It contains a cell with the class .two-column , and inside it is a conditional table for Outlook with two columns 50% wide:
These conditional columns are important, because without them, Outlook will not allow our two floating tables to be arranged side by side. Since Outlook also does not support max-width , these columns help to keep each column ( note. Child meaning) in the right size.
Visualization of what our two-column structure will be
Now replace each [column to go here] with the following:
The way we intend to make the two columns float (in parallel) side by side on the desktop, but stack up vertically in the center on the mobile device, is to use the text-align: center and display: inline-block combination. All inline and inline block elements obey the text-align property. Therefore, if we wrap our tables in a div with an inline-block set, then we can quite simply set their alignment when they are located one above the other - by setting the text-align property for their container. You can choose left, center, or right alignment and your inline-block divs will be “listened to.” And you can actually set the display: inline-block table itself, but only if you are not going to place any other tables inside it. Everything starts to behave wildly if you put the tables inside the inline-block tables, so if you need to put something in, make sure that the inline-block container is a div.
Let's add our .two-column style to our container cell with the alignment we have chosen.We are also going to add font-size: 0 to get rid of the empty spaces between our columns inside this cell.
Now we will style our inline-block div, which behaves like a column:
100% 300px, , 300px, 100% .
vertical-align : top, center bottom. [ : , , — vertical-align center ?] top vertical-align HTML- valign="top" , middle valign="middle". Note that you may have multiple rows of these divs within a single cell, and the vertical alignment will always follow the principle row by row. It is wonderful! Also make sure that the choice you made here is the same as the valign that you set for the Outlook table, since Outlook does not support vertical-align . If your alignment in Outlook does not match the expected one, then the common cause may be the absence of the specified valign value for the conditional table.
Next we will add a table with two rows to each column. It is responsible for the images and the corresponding text below, when everything is located in a column on mobile devices.
, [content goes here] :
280px. , , , , . 300px 10px , 280px .
.contents , 100%:
, , 100% :
, , , , 300px.
( ) , , text-align: center display: inline-block .
text-align: center , . , :
, 3 text-align: center
, 3 text-align: left
, , . .outer . ( Outlook, 200).
CSS, padding , , , . div , , 200px.
, [column to go here] :
And here it is! Now you should have a three-column layout, the columns of which will be folded on narrow viewports.
Taking into account the fact that this layout has an odd number of columns, sometimes you may find that you have two columns displayed in the top row and only one at the bottom. And although I believe that if you create a design for such a scenario, it will look great, yet sometimes it may look somewhat unbalanced. Often the best way to solve this problem is either left justified; or the use of multiple rows with three columns, in consequence of which, when the content is folded vertically on medium-sized resolutions, an even number of columns will still be present in each row.
If you need to add more rows to your multi-column layouts, then you can add as many inline block elements to a separate container cell as you need. Thus, if the viewport becomes too narrow to fit all the columns, they are simply re-sorted according to the free space.
And although you do not need to divide the rows of divs for most clients, you definitely need to add extra <tr> to your conditional table for Outlook.
Outlook,
, .three-column .outer . . , </tr> <tr> , 3 200px.
, , , [column to go here]:
, , , , . , .
, , . , — , , Outlook .
500px, 100px .
.left-sidebar , Outlook, :
Then, in each column, removing the Deputy [column to go here], we will add a table. This time we will call one of them .column .left , and the other - .column .right , since they have different widths.
Note: here I use many classes for one element. Some inline and / or ESP tools may not support this, therefore, first check with your system or platform. As mentioned above, I use inliner.cm to inline my CSS, which exactly supports many classes.
Add the left table to the first column that contains our icon:
, , .
, , , :
, , div, display: inline-block , . , — . , div .column .right
, :
And finally, let's set the text styles and link color:
Now you should have a layout with a left sidebar and, when you reduce the size of the browser, the icon will be located on top of the text in the middle.
, . , , .
.left-sidebar , — , .left-sidebar .right-sidebar :
.
: dir="rtl" ( ) . , , . , .
, dir="rtl"
, dir="rtl" ( .right-sidebar ). , . , :
, Outlook dir="rtl" <table>, . . , <td> .
, :
, , dir="ltr" .column-left .column-right, , , . , .
.column-left :
And our .column-right should now look like this:
Thus, as a result, our entire series should now take the following form:
And finally, let's add our styles that are completely identical to the .left-sidebar , except for the link.
Nice Now we have two panels on opposite sides, but when everything is arranged in a column on the mobile device, both side panels are displayed above the text.
, media query! , , , media queries, , , ( ) , iOS Mail.
100% 400px. 50%, . , — max-width , , , 100% max-width .
, CSS :
, 401px 600px, , , .
— , , , media queries.
, , style.css <head> index.html <style type="text/css"> </style> . , inliner.cm . , !
Great job! HTML email 20 media queries.
Thanks again Pierre Borodin for all the icons that were used in my educational material.
But what if you could create a template that would be responsive even in environments with the least support for modern CSS? What if every time you heard about some regular email application that everyone is experiencing, instead of indulging in fear, you could feel calm and confident, knowing that your email will surely look good?
The following method, of which I am a supporter, is wholly focused on creating a positive interaction experience when working with email clients who do not have media query support.
')
It is called the fluid-hybrid method , sometimes referred to as the spongy method for email development. The fluid part assumes that we use a fair amount of percentage calculations. Part of the hybrid means that we also use max-width to limit some of our elements on larger screens.
The six main problems we intend to solve
1. Gmail app for Android and iOS - a headache
It is more popular than the default mail application for Android, but Gmail does not support media queries, which we traditionally rely on when resizing and formatting on small screens. This tutorial will show you how to create responsive email messages even in the Gmail app.
2. Regular appearance of new mail applications
It's hard to keep track of all the new email applications that continue to appear. Some of them really “pay attention” to message rendering and have good support for CSS and media query, but some are more focused on the mail processing flow and do not support media queries at all. This tutorial will show how to create emails that are always responsive, regardless of the degree of CSS support.
3. The number of possible screen sizes of the device is almost unlimited.
Not only do we have huge desktops and tiny smartphones, we also have huge smartphones and tiny laptops. Just because someone is accessing his Gmail on a laptop does not mean that his screen is large enough to display a 700px-wide email address; and people using the iPhone 6+ can handle double-column layouts, however, they have problems with single-column layout. This tutorial will show you how to create markup that changes the format to fit the available space, even in webmail.
4. Creating responsive emails on mobile devices using the <td> column does not work everywhere
Certain email clients (for iOS and even some native email applications for previous versions of Android ) incorrectly position the column two table cells in the same row; they can place only two separate tables in a column. This tutorial uses a completely different method that is fully supported by all applications and devices. The standard solution to this problem is to use tables with the attributes align = "left" or align = "right" , but this leads to another problem:
5. Using the responsive design method aligned table leads to the fact that your tables run to the left or to the right in mobile applications that do not support media queries.
The method described in this tutorial uses a different approach that ensures that all your columns are located one above the other in the center on the mobile device, even in the Gmail app (you can also easily align them on the left or right side at your own discretion ).
6. When you use the responsive design method aligned table , you lose the ability to align the content vertically in columns next to
This tutorial will also show you how to align two columns in the same row, vertically on top or in the middle just as if they were cells of a table of the same row, and that use the valign attribute.
1. Let's get started
Start by creating a clean file, save it as index.html, then copy and paste the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse;} </style> <![endif]--> </head> <body> <center class="wrapper"> <div class="webkit"> [content goes here] </div> </center> </body> Let's quickly go over all the elements of the above code:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" This is the DOCTYPE that I like most of all - I made sure that it gives the least number of surprises. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> gives support for all Unicode characters in our document. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> are used here to ensure that Windows Phones correctly display our mobile version.We will add <title> </ title> , although it is better to leave it empty. The title tag is required for valid XHTML, but some native Android email clients will display this title directly in front of the preheader in the inbox preview, which is not very good in most cases.
You will see that I use the external style sheet in this educational material, but you are free to choose the approach as you see fit. Continuing, create a document called styles.css and save it in the same directory as the HTML file. You end we will inlay our CSS.
Further, between <! - [if (gte mso 9) | (IE)]> and <! [Endif] -> we have conditional CSS for Outlook, which will force the collapse of borders for all tables and prevent the appearance of unnecessary empty places This conditional expression is oriented to all versions of Microsoft Outlook (mso) from version 9 onwards (these are, in fact, all versions, since the 9th and earliest versions are Outlook 2000), as well as on those versions that I use Interner Explorer for rendering (Outlook 2000-2003).
Immediately after the body , we have the <center> tag located in order to center the content and act as a carrier of several useful CSS properties (since the body tag is often cleared in webmail clients). We also have <div class = "webkit"> for earlier versions of email clients built on Webkit (mostly Apple Mail 6 and below, as well as Outlook 2011 in some cases). These early versions only support max-width for block elements and the easiest way to get our layout to display in the correct size is to wrap it in this div , which will allow us to do without setting the width in the media query, as in my previous tutorial (thank zerocents for this fix).
2. Initial styles
Next, create a clean CSS file called styles.css. Insert the following into the file you just created:
/* Basics */ body { Margin: 0; padding: 0; min-width: 100%; background-color: #ffffff; } table { border-spacing: 0; font-family: sans-serif; color: #333333; } td { padding: 0; } img { border: 0; } .wrapper { width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .webkit { max-width: 600px; } /* Windows Phone Viewport Fix */ @-ms-viewport { width: device-width; } Here I nullify the margin and padding for the body , the table and tabular cells, and also null any borders that may appear around the images on the links. Our styles for the table and td tags are needed as a replacement for the HTML attributes of cellpadding and cellspacing . You are free to choose HTML attributes as an alternative if you wish; in the past, I always supported selecting HTML attributes instead of CSS properties where it was possible, however, as I worked on more and more scalable projects, I discovered that I can achieve greater manageability by placing it in CSS, especially if you As a rule, you work in a platform that automatically processes CSS inlining.
Also, I usually add min-width with a value of 100% to the <body> tag in order to avoid any situations when the content does not occupy the full width of the viewport on a mobile device, it is also always a good idea to set the background color, even if it is absolutely white, to avoid background color glitches in Outlook or Lotus Notes.
We also have our own styles with several properties for .wrapper that prevent strangely resizing text on Windows Phones and iOS, along with this table-layout: fixed will ensure that our centered content will also be centered in Yahoo mail. We set max-width to 600px for our .webkit div to limit content in Apple Mail 6 (and below) and Outlook 2011.
And finally, we have a fix for the viewport, which, together with our two meta tags in the title, will guarantee a seamless display on Windows Phones.
3. Creating an outer structured container
Let's start with one of the key building blocks in this method: a conditional table for Outlook, which is hidden for all other clients. We need this, because we are going to use the max-width property, which Outlook does not support. Therefore, we need to create special Outlook-only tables with an explicit pixel width that will hold everything.
So let's remove the [content goes here] placeholder from our HTML file and insert the following code. I try to align all the conditional code tags on the left and keep an equal level of indentation for readability, but you can align them at your own discretion.
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center"> <tr> <td> <![endif]--> <table class="outer" align="center"> <tr> <td> [content goes here] </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> Note: there are no styles for conditional table tags. I intend to use the inline tool from Campaign Monitor inliner.cm , it also inlines the styles for conditional tables. If you are going to use another inliner, it may not do this, so make sure that cellpadding = "0" cellspacing = "0" border = "0" is added to the Outlook conditional table.
Inside our conditional table, you will see that we have <table class = "outer"> - this is our key external building block for all clients except Outlook.
We want this external table to have a width of 100% on small cranes, and on larger screens - no more than 600px. Therefore, we intend to set its width to 100% and set it to max-width at 600px
For our table, the width is set to 100%, until it reaches 600px
Good advice: for quick and easy buffering on a mobile device without problems with paddings and media queries, change the width of your table from 100% to 95%
So let's put these styles in our styles.css:
.outer { Margin: 0 auto; width: 100%; max-width: 600px; } We also have a Margin here: 0 auto; to center our table in Yahoo when viewed in Chrome. The margin , however, is used here only for the sake of Yahoo, I always write Margin with a capital letter so that Outlook.com doesn’t clean it - small elegant hack, thanks to Wiktor for commenting on this blog post .
Now we have an external structure, it's time to add some content.
4. Adding a banner image to full width.
First download the tutorial files and move the / images folder to the folder with index.html
Now let's add the full-width-image class to td inside our .outer table, then we replace our [content goes here] placeholder with the image tag, so our table will look like this:
<table class="outer" align="center"> <tr> <td class="full-width-image"> <img src="images/header.jpg" alt="" /> </td> </tr> </table> You will notice that I did not bother about the width or height attributes for the image. I'm going to solve this with CSS, which we will add, and it will look like this:
.full-width-image img { width: 100%; height: auto; } This brings us to one very important nuance in this method, which concerns images.
Images should always be displayed in sizes corresponding to physical pixels.
This method is entirely focused on using percentages so that everything is agile and looks good. Consequently, we almost always need the width of our images to be set at 100% of their containers. If we want to do this, then we must put our images, in a size that corresponds to the physical pixels. For the reason that Outlook 2007, 2010 and 2013 will not scale (up or down) images with respect to their physical sizes, until you explicitly specify the pixel width of this. If you placed an image 1200px wide in a 600px cell and set it to 100% width, then Outlook would output it 1200px wide. Therefore, if you have a cell width of 600px (on the dextop), then you need to apply an image width of 600px.
To solve the problem with images that are smaller than the supported width of the screen, you can explicitly set them to pixel width (for example, 100px) and use high-resolution images, because in applications without a media-query, their width will always be 100px, which looks great in any mobile viewport. However, if you had a 350px wide column, you would not be able to set the image to 350px wide, because if you had to display this image in the Gmail app on a 320px wide viewport, it would be too wide.
It is often necessary to make sure that the width of all images is set to 100%, even if they are already the smallest mobile viewport, as this gives you more flexibility when adding a progressive enhancement in the form of a media query.
My rule of thumb is that every image should be displayed in the appropriate size for physical pixels, unless it is an icon less than 100px wide.
So, taking all this into account, we saved an image named header.jpg, exactly 600px wide, and placed it in our images directory. Borrow it or save your own and now you can preview the HTML file and see how the image flexibly resizes depending on the size of the viewport.
5. Adding a One-Column Layout
Add another row to the .outer table using the following markup:
<tr> <td class="one-column"> <table width="100%"> <tr> <td class="inner contents"> <p class="h1">Lorem ipsum dolor sit amet</p> <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p> </td> </tr> </table> </td> </tr> And add the following styles in styles.css:
.inner { padding: 10px; } p { Margin: 0; } a { color: #ee6a56; text-decoration: underline; } .h1 { font-size: 21px; font-weight: bold; Margin-bottom: 18px; } .h2 { font-size: 18px; font-weight: bold; Margin-bottom: 12px; } /* One column layout */ .one-column .contents { text-align: left; } .one-column p { font-size: 14px; Margin-bottom: 10px; } You will notice that I used the <p> tags and a set of classes to style them. I like to use paragraphs for styling text and you can easily manage them thanks to the hack from the large M in Margin , which I mentioned earlier. I also use <p class = "h1"> instead of <h1> , because Outlook.com has some styles for h1, h2 and h3 that always overlap your styles.
So, in the above CSS, we set 10px padding for our column, reset the margin for <p> , set some basic styles for the links and my .h1 and .h2 classes, and then provide left-justification in the styled paragraphs for our column.
We now turn to the exciting stage ... a lot of columns!
6. Adding a two-column layout *
* which will be centered when folded vertically
We intend to create a two-column layout for the desktop, which will be placed vertically on mobile devices, forming a single centered column.
First, add a new row to the .outer table. It contains a cell with the class .two-column , and inside it is a conditional table for Outlook with two columns 50% wide:
<tr> <td class="two-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="50%" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="50%" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> These conditional columns are important, because without them, Outlook will not allow our two floating tables to be arranged side by side. Since Outlook also does not support max-width , these columns help to keep each column ( note. Child meaning) in the right size.
Now replace each [column to go here] with the following:
<div class="column"> <table width="100%"> <tr> <td class="inner"> [content goes here] </td> </tr> </table> </div> The way we intend to make the two columns float (in parallel) side by side on the desktop, but stack up vertically in the center on the mobile device, is to use the text-align: center and display: inline-block combination. All inline and inline block elements obey the text-align property. Therefore, if we wrap our tables in a div with an inline-block set, then we can quite simply set their alignment when they are located one above the other - by setting the text-align property for their container. You can choose left, center, or right alignment and your inline-block divs will be “listened to.” And you can actually set the display: inline-block table itself, but only if you are not going to place any other tables inside it. Everything starts to behave wildly if you put the tables inside the inline-block tables, so if you need to put something in, make sure that the inline-block container is a div.
Let's add our .two-column style to our container cell with the alignment we have chosen.We are also going to add font-size: 0 to get rid of the empty spaces between our columns inside this cell.
/*Two column layout*/ .two-column { text-align: center; font-size: 0; } Now we will style our inline-block div, which behaves like a column:
.two-column .column { width: 100%; max-width: 300px; display: inline-block; vertical-align: top; } 100% 300px, , 300px, 100% .
vertical-align : top, center bottom. [ : , , — vertical-align center ?] top vertical-align HTML- valign="top" , middle valign="middle". Note that you may have multiple rows of these divs within a single cell, and the vertical alignment will always follow the principle row by row. It is wonderful! Also make sure that the choice you made here is the same as the valign that you set for the Outlook table, since Outlook does not support vertical-align . If your alignment in Outlook does not match the expected one, then the common cause may be the absence of the specified valign value for the conditional table.
Next we will add a table with two rows to each column. It is responsible for the images and the corresponding text below, when everything is located in a column on mobile devices.
, [content goes here] :
<table class="contents"> <tr> <td> <img src="images/two-column-01.jpg" alt="" /> </td> </tr> <tr> <td class="text"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td> </tr> </table> 280px. , , , , . 300px 10px , 280px .
.contents , 100%:
.contents { width: 100%; } , , 100% :
.two-column .contents { font-size: 14px; text-align: left; } .two-column img { width: 100%; height: auto; } .two-column .text { padding-top: 10px; } , , , , 300px.
7.
( ) , , text-align: center display: inline-block .
text-align: center , . , :
, , . .outer . ( Outlook, 200).
<tr> <td class="three-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> CSS, padding , , , . div , , 200px.
/*Three column layout*/ .three-column { text-align: center; font-size: 0; padding-top: 10px; padding-bottom: 10px; } .three-column .column { width: 100%; max-width: 200px; display: inline-block; vertical-align: top; } .three-column .contents { font-size: 14px; text-align: center; } .three-column img { width: 100%; height: auto; } .three-column .text { padding-top: 10px; } , [column to go here] :
<table class="column"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/three-column-01.jpg" alt="" /> </td> </tr> <tr> <td class="text"> Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </td> </tr> </table> </td> </tr> </table> And here it is! Now you should have a three-column layout, the columns of which will be folded on narrow viewports.
Taking into account the fact that this layout has an odd number of columns, sometimes you may find that you have two columns displayed in the top row and only one at the bottom. And although I believe that if you create a design for such a scenario, it will look great, yet sometimes it may look somewhat unbalanced. Often the best way to solve this problem is either left justified; or the use of multiple rows with three columns, in consequence of which, when the content is folded vertically on medium-sized resolutions, an even number of columns will still be present in each row.
Adding a three column layout with multiple rows
If you need to add more rows to your multi-column layouts, then you can add as many inline block elements to a separate container cell as you need. Thus, if the viewport becomes too narrow to fit all the columns, they are simply re-sorted according to the free space.
And although you do not need to divide the rows of divs for most clients, you definitely need to add extra <tr> to your conditional table for Outlook.
Outlook,
, .three-column .outer . . , </tr> <tr> , 3 200px.
<tr> <td class="three-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> <tr> <td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> , , , [column to go here]:
<table class="column"> <tr> <td class="inner contents"> <p class="h2">Heading</p> <p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p> <p><a href="#">Read more</a></p> </td> </tr> </table> , , , , . , .
, , . , — , , Outlook .
'Sidebar'
500px, 100px .
.left-sidebar , Outlook, :
<tr> <td class="left-sidebar"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="100"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="500"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> Then, in each column, removing the Deputy [column to go here], we will add a table. This time we will call one of them .column .left , and the other - .column .right , since they have different widths.
Note: here I use many classes for one element. Some inline and / or ESP tools may not support this, therefore, first check with your system or platform. As mentioned above, I use inliner.cm to inline my CSS, which exactly supports many classes.
Add the left table to the first column that contains our icon:
<table class="column left"> <tr> <td class="inner"> <img src="images/sidebar-01.jpg" width="80" height="80" alt="" /> </td> </tr> </table> , , .
, , , :
<table class="column right"> <tr> <td class="inner contents"> Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read on</a> </td> </tr> </table> , , div, display: inline-block , . , — . , div .column .right
, :
/* Left sidebar layout */ .left-sidebar { text-align: center; font-size: 0; } .left-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .left-sidebar .left { max-width: 100px; } .left-sidebar .right { max-width: 500px; } And finally, let's set the text styles and link color:
.left-sidebar .contents { font-size: 14px; text-align: center; } .left-sidebar a { color: #85ab70; } Now you should have a layout with a left sidebar and, when you reduce the size of the browser, the icon will be located on top of the text in the middle.
9. Adding a layout with a reverse 'sidebar'
, . , , .
.left-sidebar , — , .left-sidebar .right-sidebar :
<tr> <td class="right-sidebar"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="100"> <![endif]--> <table class="column left"> <tr> <td class="inner contents"> <img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="500"> <![endif]--> <table class="column right"> <tr> <td class="inner contents"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> .
: dir="rtl" ( ) . , , . , .
, dir="rtl"
, dir="rtl" ( .right-sidebar ). , . , :
<td class="right-sidebar" dir="rtl"> , Outlook dir="rtl" <table>, . . , <td> .
, :
<!--[if (gte mso 9)|(IE)]> <table width="100%" dir="rtl"> <tr> <td width="100"> <![endif]--> , , dir="ltr" .column-left .column-right, , , . , .
.column-left :
<table class="column left" dir="ltr"> <tr> <td class="inner contents"> <img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> </td> </tr> </table> And our .column-right should now look like this:
<table class="column right" dir="ltr"> <tr> <td class="inner contents"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> </td> </tr> </table> Thus, as a result, our entire series should now take the following form:
<tr> <td class="right-sidebar" dir="rtl"> <!--[if (gte mso 9)|(IE)]> <table width="100%" dir="rtl"> <tr> <td width="100"> <![endif]--> <table class="column left" dir="ltr"> <tr> <td class="inner contents"> <img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="500"> <![endif]--> <table class="column right" dir="ltr"> <tr> <td class="inner contents"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> And finally, let's add our styles that are completely identical to the .left-sidebar , except for the link.
/* Right sidebar layout */ .right-sidebar { text-align: center; font-size: 0; } .right-sidebar .column { width: 100%; display: inline-block; vertical-align: middle; } .right-sidebar .left { max-width: 100px; } .right-sidebar .right { max-width: 500px; } .right-sidebar .contents { font-size: 14px; text-align: center; } .right-sidebar a { color: #70bbd9; } Nice Now we have two panels on opposite sides, but when everything is arranged in a column on the mobile device, both side panels are displayed above the text.
10. Adding Progressive Enhancement with Media Queries
, media query! , , , media queries, , , ( ) , iOS Mail.
100% 400px. 50%, . , — max-width , , , 100% max-width .
, CSS :
/*Media Queries*/ @media screen and (max-width: 400px) { .two-column .column, .three-column .column { max-width: 100% !important; } .three-column img { max-width: 50% !important; } } , 401px 600px, , , .
@media screen and (min-width: 401px) and (max-width: 620px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } — , , , media queries.
11.
, , style.css <head> index.html <style type="text/css"> </style> . , inliner.cm . , !
!
Great job! HTML email 20 media queries.
- , email . , padding . , padding 10px .inner , . , . . padding .padding , . . media query
- , , , padding, , , .
- , .
- email, , , , , . Outlook, , , Outlook . , , email 500-600px, , .
- And, finally, always check that you are placing the images in sizes that match physical pixels. A good way to make sure that you always follow this rule is to create a code for the layout and then use the inspector from browser tools to determine the actual size of the final space. Then you can make sure that your image is created with exactly such dimensions. Don't forget to check it again at the end, just to make sure everything is fine. If you do not do this, then Outlook will kindly point you to an error in your methods, since it will display each individual image in its physical dimensions.
Icons
Thanks again Pierre Borodin for all the icons that were used in my educational material.
Source: https://habr.com/ru/post/259793/
All Articles