Transcript from the "Responsive Email Solution" Lesson
[00:00:00]
>> Rodriguez: Let's look at how we would make our multiple column layout actually responsive and stack those columns on mobile. So, we're gonna go back over to our code here. We have again a refresher.
>> Rodriguez: This email right now we have three separate columns in here, if we were to shrink this down a little bit, then those columns aren't going anywhere.
[00:00:27] That's theie behavior we want. We know that this can be displayed on smaller mobile screens and we wanna make sure that stacks and it shuffles down to that single column layout that people can easily scroll through. So if we go in here again, we have these three tenets of responsive design.
[00:00:44] We have fluid layouts, fluid images, and then media queries. So we have the fluid images that because we're doing that response by default approach to our images. So the next step is making these fixed with tables, fluid so that they shrink down and fit to that screen. The main one here is going to be that 600 pixel wide container table that we set up.
[00:01:08] So we have this width equals 600. This attribute on our container table. So we want to change that to be a 100% wide but only on mobile screens, smaller screens. So the only way we can do that is by targeting it with a class. So make it class equals, say mobile.
[00:01:27] And then we'll go up in our email and clear that out so we can see it from scratch. You can see I have this place holder for responsive styles. So I'm gonna use a media query, which hopefully everybody's familiar with the syntax for a media query. We're gonna say @media.
[00:01:43] Since we're on a screen, we're gonna target only screens. And then we're gonna give it some sort of test for whether or not these styles are being applied. So we're gonna say max-width equals 600 pixels, and then we can open up our braces there. And then we can start adding all of our mobile styles in here.
[00:02:06] So right now we just wanna update that mobile table to be 100% wide instead of 600 pixels to make it fluid for those smaller screens, anything that's below 600 pixels. So we'll say dot mobile to target that table, and then we'll update it so that the width is equal to 100%.
[00:02:24] But you have to add the important rule here, because we're using those inline styles so we have that with actual view. We have those in mind styles. Anything we wanna override and the head of our email we have to do so using important to make that the most important CSS property to be applied.
[00:02:41] So we can save that. Pop back over into browser. And you can see now that this main part of the email is shrinking down to that smaller screen size. But we still don't have these columns stacking as we want them to. This is gonna be way too small for people to read on mobile devices.
[00:03:00] So we want to make those stack in a single column layout. So uses that exact same approach instead of targeting this main mobile container. We're going to target the individual tables that make up those three columns. So if we go down to our column section here, we have this first table, we can add a class there.
[00:03:22] Let's make a block then we can copy and paste that to our other two tables. Because we want those to just be an entire 100% wide block so that they stack. So here we're gonna go back up into our media query and then we can target that block element, or that black class on those tables.
[00:03:45] We can make it so that the display has black, which will help out a little bit. And then the main thing is setting that width again to a 100%. And adding that important rule, so it overrides any of those inline styles. Let's add that here as well. If all goes well, then we can go back over, refresh, and then we have our single column layout.
[00:04:10] So relatively easy to do that, we're just using that class, targeting specific elements that happen to be fixed width. And then making those, that fold with that 100% wide, that fluid table. So when we're below 600 pixels it'll shrink to that size. When we get over 600 pixels, it's gonna revert back to that three column layout like we like to see on desktop.
[00:04:34] I know there's a kind of debate about whether or not you should do design for desktop verse or mobile first. For email, it generally makes sense to do desktop first just because some email clients won't like the mobile version of the email. So if you're designing everything fluid by default, and then trying to override that with fixed with stuff using something like media queries some email clients won't respect those media queries so you'll get that mobile version, desktop clients instead an that's not the intended behavior.
[00:05:04] So well it's a little bit different from what you typically do on a website. We are using that desktop first approach in designing this fixed width desktop version and adjusting it for mobile using those media queries instead. So if we were to open this up and let miss and fingers crossed, everything's working.
[00:05:25] So the Apple mails brilliant as always, if we go over to Outlook, now, we have a little bit of an issue here. Probably with that width sizing on, those tables which we can adjust to using what's there. But then if we go into one of our mobile emails you can see that we have that single column stacking which is awesome, and that's the intended behavior there.
[00:05:51] So this traditional responsive approach is awesome, like I mentioned. Te big problem for a long time, was Gmail, that was stripping out the head of our email campaigns and then those embedded styles. So it would never see those media queries. All those response and styles were wholesale just ripped out of the email and it wouldn't display that for Gmail apps or the Gmail web client if it's on a mobile device.
[00:06:15] But that's been fixed as of a couple years ago. They've been solid and reliable haven't made any updates really bad. Break that for a long period of time, there was one I think last year that broke that behavior for a couple of weeks and there and that's always a risk.
[00:06:30] So there are other techniques that have been developed to account for that.