Web-Design
Friday December 18, 2020 By David Quintanilla
Creating a Future-Proof Responsive Email Without Media Queries


Final product image
What You may Be Creating

Utilizing this technique you possibly can create an electronic mail that has responsiveness baked in to the format, with none want for CSS or media queries within the <head>, in order that even within the worst case state of affairs of electronic mail rendering, your format will stay intact.

Is Growing HTML E-mail Nonetheless Onerous?

HTML electronic mail has come a great distance prior to now ten years (sure, it used to even worse!) however there are nonetheless a shocking variety of issues that may go mistaken when coding responsive emails for the inbox.

As of late, most electronic mail apps do a fairly good job of adhering to the newest HTML and CSS requirements, however safety or different restrictions typically imply that companies will regulate or strip out key parts of your electronic mail’s code, just like the all-important <head>, which regularly comprises essential CSS and media queries. It’s tough to maintain observe of each occasion the place the sort of factor happens, not to mention what you have to do to mitigate the results in every state of affairs.

However what for those who may construct an electronic mail template that was responsive, even in environments with no assist for contemporary CSS like media queries, or eventualities the place solely the <physique> of your electronic mail is delivered? What if, each time you heard about some new electronic mail app that everybody’s making an attempt, as an alternative of shaking with worry, you might really feel secure and safe within the data that your responsive emails in all probability look fantastic?

This tutorial is all about creating an awesome expertise in electronic mail purchasers which haven’t any nested CSS or media question assist in any way, utilizing the the fluid hybrid technique of HTML electronic mail improvement. The fluid half refers to the truth that we use plenty of percentages and parts that may transfer and increase to suit the area they’re given. The hybrid half is as a result of we additionally use max-width to constrain these free-flowing parts, and limit the general dimension of our electronic mail on bigger display sizes.

All in all, it’s a light-weight, totally responsive electronic mail with out media queries that is available in at a tidy 17kb. 

Common HTML E-mail Templates on Envato Market

When you’re searching for a ready-made, skilled resolution, seize one among our best-selling HTML email templates on Envato Market. We have now a whole bunch of responsive choices from as little as $5, with simple to customise options to get you began.

best-selling HTML email templates on Envato Market
Best-selling HTML email templates on Envato Market

Not what you’re searching for? No drawback, this tutorial will educate you easy methods to construct your individual.

The E-mail Template We’re Going to Construct

Right here’s a demo on CodePen to indicate you the responsive HTML electronic mail we’ll be constructing. Be happy to fork it and use it in your individual tasks!

All of the graphic parts within the template are a part of the Flat People Characters assortment by alexdndz out there on Envato Parts.

5 Main Issues We’re Aiming to Resolve

1. Gmail’s app nonetheless doesn’t assist the <fashion> tag for non-Gmail accounts

That is the massive one. The Gmail app is massively common on iOS and Android, it may be set as customers’ default mail app on any smartphone, and it helps all non-Gmail accounts. However seen within the Gmail app, emails for non-Gmail accounts don’t assist <fashion> tags, so media queries, which we will often depend on to optimise our emails for small screens, aren’t supported. This tutorial will present you easy methods to make emails which might be responsive, even on this state of affairs.

2. It’s actually laborious to maintain on high of electronic mail companies and their degree of CSS assist

New electronic mail suppliers and apps seem on a regular basis. A few of them have nice CSS and media question assist, however a few of them focus extra on electronic mail workflows and don’t assist <fashion> tags or media queries in any respect. A few of them differ throughout platforms – for instance, the Yahoo mail app for iOS helps <fashion> within the head, whereas on Android it doesn’t, until you embrace your complete <head> twice, which isn’t doable from each sending platform.

This tutorial will present you easy methods to make an electronic mail that’s all the time responsive, even in a worst-case state of affairs the place CSS assist is nonexistent, so that you don’t have to fret about how your emails render in all these unknown use circumstances.

3. Utilizing conventional strategies like float or align to create columns leads to unpleasant stacking on cell apps with out media question assist 

The strategy on this tutorial makes use of a special strategy which ensures that your columns all stack within the centre on cell, it doesn’t matter what. (You may as well simply set them to align to the left or proper for those who choose.)

methods like float or align to create columns don’t work
Tables aligned to the left or proper stay of their positions in cell apps that don’t assist media queries. You’ll be able to’t regulate them utilizing mobile-specific CSS
This tutorial will show you how to have your columns stack in the center, even in apps that don’t support media queries
This tutorial will present you easy methods to have your columns stack within the middle, even in apps that don’t assist media queries

