Next we’ll add the actual column which will be one of two columns, with matching HTML, that will align next to each other at the full 600px width and stack on top of one another under 600px. The class “two-columns” added here doesn’t require any styling using CSS separate from the padding set to zero, the reason for it is to simply let us know that this tag will be containing our two columns. Now that we have our main table set we can start the table row using the tag with a table date tag inside of it and the padding set to zero to remove horizontal spacing in email clients: Īfter the first and tags there is a second tag and an additional set of the table row & table data tags. ![]() We also have our width set to 100% for small screens and the width set to 600px which is the preferred and most recommended width of email templates to fit in email clients. The styling with zero values in the main table, similar to the tag, is mostly to strip away any inherit spacing that email clients want to add to our design. To reinforce the centering of our email template, inside of the main tag we’ll use the align attribute with the “center” value. Inside of the tag you’ll notice the style declaration “table-layout:fixed ” which gives us control over the width of the main table we’ll add inside of the center tag. To do this we’ll use the HTML tag which isn’t valid anymore in the latest version of HTML(5) but still serves it’s function in HTML email rendering engines. Centering the HTML Email Templateīefore we add the tables to our email layout to achieve responsiveness, let’s get our template centered in email clients which will be the first tag after the HTML Email Body tag to reset the canvas which was covered in a previous lesson. Instead, we need to build and layer HTML tables so when the screen width gets narrower our tables will stack on top of each other. ![]() Building Bulletproof Responsive HTML Email Tablesĭeveloping multi-column sections in HTML emails is different from website design in that we aren’t able to use tags or other elements that we can add styling to for a column’s responsiveness like we can on the web.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |