Responsive Web Design Media Queries

Transcript from the "Media Queries" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben Callahan: So now let's talk about media queries. Once we have our content and our design sort of your responding. As soon as we find a place where those are no longer in harmony, that's when we need to start thinking about larger adjustments to our layout. And we can do that with media queries.

[00:00:25] So here's a few examples of media queries. These top two are what you might find in the head of a document, so literally a link to a stylesheet. And the bottom two are using the media keyword inside of an actual style sheet, so literally right in line with your other styles.

[00:00:44] The first one, I'm not suggesting that you use all these together, these are just four different examples. The first one we're saying we wanna link to a style sheet, and you'd have a rel style and a reference to the actual CSS file. But we only want those styles to apply when the width of the viewport is 30 ems, minimum of 30 ems so 30 ems or greater, okay.

[00:01:10] And then here we're saying screen end, so we're combining a media type with a media feature and if it's screen and the minimum width is 30ems. Down below inside of your CSS file itself, you could put a block of styles, literally nesting styles right inside these curly brackets, right.

[00:01:29] And these styles would only apply if the minimal width is 30ems and the same kind of thing right there with the screen end. Let's break this down a little bit. So media types. Something that you guys are probably familiar with if you've ever done a print stylesheet, nright.

[00:01:45] Media print like the bottom there in the link. And you can link to a print CSS or whatever you would call it. That's media type, been around for a long time. And there's a ton of media types that most people don't really use for much. Let's take a look at a couple of those quickly.

[00:02:02] So all is a media type, which literally just means all. And if you don't specify a type according to the spec, all is the default. [COUGH] Braille, embossed, speech handheld, projection, screen, tv print tty. I mean all these are out there. Go take a look at the spec if you're curious about what all these do, the ones that generally we use the most at this point are screen and print.

[00:02:29] I've got a lot more I could say about media types, and catch me on break if you wanna talk in more detail here.
>> Speaker 2: Do some of those overlap, like handheld and screen?
>> Ben Callahan: No, sometimes when you just look at the list, that would make sense, but according to the spec.

[00:02:45] It's mutually exclusive. You can only be one media type. This has actually created a lot of problems, and we'll talk a little bit about that here. So let's look at the other side of a query, the media feature. This is, when most people talk about media queries, this is kind of what they're talking about.

[00:03:03] You can see the min-width, the max-width, orientation, color, generally their named value pairs or just the name as in the case of color. So a named value pair would be the minimum width name 30 ems is the value. And most of the media features except a min and the max prefix.

[00:03:26] Except in cases where it doesn't really make sense like orientation, min orientation doesn't really make a lot of sense. But you know min-width. You could also just say width. You could say width, 100 pixels or width, whatever, any unit that you want. But that's only gonna apply styles when the viewport is exactly 100 pixels, you know?

[00:03:44] So there's not a lot of use for that. So these are just a few examples. Here's a list of all the others and there's many more coming. Width, height, device-width, device- height, orientation, aspect-ratio. I mean, you get the idea. There's a ton of these things. Okay, again. Go read the spec.

[00:04:02] This is not a complex specification to read. It's actually very simple. There's a ton of really good examples. We really use width pretty much that's what we most people are doing these days. If you look at Apple's home page, they've started experimenting kind of in some cool ways with the height media feature.

[00:04:22] It's really kind of neat, some of the things they're doing. Orientation lets you sort of determine portrait versus landscape. It's more helpful if you're using orientation to use it in combination with device width and device height. Let's talk a little bit about the difference between width and device width.

[00:04:40] So, this laptop that I'm presenting on is a device and it has a resolution that it can support. It also has a browser that has a viewport width which doesn't have to necessarily be the same width as the display of my device. On something like an iOS device however, the browser is pretty much always full screen, right.

[00:05:05] And so there's a little bit of confusion about what these actually mean. But with is viewport width. So if you adjust your browser width, that's gonna change the width attribute or the width feature. If you were on an iPhone versus an iPad, those have different device widths, make sense?

[00:05:24] Now, you should know too that an iPhone is gonna report a device width of 320 pixels whether it's portrait or landscape, okay. Cuz the device width in its standard orientation is 320 pixels. So that is kind of a quick summary. We don't generally use device width and device-height because really what that's doing is sort of tying us down to specific resolutions of hardware.

[00:05:52] And that's kind of the problem that we're trying to get out of. This mentality of fixed width. What you might end up doing is building a bunch of sites that work for very specific devices and then something else comes out and like say the iPhone 5 with a taller screen.