4. Whenever you use float or align to create columns, you lose the flexibility to vertically align them

This tutorial will even present you easy methods to vertically align a number of columns to the highest, center, or backside.

This tutorial will teach you the ’fluid hybrid’ method, which allows you to vertically align your columns to the top, middle or bottom
This tutorial will educate you the ’fluid hybrid’ technique, which lets you vertically align your columns to the highest, center or backside

5. Whenever you use float or align to create columns, it’s a must to place them in separate divs or desk rows, to allow them to’t circulate and stack naturally at totally different display sizes

This tutorial will even present you easy methods to have content material blocks that stack and circulate as you’ll anticipate them, with complete management over their horizontal and vertical alignment. 

Using this method, your content blocks flow naturally based on the available space.
Utilizing this technique, your content material blocks circulate naturally based mostly on the out there area.

1. Getting Began

Begin with a clean file and reserve it as index.html, then copy and paste the next code into it:

Let’s run by all the weather above in additional element.

DOCTYPE

<!DOCTYPE html> indicators that we intend to make use of HTML5. Some electronic mail purchasers impose a special doctype and a few might take away it, however most often you find yourself with the HTML5 doctype a technique or one other. (Word that not all HTML5 parts are supported on the subject of electronic mail, so all the time test assist ranges first on the unbelievable useful resource caniemail.com.)

HTML Tag

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:workplace:workplace"> begins our HTML doc and defines the XML and OOXML (Workplace Open XML) namespaces which we want for Outlook on Home windows, as we’ll see beneath.

Charset Meta Tag

<meta charset="utf-8"> defines Unicode character encoding for our electronic mail, which usually covers most characters for many languages, nonetheless you might want to alter this if you have to use any characters that aren’t included within the UTF-8 character set.

Viewport Meta Tag

<meta identify="viewport" content material="width=device-width,initial-scale=1"> permits us to specify that the viewing space for our electronic mail ought to be width of the machine display, and that the preliminary zoom ought to be 100%.

Apple Scaling Meta Tag

<meta identify="x-apple-disable-message-reformatting"> prevents Apple from doing any undesirable scaling or zooming out of your electronic mail on iOS units.

IE9 Meta Tag

<meta http-equiv="X-UA-Appropriate" content material="IE=edge" /> is used to enhance rendering in Web Explorer 9 or decrease, which is getting much less and fewer frequent, so you might use your discretion with this one. Prior to now it was additionally used to enhance rendering on Home windows Telephones. It’s positioned between <!--[if !mso]><!--> and <!--<![endif]-->  in order that it’s hidden from Home windows Reside Mail, which in any other case gained’t show photographs if this tag is used. (Huge thanks go to Don Braithwaite for that repair.) 

Title Tags

We’ll embrace <title></title> though I discover that it’s greatest to depart it empty. Typically you’ll come throughout an app or electronic mail sending platform that shows this title instantly after the Topic Line of the e-mail within the inbox preview, which isn’t superb.

If MSO

Subsequent, between <!--[if mso]> and <![endif]--> we have now some kinds that may solely apply in Microsoft Outlook. We’ll forestall gaps and cellpadding on our tables utilizing border-spacing:0; (the CSS equal of utilizing cellspacing="0" on desk parts). We then zero margins on all div parts and use !essential as a result of in any other case Outlook provides a number of further, unpredictable and undesirable area to our format.

XML Tag

Then we have now our XML tag, and inside we have now our OOXML aspect <o:OfficeDocumentSettings> with some settings that inform Microsoft Outlook we’re working on a base decision of 96dpi. This setting ensures that Microsoft Outlook all the time precisely transforms the whole lot in our electronic mail to adapt to the display zoom proportion configured in Home windows settings for high-DPI shows (which is most shows today). That is all inside a <noscript> tag so T-On-line doesn’t show the “96” (due to Mark Robbins for this repair.) 

Inline CSS

You’ll discover there’s no <fashion> tag right here. We’ll do all our CSS inline, which continues to be greatest observe for electronic mail till non-Gmail accounts within the Gmail app cease stripping the <head> of your emails. We’ll come again on the finish so as to add some media queries as an enhancement for these purchasers that do assist them.

Physique Tag with Fundamental Types

<physique fashion="margin:0;padding:0;word-spacing:regular;background-color:#ffffff;"> units some fundamental kinds on the physique tag. Most essential is word-spacing:regular, one other life-saving repair from Mark Robbins, as a result of in any other case Gmail units word-spacing to 1px on the physique, which provides a 1px hole between our columns and causes them to stack.

