Responsive email in Gmail

First things first

Before you get all excited I should point out this is only for Gmail on desktop it doesn’t work in the Gmail app (where it would actually be useful), Google apps accounts or the new Google Inbox.

Also big thanks and a lot of credit to Justin over at Fresh Inbox who came up with the technique for using styles in Gmail. I suggest you read that post first if you haven’t already, it’ll explain why I’m using the [lang=x-outer] selector instead of a class.

Following on from the work Justin did I’m going to look at using this in a media query. It’s not quite as simple as you might hope.

Here’s what we’re aiming for

responsive-gmail

I’ve added background colours to show where the breakpoints are.

Max-Width

I generally like to set a fixed width of 600px on my emails, so normally I would set my first max-width breakpoint at 600px, however gmail is looking at the width of the browser window not the width of the email container like some other clients do.

So I set my first media query at 1160px, this is the point where the element containing the email hits 600px. So here I set the email width to 100%.


	@media screen and (max-width:1160px){
		* [lang=x-outer]{
			width:100% !important;
		}
	}
	

Nothing too out of the ordinary so far, well…

The crazy, yet actually quite cool bit

When the browser window gets down to 700px the element containing the email is fixed to 450px. When you go under that a scroll bar appears but we don’t want to make our user scroll horizontally, that’s just bad UX.

To solve this we set the width to be 100% of the viewport width, minus 250px for the column fixed on the left of the screen. Sounds crazy rigth? To do this we use VW and Calc.


	@media screen and (max-width:700px){
		* [lang=x-outer]{
			width:calc(100vw - 250px) !important;
			float:left;
		}
	}
	

VW and Calc aren’t that commonly used in web design let alone email, so I’ll give a quick explanation.

VW

VW is a very handy measurement unit where 1vw = 1% of the Viewport Width (in this case the browser). This differs from % which is relevant to the size of the containing element (in this case fixed at 450px). I love to use VW for setting responsive font-size too.

You can also look into vh (viewport height) vmin (the smaller of vw or vh) and vmax (the larger of the two).

Calc

Quite simply calc is a calculation. You can do simple calculations using px, %, em, rem, vw, vh etc.

Closing media query

I always like to add in a closing media query as every design has a break point. I’ve decided I don’t want my email smaller than 300px so add that 300 to the 250px on the left and I insert a media query at 550px to fix the width to 300px.


	@media screen and (max-width:550px){
		* [lang=x-outer]{
			width:300px !important;
		}
	}
	

Usage

To be honest this isn’t really that useful, it’s not often someone will be viewing their emails on a screen less than 1160px wide unless it’s a mobile or tablet in which case they’re likely to be viewing the mobile version of Gmail (which doesn’t support this method).

However, if you take a mobile first coding approach, then this could get rather interesting…
But that’s a post for another day.

The full code

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <!--xmlns  fix Outlook Scaling-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Fix Outlook Scaling-->  
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->  
  
<title>Media queries</title>

<style>
body {
	text-size-adjust: none !important;
	-ms-text-size-adjust: none !important;
	-webkit-text-size-adjust: none !important;
}
.ExternalClass * {
	line-height: 100%;
} 
table {
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0 auto;
}
table table table {
	table-layout: auto; 
} 

@media screen and (max-width:1160px){
	* [lang=x-outer]{
		background: olive;
		width:100% !important;
	}
	.outer.outer{
		width:600px !important;
	}	
}

@media screen and (max-width:700px){
	* [lang=x-outer]{
		background: teal;
		width:calc(100vw - 250px) !important;
		float:left;
	}
	.outer.outer{
		width:600px !important;
		float:none;
	}		
}
@media screen and (max-width:550px){
	* [lang=x-outer]{
		background: steelblue;
		width:300px !important;
	}
	.outer.outer{
		width:100% !important;
	}		
}




</style>

</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" >
	<tr>
		<td>
			<table align="center" width="600" lang="x-outer" border="0" cellspacing="0" cellpadding="0" class="outer">   
				<tr>
					<td>
						<div style="padding:10px; border:1px solid #444444;">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla ante nisi, nec scelerisque tellus vehicula a. Integer facilisis justo vel dolor pellentesque varius. 
							<br><br>
							Donec malesuada eleifend nibh, vitae sollicitudin nunc imperdiet a. Quisque pellentesque luctus nibh at varius. Donec ultrices, enim ut lobortis iaculis, nibh ligula malesuada leo, et venenatis velit leo at mi. Proin viverra nulla et nisi pulvinar, sit amet malesuada nunc pharetra. Vestibulum quis sodales enim. Aliquam id mollis nisl.
							<br><br>
							Integer rhoncus nisl at scelerisque mollis. Proin vel ante dui. Phasellus egestas eu mauris eget congue. Nullam et est faucibus, ultricies sapien quis, pretium odio. 
							<br><br>
							Pellentesque dictum nec odio a pellentesque. Mauris condimentum convallis augue id malesuada. Ut ultricies leo sed odio semper vulputate. Quisque viverra tortor leo, a convallis tortor egestas a. Morbi bibendum, nisi vitae venenatis consectetur, arcu dui blandit nulla, suscipit sodales felis mi sed neque. 
							<br><br>
							Suspendisse tincidunt volutpat quam, vel pharetra nulla tempor rutrum. Nullam tempus molestie lacus, non mattis justo viverra in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.						
						</div>

					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

</body>
</html>

See the Pen iHsIf by M_J_Robbins (@M_J_Robbins) on CodePen.

Posted in Code

Sign up to newsletter