[00:06:07] So now, how do you adjust and you don't wanna leave weird layout issues there. So if we use percentages and we use media queries with a width, instead of a device width, we can actually get stuff that works well in between those gaps as well. All right, so let's take a look at some of these questions on media queries.

[00:06:25] We're gonna talk in more detail here so
>> Speaker 2: I'm guessing the color was just like color versus black and white.
>> Ben Callahan: You can give it, there's several color features. There is a something about black and white, grayscale. There's also a number of colors supported, that kind of thing, so.

[00:06:45] Let's see here. So we're looking here at two different media queries. Again, I'm not suggesting you'd use these together. These would be literally right in your actual stylesheet. So in this case, I'm saying a min width of 600 pixels. Styles for 600 pixels and greater would go inside that block.

[00:07:00] Max width 38 ems and down, styles would go inside that block. And there's, in a really simple way to consider it, there's sort of two ways to approach writing your queries, okay. Large resolution first and small resolution first. Generally what happens is, if you just take a really simple example here.

[00:07:25] If you have got a site already that's designed at say 960 or 1000 pixels and you wanna start to adjust that site for smaller resolutions. You might leave your existing stylesheets with all the large resolution layouts. Styles at the top, and then at the bottom of that same style sheet, apply some max width queries, which indicate 62 ems and lower.

[00:07:47] So as the browser, or as the viewport shrinks, you'll start to trigger these media queries below, okay. And what you would end up doing in this style block is you'd be putting a bunch of styles that are undoing some of the more complex layout that you've done at a higher resolution, okay.

[00:08:04] So we call this subtractive CSS and this is pretty, pretty, pretty common. A lot of people are doing things this way. In fact I think even in Ethan's book, he kind of talks about this, as a starting point. And small resolution first is the exact opposite of that.

[00:08:22] So you would start your CSS file with the smallest layout. You're trying to build for between 0 pixels and whatever you think is a, whoever that layout starts to break down, you know. And so then you would use min-width instead of max-width queries at the bottom of those styles, and apply styles for and these trigger as the view port increases in width.

[00:08:45] One thing that's important to note is that styles here, 28 ems and greater, so all of these styles have been applied. And now these are going to be added on top of those. And 53 ems is greater than 28 ems. Right, so this style block would be applied and this would be applied.

[00:09:01] And the same thing in the large resolution first, those are all gonna apply and just continue to stack on. We call this additive CSS because you're starting with the simple and adding to it. You end up with smaller stylesheets generally if you take this approach because you're not defining a bunch of styles and then having to undo all those definitions.

[00:09:24] This is a little bit more. It's a little harder to get started with this but once you've kind of adjusted your workflow to adapt to this, it makes a lot more sense. We do all of ours with this format now. Let's talk a little bit about pros and cons here.

[00:09:39] So larger as first you get by default, you kind of get easy support for older versions of IE. The nice thing about CSS is if a browser or a user agent doesn't understand what you're trying to do, it's just gonna ignore those styles, okay? I mean if you don't get errors oouts, it doesn't error out, it just ignores it.

[00:09:57] So however, old IE is not gonna support media queries. So IE 8 and older. What that means is, if you start, if we take a look at that small resolution first. If I define all of my simplest layout, or say it's just a linear one column layout at small resolutions, in IE, that doesn't support media queries, it's gonna ignore this and this, it's gonna ignore everything else in the file.

[00:10:23] So desktop resolution browser, older IE RE is gonna get of a single column very simple layout. And some people are okay with that. You know that's a decision you can make, but I'm gonna show you some ways to kind of get around that in a little bit here.

[00:10:40] If you start with your large rez first and undo those styles, older IE or any other user agents that don't support media queries, you're gonna get that more complex layout and then you'll undo it. So you actually serve them what they would maybe be expecting to see the largest resolution layout.

[00:10:54] Small Rez First is more logical. You're kind of building things up as opposed to tearing them down. But again support for older IE. And then small devices loading all the assets. This is a little bit tricky. Most people think that if I put a media query on a link, I'm not gonna actually load those styles or try to render them.

[00:11:17] Actually the truth is, it's gonna make a request. Even if the media doesn't fit and if it could never fit. So you really need to be careful about those things. If you do large rez first, a small device like a phone is gonna load all those styles, make all the requests needed in background images and a URL that's referenced in there.