Wrapper Div

<div position="article" aria-roledescription="electronic mail" lang="en" fashion="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"> is our outer wrapper, additionally based mostly it on Mark’s instance. It comprises our important content material, units some CSS to make sure appropriate sizing of textual content, and units our language, right here to English. It additionally comprises some settings to make our electronic mail accessible by defining the first electronic mail space’s position as an article, and being slighty extra particular with aria-roledescription="electronic mail". That is in order that display readers will announce that it’s an electronic mail, or not less than that it’s an article, which defines it as a major piece of content material and can help with navigation.

And whereas this format shall be utilizing divs moderately than tables the place doable, we do embrace one massive wrapper <desk> right here to assist us middle the principle physique of the e-mail inside it. That is wanted particularly for Comcast webmail (USA) and Libero webmail (Italy) which each fail to middle our content material with out it. We should always all the time set the position of any desk used purely for format to presentation in order that display readers gained’t announce the presence and construction of the rows and columns (which is useful for precise tabular knowledge) however will as an alternative solely announce the content material inside.

2. Creating the Structural Outer Container

First up, we have to add an outer container, which is definitely two containers, since we have to cater individually for Outlook on Home windows on the one hand, and all different electronic mail purchasers on the opposite.

It’s because the majority of our electronic mail shall be created utilizing <div>s that use max-width in CSS to set their dimensions and show:inline-block; in CSS to position a number of columns side-by-side. Sadly, Microsoft Outlook on Home windows doesn’t correctly assist any of that, so we have to use some old style tables to maintain it joyful. We solely need these restrictive desk layouts to use to Outlook although, so we nest the code inside conditional [if mso] feedback which cover it from different electronic mail purchasers. Any desk arrange for Outlook like this is named a ghost table.

We need ghost tables for Outlook on Windows because it will ignore div widths and positioning.
We’d like ghost tables for Outlook on Home windows as a result of it is going to ignore div widths and positioning.

So first up we’re going so as to add a ghost desk and a div that collectively comprise a wrapper at our desired width for this electronic mail, 660px. 

Our ghost table for Outlook is used because Outlook doesn’t support the max-width property
Our ghost desk for Outlook is used as a result of Outlook doesn’t assist the max-width property

Exchange the [content goes here] marker in your file with the next code:

Right here you possibly can see our ghost desk is 660px huge, and the div inside is 96% huge, as much as a most of 660px. It will imply that on smaller screens we have now a small 2% buffer on both aspect, as a little bit little bit of padding.

Our table is set to be 96% wide until it reaches a maximum of 600px
Our desk is about to be 96% huge till it reaches a most of 600px

This div additionally has a high and backside margin of 20px, to present it some vertical respiratory room, and since that gained’t render in Outlook, we’ve added high and backside padding to the ghost desk’s td as nicely.

3. Including a Single Column Format with a Full-Width Banner Picture

Now we have now our outer construction, it’s time to start out including some content material.

If you’re following alongside step-by-step, cease now to obtain the tutorial information and transfer the /photographs listing in order that it’s in the identical folder as your index.html file. You’ll be able to seize the supply information within the following methods:

As talked about, we’ll usually be favouring divs over tables, however for single-column layouts it makes use of much less markup to simply use one desk for everyone, moderately than a div with a ghost desk. So let’s change [content goes here] with this code:

In our first row we have now a cell with 10px padding on the edges, a little bit further on the underside. Inside this cell is our header banner picture its personal row in order that there’s loads of area for any ALT textual content in a pleasant giant font dimension. (In my case, this picture is solely ornamental, so it doesn’t want any.)

We set the picture width="640" within the HTML for Outlook, after which within the CSS we set fashion="width:100%;peak:auto;" in order that the picture shall be 100% huge in different purchasers, and all the time in proportion.

Within the second row, we apply the identical 10px padding to the edges, in addition to text-align:left; to cease the textual content from being centered in some purchasers who would inherit it from the td align="middle" above it.

For our textual content we will use <h1> and <p> tags since margin is supported on these tags throughout the board (padding, not a lot). We do apply all our styling inline to those parts although, as a result of some webmail purchasers have font styling that shall be pressured onto them until you explicitly override it on the aspect degree.

