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
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.