[00:11:34] It's gonna request the stylesheets, it's gonna do all that work, try to render them and then undo a lot of that stuff, so the processing is greater on smaller devices. [COUGH]
>> Ben Callahan: I get asked a ton like usually what happens as soon as you talk about media queries, somebody says how do I decide where to put a media query?

[00:11:53] What resolution should I put it at? And there have been people who've written articles about, here's a breakdown of using analytics, figuring out what devices are popular, and here's what you should set for your break points. And I don't really subscribe to that philosophy at all. I think that the best way to determine it is to figure out where the layout and the content no longer work together.

[00:12:16] So start small. Get your styles working. Get your layout working. Get your content into the browser. Start to adjust, and as soon as things start to break. So your line length gets too long, right. Then you need to start adding a media query there. And you need to across the system.

[00:12:31] You're not building pages really anymore. You're building a system to display content. So you need to think about it in the context of multiple templates and multiple pages, but you're really looking for places where those break down and then you can add one of these queries to actually improve that layout.

[00:12:49] This is a tool, the Media Query Bookmarklet. If you just Google Media Query Bookmarklet by one of my devs Rob Tarr. And it's incredibly useful. What this will do, and I'll show you quickly here. What it'll do is actually indicate what media queries are being fired, and also indicate what the width and height of your view port is as you change the browser.

[00:13:10] So it's really helpful in finding those places where you might need to add a larger adjustment. So I'm gonna show you that as we jump into this next example but what I'd like to have you guys do is add a media query into the br-44.html file. Let's take a quick look here at that.

[00:13:37]
>> Ben Callahan: So inside that BR 4, again I just was playing around with the image styles and then there's a media query that you should put, I've put a little comment here for where I would like you to put that media query, okay. And if we open up BR 4, and I run that bookmark that I was just telling you about.

[00:13:58] It creates this little guy up here, okay. What this does is it gives you the current viewport width and height in both pixels in AMS and it gives you your cursor position. And you can adjust. Oops. Sorry about that. You can adjust the width and you'll see that that adjusts.

[00:14:17] So what you might do is start small and take this up until you feel like it's appropriate to add a break and you can look and see. It's around 600 pixels or it's around 30 ems. So this tool just helps you in time to determine where a good point, where there is a break in the layout, in the design and layout and you need to add a query.

[00:14:38] So what I like for you guys to do is add a media query in to be our -4 and to try and get that image to adjust a little bit better at certain resolutions, okay. I'll pull up the slides as well. So we can see some of that syntax for you.

[00:15:17]
>> Ben Callahan: So we've kind of defined our smallest resolution styles already. So at the bottom of that CSS file, we're gonna wanna add a min width query which would apply at a certain resolution and higher only. You could choose to use pixels or ems.
>> Speaker 3: So where's the tool to get the pixel at the top?

[00:15:40]
>> Ben Callahan: Media query bookmarklet. You just Google that, you'll find it. It's out on GitHub, just drag it to your toolbar there and,
>> Ben Callahan: He's always updating it too so
>> Ben Callahan: There's a handful of other bookmarklets that do the same kinds of things. This one's nice because you can move that little window from left to right if you need to, if it's covering content.

[00:16:13] Kind of makes things nice. All right, let's jump back in.
>> Ben Callahan: So if we take a look at br-5, I can show you quickly what I did as an example. And then we will play around a little bit with it here. Okay, so I chose. So you can see the styles for the image here I've left, right.

[00:16:44] So the foot right with the max width of 100%. And then what I opted to do was look for a place here where we reached that resolution, in fact the native resolution of the image and it started to stop in the text of floating up to the left because of it, kind of broke the layout.

[00:17:04] And what I chose to do there is set the width of the image to 60% and give it a little bit of a margin on the left. It's still floated right but those styles above are still applied. So we open up a BR-5. Kind of play around with how this works.

[00:17:20] I've also gotten rid of some of the background colors just to clean this up a little bit. But you'll see that works fine here and then once we reach a point where we reach the native resolution of that image. I just quickly add a little margin to the left of the image and let the text kind of set up there next to it.

[00:17:40] So very simple, right. Simple little query, min width 850. We could set this to happen sooner if we wanted, 550.
>> Ben Callahan: And you'll see that it actually just happens much sooner as soon as the view-port width itself is 550 or greater, okay? Pretty simple, questions on this? The rest of the day, we're gonna talk in more detail about all this stuff.