On the very backside, you possibly can see we’re utilizing a spacer div to create some padding between this format and the following. I choose to make use of these between blocks as a result of Outlook might be fairly unpredictable with margins on block-level parts, and I discover it a lot simpler when constructing modular layouts to maintain the spacing as discrete items of code. Nevertheless for those who choose, you possibly can apply padding inside your parts to create vertical area. Whenever you do need to create spacers like this, you possibly can simply set a line-height, a peak, and set mso-line-height-rule:precisely; which is a Microsoft Workplace property that forestalls it from treating your line-height at the least.

Additionally be aware that it’s essential to use the identical padding on the left and proper of all of your columns, in order that they are going to be uniform after they stack on high of one another.

Always have the same amount of padding on the left and right sides of your elements so that padding is uniform on mobile in clients with no media query support
At all times have the identical quantity of padding on the left and proper sides of your parts in order that padding is uniform on cell in purchasers with no media question assist

Now it’s best to have your single-column format able to go, so let’s transfer on to a number of columns.

4. Including a Two-Column Format Which Shall be Centered on Cell

We are going to create a two-column layout on desktop that stacks to a single, centered column on mobile
We’re going to create a two-column format on desktop that stacks to a single, centered column on cell

Instantly beneath the closing </div> tag from the spacer above, paste the next:

This provides us a really fundamental format of a father or mother div with two columns inside that are scaffolded by a ghost desk for Outlook with two cells, every 50% huge.

First we need to make sure the font-size is about to zero on our container, as a result of our columns want to take a seat snugly aspect by aspect, and with out this you possibly can find yourself with further spacing that causes them to stack. We additionally want so as to add a text-align property which can management the alignment of the columns inside. So change the opening div tag to the next:

To get the columns inside to drift aspect by aspect on desktop, however stack within the centre on cell, we mix this use of text-align: middle on the container with  show: inline-block on the columns.

All inline-block parts obey the text-align property on their father or mother, so we will merely set left, middle or proper on the container to specify the place the columns ought to sit when they’re stacked. 

The text-align set on the container will determine the placement of the columns inside
The text-align set on the container will decide the location of the columns inside

Getting A number of Columns to Work

So let’s add the show setting to every column, and specify their widths. We would like them to be 100% huge on smaller screens, as much as a most of 330px huge on desktop.

Change every div.column tag in order that they each appear to be this:

Now the whole lot is about as much as work as a number of columns.

Now everything is set up to work as multiple columns.

Subsequent we need to set the vertical alignment for our columns, and you may select between high, middle and backside. When you have got a multi-row format, which we’ll cowl in Step 6, your selection will even set the vertical alignment on a row-by-row foundation, even when your columns stack down onto new strains. It’s fairly nifty! 

Columns will vertically-align to their neighbours, even when they stack onto new lines
Columns will vertically-align to their neighbours, even after they stack onto new strains

We have to add some code in two locations for this one. On our column divs, add vertical-align:center; to the CSS, in order that they appear to be this:

And for Outlook, we add the HTML valign attribute to every cell too. This all the time has to match no matter you’ve set on the corresponding column div, so for those who change the columns to vertical-align:high; you have to additionally set all of your ghost desk cells to valign="high" too.

Edit the ghost desk cells to appear to be this:

And eventually we’ll add some padding. For Outlook, we will merely add this to the ghost desk cells:

For our columns, I really wish to nest an additional div inside with the padding. I do that as a result of the field mannequin in CSS signifies that any padding added to a component will get utilized to the skin, growing its complete width (e.g. a 330px column with 10px padding on both aspect turns into 350px huge). Usually in HTML you should use box-sizing: border-box; in order that any padding is included within the width, but it surely’s not nicely supported throughout electronic mail purchasers. So to save lots of myself the trouble of doing plenty of calculations of column widths minus padding, I choose to nest.

So inside every div.column, change [content goes here] with this:

Now we’re all arrange, and our construction is full! The format and ghost desk work collectively to present us our two-column format.

Visualising how our two-column structure works
Visualising how our two-column construction works

Now We Simply Have to Add Our Content material

To the primary column, we’ll add a picture, which I’ve wrapped in a paragraph tag to present it some textual content styling for the ALT textual content. Exchange the primary [content goes here] with this:

This can be a pretty commonplace template for fluid hybrid photographs; we set the width="310" for Outlook, then embrace show:block; to forestall gaps beneath the picture in Gmail, set the width to 100% and peak to auto within the CSS, after which restrict it to max-width:310px;

And to our second column change the [content goes here] with this code, which features a few paragraphs of textual content, and a hyperlink button utilizing Mark Robbins’ technique:

The second div is now displaying invisible, centered textual content, as a result of it’s inheriting the zeroed font dimension and centered text-alignment from the container. So we’ll add some font-sizing and text-alignment to the div tag so it now seems to be like this all collectively:

All mixed your complete part ought to appear to be this, and we’ll add a spacer on the backside too:

There we have now it! Now it’s best to have a two-column format which stacks vertically while you resize your browser and shrinks as applicable while you make the viewport narrower than 330px.

5. Including a Two-Column Format That Will Reverse When Stacked on Cell

Now we’re going to duplicate the format above, however flip it in order that the picture is on the appropriate and the textual content is on the left when seen on desktop, whereas guaranteeing that the picture nonetheless comes first when seen on cell.

When stacking, the merchandise that comes first within the code will all the time find yourself on high. So we will nonetheless code our format with the picture first and content material second, however then make use of the dir="rtl" attribute in HTML and the corresponding course:rtl; property in CSS to make sure that the columns are laid out right-to-left after they seem aspect by aspect.

Our elements will stack in the opposite order if dir=
Our parts will stack within the reverse order if dir="rtl" (HTML) or course:rtl (CSS) is about on their container

Historically this property is for denoting a language with textual content that runs right-to-left, for instance Arabic. When utilized to format parts, it is going to inform every electronic mail consumer to render our parts within the reverse order. We all the time use the CSS model for our div content material as a result of GMX & Internet.de don’t assist the HTML dir attribute however they do assist course in CSS.

So beneath the spacer added above, you might copy and paste your entire div.two-col once more, or paste the code beneath, which has the identical construction however barely totally different content material:

Now all we have to do is inform the ghost desk and the father or mother div to put out their contents in a right-to-left course, so add course:rtl; to the container div’s CSS so it now reads:

And add dir="rtl" to the ghost desk:

When you reserve it now and have a look, you’ll see the columns have switched sides, however the textual content is trying bizarre. That’s as a result of the textual content can be inheriting the course property, so we have to reset it on our divs and ghost desk cells. Firstly, add course:ltr; to every column div, in order that they now appear to be this:

After which dir="ltr" to every ghost desk cell:

Now our English textual content runs from left to proper because it ought to.

So to recap, our complete row ought to now appear to be this, and we’ll additionally add one other spacer on the backside, like so:

And that’s all there may be to it! You’ve now created a flipped column format that may reverse when stacked.

6. Including a Three-Column Format With A number of Rows

As with our two-column format, right here we’re going to create columns that stack within the middle on cell through the use of the mixture of text-align: middle on the container and show: inline-block on the columns inside. 

To attain a number of rows and columns, you possibly can add as many inline-block parts to a single container as you want. This manner, when the viewport turns into too slim to suit all the columns, they reflow to suit the area out there. This implies you’ll be able to obtain (for instance) a 3×2 column format that stacks right down to 2×3 columns and eventually 1×6 columns on cell:

Our free-flowing blocks can stack from 3x2 to 2x3 and down to 1x6
Our free-flowing blocks can stack from 3×2 to 2×3 and right down to 1×6

Firstly, our part right here additionally has a single-column heading and intro, so we’ll add that first. As at Step 3, we’ll simply use a desk as a result of it makes use of much less code than making a div and a ghost desk. So beneath the spacer from above, paste the next

Beneath this, we’ll add our three column container, with our textual content alignment setting:

Subsequent, change [content goes here] with the next ghost desk: 

The principle factor to watch within the code above is that in the midst of the ghost desk, we finish the desk row and begin a brand new one, with </td></tr><tr><td>. You don’t must separate the rows of divs, nonetheless you do want so as to add extra <tr>s to your ghost desk for Outlook for each ’row’ of columns that you’re going to find yourself with. This achieves a format like this:

This is how our ghost table works in Outlook to keep our rows and columns separate
That is how our ghost desk works in Outlook to maintain our rows and columns separate

For the remainder of this format, the method is nearly similar to what we noticed in Step 3. The one distinction is that we have now three columns, so they’re all set to be a 3rd of the width of our electronic mail, 220px huge. And moderately than setting the ghost desk cells to be a proportion, since it might must be 33% for Outlook which is barely imprecise, we’ll set it to be the pixel width on every cell. Exchange every td within the ghost desk with this markup:

Word that it’s all the time a good suggestion to set pixel cell widths in ghost tables through the use of CSS moderately than HTML as a result of Outlook treats these precisely when adjusting for Home windows’ DPI scaling. When you set your cell widths in HTML like width="220" you possibly can find yourself with unpredictable leads to Outlook on Home windows.

We’ll match the ghost desk cell formatting for every of our columns, so regulate every column div tag so all of them appear to be this:

And as soon as that’s utilized to every, we merely want so as to add our interior padding div, some content material, our textual content styling, and throw in a spacer beneath. With that added, all of it comes collectively like this:

And that’s it! Now it’s best to have a three-column format that collapses down to 2 columns and eventually to 1 on the smallest screens.

7. Including a Two-Column “Sidebar” Format

Now we’ll create a format with one huge column plus a narrower sidebar that comprises an icon.

We would like these to stack within the middle so we’ll arrange our container div with that textual content alignment. Paste the next code beneath the final spacer:

Now, change [content goes here] with our ghost desk and column divs. As soon as column is 100px huge, and the opposite is 560px. 

Now let’s set our vertical alignment by including valign to the ghost desk cells, and vertical-align to every div. Our smaller column code will appear to be this:

And the broader one like this:

Now we’ll add our padding and align our textual content to the middle on the smaller ghost desk cell:

And the bigger ghost desk cell:

And to make sure our divs match, nest one other div inside every, changing the [content goes here] markers with this:

Now we will add our content material. On the small column, change [content goes here] with this:

And on the big column change it with this:

Placing all of it collectively, it ought to appear to be this. I’ve additionally added some font styling the padding div within the small column, for any ALT textual content that will get displayed. And we’ll add a spacer on the finish too:

Now it’s best to have your left sidebar format and while you resize your browser to make it smaller, the icon will leap above the textual content and sit within the centre.

8. Including a Reversed “Sidebar” Format 

So as to add some extra visible curiosity, let’s reverse our second sidebar format in order that the icon is on the appropriate for desktop, however nonetheless stacks first on cell. We’ll comply with precisely the identical course of as in Step 5. We will basically duplicate the sidebar format above, or take this instance format with barely totally different content material:

And as at Step 5, to reverse the order we merely want so as to add our course:rtl; to div.sidebar, and dir="rtl" to the ghost <desk> tag.

Then, to make sure the contents run in the appropriate course, we add course:ltr; to each of our columns, and dir="ltr" to every of our ghost desk cells.

As soon as achieved, all of it seems to be like this, with our last spacer added beneath:

And there you have got it! Now we have now two sidebars with icons on reverse sides, however they continue to be above the textual content when the whole lot stacks on cell.

9. Including Progressive Enhancement With Media Queries

Now you have got a whole electronic mail template that’s responsive all over the place with out a single media question in sight! However in fact there are various electronic mail purchasers that do assist media queries, so now we will go about progressively enhancing our already fabulous template with a number of tweaks in order that it seems to be top-notch in as many electronic mail purchasers as doable.

Including Media Queries

Firstly, we’ll set our three-column columns to be 100% huge on screens as much as 350px huge, however then for screens which might be between 351–460px huge, we will really match two columns aspect by aspect, so we’ll set them to 50% there. On the columns all we have now to do is override the max-width as a result of, as you’ll recall, all of them have already got a width of 100% and it’s simply the max-width that’s limiting them.

With our two-column columns and pictures, we’ll simply set these to be 100% huge on all screens as much as 460px huge.

For screens which might be a minimal of 461px huge, we’ll then specify proportion max-widths for all of the columns, in order that they are going to all be in proportion even when the viewport or viewable area (in Gmail webmail for instance) is narrower than our electronic mail width of 660px. 

So add this to the <head> of our doc:

And voilà! Format perfection at each display dimension.

These are just a few changes to reveal what’s doable—you possibly can mess around with this as a lot as you want to realize your required consequence throughout an entire vary of machine sizes that assist media queries. 

And There You Have it!

Nicely achieved! We now have a fully-functioning responsive HTML electronic mail utilizing only a handful of media queries and coming in at underneath 17kb. Go forth and experiment with totally different layouts utilizing the ideas you have got realized on this tutorial – there’s a lot you are able to do when you’ve mastered the fundamentals.

 

Icons and Illustrations

All of the graphic parts within the template are a part of the Flat People Characters assortment by alexdndz out there on Envato Parts.

flat cartoon people characters

And don’t neglect, for those who’re about to kickstart a brand new venture flick through our best-selling responsive email templates on Envato Market. 

Extra HTML E-mail Improvement Tutorials



Source link